読者です 読者をやめる 読者になる 読者になる

画竜点睛を欠く

タイトルの如く不完全燃焼なアラフォーブログ 本と音楽と映画が主軸

はてなブログ カスタマイズ その3

ブログ ブログ-はてな

広告

はてなブログ カスタマイズ その3です。

今回はヘッダー下のグローバルナビ、サイドバーの最新投稿と人気投稿、記事下の関連ページ表示です。

以前から当ブログに訪問頂いている方はご存知だと思いますが、デフォルトのテーマevergreenから変更しました。evergreenは、カスタマイズ時に問題が発生したので、多くの方が採用している2カラムのテーマにしました。

「見やすいよ!」というお声も頂いたので今は気に入ってます。

さて、それではヘッダー下にあるグローバルナビからいってみましょう。

 

グローバルナビゲーション

ページの上部にあるこれ ↓ です。

f:id:RyuNoSuKe:20150613163304p:plain

サイドバーに設置できるモジュールのカテゴリと同じですが、他のサイトなどにも誘導出来たりします。今回はグローバルナビを紹介しているブログ様のソースコードは使用せず、自分でゴリゴリ書いていきました。

と言っても本を参照しただけで、何も特別なことはしていません。多少配色や位置のアレンジはしています。

で申し訳ありませんがプログラムにも著作権がありますので、ここでコードを晒す訳にはいかないのです。ちゃんと本書にも著作権で保護されている旨がありますので、のっけからリンク貼って恐縮ですが、このサイトのようなデザインにしたいようでしたら、ご購入を。もしくは大きな図書館であれば置いています。借りましょう。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

これ一冊でとりあえず、上等なページが一つ作れる内容になっていますので、私は一度全てのコードを記述してみて、自分なりのペラサイトを作ってみるつもりです。

ただこれでは「ナビが設置したいんだー」という人が困りますから、はてなブログ用にコードを載せているサイトを以下に載せておきます。

rrt.hateblo.jp

「カスタマイズ共有しましょうね。」とコメントに書いて読者登録したyukarin様が、上記のサイトを記事にしてくれました。お疲れ様です。ありがとうございました。

love-wd-yuka.hateblo.jp

はてな用のグローバルナビ解説は思ったほど多くありませんでした。

あとドロップダウンメニュー付きがけっこうありましたが、隠しテキストになるのでSEO的にどうなの・・・という記事もちらほら目にしているので私はやりません。

cards.hateblo.jp

blog.sukecom.net

www.sukinamonote.com

次に最新記事と人気記事です。

 

最新投稿と人気投稿を画像付きで表示する

サイドバーにあるこんなやつ ↓ です。

f:id:RyuNoSuKe:20150613213542p:plain

最新投稿、人気投稿 共にこちらのchiroru (ちろる)さんのコードを使用させて頂いています。画像 + タイトル + 右下に日付という仕様でマウスオーバーさせれば、明るく表示されます。いかにもデザイナーといった作りになっていますね。

chiroru.hatenablog.com

chiroru.hatenablog.com

以上です・・・

(特に言及することがないので・・・ この通りにやれば誰でも出来ます。もし分からなかったら今度ある機能を設置しますのでそこで聞いて下さい)

最後に記事下に設置したい表示です。

 

関連ページの表示

これは3つの中から非常に悩みました。最終的にはこのMilliard関連ページプラグインについてにしました。実はこれ結構大事な設定だと思っています。記事を読んでいる方は基本 目で追う箇所はずっとスクロールしていく下の方だけなので、読んでいる途中サイドバーを気にかけてくれることはあまりありません。

そして読み終わったあとに皆さんならどうしますか?

  • すぐにページを閉じる
  • その画面で表示されているリンクをクリック
  • ページ上の方へ戻る
  • ページ下の方へさらにスクロールさせる

僕は割合的に高いのはページを閉じます。その次はとにかくページの一番下までスクロールさせることが多いです。なのでここでおまけを用意しておけば、別の記事も気にしてもらえるということになります。継続的な読者を捕まえるいい機会ですので設定しておくことをオススメします。

 

f:id:RyuNoSuKe:20150614120638p:plain

 

f:id:RyuNoSuKe:20150614145424p:plain

f:id:RyuNoSuKe:20150614150030p:plain

あとは生成したコードを デザイン/カスタマイズ/記事/記事下 にペーストします。

そうすれば、以下のように表示されます。

f:id:RyuNoSuKe:20150614163659p:plain

注意

表示されるのには10分から20分は掛かるそうなので、待ちましょう。(ここまではテキストのみ)サムネイル(画像)が表示されるのはさらに3、4時間掛かるとありますので、設定したら1日ぐらい様子をみた方がよいかもしれません。

もう1点は利用する場合はこの留意点に同意されたものとなります。

Milliard関連ページ留意点 | シスウ株式会社

以上になります。

 

こちらのツールはカスタマイズも可能となっています。こちらです。

corp.shisuh.com

 

まとめ

今回は上下とサイドのカスタマイズでした。これである程度の形は整いましたが、このカスタマイズシリーズはまだまだ続きます。目標は「モウ コレ ハテナ ブログジャ ナイ」(なんで片言?)と思ってもらえるようにすることです。

「そんなことやってる暇があったら記事書いた方がいいんじゃない?その方がコンテンツとしてググ神様から高い評価を受けることできるじゃん!」と考えもしますが、やっぱり仕事にもつながる器(サイト)を作ることが出来る技術を優先させたいのですよ。