HSKぐうたらジャーナル

カメラ、ガジェット、かっこいいもの、かわいいもの、おいしいものが大好きな個人トレーダーのぐうたらな日常をマイペースに綴ります。

【B】 はてなブログに過去記事を写真で表示する、お手軽カンタンカスタマイズの巻

GW前半も終わっちゃいましたね。

今日で本ブログ設置から4日が経ちますが、
合間を縫ってちょこちょことデザインをいじってきたので
自分の備忘録も兼ねて、どうカスタマイズしてるかをご紹介できればと思います。

今回は、このブログの上に出てきてる、コレ、です。
15分もあればあなたのブログにも設置できますよー。

f:id:hisoka_maki:20130429182734j:plain
(※あ。ちなみにはてなブログ限定です。あしからず。)

  f:id:hisoka_maki:20130428134612g:plain

最近の記事一覧を表示してみよう

こちら、最近自分が投稿した記事の画像を集めてリンクを張っているものです。
写真が多めのブログだと華やかさが増していいかもしれませんね。

自分で作るとなるとちょっとやっかいですが、
次に紹介するサービスを使うと簡単に作れちゃいます。
その名も、「複眼RSS」さん。

f:id:hisoka_maki:20130429183042j:plain

まずは作ってみよう

まずは試しに設置してみましょう!
はてなブログでは変更を正式に反映させる前にプレビューできるので
編集途中のブログを間違えて公開することもありません。

「RSS複眼」さんのサイトから、「RSSフィード登録」のページに行きましょう。


まず最初に設定するのはテーブルの「行」「列」です。

f:id:hisoka_maki:20130429194750j:plain

  •  「行」… 縦方向に表示される写真の数
  • 「列」… 横方向に表示される写真の数

ですね。お好みの数字に変更してください。


次に設定するのが、「取得件数」です。

f:id:hisoka_maki:20130429195808j:plain

後で修正が可能ですので、ここでは「行」×「列」の数字を入力します。

f:id:hisoka_maki:20130428134610g:plain

どんどん設定していきます

次に、下の方にスクロールして、ブログのカテゴリーを設定しましょう。
表示される内容に影響はないので、深く考えなくても大丈夫。

f:id:hisoka_maki:20130429195109j:plain


「RSSのURLリストを入力」とある欄には、
自分のブログURLのあとに"feed"を付け足して…「貼付けコード生成」をクリック!

f:id:hisoka_maki:20130429185203j:plain


生成された貼付けコードは、全て選択して一旦コピーしましょう。

f:id:hisoka_maki:20130429201041j:plain

ここまで来たら、あとひといきです!

f:id:hisoka_maki:20130428134607g:plain

はてなブログの設定をする

コピーした貼付けコードは、はてなブログ側に貼り付けて使います。

はてなブログの管理画面から「デザイン」>「ヘッダ」を選んだら
「タイトル下」のところに貼り付けてみましょう。
はてなブログのプレビュー機能で、どんな感じになるかが分かります。

f:id:hisoka_maki:20130429202300j:plain

 ただし、ここからさらに、写真の大きさや背景色を
ブログに合わせて微調整する必要があるかもしれません。
最終的にデザインの変更を確定デザインが壊れてしまうことはないので
複眼RSS側の設定をいろいろ変えて試してみましょう。

ではでは、明日からまた仕事が始まりますが、
GW後半に向けて、張り切っていきましょう!

f:id:hisoka_maki:20130428134606g:plain

(追記)

…ご参考までに、当サイトの設定内容をご紹介しておきます。
当サイトでは、Reachのテーマを使用していますので、同じテーマをご利用の方は
そのまま使えるかと思います。よろしければご参照ください!

f:id:hisoka_maki:20130429203238j:plain
f:id:hisoka_maki:20130429203300j:plain

おしゃれなホームページのデザイン テンプレート・コレクション

おしゃれなホームページのデザイン テンプレート・コレクション

  • 作者: ユルユラデザイン,奥山寿史
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2009/06/27
  • メディア: 単行本(ソフトカバー)
  • 購入: 5人 クリック: 213回
  • この商品を含むブログ (2件) を見る
自分で作れる! おしゃれなWebサイト

自分で作れる! おしゃれなWebサイト