ぐだぐだどっとこむ

追う手を防げば搦めて手が回る

どうも俺です。
トマトジュースはしょっぱい奴が好きなかおすです。

ちょっと仕事で必要になりまして、
同じページ内に複数のFacebookの「いいね!」ボタンとTwitterの「ツイート」ボタンを表示する必要が出来きました。
(Wordpressであれば、アーカイブのページで各々の記事に対応するボタンが表示されるようなイメージです。)

はじめ「アンカーリンクで管理すればいいさ」なんて高を括っていたのですが、これが今回の主な敗因

実際Facebookは記述の書き方を変えるだけで実現できました。
src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgdagda.com/example.html&…
ボタンに含まれているアドレスの指定部分を
src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgdagda.com/example.html&%23anchor…
とかに変えてあげるだけ。
%23をアンカーとして認識してくれるように出来ているみたいです。

が、Twitterだとこれが上手くいかない。
「ツイート」ボタンの横の数が全て一緒になってしまうんですね。
どうやらアンカーリンクは機能するけれども、つぶやかれた数は~.htmlまでの数を取得して管理しているようです。

俺はそれで充分だと思ったんだけど、クライアントが嫌だっていうからさ。


クライアントが“嫌だ”って言うからさぁ。

特に今回は『Movable Typeで管理しているけども、個別ページの無いサイト』って特殊な条件なんで、ジャンプするURLはどうしても同じページにせざるを得ない。
結局苦肉の策として考え付いたのが『存在しないページを投稿し、そのアドレスにアクセスされたらアンカーにジャンプさせる』方法。
全然スマートな方法じゃないんのだけれど、今回はhtaccessのRewrightEngineを使う事にしました。
RewriteEngine On
RewriteRule ^(.*)xxx(.*)$ /$1#$2 [R=301,L,NE]
htacessに上記のような文章を書き込む事で
http://gdagda.com/example.htmlxxxanchorという謎の拡張子を持つページをTwitterへは投稿。
でも実際にこの架空のアドレスを踏むとhttp://gdagda.com/example.html#anchorへアドレスを書き換えて解釈してくれる。
と、いう動作をさせています。

もしかして
http://gdagda.com/examplexxxanchor.html 》 http://gdagda.com/example.html#anchor
に書き換えの方が良かったかな…。
2012.04.04

短を捨てて長を取る。

どうも俺です。
短くは無いと思いますが決して太いという事も無いな、と思っているかおすです。

先日適用させたリセットCSSに自分なりの改変を加えました。
…だって俺程度にはグローバルな汎用性って無くても良いと思うんだよね。
つう事で以下が俺レベルのソース。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
body {
 line-height: 1.5em;
 font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS PGothic, sans-serif;
 font-size: 13px;
 *font-size: small;
 *font: x-small;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
 display:block;
}
nav ul {
 list-style:none;
}
blockquote, q {
 quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:'';
 content:none;
}
a {
 margin:0;
 padding:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
del {
 text-decoration: line-through;
}
abbr[title], dfn[title] {
 border-bottom:1px dotted;
 cursor:help;
}
table {
 border-collapse:collapse;
 border-spacing:0;
 font-size: inherit;
 font-size: 100%;
}
input, select {
 vertical-align:middle;
}

/*
font-size
10px:77%
11px:85%
12px:93%
13:100%
14px:108%
15px:116%
16px:123.1%
17px:131%
18px:138.5%
19px:146.5%
20px:153.9%
21px:161.6%
22px:167%
23px:174%
24px:182%
25px:189%
26px:197%
*/
とりあえず使いそうなタグというか、理解できるタグだけ最定義してる感じです。
あとYahoo! UI Libraryを参考にさせていただいたfont-sizeの調整も追加しています。

パクりまくりだな、俺。
2012.02.29

捲土重来。

どうも俺です。
タバコは吸いませんがミンティアは一日一箱ペースのかおすです。

文字サイズなんかのCSSを変更してみました。
いわゆるリセットCSSって奴ですね。
meyerweb.com様から丸パクリさせていただいた物を適用しています。
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
参照元のページはこちら。

うわぁ、メリハリ無いと文字って読みづらいんだなぁ。
2012.02.23

裸一貫。

どうも俺です。
たまにご飯を食べただけで右腕が筋肉痛を起こす事があるかおすです。

実は現在のぐだぐだどっとこむはhtml5に準拠しています(ドヤ
ま、実情は違反する程の要素が無いってだけなんですがね。
<h1><?php bloginfo(‘title’); ?></h1>

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h3><?php the_title(); ?></h3>
<div>
<?php the_content(); ?>
</div>
<div><?php the_time(); ?></div>
<?php endwhile; endif; ?>
bodyん中こんだけ。 そりゃ、これだけシンプルならそうそう基準違反はしないよね。
ここから何らかの要素やらcssやらを追加していこうと思います。
…でも個人サイトだからIEに煩わされる事無くCSS3ヒャッホイできるなぁ。
ヒャホホーイ
2012.02.20

人間万事塞翁が馬 。

どうも俺です。
みなさんチョコレートありがとうございました、かおすです。

データベースがマルっと綺麗になってしまったのでテーマやWordPressの構成も作り直そうと決意しました。
行こう、何事も前向きに。
まず気になる所は 投稿時の行間が気になる!


今「そこか?」っつった?

はい、そこです。

WordPressの投稿ってデフォルトだとpタグで括られるんですよね。
html的には段落を付けるわけだし正しい文法に則ってるんだとは思うんですが、

日本語の文法すら危うい俺にそんな事言われても…。

って事で見つけたのがこのプラグイン。
Modify paragraph formattingです。
PS Disable Auto Formattingは、WordPressの段落自動整形(wpautop)を停止させると共に、ビジュアルエディタが生成するhtmlソースを改変。HTMLモードでの編集時に、意図しないbrタグ、pタグの除去、pタグの付加が発生しないようにすると共に、ビジュアルモード編集時における意図した通りの自然な改行・段落の生成を実現します。 eWebさま

投稿は普段からHTMLモードがデフォの俺にはとても好みの改行が実現できます。
ありがとうございます。
2012.02.16

雌牛に腹を突かれる。

どうも俺です。
旧作のラブプラスは元カノ感覚でモトプラスでいいんじゃないかな、なんて考えてるかおすです。

さて…今日もやっちまいましたよ。
何をやっちまったのか、って?

うん。
じゃあね、逆になんでこの記事が一番最初にあると思う?


…消しちゃったからだよ。



データベースを間違って消しちゃったの ヾ(。`Д´。)ノ

こんな時は「あんたバカぁ?」って感じで美人に罵られたい。
いえ、美人にならいつだって罵られたいです。

なんでバックアップ取って無かったし、俺。
お前何屋だよ?web屋だよ。アヒャヒャ

だって、ちょっとアレなデータをアレでアレしたらDBぶっ壊れちゃうんだもんなぁ。
チッ軟弱野郎め。
正直お客様のデータじゃ無いからって油断してしました。

んでも折角だからWordPressの最新版入れとこ。
2012.02.15