マツバギク雑記

書きたいことを書くブログ

【個人的】はてなブログのカスタマイズまとめ

スポンサーリンク

 

今回は私が個人的にしたはてなブログのカスタマイズを紹介します。また今後もカスタマイズして見やすくする予定です。

f:id:hiro325636:20190822154659j:image

正直に言うと自分自身がどのようなカスタマイズしたか忘れない為にこの記事を書いている部分もあります。

 

カスタマイズまとめ

ここからはサクサク紹介していこうと思います。ちなみに私はコードは初心者なのでコピペするくらいしかできません。

 

テーマストア

まず最初にはてなブログを始めたらいじってみたくなる部分ですね。私は何となくでBrooklynにしました。他にもさまざまなテーマがあるので自分にあったものを試してみて下さい。

テーマストア

blog.hatena.ne.jp

Brooklyn

blog.hatena.ne.jp

 

まずBrooklynを導入してデザイン→スマートフォン→詳細設定→レスポンシブデザイン

 

スマホにも反映されるようにします。これでPCもスマホも同じような設定になります。

 

読者登録ボタン

これは下記を参照にして作成して下さい↓↓↓

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG

 記事下にコードを貼り付けました。

 ※Brooklynを導入してる方は参考になります。

シェアボタンの設置

通常のものだと重いらしいので設置。たまに他の人のブログではてブだけ出るまで時間掛かるときあるがそれ以外は普通に出る印象。通常のほうがはてブされやすいような気もする。

こちらも下記を参照にして作成して下さい↓↓↓

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG

記事上と記事下にコードを貼り付けました。これに伴い通常のシェアボタンは削除しました。

 ※Brooklynを導入してる方は参考になります。

 

見出しの色を変更

通常のBrooklynでは黒を基調にした見出しなのですが枠の色を青に変更しました。本当は見出しごとに違うデザインにしようと考えたがテーマの見出しを消す?ようなコードを貼り付けて新しい見出しコード入れてもうまく反映されず枠の色を変えて妥協した。

 

蛍光マーカーの設置

太字にした場合にこんな感じになるようにしました。はてなブログ 蛍光マーカーで検索して下さい。色は自分の好きな色のコードを探してみて下さい。

 

目次の変更

目次もブログの上を見てもらうと分かるように変更しています。目次も好みがあると思うので自分にあったデザインを探してみて下さい。

 

引用デザイン変更

引用もたまにしか使用しないがいちよ変更しました。これは後からデザイン変更する可能性あり。

 

パンくずリストの一部削除

SEO対策効果があるらしいので実感は感じないが一部削除して見やすくした。

 

はてなブログPRO側の設定

◇トップページの表示形式を一覧形式にする。

◇記事にキーワードリンクを付与しない

◇はてな広告を表示しない

◇ブログにヘッダを表示しない

◇ブログにフッタを表示しない

 

ひとまずカスタマイズしたのはこれくらいだと思います。

 

コードの注意点

  コードが増えていくと何のコードが分からなくなる時があります。そうならないようにコードの前と後ろにタイトルを書くことをおススメします。

/*引用デザイン--ここから↓↓↓--*/

コードを書く

/*引用デザイン--ここまで↑↑↑--*/

こんな感じですね。あとはコードをメモ等に保存することもおススメです。

 

もう1つはコード反映されてるかチェックするためにサブブログを作ることです。ブログでコードを試してみて変な不具合が起きる可能性もあるのでサブブログで試してみて問題ないならブログに反映するのが安全です。私はこのような方法でやっています。

 

おまけ速度改善

おまけと言っては何ですが本来はブログを見やすく読み込みが速いブログにという事を目標にブログ改善を始めました。

 

読み込みが速いとSEOに良いらしいと聞いたのですがはてなブログは重いと言われているそうです。

 

速度計測ツール

PageSpeed Insights

 

モバイル速度

f:id:hiro325636:20190822135833j:image

 

パソコン速度

f:id:hiro325636:20190822135847j:image

 

です。重くなる要因の1番は広告です。かといって広告を消すわけにはいかないです笑

 

ツールによって速度結果も違うので正直この結果が一概に良いか悪いか分かりません。コードも圧縮して軽くできるらしいですがやる気が起きないのと知識が乏しいのでやりたくないです。

 

他のはてなブログの方を勝手に速度測定しましたがモバイル速度はどれもこの程度ですし計測タイミングで上げ下げするのでうーんといった感じです。このツールだとモバイル速度は良くて50以上のブログもありました。

 

はてなスターを消すのは多少効果あると思います。けどはてなブログ感が消えます。

 

最後に

もっとブログの読み込み速くできる方法を知ってる方は教えて欲しいです。途中で速度改善が嫌になり妥協しました。

 

今回ですが自分のコードを貼らなかったのは失敗した時の責任が持てないからです。興味がある方は検索して自分にあったカスタマイズのコードを探して下さいね。

 

最後まで読んで頂きありがとうございます。