これまでのブログカスタマイズの記録。
今後、随時、施したカスタマイズを掲載する。
本記事の構成について
私のブログカスタマイズは多くが様々なサイトから転用・参考にしたものばかり。これらサイトの内容をそのまま記事にするのはマナー違反（ルール違反？）になるので、元となるサイトへのリンクを貼るのみに留める。その上で「はてなブログ」に応用するうえで必要なものを記載。
その他、私がネットで勉強したもの（グーグル先生！）はそのまま記載する。
前提
「 CSS とは？」、「 html とは？」など、基礎知識については省略。（膨大な量になるし、網羅できないし、そもそもうまく説明できないし・・・わからない場合はグーグル先生に質問！）
私は有料の「はてなブログPro」にしている。トップ画面は記事一覧を選択。その他、「記事本文にはてなブログ タグのリンクを付与しない」、「広告を非表示」、「ブログにヘッダ・フッタを表示しない」を選択。
デザインテーマは公式デフォルトの「Smooth」。レスポンシブなので、スマートフォンでも同じような表示になるよう、「デザイン」→スマホマーク→「詳細設定」→「レスポンシブデザイン」にチェックを入れている。
下準備
ブログカスタマイズをするうえで必要な CSS の編集。以下のサイトを参考にCSS をファイルにして編集、管理している。
また、CSS の編集には無料の「Visual Studio Code」（略してVS Code、もしくは単に Code）を使用。
精通している方は他のエディタを使っているかと思うが、色分け、自動補完など、素人には十分だと思う。
このほか、ブログの部品ごとに class や id を調べるために、html を保存し、中身を見てる。（いいのかな？）
カスタマイズ内容
ここからはカスタマイズの内容。CSS ファイルに記述した順番で記載。
フォントの変更
公式デフォルトのデザインテーマ「Smooth」のフォントは細く感じるので、以下のサイトを参考にフォントを変更。
フォントを「Google Fonts Noto Sans JP」*1、スタイルは「Regular 400」。
「はてなブログ」での利用方法は Google Fonts でフォント、スタイルを選択した後、右側「Use on the web」（ここが元記事とは違っていた）の「<link>」の html を、「はてなブログ」の「設定」→「詳細設定」→「<head>要素にメタデータを追加」に貼り付ける。
CSS には、先ほどの「<link>」の下「CSS rules to specify families」の内容を貼り付ける。
セレクタは「html, body」だけでは全てに反映されなかったので、必要な部品に適用されるよう、
html, body, h1#title, .page-entry, .blog-title-content, .entry-title, .hatena-module, .hatena-module-title {
font-family: 'Noto Sans JP', sans-serif;
}とした。
加えてブログタイトル「双子の島バナナ・マイクラ日記」（h1#title これが知りたかった！）と記事タイトル（.entry-title）を太字（font-weight: bolder）にした。
h1#title, .entry-title {
font-weight: bolder;
}記事一覧の説明文
記事一覧でそのままだと、記事の要約とタグが区別しにくいので以下の CSS を適用した。
.archive-entry-body .entry-description {
background-color:azure;
margin-left: 100pt;
padding: 10px;
border: solid 1px;
border-color: silver;
border-radius: 6px;
}背景色にある文字の色を変更
背景色が濃いので、その部分の文字を明るくした。
/* パンくずリスト 文字の色 */
.breadcrumb, .breadcrumb-link, .breadcrumb-child-link {
color:silver;
}
/* アーカイブの文字 */
.archive-heading{
color: snow;
}目次
以下のサイトを参考に目次を変更。
見出しの書式
大見出しの上下に線、中見出しの前に数字を追加。
見出しの前に数字を追加する方法は以下のサイトを参考にした。
/* 見出しの書式 */
/* 大見出し */
.entry-content h3 {
margin-top: 20px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 5px double skyblue;
border-bottom: 1px solid silver;
（中略）
}
/* 中見出し */
.entry-content h4::before {
（中略）
}
/* */行間を詰める
/* 行間を詰める */
.entry-content p {
margin-top: 5px;
margin-bottom: 5px;
}全ての画像を中央寄せにする
画像に対しては、他に以下の３点を施した。
- 写真が大きすぎるので幅を 75%。
- 小さい画面の場合、最小で 320px 。
- はみ出ないように最大で 100% 。
以下のサイトを参考にした。
なお、このページの最初の画像には、以下のクラス名 「top-img」を指定し、幅が 100% になるようにした。
/* トップの画像のみ 100% にする */
img.top-img {
width: 100%;
height: auto;
}トップに戻るボタン
右下にある上矢印のボタン。
スムーススクロール
滑らかにページ内を移動する。
記事下に空白を作る
ページ間を移動するボタンが下目一杯にくっ付いていたので、空白を作った。
/* 前のページ、次のページ */
.pager {
margin-bottom: 10px;
}「追記」を表現する
以下の示唆（Tips の部分）を受け、「追記」を表現する方法を考えた。（オリジナル！）
以下の記事に適用した。
micra-diary1970.hatenablog.com
本文は「HTML編集」で直接、以下の通り入力する。
「定型文貼り付け」に登録すると便利。
<div class="tuiki">
<div class="tuiki-date">（更新日付）</div>
<div class="tuiki-content">（更新内容）</div>
<p>（付帯情報。リンクの貼り付けなど）</p>
</div>CSS は以下の通り。
/* 追記 */
.tuiki {
background-color: azure;
border-color: lightskyblue;
border-style: solid;
border-width: thin;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
.tuiki-date {
font-size: smaller;
color: black;
}
.tuiki-date::before {
content: "【追記】";
}
.tuiki-content {
font-size: smaller;
color: black;
margin-left: .5rem;
}
.tuiki-content::before {
content: "更新内容：";
}
/* */記事の更新日を表示する
こちらは大変、需要があるのではないだろうか。
以下のサイトを参照。
コメント欄の一番上の線を消す
コメント欄の一番上に区切り線が二重に引かれて見にくかったので、消した。
/* コメント欄上の一番上の線を消す */
.js-comment-box {
border-top: unset;
}右カラムの背景を半透明から白にする
デフォルトの公式デザインテーマ「Smooth」は右カラムの背景が半透明で、ブログの背景色に濃い色を指定すると文字が見にくくなる。
そこで右カラムの背景を全て白にした。
/* 右カラムの書式 */
#box2 {
background-color: white;
}
.hatena-module {
background-color: white;
margin-top: 0px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid silver;
}ツイッターフォローボタンをはみ出さないようにする
/* ツイッターフォローボタンをはみ出さないようにする */
.twitter-follow-button {
max-width: 100%;
}プロフィールの「このブログについて」を非表示にする
私は右カラムで、プロフィールのすぐ下にリンクで「このブログについて」を貼っているので、ここでは非表示にした。
/* プロフィールの「このブログについて」を非表示にする */
.profile-about {
display: none;
}右カラムの各タイトルにアイコンを付ける
合わせて検索窓の入力部分を灰色にした。
/* アイコンを付ける */
/* プロフィール */
.hatena-module-profile .hatena-module-title:before {
font-family: blogicon;
content: "\f016";
}
/* リンク */
.hatena-module-links .hatena-module-title:before {
font-family:blogicon;
content: "\f042";
}
/* 検索窓 */
.hatena-module-search-box .hatena-module-title:before {
font-family:blogicon;
content: "\f01a";
}
.search-module-input {
background-color: whitesmoke; /* 入力領域を薄灰色 */
}
.search-form {
margin-bottom: 10px; /* 下余白を調整 */
}
/* 関連記事 */
.hatena-module-related-entries .hatena-module-title:before {
font-family:blogicon;
content: "\f013";
}
/* 最新記事 */
.hatena-module-recent-entries .hatena-module-title a:before {
font-family:blogicon;
content: "\f013";
}
/* 月別アーカイブ */
.hatena-module-archive .hatena-module-title a:before {
margin-right: 5px;
font-family:blogicon;
content: "\f03a";
}
/* カテゴリ */
.hatena-module-category .hatena-module-title:before {
font-family:blogicon;
content: "\f022";
}
/* ランキング */
.hatena-module-html .hatena-module-title:before {
font-family: blogicon;
content: "\f050";
}
/* 注目記事 */
.hatena-module-entries-access-ranking .hatena-module-title:before {
font-family: blogicon;
content: "\f033";
}
/* アイコンを付ける */その他
CSS での装飾ではないが、以下の設定を html でしている。
Android の Chrome でアドレスバーに色を設定する
以下のサイトを参考に設定。
「はてなブログ」では「設定」→「詳細設定」→「<head>要素にメタデータを追加」に入力する。
サイドバーにランキングサイトを追加
「双子の島バナナ・マイクラ日記」のブログに、ランキングサイトのバナーをサイドバーの「html」モジュールに追加した。
以上。
