関連記事にサムネイルを付けてみた

 

2014.09.13

サムネイルを付けた「関連記事」 今回は関連記事の表示を変えてみた!!

各記事ページの下に表示する関連記事にサムネイルを付けて、レイアウトを変更しました♪ とは言っても、先日ブログを始めたばかりで、記事の数自体が少なく関連する記事なんて、ほぼ無いんだけどね…
だから、今そこを気にしてもとは思ったけど...
気になったから仕方ないっ!!w
それに記事はこれから増える予定だし!...多分...


関連記事の設定
って事でまず、関連記事の基本的な設定・表示から触ってみた。

関連記事の基本的な表示については、FC2ブログの「環境設定」から出来るのでソースを触る事なく簡単に表示出来るし、ヘルプページで設定の説明と、関連記事部分のソースが記載されており、各要素と設定されてるclass名が分かるので、自分の「テンプレートの設定」から現在適用中のスタイルシートにそのclass名を記述して装飾する事も可能。

FC2ブログのヘルプ > 【ブログの設定】 記事の設定 は こちら

関連記事の基本的な表示
それで作るとこんな感じに出来る。(装飾は何もしてない状態です)→

表示を確認する為のテストで書いた記事なのでタイトルは適当で、
本文も「あああ」しか入って無い状態です^^;

関連記事は、シンプルにタイトルと日付がリストで表示されてます。
まぁこれでも悪くは無いけど、何かちょっと寂しいし、リストの右側に空くスペースが妙に気になる...

そこで関連記事それぞれにサムネイルを表示して、何かイイ感じに並べれないかと思って探したら下記のブログを見つけたので、その方法をやってみた。

カスタムテンプレート」・・・テンプレートの配布やカスタマイズの方法を紹介してるブログ

このブログの「fc2blogの関連記事リストにサムネイル(アイキャッチ)画像を表示する方法」と言う記事を見て、そこに書いてあった方法を試し、見た目に関してはちょっとだけアレンジさせて頂きました♪

サムネイルを付けた関連記事
それで出来たのがこんな感じ♪ →
サムネイルの画像を記事に合わせてアップロードする手間がありますが、ファイルの名前を変えるだけで済むような事なので自分的には全然OKって感じです。
それに、むしろ自動で記事中の最初の画像を表示されるよりも自分で指定出来る分、見た目的には良く出来るんじゃないかな?

この関連記事の作成は、上記のブログに載ってた内容をコピペするだけで大体OK (自分のブログのデザイン等によっては多少修正する程度)

この方法を応用して、全記事一覧にもサムネイルを付けれないかな?・・・
それは後日、検証してまた記事を書いてみようと思います♪
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-13 | 画像系 | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/16-29706178

「関連記事にサムネイルを付けてみた」へのトラックバック

- TrackBack -


「関連記事にサムネイルを付けてみた」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










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

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

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

White
Black

プロフィールClick

プロフィール画像

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

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

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

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