ReadMoreDesign

プラグイン最高!、@jinnaitakumiです!

今回のポイントをまとめると

  • 続きを読むのデザインを変更したい
  • プラグインを使うとカンタンにカスタマイズできる
  • ボタンにすれば、見やすくクリックしやすい

の3つです!

プラグインを使ってデザインを変更する

プラグインをWordPressにインストールする

今回、利用するのは「Custom More Link Complete」というプラグインです。

WordPressの管理ページの「プラグイン」から「新規追加」で「Custom More Link Complete」を検索すれば出てきますので、そこからインストールするのがカンタンです。

▼「Custom More Link Complete」の設定画面
1

▼「続きを読む」リンクを自由にカスタマイズできる
2

デザインをカスタマイズする

まず、リンクをシンプルにする

まずは、デフォルトで入っているよくわからない、余計なものは削除して、シンプルなリンクにしましょう。
(SEO対策とかあるのかもしれないですが、分からないので消します。後から直せるので安心してください。)

▼まずはこんな具合でいいでしょう。
<a href="%permalink%">
続きを読む
</a>

(見やすくするために改行しています。実際は1行で書いてください。)

これだとシンプルな「続きを読む」になります。

aタグの中に、「target=”_blank”」を入れれば、新規タブでページを開くようになります。

▼こんな感じで「 target=”_blank”」を入れる
<a href="%permalink%" target="_blank">
続きを読む
</a>

(見やすくするために改行しています。)

divで括る

CSSでいじりたいので、divでくくっておきます。
(CSSでいじらなくてもいい人は、くくらなくていいです。後からも修正できるので、安心してください。)

▼divでくくります。class名は自由につけていいですが、分かりやすいものがいいでしょう。
<div class="readMoreStyle">
<a href="%permalink%">
続きを読む
</a>
</div>

(見やすくするために改行しています)

これでCSSで自由にデザインを変えられるようになりました。
枠で囲ったり、グラデーションとかでボタンみたいにすることもできますし、まあ、知識さえあればかなり好きなことができます。

画像をボタンとして使う

ただ、CSSでボタンを作るのが面倒くさい場合は、画像を使うのがいちばん手っ取り早いです。
(プラグインだから、後でまとめて修正できるのも強み)

画像をリンクとして使うのは、カンタンです。

<img src="画像のURL">

で画像を表示できるので、これをリンクのテキスト部分と置き換えればいいだけですね。

▼テキストの「続きを読む」を画像に置き換えます。
<div class="readMoreStyle">
<a href="%permalink%">
<img src="画像のURL">
</a>
</div>

(見やすくするために改行しています)

「画像のURL」の部分に、実際にボタンとして使う画像のURLを入れます。

ボタンとなる画像は、ボタンメーカーみたいなWebサイトで作ってみてもいいですし、PhotoshopやPixelmatorみたいなソフトで作ってもいいでしょう。

(私は今回、delaymaniaの大ちゃん(@deleymania)に作って頂きました。本当にありがとうございます。)

画像のURLをゲットする

ボタンにする画像を用意したら、まずはそれをWordPressにアップロードします。
「メディア」から「新規追加」でドラッグ&ドロップすれば、カンタンにアップロード出来ます。

アップロードしたら、画像のURLをコピーしましょう。

▼メディアのライブラリ内にあるボタンとなる画像をクリックする
3

▼URLをコピーする
4

あとは先程のコードにURLを流せばいいわけです。

▼「画像のURL」にコピーしたURLを流し込む
<div class="readMoreStyle">
<a href="%permalink%">
<img src="画像のURL">
</a>
</div>

(見やすくするために改行しています)

あとはwidthなどで画像の幅などを指定しておきましょう。
(あと理由はよく分かりませんが、altとかもあったほうがいいらしいです。altはその画像が何なのかを説明したテキストです。言語は自由。)

▼ということでだいたいこんな感じになります。
<div class="readMoreStyle">
<a href="%permalink%">
<img src="画像のURL" alt="続きを読む" width="200">
</a>
</div>

(見やすくするために改行しています)

iPhoneの画面でピッタリの幅にしたい場合は、画像のwidthを300で指定すればOKです。

ちょっと長くなっちゃいましたが、複雑なことは何ひとつしていませんよ〜。

CSSでデザインをいじる

CSSはお好みで、カスタマイズしてください。

WordPress管理ページの「外観」から「テーマ編集」の「スタイルシート」でCSSは編集できます。
(「テーマ編集」を開くと、デフォルトで開かれる「スタイルシート」で編集できます。)

ちなみに私は、カーソルをボタンの上に乗せると、じわっと白味がかるようにしました。

▼実際のコードです。コピペしてもらって構いません。
/* ------------------ 続きを読むボタンのスタイル ------------------  */
.readMoreStyle{
    clear:both;
    text-align:left;
    margin-top:0px;
    margin-bottom:20px;
    margin-left: 0px;
    margin-right: 0px;

}
.readMoreStyle a{
        transition: 0.6s ease-out;
-webkit-transition: 0.6s ease-out; /* chrome, safari */
   -moz-transition: 0.6s ease-out; /* firefox */
    -ms-transition: 0.6s ease-out; /* ie */
     -o-transition: 0.6s ease-out; /* opera */
    text-decoration: none;
}
.readMoreStyle a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    text-decoration: none;
}
▼イメージ図

こんな感じになる

そして実際に、こんな感じになりました。

スクリーンショット 2013 03 06 5 24 45

iPhoneから見てみると

IMG 4638

クリックしやすくなって、いいんではないでしょうか。

まとめ

ということで、今回のポイントをまとめると

  • 続きを読むのデザインを変更したい
  • プラグインを使うとカンタンにカスタマイズできる
  • ボタンにすれば、見やすくクリックしやすい

の3つです!

本当にプラグインって便利ですね。

はじめはテーマをさわってデザインを変えようと思っていましたが、私が現在使ってる「iTheme2」というテーマは、けっこう複雑で、どこを触ればいいのかよく分からない。
(loop.phpにそれらしきものは見つけたけれど)

そんなときにプラグインは本当に天使のような存在です。

▼最初はdelaymaniaのこの記事を参考にカスタマイズしようと思っていたけれど、挫折しました(笑)