今日は何かと問題になる「続きを読む」についてです。「more」っていうやつですね。

これは、皆さんもご存知の、エディタで「more」を挿入すれば自動で入るタグなんですが、Twenty Tenではどのように出力されるようになっているのでしょうか。

Twenty Tenでの「続きを読む」

<a href="http://example.com/#more-2" class="more-link">続きを読む 
  <span class="meta-nav">&rarr;</span></a></code></pre>

「more-link」というクラス名のついた「a」タグの中に「続きを読む」という言葉と、「meta-nav」というクラス名のついた矢印が自動的に出力されます。

「続きを読む」をクリックした先の個別ページには「続きを読む」のあった場所に

<span id="more-2"></span>

という空のspanタグが挿入されます。この空のタグにつけられたidがあるので、「続きを読む」をクリックしたときに、文章の先頭ではなく、その続きの場所を表示するようになっている訳です。

「続きを読む」の見た目を変えたい

いろいろ変えたいとことろのある「続きを読む」ですが、とりあえず、コードは変えずに見た目だけを変えてみたいと思います。

a.more-link{
    text-indent: -9999px;
    display: block;
    background-image:  url(img/read-more.gif);
    background-position: left top;
    background-repeat: no-repeat;
    width: 144px;
    height: 28px;  
}

これはこのブログの「続きを読む」のCSSです。画像置換を使っています。「text-indent」でテキストを外に飛ばしてしまい、背景画像として、画像を表示するやり方ですね。この方法で、ロゴも画像に置き換えられますよ。

画像置換ってどうなのよ

わたしはあまり普段は画像置換は使わない主義なんですが、WordPressのように、htmlを出す仕組みと、CSSが完全に分離していて、コードはあまりいじりたく無いけど、見た目を変えたいという場合には、やはり便利な方法なのかな、と思います。

実際、このブログのテーマも、どうしても譲れない部分以外はコードをいじらない、という目標で作ってみたものなので、画像置換をだいぶ使っています。

でもやっぱりあんまり好きではないので、大勢に影響のなさそうな所で使ってるつもり。矛盾してるなぁ。

moreの＃をはずす

これで終わるのは中途半端な感じなので、CSSではなく、テーマのfunctions.phpをいじることになりますが、moreのカスタマイズをひとつご紹介します。

あちらこちらで紹介されているかとも思いますが、「続きを読む」をクリックした先を、記事の先頭にして、リンク先のアドレスの最後に入る「/#more-4」の様な「/#id」をはずして、パーマリンクのみにする方法です。

function remove_more_jump_link($link) { 
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

これをテーマファイルの、functions.phpに入れます。子テーマを作る、で書いた通り、Tewenty Ten本体のfunctions.phpに書き入れてしまうと、バージョンアップのときに上書きされてしまいます。子テーマとして作っているときは必ず、子テーマのフォルダに新しくfunctions.phpを作ってそこに入れていくようにして下さい。