あひるの化粧品と戯れる日記

化粧品開発者が化粧品やそれに関する知識、情報などを発信していくブログです。たまに無関係なことも書きます。

【はてなブログカスタマイズ】文字サイズ変更、マーカー、見出しの変更方法

スポンサーリンク

 

どうも、あひるです。

今回は、はてなブログのカスタマイズ第2弾!

文字の装飾を行う方法を記載します。

本記事で取り扱う装飾は、

  • 文字を大きくする
  • 文字へのマーカー
  • 見出しをオシャレに

上記について、書いております。

ちなみに、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>

赤字は、カラーコードから引用してください。

カラーコードはこちら。

www.colordic.org

 

設置場所は、

ダッシュボード ⇒ 設定 ⇒ headに要素を追加

これで、各ボタンでマーカーをつけることが可能です。

それにより、太文字や斜体などは使えなくなります。

斜体だけをマーカーにしたい場合は、

斜体の部分だけ貼り付ければOKです。

なお、<style type="text/css">と</style>は、必要ですので、貼り付け忘れないようにご注意を。

※デザインCSSに貼り付けることも可能ですが、スマホで表示されない可能性がありますので、headに要素を追加する方が無難です。

 

参考にさせてもらったのは、こちら。

saruwakakun.com

 

 

 

見出しをオシャレに変更させる方法

はてなブログでも、それ以外のブログでも見出しはあります。

その見出しをよりオシャレに装飾することが可能です。

当ブログでも、編集しています。

見出しをオシャレにすると、見やすくもなりますし、編集するほうがメリットがあるかと思います。

見出し装飾コードその1

h1 {

padding: 0.5em;/*文字周りの余白*/

color: #494949;/*文字色*/

background: #fffaf4;/*背景色*/

border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/

}

このコードを貼り付けることで、オレンジ色の装飾が可能です。

当ブログと同じやつです。

なお、コード冒頭のh1は、タグの種類を表しています。

はてなブログでは、

h1タグ:タイトル

h3タグ:大見出し

h4タグ:中見出し

h5タグ:小見出し

となります。

変更したいタグを入力してください。

赤字は、カラーコード、自分の好みに合わせてカスタマイズしてください。

 

見出し装飾コードその2
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です。

 

参考にしたのは、こちらの記事です。

saruwakakun.com

 

 

 

最後に

何度も言いますが、私はhtmlやCSSの知識は皆無です。

そんな私でも、ここまでカスタマイズできています。

ブログ初心者でも、この記事を見てくだされば、簡単にカスタマイズすることができると思います。

自分好みのブログを、是非作り上げてください。

その他のカスタマイズは、こちら。

www.ahiru-nonnbiri-blog.work

 

最後までお読みいただき、ありがとうございました。

 

 

 

ホームへ戻る