ぶぅメモ

都内在住さいとーさんのライフハック。

最新の記事一覧

MENU

はてなブログでヘッダに写真付き過去記事を表示させる方法

はてなブログはデフォルト設定の場合、シンプルな構造になっています。

 

カスタマイズ系の記事もwordpressに比べて少ないと思いますが僕のサイトで実施したカスタマイズをまとめてみましたので参考になればと思います。

今回は以下の3つのカスタマイズのうち1つ目のヘッダーに画像付き過去記事を表示させる方法をご紹介します。

  1. ヘッダーに画像付きの過去記事を表示する       ←今回の記事はこれ!
  2. サイドバーに画像/はてブ数付きの人気記事を表示する
  3. 続きを読むボタンをつける 
  4. hタグのカスタマイズ

ヘッダーに過去記事をアイキャッチ付きで表示する

f:id:buchan326:20150111143506p:plain

僕のサイトに出ているトップページの「最新の記事一覧」の箇所です。

手順も簡単ですので何も心配はいりません。丁寧に解説していきますので一緒にやってみましょう。

仕組みとしてはRSSフィードのデータを取得して表示するといった仕組みになります。

 

 

導入手順

1.複眼RSSにアクセスします。このサイトで貼付けるためのコードを生成します。

http://fukuganrss.blog27.fc2.com/

 

コードとかいわれるとびっくりしちゃいますが大丈夫です。基本的にコピー&ペーストです。

 

2.サイト中央にある「複眼RSS」張付けコード生成(無料)のリンクをクリックします。

f:id:buchan326:20150111144822p:plain

3.コードを生成するための各項目を設定していきますがすべてを設定する必要はありません。必要なところだけを設定していきましょう。

f:id:buchan326:20150111162143p:plain

①画像のサイズを設定します。イメージとしては以下の画像をみてください。 

f:id:buchan326:20150111150431p:plain

画像表示横幅、縦幅は画像のサイズです。自分の好みに合わせて設定していただいた構いません。僕のサイトは横幅130、縦幅100で設定しています。

 

②サイトに表示するための枠をいくつにするのかの設定になります

f:id:buchan326:20150111150756p:plainテーブル行数、列数はいくつ表示する箱を作るのかを設定する項目です。

行数・・・縦にいくつ箱を並べるかを指定する項目

列数・・・横にいくつ箱を並べるかを指定する項目

 

僕のサイトでは列数5、行数1で設定しています。

ここで「箱」という表現をしているのは後述する設定で実際にいくつ表示するのかを決めるからです。

例として行数2、列数3にした場合はこのようにみえます。

f:id:buchan326:20150111162718p:plain

 ③②でいくつ表示するのかの枠を決めたのでこの項目ではいくつその枠に記事を表示するのかを決めます。

 

④画像の上にマウスのカーソルをもっていった時に記事タイトルと一緒に日付も表示するのかどうかの設定項目になります。

ONにした場合の表示はこうなります。

 

f:id:buchan326:20150111163115p:plain

 

⑤サイトのカテゴリを選択します。特に何を選んでいただいても構いません。

 

⑥自分のサイトのRSSフィードのURL入力します。たいていの場合にはサイトのURLの末尾に「/feed」と入力すれば問題ありません。

もしフィードが不明な場合にはRSSリスティングというRSSフィードを調べるサイトを利用しましょう。

 

⑦すべての値の入力が完了したら「貼付けコード生成」ボタンをクリックしてコードを生成します。

f:id:buchan326:20150111171200p:plain

 

⑧生成されたコードをすべて選択してコピーしましょう。

f:id:buchan326:20150111164226p:plain

 

4.ここからははてなブログのダッシュボードから行います。 

⑨自身のサイト右上の▼を押して、デザインをクリックします。

f:id:buchan326:20150111164756p:plain

 

⑩カスタマイズのボタンをクリックします。

f:id:buchan326:20150111164942p:plain

 

⑪ヘッダをクリックします。

f:id:buchan326:20150111165128p:plain

 

⑫メニューが開いて下にスクロールしていくと「タイトル下」という項目があるのでそこに⑧でコピーしたコードを貼付けます。

 

⑬最後に変更を保存ボタンをクリックして変更完了です!

f:id:buchan326:20150111165722p:plain

■複眼RSSの記載を消したい場合

生成されたコードをそのまま貼付けた場合、著作者の表記が表示されます。

f:id:buchan326:20150111170027p:plain

著作者の方から削除してもいいということが生成されているコードの中に書かれています。

もし削除したい場合には該当部分を削除すれば表示されなくなります。

 

どの部分を削除するのかというと削除可という「<!-- 削除可 -->」で囲まれた部分になります。

 

<!-- 削除可 -->
<span style="font-size: xx-small;">Powered by <a href="http://fukugan.com/" target="_blank">複眼RSS</a></span>
<!-- 削除可 -->

 

まとめ

いかがでしたでしょうか?ちょっとしたアクセントにもなるので是非試してみてください。ここはどうすればいいの?というところがあればコメントなどでお知らせください。

 

次回はサイドバーに画像付き人気記事を表示する方法をご紹介します!

 

  1. ヘッダーに画像付きの過去記事を表示する
  2. サイドバーに画像/はてブ数付きの人気記事を表示する    ←次回はこれ!
  3. 続きを読むボタンをつける
  4. hタグのカスタマイズ

f:id:buchan326:20150111171631p:plain 

広告を非表示にする