ブログカスタマイズの雑談BLOG

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」では、記事ページの下部には「関連記事」のサムネイル画像が並べて表示されます。
「関連記事」なのか「関連する記事」なのか「カテゴリの最新記事」なのか、もはや私にはよくわかりませんが、サムネイル画像が並べられている部分のことです。


現時点のテンプレート



サムネイル画像の下には記事タイトルを表示するように設定されていますが、文字数の制限があるため（画像サイズに合わせて文字数を設定していますから何文字も表示できるわけではありません）、結局見た目では何の記事が並んでいるのかよくわかりません。


サムネイル画像にマウスを乗せた時に記事のタイトルを表示させることによって、記事タイトルが何なのかをアピールしたいと思います。


編集後のイメージ

記事ページの「関連記事」サムネイル画像のリンク部分を編集

記事ページ下部に表示される「関連記事」サムネイルのリンク部分を設定するので、HTMLを編集します。


管理画面の「HTML編集」画面で「<% if:list_related_article -%>」タグを探します。
カスタマイズ後の場合は、おそらく404行目あたりにあります。（この行数はあくまでもカスタマイズ後の行数です。信用せずに、きちんと「<% if:list_related_article -%>」で検索してください）



一連の記述の中に「<a href="<% article.page_url -%>">」というタグがあります。
デフォルトのテンプレートでは115行目、カスタマイズ後の場合は413行目です。
この「<a href="<% article.page_url -%>">」が「a」タグ、つまりリンク部分です。





ちなみに、「a」タグの終了タグ「</a>」は「a」タグの数行下にあり、この間には「img（画像）」や「p（文章）」タグが入っています。つまり、画像と文章を含めた範囲にリンクがかかっていますよ、という意味です。
ここまで私は「サムネイル画像にマウスを乗せた時に記事のタイトルを表示させる」と書いてきましたが、今回の設定では、サムネイル画像だけではなく「p（文章）」部分にマウスを乗せた時も、同じように記事タイトルが表示されることになります。



記事タイトルを表示させるためにはリンク設定をしている「a」タグ部分に「title="<% article.subject -%>"」というコードを追加します。
必ず、追加するコードの先頭部分「title」の前に「半角スペース」を入れてから追加してください。そして最後に「保存」します。


＜元コード＞


＜編集後＞

コード編集後の実際のページ

次の記事の紹介

次の記事では、ページ案内リンク「前ページ・次ページ案内リンク」にマウスを乗せた時に記事タイトルを表示させる方法を説明します。