🚗  2021年 ワードプレスを開設しました!    🚕  WordPressの使用テーマは「SWELL」です   🛳 ⛴ 趣味や日常のことを書いています      🚴‍♀️    🚴‍♂️

はてなブログでデザイン変更したこと(備忘録メモ)

f:id:heiwazimalove:20200917104632p:image

はじめに

 ブログを初めて約4年。本業の仕事が忙しく更新がかなり不定期でブログデザインもほぼ初期設定のままでした。今回は休みを丸1日使ってはてなブログでデザイン・仕様をどのように変えたか?の個人的な備忘録メモを7つほど書きます。

 

  • ①広告などを中央揃えにする
  • ②読了時間(この記事は何分で読めます)
  • ③上に戻るボタンを導入
  • ④グローバルメニューを導入
  • ⑤太字・斜線ボタンでラインマーカーを引く
  • ⑥更新日時表示機能を追加
  • ⑦カテゴリーを階層化
  • さいごに
  •  

     

    今使っているはてなブログのテーマは?

    改めて今使っているはてなブログのテーマを再確認。使用しているテーマは「DUDE」です。はてなブログを開設した2016年当初、オシャレなデザインに惹かれ今日まで使用し続けています。シンプルで使いやすいです。欠点はスマホなどレスポンシブに対応していないことでしょうか?

    blog.hatena.ne.jp

     

     

     

    ①広告などを中央揃えにする

    「Random Life Blog」さんの記事を参考にしました。

    これまでブログトップページ下の広告記事が微妙にずれていたのですが、

    広告を中央揃えにするコードをデザインCSSに貼るだけで改善されました。 

    randamlife.hatenablog.com

     

     

     

     

    ②読了時間(この記事は何分で読めます)

    こちらも「Random Life Blog」さんの記事を参考にしました。

    f:id:heiwazimalove:20200917105320j:image

    コードをはてなブログの設定画面の左メニューの【デザイン】、スパナマークの【カスタマイズ】、【記事】、【記事上】の記入領域にコピペするだけです。

     

    <script type=”text/javascript“>

    addEventListener(‘DOMContentLoaded’, function() {

    var wpm = 500;

    var length = $(‘.entry-content’).text().trim().replace(/[\n\r]/g,”).length;

    var message = ‘<p style=”font-size: 80%; color: #999999; text-align: right;”>この記事は約’+ Math.ceil(length/wpm) +’分で読めます。</p>’;

    $(‘.entry-content’).prepend(message);

    }, false);

    </script>

    randamlife.hatenablog.com

     

     

     

    ③上に戻るボタンを導入

     正直そこまで必要性はないかもしれませんが導入してみました。

     

    f:id:heiwazimalove:20200917110120j:image

     

     

    www.gipsyjazznyumon.com

     

     

     

     

    ④グローバルメニューを導入

     「Life is bitter」さんのブログ記事を参考にしました。

    2016年に書かれた記事で不安でしたがとても参考になりました。参考にした理由として同じテーマ「DUDE」を使用していたからです。

     

    f:id:heiwazimalove:20200917110042j:image

     

     他の方のオシャレでカラフルなグローバルメニューも参考にしようとしましたが、コードを借りても自分のブログでは上手く反映されないことが多く導入を諦めました。

     

    www.life-is-bitter.com

     

     

     

    ⑤太字・斜線ボタンでラインマーカーを引く

     他の人のはてなブログを見ていると、蛍光ペンで線を引いたような、、、これどうやっているのだろう?とずっと疑問だったのですが、無事に導入できました。今回は「ずぼらな夫婦の家づくり〜ウイザースホーム〜」さんの記事を参考にしました。

     

     斜線マーカーに関する記事は他にも書いている人が多くどれを参考にしようか迷ったのですが、設定>詳細設定>headに要素を追加、ととても簡単にできました。iPhoneにも対応していることがありがたかったです。

     

    www.mochi2neko-iezukuri.site

     

     

     

     

    ⑥更新日時表示機能を追加

    これが一番時間がかかりました。

    ブログ記事の作成日の隣に更新日を表示する、、、

    f:id:heiwazimalove:20200917110311j:image

    ここまでコードを貼るだけという簡単作業だったのですが、

    「GoogleSearch Console」に登録して「サイトマップを送信する」と、さらには更新日のアイコンを表示するために「Font Awesome」のアイコンフォントを実装するなど、初めてのことが多くかなり手こずりました。

     

    参考にしたのは「redoブログ」さんの記事です。懇切丁寧で非常に助かりました。

    redo5151.hatenablog.com

     

     

     

    ⑦カテゴリーを階層化

     「とよブロ」さんの記事を参考にしました。

    f:id:heiwazimalove:20200917110701j:image

    ブログを始めた当初はカテゴリーに分類する余裕はなかったのですが、

    記事が増えてきてカテゴリーをつけ始めるとどんどんごちゃごちゃになっていくという。カテゴリーを階層化にすることで、見やすく整理されました。

     

    toyotakyusyu.hatenablog.com

     

     

    さいごに

     休日に軽い気持ちで、はてなブログをいじろう!と実際に取り掛かったら休みが丸一日消えて焦りました。ですがお陰様で自分のブログがだいぶ進化したので頑張って色々変更・改善した意味がありました。先駆者の方々には感謝です。ありがとうございました!

     

     

     

     

    この記事が気に入ったら
    いいね または フォローしてね!

    よかったらシェアしてね!
    目次
    閉じる