トップページの記事一覧。今まではアイキャッチを表示させているだけでしたが、アイキャッチにパーマリンクを埋め込もうと思い、設定してみました。さらにアイキャッチ画像ロールオーバーした際に、発光したような感じになるようにもしてみたいと思います。
なぜ、こんなことをするのかと言うと、アイキャッチをクリックした際に記事一覧から個別記事へとリンクしてもらうためです。
今までは画像が表示されているだけで、特にクリックはできなかったんですね。でもアイキャッチをクリックしようと思う人は結構いると思うので、「タイトル」や「続きを読む」と同じような役目をアイキャッチにもしてもらおうと思います。
ちなみにアイキャッチの設定方法はこちらの記事にまとめています。
さらにトップページの記事一覧を抜粋表示にする方法はこちらにまとめています。
上記 2 つのカスタマイズを行った上で、以下の内容へ進んでいくようになります。また、取り扱っているテンプレートはワードプレスにデフォルトで入っている Twenty Eleven になります。
記事へのパーマリンクをコピペで設定する
ワードプレスは主に PHP で動いているわけで、記事タイトルやパーマリンクなんかのタグは全て PHP のタグになっています。PHP についてはまだよく分からないのですが、記事タイトルをクリックすれば個別記事ページに飛ぶのだから、タイトル部分と同じような表記にすればうまくいくだろうことは何となく想像がつきます。
早速目的のタグを探してみましょう。
どのように個別記事へのパーマリンクは指定されているのか？
記事一覧ページに表示されている内容は、【 content.php 】で編集できます。すでに前述の別記事の通りにアイキャッチは表示されるように設定しているので、以下のようになっています（だいたい40行目あたりです）。
<div class="entry-content">
<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span> /* サムネイル形式でのアイキャッチ表示 */
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
また、同じ【 content.php 】内で記事タイトルを吐き出すタグにどのようなリンクタグが貼ってあるかを見てみると、以下のようにタイトルを吐き出すタグをリンクタグが挟んでいました。15 行目の記述です。
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
つまり記事タイトルを表示させる【 <?php the_title( ) ; ?> 】タグの前後を、【 <a href=””> 〜 </a> 】のリンクタグで挟んでいるわけです。なので、同じようにアイキャッチを出力している PHP タグを <a> タグで挟めばアイキャッチをクリックした際に個別記事ページへ飛ぶようになるはずです。
アイキャッチ画像にパーマリンクを指定する
早速以下のようにしてアイキャッチをリンクタグで挟んでみます。
<div class="entry-content">
<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span></a>
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
これでアイキャッチをクリックすると、個別記事のページが表示されるようになります。「タイトル」、「続きを読む」そしてアイキャッチと、記事を全文表示させるための導線が広がりました。これはユーザビリティ的にも必須ですね。早くしておけばよかった・・・。
ちなみに、<span> で指定しているスタイルは、アイキャッチ画像の表示を回り込ませるための指定なので、好みで変更するなり削除するなりしてください。
アイキャッチ画像の上にマウスを持って来た時に発光させる方法
これでアイキャッチからも個別記事へリンクできるのですが、今のままだとアイキャッチにマウスポインタを持って来ても変化がないので、リンクだと気付かれないかもしれません。
通常テキストリンクなどは、マウスポインタを重ねると（いわゆるロールオーバーで）アンダーラインが表示されたり色が変わったりしますよね？ また画像の場合でも枠線が現われたり光ったり暗くなったりと、「ココはリンクです！」ということを主張しているのが基本です。
なのでアイキャッチ画像も「リンクなんです！」ということを誇示できるようにしたいと思います。これらは全て CSS での指定になりますので、ここからは CSS のお話・・・。
結論
以下のように【 content.php 】と、【 style.css 】を変更すれば OK です。
content.phpの変更
<div class="entry-content">
<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;" class="linkimg" ><?php the_post_thumbnail('thumbnail'); ?></span></a>
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
2 行目の <span> の中に【 class=”linkimg” 】を追記しました。これでサムネイルだけに class を指定したことになります。
style.cssに追記
/* =リンクの発光
----------------------------------------------- */
/* サムネイル */
a .linkimg {
background:none!important;
}
.entry-content a:hover .linkimg {
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}
CSS へは上記をそのまま追記すれば OK です。これでアイキャッチ画像にマウスのポインタを重ねると淡く発光するようになります。発光というか、正確には半透明にしているわけです。これで光っているかのように見えます。
クロスブラウザ対応のテクニックのようなので、どんどん使っても問題なさそうです。
半透明具合を調節したい場合も、CSS の方で変更できます。上記の 9、10、11 行目には 0.6 とか 60 といった数字が記載されていますが、これは透明度を表しています。なので、数字を小さくすると透明度が増してより発光しているように見えますし、数字を大きくすると変化が乏しくなります。
ちなみに上記の書き方は、アイキャッチだけに適用される書き方です。気になった方はぜひ試してみてください。
参考にさせて頂いたブログ
― Design Plus
ありがとうございました！
やっとできました！ アイキャッチの表示。
まず、最新の WordPress（Ver.3.3.1以降）を使用しているのであれば、記事投稿画面の右下に【 アイキャッチ画像 】という部分があると思います。
