スポンサーサイト

 

--.--.--

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

http://interest2014.blog.fc2.com/tb.php/18-c1bc636c

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

- TrackBack -


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

- Comment -

コメントの投稿

- Post a Comment -










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

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

最新記事にもサムネイルを付けてみた

 

2014.09.15

サムネイルを付けた「最新記事」 サムネイルを付けてみたっ!!の第三弾?w

関連記事カテゴリ別全記事一覧に続き「最新記事」にも付けてみたw
簡単に付けれるじゃん♪と知ってから、色んなとこに付けまくってる...

分かり易いもんね?... 画像ある方が何かオシャレじゃん?...
と自分に言い聞かせながらも、ちょっとやり過ぎかな?...と感じる今日この頃だけど...まぁいいかw


「最新記事」の通常の表示

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



まずは初期状態の表示とソースです。
これは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にしてます。

サムネイル付きの「最新記事」
そして表示したのが、こんな感じです →

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

それにしても、せっかく色んなとこでサムネイルが表示されるようにしたのに画像がショボイ…
もっとイイ感じの画像を並べないと見た目が...><
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


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

http://interest2014.blog.fc2.com/tb.php/18-c1bc636c

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

- TrackBack -


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

- Comment -

コメントの投稿

- Post a Comment -










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

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

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

White
Black

プロフィールClick

プロフィール画像

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

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

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

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

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