Home > FC2ブログ > basic_white > basic_whiteテンプレート 画像サムネイルクリックで個別記事に移動する方法

basic_whiteテンプレート 画像サムネイルクリックで個別記事に移動する方法

 basic_whiteテンプレートのサムネイル画像にリンクを指定する方法です。

 グリッド表示の際は記事冒頭文を非表示にしてサムネイル画像のみを表示することもできます。画像の横幅や高さは適当に調整してください。

HTML

 場所はCtrl+Fキーで『topentry_image』を検索。「<%topentry_image>」を以下のようにa要素で挟みます。

<div class="entry_image"><a href="<%topentry_link>"><%topentry_image></a></div>

 そうするとサムネイルがリンク化され、クリックすると個別記事にジャンプできます。

 サムネイルにカーソルをあわせたときに画像を薄く透過する時は以下のコードをスタイルシートに追加してください。

.entry_image a:hover img {opacity: 0.6;}

グリッド表示の場合のみ続きを読むのリンクを非表示にする

 続きを読むを非表示にして記事タイトルとサムネイルのみのリンクにする方法です。

 スタイルシートに以下のコードを追加してください。

 もしスタイルが反映されない場合は「 !important」を追加してください。

.grid_content .entry_more {display: none !important;}

記事ごとの高さを調整する

 続きを読むを非表示にした場合は高さを減らすと見栄えが整います。

スタイルシート

 場所はCtrl+Fキーで『#main_contents .grid_content {』を検索。「310px」の数値を減らすと高さが狭まります。

#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  width: 50%;
  height: 310px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

height: 280px; /* グリッド表示の時の記事の高さ */

※このブログで紹介している他のカスタマイズで高さを変更している場合はそちらの該当部分の高さの値を変更してください。

サムネイルの横幅と高さを調整する

スタイルシート

 場所はCtrl+Fキーで『.grid_content .entry_body .entry_image img』を検索。以下の3つの数値を増減させてください。widthが横幅、heightが高さです。

#main_contents .grid_content .entry_body .entry_image img {
  max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
  max-height: 210px;
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin-left: 178px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

テンプレートを利用し始めた時期によっては「#main_contents .grid_content .entry_body .entry_description,」の部分がない場合がありますが、変更場所は同じです。

 「.entry_discription」のmargin-leftの数値は「サムネイルの幅の上限」で指定した幅+15px程度の数値を指定します。(例)170+15=185

#main_contents .grid_content .entry_body .entry_image img {
  max-width: 170px; /* グリッド表示の時のサムネイルの幅の上限 */
  max-height: 220px;
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin-left: 185px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

※このブログで紹介している他のカスタマイズで画像の高さを変更している場合はそちらの該当部分の高さの値を変更してください。

グリッド表示の際は記事冒頭文を非表示にする

スタイルシート

 スタイルシートに以下のコードを追加してください。

 以上で説明文は非表示になりますが、デフォルトのままだと画像が小さすぎるので、上にあるサムネイルの横幅と高さを調整する方法で画像サイズを調整してください。

 高さを大きくしすぎるとはみ出るので、あまり大きくしすぎないようにします。どうしても大きくしたい時は記事ごとの高さを調整してください。

 サムネイル画像を中央に寄せる場合は以下のコードをスタイルシートに追加してください。


※このブログで紹介している他のカスタマイズを利用している場合で、どうして調整がうまく出来ない時は一度他のカスタマイズの変更箇所を元に戻してから試してみてください。

関連記事
スポンサー リンク
コメント
#135 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#139 : Re: サムネイルの位置とサイズ
コンニチハ。
URLリンク先にサムネイル画像の大きさを固定・位置調整する方法の記事を投稿したのでご参考くださいませ。
#240 : No title
記事内の画像URLをサムネイルにすることは可能でしょうか?
<IMG SRC="http://blog-imgs-63.fc2.com/051014_0638.jpg">こんな感じのを
サムネイルにもっていきたいのですが、できますでしょうか?
よろしくお願いします。
#243 : Re: 240
コンバンハ。
テンプレートで使用されているサムネイルの変数は記事本文内に書かれた最初の画像をサムネイルにすることしかできません。
画像タグに「style='display:none;'」を追加して「<img src="アドレス" style='display:none;'>」の形で“記事本文の先頭”に書き込めば、表示はされませんがサムネイルにはなります。

申し訳ございませんが、仕様でできない機能などの要望は基本的にサポートの対象外となります。
公式のFC2リクエストに出すと実装されるかもしれません。
http://request.fc2.com/index.php?ct1=5
#328 : いつもお世話になっています
パソコンにはあまり詳しくないため、思い描くブログのためにとても助かっています。

質問の内容ですが、サムネイル化した画像にカーソルを合わせた時に記事のタイトルを表示させることは可能でしょうか?
また記事のタイトルにカーソルを合わせた時に「このエントリーの固定リンク」と表示されますが、ここにもカーソルを合わせた時に記事のタイトルが表示になるようにしたいのですが…。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered