スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/39-0190cbd2

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

サムネイルに記事ページへのリンクを付ける テンプレート「basic_white」のカスタマイズ その3

このテンプレートの場合、記事本文に画像を入れると「グリッド表示」や「リスト表示」など一覧ページでその画像がサムネイルとして自動的に表示されますが、初期状態だとそのサムネイルにリンクが付いて無いので、今回はサムネイルをクリックすると、それぞれの記事ページへリンクするようにカスタマイズしてみました。
また、リンク部分にマウスを乗せると「このエントリーの固定リンク」と表示されるので、その部分も記事タイトルが表示されるように変更

↓テンプレート「basic_white」のカスタマイズ用に作ったブログです。(そのまんまのタイトル...w)
FC2ブログのテンプレート「basic_white」をカスタマイズ



【「basic_white」のカスタマイズ】


  1. 1.サムネイルに記事ページへのリンクを付ける方法
  2. 2.「このエントリーの固定リンク」部分に記事タイトルを表示する



1.サムネイルに記事ページへのリンクを付ける方法


変更箇所は「テンプレートの設定」の「basic_white のHTML編集」内に記述されてる以下の部分です。 ※「Ctrl」+「F」で「 <%topentry_image> 」を検索すればOKです

<!--body_img-->
<div class="entry_image"><%topentry_image></div>
<div class="entry_description"><%topentry_body></div>
<!--/body_img-->
<!--body_img_none-->
<div class="entry_image">
<img src="http://blog-imgs-66.fc2.com/b/a/s/basicwhite/no-image200.gif" 
alt="NO IMAGE" /></div>
<div class="entry_description"><%topentry_body></div>
<!--/body_img_none-->

※前回のカスタマイズ後のHTMLなので初期状態とは異なり、記事本文の表示及び、画像が無い場合は7行目の代替画像が表示されるようになってます。


<!--body_img-->
<div class="entry_image">
<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_image></a>
</div>
<div class="entry_description"><%topentry_body></div>
<!--/body_img-->
<!--body_img_none-->
<div class="entry_image">
<a href="<%topentry_link>" title="<%topentry_title>">
<img src="http://blog-imgs-66.fc2.com/b/a/s/basicwhite/no-image200.gif" 
alt="NO IMAGE" /></a></div>
<div class="entry_description"><%topentry_body></div>
<!--/body_img_none-->

※3行目の「<%topentry_image>」の部分と、10行目の代替画像「<img ~省略~ />」の部分を
<a href="<%topentry_link>" title="<%topentry_title>">」と「</a>」で挟んでいます。


以上の編集で、サムネイルをクリックすると記事ページへリンクするようになり、サムネイルにマウスを乗せると記事タイトルが表示されるようになります。
また、サムネイルにマウスを乗せた時に画像を少し透明化して分かり易くする場合は、スタイルシートに下記の記述を追加します。(追加する場所はスタイルシートの末尾でもOKです)

#main_contents .entry_body .entry_image a:hover img { opacity: 0.7; }

※数字を下げるとより透明化します。( 0.0 ~ 1.0 の範囲で指定する 1.0が初期値で不透明の状態)




2.「このエントリーの固定リンク」部分に記事タイトルを表示する


初期状態だと「記事タイトル」や「続きを読む」にマウスを乗せた時に「このエントリーの固定リンク」と表示されるので、その部分を編集しリンク先の「記事タイトル」が表示されるようにしました。

変更箇所は「テンプレートの設定」の「basic_white のHTML編集」内に記述されてる以下の部分です。
※「Ctrl」+「F」で「 <%template_abs_link> 」を検索すればOKです(2箇所あります)

<a href="<%topentry_link>" title="<%template_abs_link>">
<a href="<%topentry_link>" title="<%topentry_title>">

<a href="<%topentry_link>" title="「<%topentry_title>」の全文を表示">

※「記事タイトル」と「続きを読む」でそれぞれちょっとだけ表示される内容を変えてみました。

ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-16 | 「basic_white」 | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/39-0190cbd2

「サムネイルに記事ページへのリンクを付ける」へのトラックバック

- TrackBack -


「サムネイルに記事ページへのリンクを付ける」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。