トップ  >  ネット・ブログのこと  >  FC2ブログやその他でも簡単に最新記事を画像(サムネイル)付きで表示する方法

                    

FC2ブログやその他でも簡単に最新記事を画像(サムネイル)付きで表示する方法

2013.06.17 (Mon) |  ネット・ブログのこと

最新画像

毎度、@kobe_masayan(神戸のまさやん)です。

FC2ブログを運営する僕ですが、ずっとlivedoorブログ、もしくは金がかかってもWordPressn引っ越す気でいましたが(WordPressは後々検討中)それはサムネイル付きで記事を紹介する機能がFC2ブログでは実装されていないという不満点でした。

関連記事等はは外部のブログパーツで何とかなるのだが・・・最新記事を良い感じでサイドバー等に画像(サムネイル付き)で実装出来る方法ってないんですよね・・・色んなブログパーツもありますが、広告が付いてきたり表示具合がダサかったり・・・今回は違和感なく最新記事をブログで実装する方法を書きます。

もちろん、FC2以外のどのブログでも任意の場所にフォントの大きさも思うがままに実装出来る方法です。

多少HTMLとCSS(スタイルシート)を弄りますが、知識が無くとも出来るように書きたいと思います(書けるかな?)
まずは複眼RSSフィードというサイトにアクセスして下さい。アクセスして「複眼RSS」 貼付けコード生成(無料)というボタンを押すと以下の画面が現れます。

「複眼RSS」 貼付けコード生成(無料)

sdsahdhashds.png

早速表示する画像の配置を考えましょう。難しく考える事なかれ、

テーブル行数= 縦に掲載したい記事の数

テーブル列数= 横に掲載したい記事の数

パディングは記事と記事の間という意味です。

当ブログは縦に10行、横は1列で設定、するとこんな感じ。

最新画像

まーさっきも載せたましたけど。念のため。

では次に、

hjhjhjhjhjh.png

このブログパーツ、あまり賢く無いのか、記事の取得件数まで設定してあげないといけない。つまり、先ほど設定した・・・


当ブログは縦に10行、横は1列で設定、するとこんな感じ。

という事になると取得件数は10という事になりますよね?テーブル数=取得件数です。(これぐらい勝手に分かってくれよと言いたいですが、結構高性能で広告無しの優秀なブログパーツなんです。)


で更に、先ほど画像サイズ決定しましたよね?当ブログでは130pxで設定。ちなみに表示させたいサイドバーの横幅は300pxです。また、横パディングを2pxで設定しましたので、・・・残りは引き算。画像横に表示させたい文字の幅を決定します。

popojkjklhlkh.png

ちなみに、文字と画像のは位置関係は任意で選択出来ます。今回は、画像右(100px)と文字幅(180px)画像と文字の間(2px)にての設定です。

これがサイドバーの横幅が500pxある場合、画像200px(縦は任意で、180pxくらいが妥当?)と文字は250pxくらいで設定すればいいんでない??どーぞご自由に。

あと少しです!疲れず読んで!次に、キモのRSSフィードの登録です。うん、難しいよね。でも簡単なんです。

以下を見てみ??

hfgdhfdsfhkdsgfgd.png

まずはHTML版にチェックを入れます。


そしてRSSフィードのアドレスをボックスに入力、そして「貼り付けコードの生成」これを押すともうおしまいです。(7割型)え?RSSって何って??そりゃーすぐ分かるよ。解説しよう!

20130208223240303_20130617002335.png

ご自身のブログ内でRSSという項目を見た事ありませんか?もしくはこんなボタン↓

url_20130617002334.png

こんな画像のボタン見た事ありません?何?無い?きっと公式ブログパーツにあるはずなのでまずはそれを探して下さい。(FC2にはありました。)

このRSSボタンを押すと変な(コード)の羅列に出くわした方も多いと思います。こんな感じ↓

2013020822372343b_20130617002520.png

これでは意味は分からないですよね?わかれば逆にパソコンオタクです。僕も分かりません。

えぇー?!分からい奴が説明してるのか?分からなくも大丈夫!ポイントはこの画面になった時のURLバーだけです。

20130208223913544_20130617002517.png

RSSボタン画面のURLバーです。これを先ほどのRSSURLバーにコピー貼り付けすれば良いのだ!

20130208221746de9_20130617002518.png

後は、発行されたコードを最新記事を表示させたい場所に貼り付ければいいわけです。が、このままでは文字が小さいんです。こんな感じに↓

nxcnmxnmnfd.png

ここで、何故にHTML版を選んだ意味が?が出てきます。ちなみにコードはこちらです。

shdshjdhsjhdlszldlhszdhs.png

画像以外にもやたらとコードが下に続きます。これはHTMLの知識やCSSの知識が無いと解読出来ません。しかし、ここに書いてあるCSSコード、あなたのブログのレイアウトを崩します。どうやら非常に強い属性があるようです。

なので、僕がピンクで囲ったコードを消してみて下さい。大凡、個人ブログで影響でるであろうコードはここらへんを消すと大丈夫になります。

んでもって、フォントサイズを以下のコードを弄って決定します。

dhsjdhshdslhdsahdsahsklhdsahdsa.png

発行されたコードに上記の記述があるはずです。13PXであれば標準、10pxであれば少し小さいかな?くらいの解釈でOKです。

そしたら編集終了です。

そして・・・やっと終了ですあなたのブログにこん風に最新記事がサイドバーに・・・

最新画像

細かい設定は慣れて行くうちに出来るようになると思いますし、複眼RSSのサイト内と弄って見て下さい。ちなみに、当ブログではこのパーツを採用してから、HTML.CSSの変更を行う度にIE(インターネットエクスプローラー」での表示が完全にくずれてしまいます。対処方は過去記事(約300程まで)を全選択して何も変更せず更新すると元に戻ります。

原因は謎ですが、この複眼RSSのHTML,CSSが邪魔しているのかもしれません。まー対処法があるから良しとしてますが。FC2に問い合わせしたら、「わかりません」との事でした(´・ω・`)

複眼RSSへ行く

 



関連する記事

▲次の記事:もし矢口真里状態になって慰謝料を払う事になったら・・・あなたならいくら払う?
▼前の記事:住宅ローンの金利引下げ合戦勃発、いつ買うの?今でしょ!も待て。



呑みネタの中の人


神戸市在住のブロガー。皆様にとってどうでも良い事、僕にとってもどうでも良い事をお届けします。好物は石原さとみと焼酎。

Google+

Map