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

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

ブログ

スポンサーリンク

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

過去にちょっとだけ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さんから「もともとあったブクマを消すにはどこを消せばいいのでしょうか」とのご質問を頂きましたのでお答えさせていただきます。

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

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

 

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

ブログ

スポンサーリンク

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

最新情報をお届けします

夜とカメラと職務質問

どうも、こんにちは。カメラも写真も大好きなストック(@stockphoto_info)です。 写真を撮りに出かけているとたまに警察の方から職務質問を受けます。 ネットを見ていると私以外にも職務質問を受 […]

実家の庭に咲く花

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

しぶんぎ座流星群の撮影に挑戦してみた結果。。。

先日のブログにも書いた通り、1/3は三大流星群のひとつ、しぶんぎ座流星群のピークを迎えました。 私も撮影に出かけタイムラプスを撮ってきました。 その結果がどうだったのか。。。を今回の記事にしたいと思い […]

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

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

宮崎県の高千穂峡、天岩戸神社、天安河原宮に行ってきました【写真多め】

お盆の連休中に、宮崎県高千穂町にある高千穂峡、天岩戸神社、天安河原宮に行ってきました。宮崎の観光スポットとして有名な高千穂峡が9/6までライトアップされているという事で、ぜひ写真を撮ってみたく家族で出かけてきました。

本当に感謝の気持ちで一杯です!!無料素材サイトIN MY LiFEで新しい動き...Part.2

前回、私が運営している無料素材サイトIN MY LiFEへ、はてなブロガーのmachoさんに写真を提供して頂いた記事を書きましたが、その記事から嬉しすぎてたまらない連鎖が発生しました。 神が神を呼んだ […]

【宮崎県】志布志湾大黒イルカランドと都井岬に行ってきました(写真大量)

八月に宮崎県串間市にある「志布志湾大黒イルカランド」と、日本在来馬として国の天然記念物に指定されている御崎馬(みさきうま)が見れる「都井岬」に家族と出かけました。 宮崎の八月は天気がぱっとしない日が多 […]

【宮崎県日南市】鵜戸神宮に行って写真を撮ってきました【写真大量】

先日、宮崎県日南市にある鵜戸神宮に行ってきました。 海岸沿いにある有名なスポットで景色も楽しめるおすすめな場所です。  

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

© 2017 PHOTO for LIFE