先日、50記事投稿して思ったことという記事を書きました。当ブログはご覧の通りはてなブログで運営していますが、未だはてなpro契約はしておらず、ブログテーマ(ブログ全体のデザインのこと)も無料のものを使わせてもらっています。
2ヶ月前はとっちらかったデザインでしたが、いろいろこねくり回すうちに、無料ながらも少しは綺麗になったかなと思っています。
とは言いつつ、そろそろはてなpro契約を検討していて、いい節目だと思ったのでここまでブログに施したカスタマイズをまとめてみました。全て無料でカスタマイズ可能なので、興味のある方の参考になれば幸いです。
当ブログのデザインは、偉大な先人の皆様によって成り立っています。いつもありがとうございます。どれも素敵なデザインばかりなので、うまく活かせていない部分があれば僕のセンスの問題ですね笑
ブログ全般
ブログ全体に関わるカスタマイズについてです。
1.ブログテーマ
CatNoseさん(id:tsukuruiroiro)が作成されたテーマ「DUDE」を使用させてもらっています
これ一発でかなりシュッとしたデザインに変更できます。ご本人のサイトで細かいカスタマイズについて解説いただいているので、上記リンク先を参考にして下さい。2.ブログのトップページを一覧表示にする
head要素内に以下の記事でご紹介いただいているJava Scriptコードを追加しています。
はてなブログ無料版でトップページ（表紙）に記事一覧を表示させる方法【Javascriptで転送（リダイレクト）】 - 広汎性発達障害の女がたまに毒を吐くブログ
トップページにアクセスがあったら、アーカイブページを表示するというコードになります。ただし記事中でも言及いただいておりますが、Googleからの評価が下がる可能性があるとのことです。はてなProであれば設定画面から記事の一覧表示設定が可能なので、無料版を利用している場合の方法ですね。
3.レスポンシブデザイン
レスポンシブデザインとは、スマートフォンで閲覧した際でもPCと同じデザインを表示する設定のことです。crullerさん(id:cruller)の以下記事を参考にさせていただきました。
デザイン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をいじっている部分です。
5.パンくずリストの追加
はてなブログの設定に用意されています。[デザイン]-[スパナアイコン]-[記事]内にある「パンくずリスト」の項目にチェックを入れます。
6.目次のデザイン変更
はてな記法で[:contents]と入力すれば目次を自動生成できますが、デフォルトだとちょっと使い勝手が悪いです。
デザインがかっこよかったので以下の記事を参考にCSSいじっています。
えむしてっくさん(id:mshitech）
【CSS】コピペするだけ！「目次」をカスタマイズする方法 - えむしてっく
目次を[隠す]⇄[表示する]の動的な切り替えは以下の記事を参考にさせていただきました。
ゆきひーさん(id:ftmaccho)
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
8.カエレバ・ヨメレバのデザイン変更
少しCSSに手を入れています。以下の記事を参考にしました。
ゆきひーさん(id:ftmaccho)
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
9.アプリーチの導入
アプリの紹介時に見栄えを良くするため、アプリーチを使わせてもらっています。
作者：まなしばさんの旦那さま
超便利！iPhoneアプリもAndroidアプリも両方紹介できるブログツール、アプリーチ | ままはっく
10.太字マーカー
<strong>タグで囲んだ文字を蛍光マーカーっぽくするデザインに変更しています。
ringocatさん(id:ringocat-note)
はてなブログで太字を蛍光マーカーでラインを引いたようにする方法 - ringocat note
11.引用ブロックの装飾
はてなブログのデフォルトの引用装飾をなんとかしたいなーと思い、以下の記事を参考に変更しました。
引用タグ（blockquote）をCSSのみで装飾する | 賢威カスタマイズ研究所
こんな感じのデザインです。
背景色と左端ボーダーのデザインを少しいじっています。
12.よく使うHTMLタグ
もはやデザインなのかわからなくなってきていますが、記事の区切りなんかに<hr>タグをよく使います。横に線が引かれます。↓こんな感じ
13.小見出し(h4タグ)のデザイン変更
DUDEのデフォルトはこれ「」なんですが、これ「」に変更しました。
CatNoseさん(id:tsukuruiroiro)
コピペで始めるはてなブログテーマDUDEのカスタマイズ集！フォント・色から自分らしく - F Lab.
はてなブログのWebフォント一覧はこちらの記事を参考にさせてもらいました。
14.文章の囲み枠を追加
サイドバーの記事紹介や、記事本文中の囲み枠で利用しています。
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
サイドバーのボタンっぽいやつはこんな感じです。
自己紹介
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記事投稿したあたりで導入していたんですが、最近ようやく覗き始めました。記事ごとにアクセスされる検索キーワードを探っています。
追記分
初回投稿から追加したカスタマイズした分をここに追記していきます。
20.記事のカテゴリを階層化する
こちらの記事を参考に、カテゴリの階層化を行いました。カテゴリ整理は分類が難しいので、試行錯誤が必要ですね。
くおっとさん(id:WorldWorldWorld)
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
21.サイドバーにTwitterのタイムラインを埋め込み
Twitter公式からブログ埋め込み用のHTMLコードが取得できます。具体的な設定はこちらを参考にさせていただきました。
てつさん(id:mutant-tetsu)
はてなブログでtwitterをサイドバーや記事内に埋め込む方法 - MUTANT
まとめ
数えてみたら全部で21個、もっとあるかと思いましたが意外とこんなもんですね。今後もデザイン関連で変更があれば、備忘録も兼ねて追記していければと思います。
重ねて、素晴らしいCSSやツール解説記事を公開いただいている偉大な先人の皆様に感謝いたします。
ではでは。
50記事書いたあたりで、はてなpro契約を検討しようかと思ってきました。
tempo96.hateblo.jp
