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

PHOTO for LIFE

カメラ初心者がストックフォトやカメラや写真について書いてます

はてなブログのカスタマイズについて

ブログ

f:id:stockphoto-info:20160623160404j:plain

今日は私がこのブログにしたカスタマイズの一部を紹介したいと思います。

過去にちょっとだけWEB制作に携わっていましたが、そんなに大きな案件をする様な仕事ではなかったため、出来る事は少ないんですが、色んな情報を参考に少しずつカスタマイズしています。

そんなレベルなのでたいした事は書けませんが、以前、matka(id:matka1014)さんから「人気記事一覧」の出し方が知りたいとのブコメを頂きましたのでご紹介したいと思います。
matka(id:matka1014)さんブログに書くネタを頂きありがとうございます。

6/25 0:17追記しました

人気記事一覧の出し方

人気記事一覧は、私のブログ記事のタイトル下のシェアボタンの下に記載しています。

f:id:stockphoto-info:20160623105021p:plain

この3つの記事のリンクなんですが、ブログのパソコン用・スマホ用それぞれに直接htmlコード書いています。

色んなブログを見てページ上部にこのようなリンク一覧があったのを見て、ページ回遊率がすこしでも増えればと思いカスタマイズしました。

デザインテーマによっては最初から組み込まれている物もあるようですが、私が使用している「blank」ではその項目が見当たらないし、リンクの内容はそんなに頻繁に変更しないだろうし、実験的なカスタマイズという事もあり、手っ取り早く直接テンプレートに書き込む事にしました。

リンク先のページは、私の記事の中でアクセ数やブクマ数、キーワード、アクセスを回したいページ等から総合的に判断して記事を自分で選んでます。自動じゃありません。

こんな内容ですが、参考になれば嬉しいです。

htmlコード

 

gist.github.com

上記コードをパソコン用、スマホ用それぞれに追加します。私は両方とも記事上に追加しています。

href="#"の#をページURLに、「タイトル」の文字を各ページタイトルに書き換えます。

 

CSSコード

gist.github.com

上記CSSは私の設定ですのでそれぞれのブログデザインに合わせて変更してください。ちなみにp.push-tは中見出しと同じデザインにしています。

 

 

この記事一覧を導入した時は何も考えず、何も調べずちゃちゃっとやりました。他にいい方法を見つけた時に書き換えれば良いやという軽い気持ちです。
あくまで私がやってる方法なので、これがいい方法なのか分かりません。その内変更すると思うのでその時は改めてご紹介します。

最近知った他の方法

サイドバーモジュールを使った方法もあるようです。

www.dreamark.tokyo

はてなブログのデザインテーマも制作されているDREAMARK(id:dreamark)さんの方法が良さそうです。やはりプロはやる事が違いますね!!

このやり方の方が変更する時は楽かもしれません。
まだ試してはいませんが、次に修正する時はこの方法にしてみようと思ってます。

 

ここまでがmatka(id:matka1014)さんに質問頂いた内容で、ここからは私がしたカスタマイズについてちょっと紹介します。

スマホ用の下部固定メニューについて

スマホ用のデザインで固定メニューを取り入れてます。
このメニューは、沢山の素晴らしいカスタマイズ方法を公開しているゆきひーさん(id:ftmaccho)の記事を参考にしています。

www.yukihy.com

下記画像の黒いメニューです。

f:id:stockphoto-info:20160623115255p:plain

 

素晴らしいメニューなんですが、そのままのCSSだとちょっと表示がおかしくなる所がありました。

はてなスターの所にメニューがくると、メニューの上にはてなスターが表示されてしまいます。こんな感じ。

f:id:stockphoto-info:20160623115657j:plain

 

この重なり順は、CSSのz-indexの指定で行います。調べた所、ユーザーアイコンがz-index 10、スター画像がz-index 11となっていました。

この2つより上の数字を指定してあげれば解決です。

元コードのCSSを見ると#menuのz-indexは10となっていました。これを12に変更します。

すると重なり順が修正されきちんと表示されるようになります。

 

目次について

目次もよく使っています。
目次のカスタマイズはナカムラ(id:sys_nakamura)さんの記事を参考にさせていただきました。

www.nakamu.info

このままでほとんどOKなのですが、私のデザインテーマの場合、スマホで見たとき左側に隙間が出てしまいます。こんな感じ。

f:id:stockphoto-info:20160623152157j:plain

 

これを無くすために元コードの.table-of-contents内に「margin:10px 0 !important;」を追加しました。すると左右一杯に広がり隙間がなくなります。

f:id:stockphoto-info:20160623152953p:plain

 

 

最後に

以上はてなブログのカスタマイズについてでした。

本当はもっとカスタマイズしたいのですが、一度やりたい事をまとめて、一気にカスタマイズしようかと考えてます。

それでは。

 

追記

id:msnkiさんから「もともとあったブクマを消すにはどこを消せばいいのでしょうか」とのご質問を頂きましたのでお答えさせていただきます。

たぶんもともとあったブクマとは、標準のブックマークするソーシャルボタンの事だと思いますが、それなら「デザイン」から「カスタマイズ」→「記事」の箇所のチェックマークを外せば消えます。

f:id:stockphoto-info:20160625001557j:plain

変更後は保存を忘れずに。

 

違う場所の事言ってたらすみません。
コメントで頂ければ分かる事でしたらお答えさせていただきます。