INTEREST

↓テンプレート「basic_white」のカスタマイズ用に作ったブログ（最新記事にサムネイルを付けてます）
「 FC2ブログのテンプレート「basic_white」をカスタマイズ 」

---

最新記事にサムネイル画像を付ける

1. 1.サムネイルにする画像をアップロードする
2. 2.「最新記事」のプラグインのHTMLを編集する
3. 3.「スタイルシート」の編集をする

---

1.サムネイルにする画像をアップロードする

まず、記事中に最低１つは画像を使う事を前提に話を進めます。
記事の画像をアップロードする際に、サムネイルにしたい画像のファイル名を「entry-○○.jpg」として
○○の部分には、その記事の “記事番号” を入れます。

※記事番号とは、追加する記事に順番に割り振られる通し番号で「記事の管理」から各記事の編集画面に行くと画面上部に表示されてたり、記事ページのURLの一部にもなってます。
例：http://interest2014.blog.fc2.com/blog-entry-41.html　←（41が記事番号です。）
新しい記事を追加する毎に、１つずつ数字が大きくなっていきます。

今回カスタマイズした「basic_white」の記事ページで言うと、
一番古い記事の「テスト用の記事【PART1】」の記事番号は 1 で、
一番新しい記事の「テスト用の記事【PART13】」の記事番号は 13 となってるので、サムネイルにする画像のファイル名は右の画像のように、それぞれ「entry-1.jpg」や「entry-13.jpg」としています。

それぞれの画像の大きさは、実際の記事ページで確認出来ます。
テスト用なので、わざと大きい画像や小さい画像を入れてみてます^^;

テスト用の記事ページを見てみる場合は「 こちら 」からどうぞ～♪


上記の通りファイル名を付けたら管理画面の「ファイルアップロード」から画像をアップロードするのですが、その際に右の画像のように
“ サムネイルを同時に作成する ” にチェックを付けて下さい。

※この時に指定する縦横のサイズは「最新記事」部分で表示したいサムネイルのサイズと等しい、もしくは多少調節が出来るように少し大きめのサイズを指定して下さい。（今回カスタマイズしてるテンプレートの「basic_white」では多少余裕を見て縦横100pxに指定しました）


サムネイルにする画像の注意点
この方法の場合サムネイルにする画像のファイル形式を揃える必要があるので、ファイルの拡張子が「.jpg」となってる画像を選ぶか、ファイル形式を変更して「.jpg」に統一して下さい。


上記の手順でファイル名を付けた画像は、右の画像のように、それぞれの記事ページでいつも通り使って下さい♪^^
このファイル名を指定するのが少し手間な部分かもですが、どちらにしろ記事中で画像を使う場合、何かしらファイル名を付けてアップロードしてると思うので、慣れてしまえば手間とも感じないと思います。
また、１つの記事で複数の画像を使う場合、サムネイルにする画像以外のファイル名は何でもOKなので任意のファイル名にして下さい。
※重要なのはサムネイルにしたい画像のファイル名だけです。

---

2.「最新記事」のプラグインのHTMLを編集する

次はプラグインの中身を少しだけ変更します。（基本コピペでOKです♪）
「プラグインの設定」から「最新記事」のプラグインの詳細をクリックすると編集画面が開くので、その中の “プラグインの改造” と言う項目の【HTMLの編集】をクリックすると右の画像の状態になります。

「最新記事」のプラグインが無い場合は「公式プラグイン追加」から「最新記事」のプラグインを追加して下さい。（フリーエリアでも可）

HTMLが数行記述されてるのですが、内容を入れ替える為に、一旦全て削除して空っぽにします。（「Ctrl」+「A」で全選択して消すと楽♪）

「最新記事」のプラグインのHTMLを削除したら、次は下記のHTMLソースをコピーして貼り付けます。

<ul>
<!--recent-->
<a href="<%recent_link>">
<li class="recent-entry">
<img src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/
entry-<%recent_no>s.jpg" alt="<%recent_title>" />
<p class="recent-title"><%recent_title></p>
<p class="recent-date"><%recent_year>.<%recent_month>.<%recent_day></p>
</li>
</a>
<!--/recent-->
</ul>

※5行目の「http://blog-imgs-46.fc2.com/i/n/t/interest2014/」の部分だけ、ご自身のURLに書き換えて下さい。（上記の手順でアップロードした画像のURLを確認すれば分かると思います。）

例えば「1.サムネイルにする画像をアップロードする」の手順でアップロードした画像のURLが
「http://blog-imgs-66.fc2.com/b/a/s/basicwhite/entry-11.jpg」となってたら、
「http://blog-imgs-66.fc2.com/b/a/s/basicwhite/entry-11.jpg」←のオレンジの部分だけコピーして、上記の書き換える部分に貼り付けて下さい。

