デザインCSSのカスタマイズ機能｜はてなブログ（無料）
この度、運営しているブログを「ワードプレス」から「はてなブログ」に切り替えました。
そこで本記事では、はてなブログの無料バージョンで、どれだけのカスタマイズができるのか試してみたので、上手くいったものをお知らせします。
今回は、デザインCSSのカスタマイズ機能です‼️
作業の手順を、わかりやすくまとめましたので、ぜひチャレンジしてみて下さいね。
- 機能１．ヘッダの背景色
- 機能２．ブログタイトルの文字色
- 機能３．ブログ内容説明の文字色
- 機能４．大見出しのデザイン
- 機能５．中見出しのデザイン
- 機能６．小見出しのデザイン
- 機能７．横長写真の自動修正
- 機能８．縦長写真の自動修正
機能１．ヘッダの背景色
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
#e2041bは色コードです。好きな色に変更して下さい。
↓ ↓ ↓
#blog-title{
background: #e2041b !important;
}
機能２．ブログタイトルの文字色
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
#ffffffは色コードです。好きな色に変更して下さい。
↓ ↓ ↓
#title a{
color: #ffffff !important;
}
機能３．ブログ内容説明の文字色
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
#ffffffは色コードです。好きな色に変更して下さい。
↓ ↓ ↓
#blog-description{
color:#ffffff !important;
}
機能４．大見出しのデザイン
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
↓ ↓ ↓
.entry-content h3 {
position: relative;
padding: 10px 10px;
color: #fff;
line-height: 1.5;
background-color: #e2041b;
border-radius: 4px;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
.entry-content h3::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
.entry-content h3::after {
bottom: 0;
left: 0;
border-top: 1px dashed #fff;
}
機能５．中見出しのデザイン
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
↓ ↓ ↓
.entry-content h4{
color: #333333;
padding: 10px 10px;
border-left: 10px solid #e2041b;
border-bottom: 3px solid #e2041b;
}
機能６．小見出しのデザイン
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
↓ ↓ ↓
.entry-content h5 {
position: relative;
padding: 6px 0 6px 34px;
border-bottom: 2px solid #e2041b;
color: #333333;
line-height: 1.5;
}
.entry-content h5::before,
.entry-content h5::after {
content: '';
position: absolute;
background-color: #e2041b;
}
.entry-content h5::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.entry-content h5::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
機能７．横長写真の自動修正
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
↓ ↓ ↓
.entry-content img {
width:540px;
height:auto;
}
機能８．縦長写真の自動修正
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
↓ ↓ ↓
.entry-content-tate-pic {
margin: 20px 0;
padding-top: 20px;
}
.entry-content-tate-pic img {
height:40%;
width: auto;
}
<div class="entry-content-tate-pic">
<img （貼り付けた画像のimgタグ）>
</div>
