スポンサーサイト

 

--.--.--

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

http://interest2014.blog.fc2.com/tb.php/42-657b78cd

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

- TrackBack -


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

- Comment -

No title

こんにちは
FC2ブログのスタイルシート参考にさせていただきます。
詳しく開設してあるので
とってもわかりやすいです。


応援ポチです。
  • 2014-10-20 19:55
  • えい /無料情報で、お小遣い稼げる.comさん@管理人
  • 編集

Re: No title

> えい /無料情報で、お小遣い稼げる.comさん

初めまして^^
ご訪問&コメントありがとうございます♪

うまくいかない場合や、何かご不明な点が御座いましたら、
またいつでもお気軽にコメントを頂ければと思います♪^^

応援もポチっとして頂き感謝感激です♪w
  • 2014-10-20 23:27
  • あると♪さん@管理人
  • 編集

No title

おーーーー!!!
これはやってみたい!!!
納期が迫った副業を早く終わらせて、早いところこれしたい!!
いつも良記事ありがとうございます(^^♪
  • 2014-10-21 08:57
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

こちらこそ、いつもありがとうございます♪^^

これもやってみれば結構簡単に出来るので、是非お試し下さい^^

また「思い通りの表示にならない...」や「ココをこうしたいっ!!」等が御座いましたら、
お気軽にご相談下さいませw(≧ω≦)b
  • 2014-10-21 09:37
  • あると♪さん@管理人
  • 編集

No title

こんばんは。

たまたまブログ拝見させていただきましたが
とても役に立ちそうな記事で今後もブログ作成の
参考にさせていただきたいです。

なんせ私はブログ初心者なもので更新作業ですら
悪戦苦闘しております。

自分のページのデザインもまったく納得できていません。

また分からない時には質問させていただくかもしれませんが
よろしくお願いします。

応援ポチです。
  • 2014-10-26 00:09
  • じゅんぴーAさん@管理人
  • 編集

Re: No title

> じゅんぴーAさん

ご訪問&コメントありがとうございます♪

自分のブログを思い通りにデザイン出来ると楽しいですよね^^
お気軽にご質問下さいませ(≧ω≦)b 私が分かる範囲でご協力させて頂きます♪

また、応援もポチっとして頂きありがとうございます^^
  • 2014-10-26 00:54
  • あると♪さん@管理人
  • 編集

はじめまして

はじめまして。ご訪問ありがとうございます。

早速お邪魔しました。

!!…真っ黒

もしかして、怖いとこ?

な、訳ないよね?

ブログのカスタマイズ、やりたいけど怖くてできないんです。(>_<)
  • 2014-11-02 15:54
  • J.kさん@管理人
  • 編集

No title

訪問&コメントありがとうございます!!

ミニーくんイタズラで困っているんですよ。

また遊びにきてくださいね~。

http://mini0129.blog.fc2.com/

ぽちぽちぽち~
  • 2014-11-02 16:13
  • ミニーママさん@管理人
  • 編集

Re: はじめまして

> J.kさん

初めまして^^
コメントを頂きありがとうございますm(*≧∀≦)m

黒いけど、怖いとこでは無いのでご安心下さいww

また、私も最初はカスタマイズとか怖くて出来なかったんですけど、
実際やってみたら、自分好みに表示出来たりするのが楽しくて...w

今では、こんな感じでブログのカスタマイズの事を気ままに書いてます♪
  • 2014-11-02 16:13
  • あると♪さん@管理人
  • 編集

Re: No title

> ミニーママさん

こちらこそご訪問&コメントを頂きありがとうございます♪

でも、そのミニーくんのイタズラ顔がカワイイww
また立ち寄らせて頂きますね~(*≧∀≦)b
  • 2014-11-02 16:18
  • あると♪さん@管理人
  • 編集

じっくりと

あると♪さん
こんばんわ、本当に色々な事やられてるんですね。感心です。この記事もじっくりと何度も読まないとなりませんねぇ。笑
さて、話は変わり、この頃はお忙しいですか?
風邪等ひいてなければ良いのですが、と、少し心配しております。お忙しいだけなら良いのですが・・・
  • 2014-12-14 03:17
  • girigiri26さん@管理人
  • 編集

Re: じっくりと

> girigiri26さん

いつもありがとうございます><

コメントへのお返事が遅くなり、
またgirigiri26さんのブログにも訪問出来ずごめんなさい(;><)

元気になったらまたゆっくり訪問させて頂きますね♪
ご心配ありがとうございます。
  • 2014-12-15 14:12
  • あると♪さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2015-01-17 19:57
  • -さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










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

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

テンプレート「basic_white」のサムネイル画像付き最新記事 テンプレート「basic_white」のカスタマイズ その4

最新記事にサムネイル画像を付ける方法」を検索される方が結構多いみたいで、最近このブログへの検索ワードでも上位になってます。
サムネイル付きにする事で見た目も良く、PVも増えそうですからね♪
って事で、今回はテンプレートの「basic_white」を例に、このブログではこんな感じでやってみたと言う方法をご紹介♪^^
ちょこっと手間は掛かるけど、方法自体は簡単だし、無料のツール等を使って広告が表示されるのは嫌だなーって人にはおススメです

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



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


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



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


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

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


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

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

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


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

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


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


テスト用の記事【PART10】画像サイズ300px×240px 上記の手順でファイル名を付けた画像は、右の画像のように、それぞれの記事ページでいつも通り使って下さい♪^^
このファイル名を指定するのが少し手間な部分かもですが、どちらにしろ記事中で画像を使う場合、何かしらファイル名を付けてアップロードしてると思うので、慣れてしまえば手間とも感じないと思います。
また、1つの記事で複数の画像を使う場合、サムネイルにする画像以外のファイル名は何でも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;/* 記事タイトルの高さを固定して2行表示 */
overflow:hidden;/* はみ出る部分は非表示 */
}
.recent-date {/* 日付部分 */
position:absolute;/* .recent-entryに対しての絶対位置 */
right:8px;/* 日付を右下に表示してます */
bottom:5px;
color:#444;/* 日付の文字色 */
text-align:right;/* 右寄りに配置 */
}
/* ▲ 最新記事 ▲ */

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


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


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


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



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



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

