先日、50記事投稿して思ったことという記事を書きました。当ブログはご覧の通りはてなブログで運営していますが、未だはてなpro契約はしておらず、ブログテーマ(ブログ全体のデザインのこと)も無料のものを使わせてもらっています。
2ヶ月前はとっちらかったデザインでしたが、いろいろこねくり回すうちに、無料ながらも少しは綺麗になったかなと思っています。
とは言いつつ、そろそろはてなpro契約を検討していて、いい節目だと思ったのでここまでブログに施したカスタマイズをまとめてみました。全て無料でカスタマイズ可能なので、興味のある方の参考になれば幸いです。
当ブログのデザインは、偉大な先人の皆様によって成り立っています。いつもありがとうございます。どれも素敵なデザインばかりなので、うまく活かせていない部分があれば僕のセンスの問題ですね笑
目次[表示]
ブログ全般
ブログ全体に関わるカスタマイズについてです。
1.ブログテーマ
CatNoseさん(id:tsukuruiroiro)が作成されたテーマ「DUDE」を使用させてもらっています
これ一発でかなりシュッとしたデザインに変更できます。ご本人のサイトで細かいカスタマイズについて解説いただいているので、上記リンク先を参考にして下さい。2.ブログのトップページを一覧表示にする
head要素内に以下の記事でご紹介いただいているJava Scriptコードを追加しています。
はてなブログ無料版でトップページ（表紙）に記事一覧を表示させる方法【Javascriptで転送（リダイレクト）】 - 広汎性発達障害の女がたまに毒を吐くブログ
トップページにアクセスがあったら、アーカイブページを表示するというコードになります。ただし記事中でも言及いただいておりますが、Googleからの評価が下がる可能性があるとのことです。はてなProであれば設定画面から記事の一覧表示設定が可能なので、無料版を利用している場合の方法ですね。
3.レスポンシブデザイン
レスポンシブデザインとは、スマートフォンで閲覧した際でもPCと同じデザインを表示する設定のことです。crullerさん(id:cruller)の以下記事を参考にさせていただきました。
はてなブログのテーマ「DUDE」をレスポンシブデザインに対応させる - cBlog
デザインCSSにコードを追記します。4.記事中の文言を動的に変更するJavaScript
これはお遊び要素です。こちらもhead要素内にJavascriptのコードを記述していて、関数だけ記事中で呼び出す形にしています。実はこれを利用して、自己紹介記事の冒頭挨拶文言を閲覧した時間帯によって変更しています。
まったく告知していないので気づいている人はいないと思いますけど笑
バリエーションは以下６パターンなので、奇特な方は全パターン探してみてください！
5:00〜8:59
9:00〜11:59
12:00〜13:59
14:00〜17:59
18:00〜23:59
0:00〜4:59
もしかしたらページ読み込み速度に悪影響があるかもしれないので、気になる方は実施しない方が良いです。
記事内の要素カスタマイズ
記事中のデザインなどについてCSSをいじっている部分です。
8.カエレバ・ヨメレバのデザイン変更
少しCSSに手を入れています。以下の記事を参考にしました。
ゆきひーさん(id:ftmaccho)
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
9.アプリーチの導入
アプリの紹介時に見栄えを良くするため、アプリーチを使わせてもらっています。
作者：まなしばさんの旦那さま
超便利！iPhoneアプリもAndroidアプリも両方紹介できるブログツール、アプリーチ | ままはっく
10.太字マーカー
<strong>タグで囲んだ文字を蛍光マーカーっぽくするデザインに変更しています。
ringocatさん(id:ringocat-note)
はてなブログで太字を蛍光マーカーでラインを引いたようにする方法 - ringocat note
11.引用ブロックの装飾
はてなブログのデフォルトの引用装飾をなんとかしたいなーと思い、以下の記事を参考に変更しました。
12.よく使うHTMLタグ
もはやデザインなのかわからなくなってきていますが、記事の区切りなんかに<hr>タグをよく使います。横に線が引かれます。↓こんな感じ
13.小見出し(h5)のデザイン変更
DUDEのデフォルトはこれ「」なんですが、これ「」に変更しました。
CatNoseさん(id:tsukuruiroiro)
コピペで始めるはてなブログテーマDUDEのカスタマイズ集！フォント・色から自分らしく - F Lab.
はてなブログのWebフォント一覧はこちらの記事を参考にさせてもらいました。
15.リンクを強調
リンクを枠で囲って強調するデザインを利用しています。
シロマさん（id:shiromatakumi)
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE
16.SNSシェアボタンのデザイン変更
SNSへのシェアボタンのデザインを変更しています。
shunさん(id:shun_prog0929)
コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜
17.各種フォローボタンのデザイン変更
サイドバーだけですが、はてな、Twitter、Feedlyのフォローボタンを追加しています。
ゆきひーさん(id:ftmaccho)
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
そのほか導入ツール
ブログのデザインではありませんが導入しているツール類についてまとめておきます。
18.Google Analytics
19.Google Search Console
40記事投稿したあたりで導入していたんですが、最近ようやく覗き始めました。記事ごとにアクセスされる検索キーワードを探っています。
まとめ
数えてみたら全部で19個、もっとあるかと思いましたが意外とこんなもんですね。今後もデザイン関連で変更があれば、備忘録も兼ねて追記していければと思います。
重ねて、素晴らしいCSSやツール解説記事を公開いただいている偉大な先人の皆様に感謝いたします。
ではでは。
