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

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

ブログ

スポンサーリンク

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

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

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

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

人気記事一覧の出し方

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

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

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

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

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

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

htmlコード

 


gist.github.com

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

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

 

CSSコード


gist.github.com

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

 

 

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

最近知った他の方法

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

Link【コピペで簡単】はてなブログ公式の関連記事モジュールを記事下に表示させる方法。 – DREAMARK

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

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

 

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

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

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

Linkはてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life

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

 

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

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

 

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

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

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

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

 

目次について

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

Link【はてなブログ】記事内に挿入できる目次のレイアウトを CSS で変更する – ヒトリジョーシス 原宿ベース

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

 

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

 

 

最後に

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

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

それでは。

 

追記

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

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

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

 

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

ブログ

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

【レンズ沼】カメラにまつわる「沼」の話【カメラバッグ沼】

カメラを始めると必ず出会う事になる「沼」。 一度ハマってしまうと無事生還する事が難しいと言われる沼は、大小含めると数百はあると言われています。(多分) 今回は、字面からマイナスなイメージ満載の「沼」に […]

【お知らせ】IN MY LiFEのバナー画像を作ってみました

先日作った無料素材サイトIN MY LiFEのバナー画像を作ってみました。 オープン初日から皆様のご支援を頂いているサイトですが、更に複数の方から「バナー画像があればブログに貼りますよ」とありがたいご […]

はてなブログからWordPressに引っ越しました

本日2/27より約11ヶ月お世話になったはてなブログからWordPressに引っ越しました。 移行作業自体は27日の0:00に行ったのですが、多分移行は無事終わっているようでアクセスも新サーバーに来て […]

このブログのアイキャッチ画像の作り方

id:varevoさんからブコメを通して質問いただいたアイキャッチ画像の作り方をご紹介したいと思います。 かっこいいとお褒めのお言葉を頂いたのですが、実はあまりたいした事をしていません。 フリー素材の […]


運営している素材サイトに新たな動きが...

今日、私が運営している無料素材サイトIN MY LiFEに新たに写真を追加しました。 バナーを張って頂いたり、ブログで使って頂いたり、ブログ上で紹介して頂いたり、皆様から力強いご協力を頂いているサイト […]

無料素材サイトIN MY LiFEを作ってみて

先日、私が公開した無料素材サイトIN MY LiFEの記事を書いた所、沢山のブックマークやシェアをしていただき、公開初日から沢山のアクセスを頂く事が出来ました。 皆さん、本当にありがとうございました。

実家の庭に咲く花

今日は、いつものストックフォトネタとは違い、実家の庭に咲いている花を紹介したいと思います。 車で10分くらいの場所にある実家。母がたくさんの花を植えてくれているので、よく撮影に行く場所の一つです。 今 […]

打ち上げ花火の写真を撮ってきました

7月16日土曜日に、妻の実家のある宮崎県えびの市で花火大会があったので、打ち上げ花火の写真撮影に挑戦してきました。 去年は失敗に終わった花火大会の写真撮影でしたが、今回はどうなったでしょうか。

お問い合わせプライバシーポリシー

©Copyright2017 PHOTO for LIFE All Rights Reserved.