抜粋記事の「続きを読む→」をデザインする方法-WordPress Twenty Eleven篇-

  • このエントリーをはてなブックマークに追加
  • 0
WordPressカスタマイズ

Twenty Eleven でトップページやアーカイブページの記事一覧を抜粋表示にした場合、「続きを読む」の表示を変更したいと思ったことはありませんか?

デフォルトでは「続きを読む→」という感じで、テキストと→(矢印)だけです。目立ちませんし、味気ない。まぁこのブログはその味気ないままなんですが、そこは突っ込まないことにして、今回のコンテンツはこの「続きを読む→」のデザインを変更する方法に関してです。

記事の中にMoreタグを挿入した場合

More タグというのがあります。このタグを挿入すると、そのタグより前の文章だけが抜粋され、それ以降は「続きを読む」になります。記事の一覧ページやアーカイブページなどでは抜粋表示となり、個別投稿ページで全文表示となります。

ビジュアルエディタの場合)

ビジュアルエディタでのMoreタグ

テキストエディタの場合)

テキストエディタでのMoreタグ
この場合、「続きを読む→」に class が割り振られます。自動的に。それがこちら。

.more-link

ですので、この class に文字色や背景・画像などを指定すれば「続きを読む→」を自由にデザインできます。具体的なスタイルシートの書き方についてはのちほど。

Moreタグを使わず、常時抜粋表示になるようにテンプレートをカスタマイズしている場合

WordPress には、抜粋表示用のタグが用意されています。それがこちら。

このタグを使えば、記事は抜粋表示になります。

このタグを使った、記事一覧の抜粋表示の方法についてはこちら。

トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-
Twenty Eleven のデフォルトって、トップページに記事がフルで表示されますよね? トップページの記事表示を 10 件とかに設定してて、さらに 1 記事の分量も多いとなればトップページの縦はものすごい長さになります。 さらにカテゴリーやタグのアーカイブを表示させたりした時も関連記事がフルに表示されるので、ちょっと必要な...

このカスタマイズを行えば、いちいち記事ごとに More タグを指定しなくても、一定の文字数で自動的に抜粋表示してくれます。しかしこの場合、先ほどのような特定の class が割り振られません。【 more-link 】という class を指定しても、何も変化しないのです。

ではどのように指定すればいいのでしょうか?

「続きを読む」にclassを追加する方法

この編集は親テーマの functions.php を編集する必要がありそうです。該当箇所は以下の部分。

<a> タグの中に class を指定すれば OK です。

他にも、<a> タグの外を、<span> や <div> で囲っても OK です。

<span> で囲むとインライン扱いなので、抜粋記事に続くように「続きを読む→」が表示されます。

インラインの「続きを読む」

<div> で囲むとブロック要素になるため、抜粋記事と「続きを読む→」が改行されて別段落として表示されます。

ブロックの「続きを読む」

functions.phpを編集する場合の注意点

本来、テーマのカスタマイズは、子テーマをつくって編集するのが望ましいのですが、functions.php の場合はそうはいかない場合があります。親テーマと同じ内容を子テーマに記載すると、エラーが発生してサイトが表示されなくなるのです。

そのため、親テーマで既に記述されている内容を編集する場合は、親テーマの functions.php を直接編集する必要があります。そうなると、テーマのアップデートをした際に編集内容が元に戻ってしまいますので注意してください。

「続きを読む→」の編集テクニック

以上の方法で、「続きを読む→」をデザインするための下準備は整いました。あとはスタイルシートで編集をするだけです。

「続きを読む→」をスタイルシートでデザインする方法

指定した class に背景や文字色、余白などを指定していけば OK です。以下にサンプルを載せておきます。(functions.php の続きを読むの部分を <div> タグで囲った場合)

スタイルシートの記述例)

実際の表示)

「続きを読む」をCSSで編集

「続きを読む→」の文言や矢印を変更する方法

「続きを読む」は「続きを読む」と表示されています。またその後の「→」も矢印のままです。これを好きな言葉に変更してみましょう。この変更は functoins.php を直接編集します。「Continue reading」と書かれている部分を好きな言葉に変更できます。

矢印に関しては、HTML の特殊文字用コード(&rarr;)で記述されていますので、他のコードにしてもいいですし、消し去っても OK。その他の記号をそのまま記述して大丈夫です。

「続きを読む→」を画像にする方法

テキストではなく画像で表示させたい場合も、functions.php を直接編集します。テキストに該当する部分を消して、画像指定の <img> タグを使えば OK です。画像は絶対パスで指定しましょう。(Moreタグでの抜粋表示の場合は無効です。)

functions.phpの記述)

スタイルシートの記述例)

実際の表示)

「続きを読む」を画像で表示

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメント

  1. 広瀬耕二 より:

    ブログを書いているのですが、デフォルトの状態だと、全文が出てしまうので、どうしたものかと悩んでいました。 この記事を参考に、概要のみ表示させることができました。 ありがとうございます。

コメントをどうぞ

メールアドレスが公開されることはありません。