livedoor Blogにログインしてみたら、Twitterに簡単につぶやけるボタンを設置できる独自タグが実装されたとあったので、とりあえず試してみることにする。
手っ取り早く、トップページをカスタマイズするためにFirefoxのプラグイン（Firebug）で構造を解析する。設置したい場所のマークアップを調べてテンプレートのどこの部分をカスタマイズすれば良いか、あたりをつけるために。
「article-footer」というクラスのDIV部分だと分かった。適当にクラスをマークアップして、<$PostToTwitter$>と記してやればボタンが追加されるみたいだ。liタグで囲んでやればいいんだろうな。多分。というわけで下記のようにしてみた。
<div class="article-footer">
<ul class="article-post">
<li class="article-author vcard author"><a href="<$ArticleAuthorProfileUrl$>" class="url"><$ArticleAuthorIcon$><span class="nickname fn"><$ArticleAuthor$></span></a></li>
<IfArticleAllowComment><li class="article-comment-count"><a href="<$ArticlePermalink$>#comments" title="コメント一覧へ">コメント( <$ArticleCommentCount$> )</a></li></IfArticleAllowComment><IfArticleAllowPing><li class="article-trackback-count"><a href="<$ArticlePermalink$>#trackbacks" title="トラックバック一覧へ">トラックバック( <$ArticlePingCount$> )</a></li></IfArticleAllowPing>
<li class="article-tool-box"><$ArticleToolBox$></li><li class="article-twitter"><$PostToTwitter$></li>
</ul>
<IfFirstArticle><$Advertise$></IfFirstArticle>
</div><!-- articleFooter End -->Code language: HTML, XML (xml)アッサリ成功した。なるほどね簡単だ。
という訳でそのソースをここに記すわけだが、preタグだけではHTMLタグが機能してしまいそのまま表示出来ないので、更にxmpタグで囲ってHTML記述を無効にしてやる。タグの順番的には
<pre><xmp>html sourcecode</xmp></pre>Code language: HTML, XML (xml)こんな感じで大丈夫みたい。
これだけだと3カラムでは狭くて表示しきれないから、pre枠にスクロールバーを表示させる様にCSSのカスタマイズもしとく。CSSのpreにオーバーフローした時にスクロールを表示させる為の一行を追記。
pre {
background-color:#FFFBDF;
border:1px solid #CCCCCC;
line-height:110%;
margin-right:20px;
padding:10px;
<span class="marker-under">overflow:scroll;</span>
}Code language: HTML, XML (xml)ややこしい話だけど上の破線で囲まれている部分はpreタグで囲んであるからCSSが適用されて破線になっているのです。めんどくさいけどXHTMLでXHTMLソースを記述する為には欠かせない知識。
最初からスクロールバーの表示くらい設定しとけばいいのにね。
コメント