忍者AdMax




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

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



「関連記事」や「記事一覧」等でも、サムネイルを表示する方法を近い内に記事にしようと思います♪
他にも「Google API」を使った方法も試してみたいし、やりたい事がいっぱいです...
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-20 | 「basic_white」 | コメント(13) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/42-657b78cd

「FC2ブログの最新記事にサムネイルを付ける方法」へのトラックバック

- TrackBack -


「FC2ブログの最新記事にサムネイルを付ける方法」へのコメント

- Comment -

No title

こんにちは
FC2ブログのスタイルシート参考にさせていただきます。
詳しく開設してあるので
とってもわかりやすいです。


応援ポチです。
  • 2014-10-20 19:55
  • えい /無料情報で、お小遣い稼げる.comさん@管理人
  • 編集

Re: No title

> えい /無料情報で、お小遣い稼げる.comさん

初めまして^^
ご訪問&コメントありがとうございます♪

うまくいかない場合や、何かご不明な点が御座いましたら、
またいつでもお気軽にコメントを頂ければと思います♪^^

応援もポチっとして頂き感謝感激です♪w
  • 2014-10-20 23:27
  • あると♪さん@管理人
  • 編集

No title

おーーーー!!!
これはやってみたい!!!
納期が迫った副業を早く終わらせて、早いところこれしたい!!
いつも良記事ありがとうございます(^^♪
  • 2014-10-21 08:57
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

こちらこそ、いつもありがとうございます♪^^

これもやってみれば結構簡単に出来るので、是非お試し下さい^^

また「思い通りの表示にならない...」や「ココをこうしたいっ!!」等が御座いましたら、
お気軽にご相談下さいませw(≧ω≦)b
  • 2014-10-21 09:37
  • あると♪さん@管理人
  • 編集

No title

こんばんは。

たまたまブログ拝見させていただきましたが
とても役に立ちそうな記事で今後もブログ作成の
参考にさせていただきたいです。

なんせ私はブログ初心者なもので更新作業ですら
悪戦苦闘しております。

自分のページのデザインもまったく納得できていません。

また分からない時には質問させていただくかもしれませんが
よろしくお願いします。

応援ポチです。
  • 2014-10-26 00:09
  • じゅんぴーAさん@管理人
  • 編集

Re: No title

> じゅんぴーAさん

ご訪問&コメントありがとうございます♪

自分のブログを思い通りにデザイン出来ると楽しいですよね^^
お気軽にご質問下さいませ(≧ω≦)b 私が分かる範囲でご協力させて頂きます♪

また、応援もポチっとして頂きありがとうございます^^
  • 2014-10-26 00:54
  • あると♪さん@管理人
  • 編集

はじめまして

はじめまして。ご訪問ありがとうございます。

早速お邪魔しました。

!!…真っ黒

もしかして、怖いとこ?

な、訳ないよね?

ブログのカスタマイズ、やりたいけど怖くてできないんです。(>_<)
  • 2014-11-02 15:54
  • J.kさん@管理人
  • 編集

No title

訪問&コメントありがとうございます!!

ミニーくんイタズラで困っているんですよ。

また遊びにきてくださいね~。

http://mini0129.blog.fc2.com/

ぽちぽちぽち~
  • 2014-11-02 16:13
  • ミニーママさん@管理人
  • 編集

Re: はじめまして

> J.kさん

初めまして^^
コメントを頂きありがとうございますm(*≧∀≦)m

黒いけど、怖いとこでは無いのでご安心下さいww

また、私も最初はカスタマイズとか怖くて出来なかったんですけど、
実際やってみたら、自分好みに表示出来たりするのが楽しくて...w

今では、こんな感じでブログのカスタマイズの事を気ままに書いてます♪
  • 2014-11-02 16:13
  • あると♪さん@管理人
  • 編集

Re: No title

> ミニーママさん

こちらこそご訪問&コメントを頂きありがとうございます♪

でも、そのミニーくんのイタズラ顔がカワイイww
また立ち寄らせて頂きますね~(*≧∀≦)b
  • 2014-11-02 16:18
  • あると♪さん@管理人
  • 編集

じっくりと

あると♪さん
こんばんわ、本当に色々な事やられてるんですね。感心です。この記事もじっくりと何度も読まないとなりませんねぇ。笑
さて、話は変わり、この頃はお忙しいですか?
風邪等ひいてなければ良いのですが、と、少し心配しております。お忙しいだけなら良いのですが・・・
  • 2014-12-14 03:17
  • girigiri26さん@管理人
  • 編集

Re: じっくりと

> girigiri26さん

いつもありがとうございます><

コメントへのお返事が遅くなり、
またgirigiri26さんのブログにも訪問出来ずごめんなさい(;><)

元気になったらまたゆっくり訪問させて頂きますね♪
ご心配ありがとうございます。
  • 2014-12-15 14:12
  • あると♪さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2015-01-17 19:57
  • -さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










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

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

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

White
Black

プロフィールClick

プロフィール画像

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

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

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

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

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