コピペOK｜はてなブログの脚注をカスタマイズ

本ページにはプロモーションが含まれます。

自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。

今回は脚注をカスタマイズしました。

ご自由にコピペしていただき構いません。

当ブログの脚注

当ブログの脚注

実物。→*1

リンクを小さくして上に配置し本文の妨げにならないようにしました。

本文と混同して読みづらくなるのを避けるため枠で囲い、タイトルを付けました。

文字サイズも本文より少し小さくしました。

※掲載コードは常に細かく修正しているため、この画像と若干違う場合があります。

引用元

こちらのサイトで紹介されているコードを元に作成しました。↓

Web制作向上ダイアリー

使うプロパティは2つだけ！上付き「※」を表現するCSS | Web制作向上ダイアリー

タオルケット体操

はてなブログの脚注のツールチップを見やすく、カワイイにするCSS - タオルケット体操

はてなブログ云云でアフィリエイトがしたい人のブログ

超簡単、はてなブログで脚注（注釈）を付ける方法 - はてなブログ云云でアフィリエイトがしたい人のブログ

デザインテーマ・設定

・デザインテーマはSmooth（デフォルト）

・レスポンシブデザイン

脚注のコード

【デザインCSS】に貼るコード↓

a[name^="fn-"]{
font-size:80%;
vertical-align: top;
}
div.footnote::before {
display:block;
content: "Footnote";
letter-spacing:0.3pt;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
font-size: 20px;
color:silver;
font-weight: bold;
padding:6px;
}
div.footnote {
border-radius: 6px;
border: 1px solid silver;
font-size: 85%;
margin: 32px 0px !important;
padding:12px !important;

background: ;
}

CSS解説

a[name^="fn-"]{
font-size:脚注リンクの文字サイズの割合%;
vertical-align: topで上に配置する;
}
div.footnote::before {
display:block;
content: "脚注を表すタイトル";
letter-spacing:タイトル文字間隔の数値pt;
font-family: タイトルの字体;
font-size: タイトルの文字サイズ数値px;
color:タイトル文字色（カラーコード）;
font-weight: タイトル文字太さ（細字にしたければ空欄にする）;
padding:タイトルと枠線との間隔を空ける数値px;
}
div.footnote {
border-radius: 枠線角の丸みの数値px;
border: 枠線太さ数値px solidは普通の線枠線の色（カラーコード）;
font-size: 脚注内の文字サイズの割合%;
margin: 枠線外側の余白の数値（縦余白px 横余白px） !important;
padding:枠線と脚注の間隔を空ける数値px !important;

background: 背景色を付けたければカラーコード入力;
}

・通常、CSSは下に追加したコードの指示が優先して反映されますが「!important」を付けると順番に関係無く最優先で反映されるためスタイル崩れを防ぐことができます。
・元から記述されているコードは消さないで最後の「　}　」のすぐ下にペーストします。
・他に自分でコードを書いている場合も同様に最後の「　}　」の下に追加でペーストします。
・↓字体の設定の仕方はこちらで知ることができます。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
・↓カラーコードはこのサイトで調べられます。
WEB色見本原色大辞典 - HTMLカラーコード
・↓線はsolid（普通の線）の代わりにdotted（点線）など指定できます。
CSSで枠線（ボーダー）をデザインする方法：borderプロパティ | ワードプレステーマTCD