ブログデザインのカスタマイズ
ブログデザインを見直した時のことを記録しておきたい。 前後比較画像を記事の最後にまとめて掲載する。
テーマ選定
ブログテーマは以下のようなことを考えた上で公式にある "Report" を選択した。
- ダークテーマは目には優しいけれど、文字メインのコンテンツではどうしても暗い印象を与えるのでやめておく。
- テーマ自体に色や飾りが沢山使われていると記事側の色使いが難しくなるので、シンプルなものにする。
その上で、以下の部分は自分でカスタマイズすることにした。
- 今どきのデバイスではページ余白が多いので、有効活用したい。
- 字が小さくて疲れるため、大きくしたい。
- ソースコードの引用が見にくい。コピーも簡単にできるようにしたい。
- 記事の作成日とは別に、更新日を表示したい。
- 脚注をつけたときに、それを章として独立させたい。目次にも追加したい。
- スマホ閲覧時の見栄えも考えたい。
記事幅の調整
今どきのデバイスではページ余白が多いので、有効活用したい。 カスタムCSSに以下の記述を追加した。 変更箇所はブラウザの開発者ツール(F12キー)を使って自力で探しているので、他のテーマでも同じでよいのかは未検証。
なお、コメントアウトされている部分はテーマのデフォルト値。
/* 全体幅 */ #container { width: 95%; /*width: 980px;*/ max-width: 1110px; } #main { width: 100%; /*width: 640px;*/ max-width: 100%; } /* 記事幅 */ #wrapper { width: calc(75% - 50px); /*calc((100% / 12) * 8);*/ max-width: calc(1110px - 300px - 50px); /*calc((100% / 12) * 8);*/ } /* サイドバー幅 */ #box2 { width: 25%; /*width: 280px;*/ max-width: 300px; /*calc(((100% / 12) * 4) - 50px);*/ }
僕は普段 Web アプリをあまり触らない人なので、書き方の適切さは怪しい。 意図としては、テーマのデフォルトよりは横幅使ってほしいけれど、あまりにも長いと目線が左右しすぎて辛いのでほどほどに。
文字サイズの調整
字が小さくて疲れるため、大きくしたい。 記事幅と合わせて、1行あたり40文字前後で読めるとよい。 これもブラウザの開発者ツールで該当箇所を探しながら調整。
/* ブログタイトルフォントサイズ ======== */ #title { font-size: 30px; /*font-size: 24px;*/ } /* ブログ概要フォントサイズ ======== */ #blog-description { font-size: 18px; /*font-size: 12px;*/ } /* 記事日付フォントサイズ ======== */ .date { font-size: 90%; /*font-size: 13px;*/ } /* 記事タイトルフォントサイズ ======== */ .entry-title a { font-size:25px; /*font-size:20px;*/ } /* 全体フォントサイズ ======== */ .entry-content { font-size:18px; /*font-size:14px;*/ } /* 章タイトルフォントサイズ ======== */ .entry-content h3 { font-size:130%; /*font-size:140%; = 20px*/ } /* コードブロックフォントサイズ ======== */ pre.code { font-size:15px; }
本当は全体的に相対値でサイズを決めたいとは思いつつも、テーマのデフォルトで px 指定になっている箇所が結構多く、 調整に時間がかかってしまいそうなので一旦リテラル値で指定しておくことにした。
コードブロックのデザイン改善
ソースコードの引用が見にくい。コピーも簡単にできるようにしたい。 これは先行で実施している人が数多くいるので参考にさせていただく。 *1 *2 *3 *4 *5 *6
整理すると、フッタHTMLに入れたJavaScriptとカスタムCSSを使って以下のことをやっている。
- シンタックスハイライト(色付け)表示する。
- 奇数行・偶数行で背景色を変える。
- 横スクロールできるようにする。
- コピペボタンをつける。
- 行番号と縦線を入れる。
- 冒頭に言語ラベルや任意のラベルをつける。
- 配色を調整する。
複数のサンプルコードを参照しているため、多少リファクタリングをしているが、 基本的には組み合わせただけなので、全体的なソースコードは割愛して、以下には注意点だけ記載する。
行番号の追加はコピペボタンの追加よりも先に実行
コピペボタンはコードブロックの末尾に要素を追加しているので、 行番号追加を後から行うとそこを巻き込んで1行余分に出力してしまう。 先に実施しておくほうが楽。
// イベントの購読 window.addEventListener('DOMContentLoaded', () => { /* その他の処理…… */ addLineNumber(); // 行番号の追加 addCopyButton(); // コピペボタンの追加 /* その他の処理…… */ }, false)
偶数行背景色の横スクロール対策
参考元のコードをそのまま組み合わせると、偶数行の背景色変更が横スクロールした先で途切れてしまう。 対策としてマージンの調整と、予めコードブロック内のリストの幅を大きめに取ることにした。
pre.code ol{ margin-top: 0; margin-bottom: 0; width: 1980px; /* 予め幅を取る */ } /* マージン、パディング調整と、データラベルなしでもスタイルを有効化する */ .entry-content pre.code/*[data-label]*/ { position: relative; margin: 0 0 1.5em 0; padding: 2em 0em 1em 1em; /* 1.6em 1em 1em; */ }
更新日の表示
記事の作成日とは別に、更新日を表示したい。 これは2つ方法があるようだった。僕はアクセス負荷の小さい方を選んだ。 *7
ただしこの方法だと個別記事のページでしか更新日の情報が取得できない。 ブログトップページなど情報取得できないケースの場合はエラーとなるため、回避処理を追加した。
function addUpdateDate() { let dateModified = "9999-99-99" let script = document.querySelector('script[type="application/ld+json"]'); // ブログトップでは日付情報が取れないので回避 if(!script) return; let jsonld = JSON.parse(script.innerHTML); dateModified = jsonld.dateModified; var time = document.createElement('time'); var lastmod = dateModified.substr(0, 10); time.innerText = lastmod time.setAttribute("datetime", lastmod ); time.setAttribute("dateModified", "最終更新日:" + lastmod); time.className = 'lastmod'; var date = document.querySelector('div.date'); date.appendChild(time); }
脚注の章化と目次への挿入
脚注をつけたときに、それを章として独立させたい。目次にも追加したい。 開発者ツールで見ながら挿入箇所を検討して、以下のようにした。
// 脚注にh3タイトル追加 function addReferenceTitle() { //<h3 id="参考文献・脚注">参考文献・脚注</h3> let h = document.createElement('h3'); let txt = "参考文献・脚注"; h.innerText = txt; h.setAttribute("id", txt); let ref = document.querySelector('.entry-content div.footnote'); ref.prepend(h); // 目次にも追加 <a href="#参考文献・脚注">参考文献・脚注</a> let a = document.createElement('a'); a.innerText = txt; a.setAttribute("href", "#" + txt); let li = document.createElement('li'); li.appendChild(a); let toc = document.querySelector('.entry-content ul.table-of-contents'); if(toc) toc.append(li); // 目次がない記事を想定 }
スマホ表示対策
この手のブロクをスマホで見ることは個人的にはあまりないものの、 最近は無視する訳にもいかなくなってきたので、ある程度体裁を整えておきたい。
はてなブログのデフォルトではPC用とスマホ用のデザインは別れているのだが、 そのままだと二重管理になるのと、スマホデザインのカスタマイズ柔軟性が低い。 そのため、素人ながらなんちゃってレスポンシブデザインに挑戦する。 *8
はてなのレスポンシブデザインは管理画面で有効化すると使えるが、テーマによって対応状況が異なる。 "Report" は非対応なので、自力で頑張る。
/* 共通の設定 */ #container { /* 先に調整済みのものを使う... */ } #main { /* ... */ } /* レスポンシブ調整 */ /* 画面幅1120px以上(PCなど想定) */ @media screen and (min-width: 1120px) { /* 1140px がよく使われてそう */ #wrapper { /* PC側設定は先に調整済みのものを使う... */ } #box2 { /* ... */ } /* ... */ } /* 画面幅1119px以下(スマホなど想定) */ /* 右にあったサイドバーを下へ持っていく */ /* フォンドサイズはPCの1.25倍くらいしておく */ @media screen and (max-width: 1119px) { #wrapper { width: calc(100% - 5px); max-width: (100% - 5px); } #box2 { width: calc(100% - 5px); max-width: (100% - 5px); margin-left: auto; margin-right: auto; float: none; font-size: calc(14px * 1.25); } /* その他フォントサイズ設定... */ }
一応自分のスマホ(2021年発売の Android )ではそこそこの見栄えになった。 古いスマホだと解像度が小さくなるので字が大きすぎるかもしれない。
この方法の欠点として、はてな管理画面のデサインプレビューや記事編集画面のプレビューではスマホデザインで表示される。 真面目に調べれば何かしら対策も出来そうだが、あまり支障が無かったので放置している。
前後比較
デフォルトの "Report" テーマとカスタマイズ語でキャプチャをとったので掲載する。
*1:ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ https://help.hatenablog.com/entry/markup/syntaxhighlight
*2:はてなブログで技術ブログを書くための技術 - ムニエルブログ https://blog.munieru.jp/entry/2020/03/26/220517
*3:はてなブログのコードブロックを”クリップボードにコピーする方法”について - じゃあ、おうちで学べる https://syu-m-5151.hatenablog.com/entry/2023/05/09/181943
*4:はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する - たねやつの木 https://www.taneyats.com/entry/change-embed-code-theme
*5:【はてなブログ】ソースコード表示に行番号を付ける方法 – Plane Note https://note.z0i.net/2018/03/hatena-syntax.html
*6:【はてなブログ】コード部分に行番号を表示するカスタマイズ - そういうのがいいブログ https://souiunogaii.hatenablog.com/entry/hatenablog-codeline
*7:【はてなブログ】最終更新日を追加する方法(短くて簡単!コピペでOK)CSSとJavascript利用 - バンビの初心者ブログ教室 https://www.bambi.pro/entry/hatenablog-datemodified
*8:レスポンシブデザインとは実装のメリット・デメリット、作り方について解説 | WEB集客ラボ byGMO(GMO TECH) https://gmotech.jp/semlabo/seo/blog/responsive_design/