/* レスポンシブフォント登録*/

気ままにシズオさんブログ。

気ままにシズオさんブログ。Since 2016.

,

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

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

 

 

さいごに

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

 

 

 

 

Copy rgba(255,153,255,1) rgba(252,252,84,0.8) rgba(102,255,204,1) /*カテゴリー階層化*/