アイキャッチに個別記事へのパーマリンクを貼る方法

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

トップページの記事一覧。今まではアイキャッチを表示させているだけでしたが、アイキャッチにパーマリンクを埋め込もうと思い、設定してみました。さらにアイキャッチ画像ロールオーバーした際に、発光したような感じになるようにもしてみたいと思います。

なぜ、こんなことをするのかと言うと、アイキャッチをクリックした際に記事一覧から個別記事へとリンクしてもらうためです。

今までは画像が表示されているだけで、特にクリックはできなかったんですね。でもアイキャッチをクリックしようと思う人は結構いると思うので、「タイトル」や「続きを読む」と同じような役目をアイキャッチにもしてもらおうと思います。

ちなみにアイキャッチの設定方法はこちらの記事にまとめています。

WordPressの記事一覧にアイキャッチを表示させてみた(+αで個別記事にも)
やっとできました! アイキャッチの表示。 アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。 WordPress にも実装されていて、アイキャッチ、またはサムネ...

さらにトップページの記事一覧を抜粋表示にする方法はこちらにまとめています。

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

上記 2 つのカスタマイズを行った上で、以下の内容へ進んでいくようになります。また、取り扱っているテンプレートはワードプレスにデフォルトで入っている Twenty Eleven になります。

記事へのパーマリンクをコピペで設定する

ワードプレスは主に PHP で動いているわけで、記事タイトルやパーマリンクなんかのタグは全て PHP のタグになっています。PHP についてはまだよく分からないのですが、記事タイトルをクリックすれば個別記事ページに飛ぶのだから、タイトル部分と同じような表記にすればうまくいくだろうことは何となく想像がつきます。

早速目的のタグを探してみましょう。

どのように個別記事へのパーマリンクは指定されているのか?

記事一覧ページに表示されている内容は、【 content.php 】で編集できます。すでに前述の別記事の通りにアイキャッチは表示されるように設定しているので、以下のようになっています(だいたい40行目あたりです)。

また、同じ【 content.php 】内で記事タイトルを吐き出すタグにどのようなリンクタグが貼ってあるかを見てみると、以下のようにタイトルを吐き出すタグをリンクタグが挟んでいました。15 行目の記述です。

つまり記事タイトルを表示させる【 <?php the_title( ) ; ?> 】タグの前後を、【 <a href=””> 〜 </a> 】のリンクタグで挟んでいるわけです。なので、同じようにアイキャッチを出力している PHP タグを <a> タグで挟めばアイキャッチをクリックした際に個別記事ページへ飛ぶようになるはずです。

アイキャッチ画像にパーマリンクを指定する

早速以下のようにしてアイキャッチをリンクタグで挟んでみます。

これでアイキャッチをクリックすると、個別記事のページが表示されるようになります。「タイトル」、「続きを読む」そしてアイキャッチと、記事を全文表示させるための導線が広がりました。これはユーザビリティ的にも必須ですね。早くしておけばよかった・・・。

ちなみに、<span> で指定しているスタイルは、アイキャッチ画像の表示を回り込ませるための指定なので、好みで変更するなり削除するなりしてください。

アイキャッチ画像の上にマウスを持って来た時に発光させる方法

これでアイキャッチからも個別記事へリンクできるのですが、今のままだとアイキャッチにマウスポインタを持って来ても変化がないので、リンクだと気付かれないかもしれません。

通常テキストリンクなどは、マウスポインタを重ねると(いわゆるロールオーバーで)アンダーラインが表示されたり色が変わったりしますよね? また画像の場合でも枠線が現われたり光ったり暗くなったりと、「ココはリンクです!」ということを主張しているのが基本です。

なのでアイキャッチ画像も「リンクなんです!」ということを誇示できるようにしたいと思います。これらは全て CSS での指定になりますので、ここからは CSS のお話・・・。

結論

以下のように【 content.php 】と、【 style.css 】を変更すれば OK です。

content.phpの変更

2 行目の <span> の中に【 class=”linkimg” 】を追記しました。これでサムネイルだけに class を指定したことになります。

style.cssに追記

CSS へは上記をそのまま追記すれば OK です。これでアイキャッチ画像にマウスのポインタを重ねると淡く発光するようになります。発光というか、正確には半透明にしているわけです。これで光っているかのように見えます。

クロスブラウザ対応のテクニックのようなので、どんどん使っても問題なさそうです。

半透明具合を調節したい場合も、CSS の方で変更できます。上記の 9、10、11 行目には 0.6 とか 60 といった数字が記載されていますが、これは透明度を表しています。なので、数字を小さくすると透明度が増してより発光しているように見えますし、数字を大きくすると変化が乏しくなります。

ちなみに上記の書き方は、アイキャッチだけに適用される書き方です。気になった方はぜひ試してみてください。

参考にさせて頂いたブログ

― Design Plus

ありがとうございました!

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

無料メール講座

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

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

無料メール講座

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

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

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

その勘違いとは・・・

コメントをどうぞ

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