はてなブログ PR

ブログのお手入れ&実装したカスタマイズの参考ブログをまとめてみた

ブログのお手入れ&実装したカスタマイズの参考ブログをまとめてみた-アイキャッチ
記事内に商品プロモーションを含む場合があります

ブログ開設をしてとっくに1年が経過(たしか3月頃)、そしてProに変更して1年が過ぎました。

これまでいろいろブログのカスタマイズをしてきましたが、ちょっと気になっていたことなどが、はてなブログ側の開発で解消できそうだったので、すこ~しいじってみました^^

また、併せて今までのカスタマイズで参考に、そしてまるっとコピペさせていただいたブログ様を一部ご紹介などしてみようと思います。

ブログのトップページを一覧表示にする

数日前に、はてなブログ開発ブログで発表がありましたが、まさにこれ!なんで今までしてくれなかったの~!って設定です。

staff.hatenablog.com

人様のブログを見る時に感じるのは、興味のある記事や、すでに目的の記事が決まっているとき、全文表示されるのは本当に苦痛だということ。

はてなブログは記事上に記事間・ページ間移動用のリンク(前の記事へとか、前のページへとうリンク)がないので、いちいち記事の最後までいかないといけないのですよね~(-_-;)本当、不親切だなぁと。

そんな思いもあり、自分のブログを訪れてくださる方には不自由な思いをさせたくないと、なんとかカスタマイズで加えたかった。
でも私ごときの知識では無理だったため(一応あれこれ試したのですよ…)、「続きを読む」を挿入することで全文表示を避けていました。

ということでこの新システム、とりいれました!

トップページがすっきりして見やすい。お目当ての記事も探してもらいやすくなったと思います!単純に、デザインとしてうれしい!

Google AdSenseを自動挿入

ついでに、アドセンスの自動挿入も「続きを読む」をいれないと表示されないものを使用していたので、変更しました。

参考にさせていただいた(というかまるっとコピペです)のはこちら。

▷ 【本当にコピペ一発!】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 – UXエンジニアになりたい人のブログ

個人的に、真剣に読んでいる最中である本文中に広告が入るのが、すごく苦手。

自分が苦手(むしろ不快)なことは人様にしたくないので、私が記事内でアドセンス広告を入れているのは記事冒頭の一つ目の大見出しの前だけです。そのほかは、タイトル下やサイドバー、記事の下だけ。

自分の記事を読んでもらっている時に、別なものに邪魔されたくない・・・。

邪魔という意味では、最近アドセンスのスマホに出るアンカー広告(フッターのところからニョキっと出てくる広告)が、なんだか大きくなって悪質な雰囲気を出しているので、これもいったん設定から外してみました。

あとはモバイル全画面広告は一度も設定していません。
あれ、かなりイラっとします。

アドセンス広告:不快なエロ・グロ系漫画広告をブロック

さてここからは、過去に行ったカスタマイズのご紹介。

まだ最近行った設定ですが、とてもスッキリしたこと。これはぜひみなさんやってほしいです。

▷ 百害あって一利なし。不快な広告をブロックしたらスッキリ。ブロックその後の効果。 | ゆるりまあるく

アドセンス広告で非常に高確率で表示される漫画系広告。
もうほんの数コマなのに、グロかったりエロかったり、さらには人権どこいった!?みたいなひどいものまで。
なんでこんな不快なものを広告に使うのかわかりませんが、とにかく嫌だった。

それが非表示設定できるなんて!うれしい~!
あんな広告、私のサイトに来てくれている方が目にするのは耐えられません!

下記のブログを参考に、私も漫画系広告は全非表示設定しました。
今のところ、自分のブログを見ているときには表示されていないので、効果あったと思います。

なごみさんも!表示されてないですよ~♡

▷ 漫画系のアドセンス広告が気持ち悪い!ブロックする方法(Google Adsense)

 

最終更新日の表示

WordPressなどで作成している人は、なんだか見やすく可愛らしく設置されている「最終更新日」の表示。設置当時、はてなブログのカスタマイズでは全然見つけられなかったのです。

なので、色々試した挙句、現在使用させていただいているのはこちら。

▷ はてなブログで記事の最終更新日時を表示する – すなばいじり

とっても便利です。たとえ過去記事であっても、リライトしていればそれが表示される為、放ったからかしの記事じゃないと認識してもらうことができる、大切なポイントだと思っています。

ただし、フォントサイズなどタイトル周りと合わせるカスタマイズができなくて(本当はできるかもしれないのですが、私にはできないという意味)、ちょっと違和感はあるのです。
でもその違和感を上回る利があると踏み、使用中。

いつかはてなブログの設定で、表示されるような変更をしてもらいたいなぁ。。。

