INTEREST

■サムネイルを付ける前の表示

→

まずは初期状態の表示とソースです。
これはFC2ブログの「公式プラグイン」にある「最新記事」を使った場合の初期表示です。

記事のタイトルと日付が表示され、表示件数は「管理画面」の「環境設定」→「ブログの設定」から行います。

ソースを変更する場合は「プラグインの設定」画面で、編集したいプラグインの「詳細」をクリックして
一番下の項目「プラグインの改造」にある【HTMLの編集】をクリックすると、ソースが表示され編集可能
（下記は、その初期状態のソースです）

<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> 
(<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>

---

■サムネイルを付けた「最新記事」のソース

サムネイルを表示する為に、上記のソースを編集して先日の関連記事やカテゴリ別全記事一覧と同じようなレイアウトで表示されるように、以下の通りソースを書き換えました。

<ul>
<!--recent-->
<li &align class="recent-base">
<ul class="recent-main">
<li class="recent-img">
<div class="recent_image">
<a href="<%recent_link>" title="<%recent_title>"><img 
src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/entry-<%recent_no>s.jpg" 
alt="<%recent_title>" /></a>
</div">
</li>
<li class="recent-title">
<a href="<%recent_link>"><%recent_title></a>
</li>
<li class="recent-date">
<%recent_year>.<%recent_month>.<%recent_day>
</li>
</ul>
</li>
<!--/recent-->
</ul>
<div class="clear"></div>

※8行目のURLは、「関連記事」や「カテゴリ別全記事一覧」でも使ったサムネイル用の画像を記事に合わせて表示させる為の部分なので、サムネイルに使う画像URLの数字部分以外をコピペしてます。
【　例　】
サムネイル用の画像を「entry-○○s.jpg」と保存してるので、例えば私の場合「記事番号17」のサムネイルのURLは「http://blog-imgs-68-origin.fc2.com/i/n/t/interest2014/entry-17s.jpg」となるので、この赤字の部分を上記のソースに記載して、番号の部分を<%recent_no>の変数で自動的に数字が割り当てられるようにしてるので、記事ごとにサムネイルの画像をアップロードさえしてれば自動的に画像が表示されます。

そして、以下の内容も「テンプレートの設定」から現在適用中のスタイルシートの部分に追加しました。

.recent-base {
border:1px #ddd solid;
border-radius:3px;
display:inline-block;
width:100%;
margin-bottom:5px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.recent-base:hover {
background:#EEFAFF;
border:1px #aaf solid;
box-shadow: 2px 2px 2px 0px #555555;
}
.recent_image img {
width: 50px;
height:50px;
border-radius:5px;
border:1px #ddd solid;
}
.recent-main { margin:6px }
.recent-img { 
float:left;
width: 50px;
padding:0 8px 8px 0;
}
.recent-title {
float:right;
line-height:1.1;
height:32px;
text-align:left;
width:157px;
padding-top:2px;
}
.recent-date {
float:right;
text-align:right;
border-top:1px dotted #ddd;
width:157px;
}
.clear { clear:both; }

※サイドメニューへの表示なので、今までよりサムネイルのサイズを小さくして50pxにしてます。

そして表示したのが、こんな感じです　→

やっぱサムネイル付きにすると何かいいよね♪ｗ
でも、そのサムネイルが大きいと縦に長くなり過ぎてしまうし、小さ過ぎると何の画像か全然分からなくて効果が微妙な事になるし...　なので色々試してみた結果、今の50pxに落ち着きました

それにしても、せっかく色んなとこでサムネイルが表示されるようにしたのに画像がショボイ…
もっとイイ感じの画像を並べないと見た目が...＞＜