上記のHTMLソースをコピーして、プラグインのHTML部分に貼り付け
URL部分も書き換えると、右の画像の状態になります。

この状態で画面下の「設定」をクリックして保存します。

以上、コピペだけでHTMLの編集は完了です♪^^

---

3.「スタイルシート」の編集をする

最後にスタイルシートへの記述を追加します。（ここも大体コピペでOKです♪）
「テンプレートの設定」の「スタイルシート編集」内に下記の記述を追加します。（末尾にコピペでOK）

/* ▼　最新記事　▼ */
.recent-entry {/* 外枠部分 */
position:relative;/* 日付を右下に表示する為の基準位置指定 */
border:1px #eee solid;/* 外枠の線 */
padding:8px;/* 枠の中に対しての余白 */
margin-left: -6px;/* 枠の外に対しての余白 */
width:98%;/* 外枠の横幅 */
height:63px;/* 外枠の高さ */
border-radius:3px;/* 外枠の角を少し丸くしてます */
-webkit-transition: 0.5s;/* マウスを乗せた時の変化の速度 */
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.recent-entry:hover{/* マウスを乗せた時の変化 */
background:#fbfbff;/* マウスを乗せた時の背景色 */
border:1px #09f solid;/* マウスを乗せた時の外枠の線 */
box-shadow: 2px 2px 2px 0px #555;/* 影の大きさと色 */
}
.recent-entry img{/* サムネイル */
float:left;/* サムネイルを左側に配置 */
margin-right:8px;/* サムネイルの右側の余白 */
max-width:60px;/* サムネイルの横幅上限 */
max-height:60px;/* サムネイルの縦幅上限 */
border-radius:5px;/* サムネイルの角を少し丸くしてます */
border:1px #ccc solid;/* サムネイルの外枠の線 */
}
.recent-title {/* 記事タイトル */
word-break:break-all;/* 言語に関係なく表示範囲に合わせて改行 */
height:3em;/* 記事タイトルの高さを固定して２行表示 */
overflow:hidden;/* はみ出る部分は非表示 */
}
.recent-date {/* 日付部分 */
position:absolute;/* .recent-entryに対しての絶対位置 */
right:8px;/* 日付を右下に表示してます */
bottom:5px;
color:#444;/* 日付の文字色 */
text-align:right;/* 右寄りに配置 */
}
/* ▲　最新記事　▲ */

※少しでも分かり易くと思って、コメントで説明を付けまくってみたけど、ちょっと付け過ぎたかなｗ　邪魔なら /* ～ */ の部分を消しちゃって下さい... 　

※サムネイルは縦横最大で60pxの大きさに調整して表示します。
個人的には正方形の画像で統一するのがバランス的に良いかなーと思ったり^^　サムネイルの大きさを変える場合は「 max-width と max-height 」の数字を変更すればOKです !!　但しそれに合わせて外枠の高さ等他の部分も表示に合わせて調整して下さい♪

※テンプレートの「basic_white」を基準にしたので、サイドメニューの横幅が狭いテンプレートや、その他スタイルシートの設定次第で調整が必要になる部分が出るかも... 　

※マウスを乗せると枠線が青っぽくなり、影が出て少し浮き出たように見える感じにしてるので、 自身のブログに合わせて色の調整などをして下さい。　むしろこんなエフェクトはいらぬっ!!って場合は、10行目～14行目までと、16行目～20行目を削除して下さい...＞＜

以上が、テンプレートの「basic_white」を例に “ 最新記事へサムネイル画像を表示 ” する方法でした♪

---

また、以上の手順が「よく分からない...」や「面倒臭い...」って場合は、タグを貼るだけでブログやサイトが収入源になると人気の「 忍者AdMax 」を提供してる、忍者ツールズの「忍者レコメンド」と言う無料ツールがオススメです 　とにかく簡単に設定・設置が可能で表示内容やデザイン等も選べます♪

---

「basic_white」のカスタマイズ用に作ったブログでは、それぞれの表示を比較出来るように、サイドメニューに「今回の方法」と「忍者レコメンドを使った方法」、そして「デフォルトの表示」の３タイプの「最新記事」を表示してるので、参考にして頂ければと思います♪^^

「 FC2ブログのテンプレート「basic_white」をカスタマイズ 」

---

「関連記事」や「記事一覧」等でも、サムネイルを表示する方法を近い内に記事にしようと思います♪
他にも「Google API」を使った方法も試してみたいし、やりたい事がいっぱいです...