追記:2017.6.4

なんと言及させていただいたつばささん(@_tsubasa123_)が、最終更新日の表示カスタマイズの他例を教えてくださいました。これは!と早速試してみました。

参考ブログはこちら。

▷ リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ – つばさのーと

私が導入したのは、AMP使用タイプのもの。

記事上に挿入していた「すなばいじり」さんのJavaを、つばさのーとさんのものに書き換え。さらにCSSには、公開してくださっているコードを追加。

するとこんな変化が!(フォントカラーやサイズはいじってます)

【変更前】

【変更後】

おわかりでしょうか?

シェアボタンの下に最終更新日が表示されていたのが、投稿日の横にぐるっとまあるい矢印アイコンと共に最終更新日が表示されました!ありがとうございました!

ちなみに、DUDEのデフォで入っていた投稿日のつく時計のアイコン、消さないと2つ並んでしまいますので、カスタムする方はお忘れなく~!

CSSの元に飛んで「date:before」のコードを拾ってきて、自分のCSSカスタマイズ部分に「content: none;」をつけてあげればOKです。

(すごい雑な説明でごめんなさい。うまく説明できるほどの知識がなく…。いつもなんとなくの直感でカスタムしているので、私のCSSコードはきっとぐちゃぐちゃです(;’∀’))

まだフォントが揃ってないのですが・・・もう力尽きました。
またそのうち直し方を探ります。
そしてスマホの方にもなんとか設定できました。ふぅ。

 

太字を蛍光ペン風に

やっている方も多い、蛍光ペン表示。単なる太字にするよりもぱっと目に入るし、なんとなく画面も華やぐと思い、私も導入しています。

参考にしたのはこちら。

▷ コピぺでOK!CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 – North-Geek

 

記事下の関連記事表示にMilliardプラグイン

記事下の関連記事表示を、見やすくそれなりの数を表示したいと思い、参考にしたのはこちら。

▷ Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました – Yukihy Life

プラグインを導入し、さらにそれを2列表示するという合わせ技です。
すごい!!!まるっとコピペで使用させていただきました。

 

DUDE使用でも全画面のヘッダ画像表示をしない

当ブログ、PCのデザインは人気ブログテーマのDUDEを使用しています。

▷ DUDE – テーマ ストア

だいぶ雰囲気が違うのは、ヘッダー画像を全画面表示しない設定にしているからだと思います。
後述するメニューバー設置との兼ね合いもあり、任意の表示サイズにしたかったのですが、それがなかなか面倒で、最終的にこのブログを参考にした方法で落ち着きました。

▷ はてなブログのヘッダー、タイトル画像の設定について – Hatena Blog Theme Custom

 

一目でわかるメニューバーを設置

PCのトップページに表示されるメニューバー。
以前はドロップダウンのものを設置していたのですが、途中で現在の簡易なものに変更しました。

というのも、もし自分が偶然行き着いたブログで、マウスオーバーしてまでその人の書いてるカテゴリに興味を持つかというと、そうでもないことに気づきました。
なので、ぱっとみて当ブログを構成しているカテゴリーをわかってもらえ方がいいかなと。

カテゴリーが多くプロフィールなど含め3段になってしまうため、すっきりしたデザインを心がけました。

 はてなブログに簡易メニューバーを追加 – maroom 記事が非公開になりました(2018.12.12確認

 

プライバシーポリシーの表示

なんだか小難しくて手を付けていなかったプラバシーポリシー。
そろそろしっかりやっておかないといけないかも?と思い、サイドバーに設置しました。

細かいことを教えていただいたのはこちらのブログ。

▷ Googleアナリティクスだけしか使ってなくてもプライバシーポリシーを設置しなくてはいけない – シロクマは冬眠したい

実は私、アナリティクスの登録?はしてあるけれど、全く見ていないですけどね。
完全に、書きたいことを書きたいタイミングで書いているだけの、戦略ナシへなちょこブログです(-_-;)

 

さいごに

なんとなくわりと最近やったかな~とか、記憶に残っていてはてブしてるようなブログ様はこれぐらいかな?
本当はもっといろいろ拝見させていただいたうえでアレコレやっている気がするのですが・・・。収集つきませんのでこれぐらいに。

中身は充実していない当ブログですが、来ていただいた方に楽に見てもらえるよう、自分なりの工夫をしてきました。
これからも、なにか不便に感じたら、手を加えていきたいと思います!

弱小ブログですが、よろしくお願いいたしますm(_ _)m

【追記あり】ブログテーマを「Minimalism」に変更。実装したカスタマイズいろいろまとめ。先日のこと。ブログテーマを、こどみすさん(id:codomisu)のMinimalismに変更しました。初のレスポンシブテーマでまだまだ...