どうも、あひるです。
今回は、はてなブログのカスタマイズ第２弾！
文字の装飾を行う方法を記載します。
本記事で取り扱う装飾は、
- 文字を大きくする
- 文字へのマーカー
- 見出しをオシャレに
上記について、書いております。
ちなみに、htmlやCSSの知識は皆無の私ですが、本記事を読んでもらえれば、確実にデザインを変更することが可能かと思います。
ブログの文字の大きさを変更する方法
はてなブログの文字の大きさは、小さめです。
minimalismは、PCだと15px、スマホだと14pxです。
これ、小さいんですよ。
SEO的にも小さいと不利なんですよね。
Google先生が推奨するのは、16px以上らしいので、CSSで変更しておくほうが良いでしょう。
まぁ別にGoogle先生に向けて、ブログを書いているわけではないですが、読者さんが見にくいのは、問題ですよね。
文字はある程度大きくしておきましょう。
ちなみに当ブログは、16pxです。
文字の大きさを変更するコードと設置場所
/*文字の大きさ*/
.entry-content p {font-size: 16px;}
数字を変えれば、大きくできます。
16でなくても全然OKです。
/**/で囲まれた部分は、cssに記入しても反映されません。
今後もcssは増えていくでしょうから、どのcssがどの効果を有しているのかわかるように、書いておくほうが無難です。
貼り付け場所は、
デザイン ⇒ カスタマイズ ⇒ デザインCSS
これで変更を保存すればOKです。
文字へマーカーをつける方法
はてなブログでは、通常マーカーなどの機能は、備わっていません。
マーカーとは、これのこと。
当ブログでは、オレンジのマーカーを採用しています。
当たり前ですが、オレンジ以外も 可能ですし、何色ものマーカーを使用することも可能です。
ただ、何色も使用しようと思うと、その都度、htmlやCSSで手をくわえなければいけません。
大変面倒ではないでしょうか？
まして、初心者には鬼ムズでは？
ここでは、予め設定しておいて、ボタン一つでマーカーが引けるようにしますので、ご安心を。
太文字、斜体、アンダーラインなど、普段からご使用されていますか？
使っていないのなら、これらのボタンで、マーカーを引くことが可能です。
別の全てのボタンをマーカーにしなくてもOK
当ブログでは、斜体は使用しないので、斜体のみ、オレンジマーカーにしています。
では、やり方を説明します。
太文字、斜体、アンダーラインボタンをマーカーに変更するコードと設置場所
では、コードです。
<style type="text/css">
/* 強調表示を蛍光ペン（ピンク）風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%,#ff69b4 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}/* 斜体表示を蛍光ペン（オレンジ）風に */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%,#ffd1a3 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}/* アンダーライン表示を蛍光ペン（緑）風に */
article u{
font-weight:bold;
text-decoration: none;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #7fffd4 60%) !important;
}</style>
赤字は、カラーコードから引用してください。
カラーコードはこちら。
設置場所は、
ダッシュボード ⇒ 設定 ⇒ headに要素を追加
これで、各ボタンでマーカーをつけることが可能です。
それにより、太文字や斜体などは使えなくなります。
斜体だけをマーカーにしたい場合は、
斜体の部分だけ貼り付ければOKです。
なお、<style type="text/css">と</style>は、必要ですので、貼り付け忘れないようにご注意を。
※デザインCSSに貼り付けることも可能ですが、スマホで表示されない可能性がありますので、headに要素を追加する方が無難です。
参考にさせてもらったのは、こちら。
見出しをオシャレに変更させる方法
はてなブログでも、それ以外のブログでも見出しはあります。
その見出しをよりオシャレに装飾することが可能です。
当ブログでも、編集しています。
見出しをオシャレにすると、見やすくもなりますし、編集するほうがメリットがあるかと思います。
h1 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
このコードを貼り付けることで、オレンジ色の装飾が可能です。
当ブログと同じやつです。
なお、コード冒頭のh1は、タグの種類を表しています。
はてなブログでは、
h1タグ：タイトル
h3タグ：大見出し
h4タグ：中見出し
h5タグ：小見出し
となります。
変更したいタグを入力してください。
赤字は、カラーコード、自分の好みに合わせてカスタマイズしてください。
h1 {position: relative;padding-left: 1.2em;/*アイコン分のスペース*/line-height: 1.4;}h1:before {font-family: "Font Awesome 5 Free";content: "\f00c";/*アイコンのユニコード*/position: absolute;/*絶対位置*/font-size: 1em;/*サイズ*/left: 0;/*アイコンの位置*/top: 0;/*アイコンの位置*/color: #5ab9ff; /*アイコン色*/}
こちらは、シンプルなチェックマークの見出し装飾です。
当ブログでも使用してます。
上で書いた通り、タグは自由に変更してください。
また、カラーコードもお好きな色に変更可能です。
なお、この見出しは、Font Awesomeを使用しています。
わからない方は、こちらをご参照ください。
設置方法
デザイン ⇒ カスタマイズ ⇒ デザインCSS
変更を保存してOKです。
参考にしたのは、こちらの記事です。
最後に
何度も言いますが、私はhtmlやCSSの知識は皆無です。
そんな私でも、ここまでカスタマイズできています。
ブログ初心者でも、この記事を見てくだされば、簡単にカスタマイズすることができると思います。
自分好みのブログを、是非作り上げてください。
他にも、ブログカスタマイズ系の記事を書いています。良ければ読んでみてください。
「【Minimalismカスタマイズ】グローバルメニューの設置方法」
「【はてなブログカスタマイズ】ボックスデザイン、ボタンの設置方法」
「【Minimalismカスタマイズ】サイドバーの色変更、アイコンの設置」
「【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方」
また、オススメのアイテムについても書いていますので、良ければ参考程度に。
最後までお読みいただき、ありがとうございました。
