スポンサーサイト

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

FC2ブログでサイドバーの最新記事をサムネイル付きにする方法

ホームページ制作 やるべき事は3つです。
  • ①サムネイルにしたい画像のファイル名に記事番号を付ける。
  • ②プラグインのフリーエリアにHTMLタグを追加(フリーエリアを最新記事にします)
  • ③スタイルシートの追加(デザインです)
①②③のやり方を書いていきます。

このやり方は、不具合が見つかったので別の方法をおススメします。
以下の3つの方法があります。
忍者レコメンドを使った最新記事(画像付き)
複眼RSSを使った最新記事(画像付き
googleapiを使った最新記事(画像付き)
忍者レコメンドは、使いやすいけど無料会員登録がいります。
googleapiは、反応が少し鈍いし,javascriptを使うので少し設定が多いです。
一番簡単なのは、複眼RSSを使った方法だと思います。

①サムネイルにしたい画像のファイル名に記事番号を付ける。

記事番号は記事の編集画面で確認出来ます。

キャプチャ

ファイルのアップロード画面

サムネイル付記事

先程の記事番号をファイルの最後につけます。(好きな名前)32.jpgにします。数字が重要

②プラグインのフリーエリアにHTMLタグを追加

フリーエリアに以下のhtmlタグを追加します

<div class="img_recent">
<!--recent-->
<a href="<%recent_link>" title="<%recent_title>">
<img src="
http://画像のURL<%recent_no>.jpg"><%recent_title></a><br>
<!--/recent-->
</div>

赤色の部分を先程の記事番号を除いた画像のURLに置換えます。
例:青色の部分と入れ替えます。
http://blog-imgs-69.fc2.com/b/l/o/blog130/img_32.jpg
<%recent_no>は最近の記事番号に変わります。

③スタイルシート追加

テンプレートの設定、スタイルシートの編集の最後の方に以下をコピペして追加してください。

/* 新着記事サムネイル画像表示 */
.img_recent br {
clear:left;
}
.img_recent img {
float:left;
border: 0;
margin-right:10px; /* 画像の右余白 */
margin-bottom:10px; /* 画像の下余白 */
width: 100px; /* 画像表示サイズ */
height: 100px; /* 画像表示サイズ縦 */
}
これで終了です。これでサムネイル付の最新記事に変わってるはず。

参考サイト:FC2ブログで最新記事にサムネイルを付けてサイドバーを見やすく!

追記;不具合
http://blog-imgs-○○.fc2.com/n/a/s/nasimeya/〜
ファイルをアップロードしていると○○の部分の数字が変わってしまうので
プラグインで固定していたURL部分と一致しなくなります。
この最新記事表示方法は、修正手間がかかりあまり使えないことが判明しました。
。詳しくは、参考サイトのコメント欄に不具合が書いてます。

関連記事

コメント


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