本ページにはプロモーションが含まれます。
自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。
はてなブログのタイトルが大きすぎて見づらかったので文字を小さくしました。
本文も文字が大きく、行間が広すぎて読みづらかったので改善しました。
使えそうであればご自由にコピペしていただき構いません。
当ブログの記事タイトルと本文
引用元
こちらのサイトで紹介されているコードを元に作成しました。
やさしんぷるデザイン
はてなブログでフォントを統一したり変更するカスタマイズ | やさしんぷるデザイン
Minimal Green
はてなブログで使えるサイドバーカスタマイズまとめ - Minimal Green
yuma'sLOG
はてなブログの行間を狭くする方法。初期設定では広すぎるので修正しよう！ - yuma's LOG
Simple Life Navi
はてなブログの記事の本文で使うフォントの種類の変更は簡単｜コピペ用コード付き - Simple Life Navi
使用デザインテーマ・設定
・Smooth（デフォルト）使用
・レスポンシブデザイン
記事タイトルと本文のコード
【デザインCSS】に貼るコード↓
.entry-title, .archive-heading {
font-size: 110%;
font-weight: bold;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
letter-spacing:0.5pt;
}
.entry-content {
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
font-size:90%;
}
.entry-content p {
margin:2px;
}
CSS解説
.entry-title, .archive-heading {
font-size: タイトル文字サイズの割合%;
font-weight:タイトル太字にしたければboldと入力 ;
font-family: タイトル字体;
letter-spacing:タイトル文字間隔の数値pt;
}
.entry-content {
font-family: 本文字体;
font-size:本文文字サイズの割合%;
}
.entry-content p {
margin:行間の数値px;
}
- ・元から記述されているコードは消さないで最後の「 } 」のすぐ下にペーストします。
- ・他に自分でコードを書いている場合も同様に最後の「 } 」の下に追加でペーストします。
- ・通常、CSSは下に追加したコードの指示が優先して反映されます。
- ・↓字体の設定の仕方はこちらで知ることができます。
- 【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
ご参考になれば幸いです。
＼ 勉強する ／
