はじめに
ブログを読みやすいようにカスタマイズしようということで、前回は見出しをオリジナルなスタイルに変更する方法を書きました。
今回は、文章の中で強調表示したい部分がもっと目立つような変更をしていきましょう。
強調表示の変更
デフォルトの状態では、この「B」を選択すると、
サンプル文章
このように指定した文字が太字になるのですが、この部分を、
サンプル文章
このようにカラフルなアンダーラインがつくように変更を加えていきたいと思います。
修正する箇所は、前回と同様です。
PCの場合
スマホの場合
ここに、以下のコードを追加してみてください。
PCの場合
追加するコード
.entry-content strong {
background: linear-gradient(transparent 60%, LIGHTPINK 40%);
}
スマホの場合
追加するコード
<style>
.entry-content strong {
background: linear-gradient(transparent 60%, LIGHTPINK 40%);
}
</style>
アンダーラインの色は現在「LIGHTPINK」になっていますが、これも前回と同様に変更が可能です。
下記サイトを参考にして、お好きな色に変えてみてください。
それから、デフォルトの強調表示と連動させたくない場合ですが、次項でそのやり方を解説しますので、そちらを参考にしてください。
強調表示（段落に背景色をつけたい場合）
違うパターンの強調表示の方法をお伝えしておきましょう。
１行から数行にわたる範囲で背景色をつけたい場合のやり方です。
（今回の記事の中でも、「追加するコード」の部分は、同様のやり方でグレーの背景色をつけています。）
まず、定義を追加しておきます。
追加する箇所は、前項と同じです。
追加するコードは、以下になります。
PCの場合
追加するコード
.accent-area {
border:1px solid #444444;
background:YELLOW;
padding:1.5em;
}
スマホの場合
追加するコード
<style>
.accent-area {
border:1px solid #444444;
background:YELLOW;
padding:1.5em;
}
</style>
定義を追加しましたら、背景色をつけたい場所に、上で追加した「accent-area」という設定を加えていきます。
これは、HTMLコードを直に修正する必要があります。
上記の「HTML編集」をクリックして、HTMLコードの編集モードに切り替えてください。
サンプル文章
サンプル文章
サンプル文章
例えば、この３行に背景色をつけたい場合、
（変更前）
（変更後）
というように、背景色をつけたい文章を、オレンジ印のように
<div class="accent-area"> と
</div> で挟んでください。
サンプル文章
サンプル文章
サンプル文章
黄色の背景色がつきましたね。
（作業中は、必ず「プレビュー」で確認してくださいね。）
色はわかりやすいように黄色にしましたが、前項と同様に、何色にも変更できます。「追加するコード」の「YELLOW」を修正してみてください。
また、今回のスタイルは外枠の線がつくようになっていますが、それがイヤだったら、「追加するコード」の「border」から始まる１行を削除してみてください。
応用編
このように、HTMLコードを修正すると、いろいろなカスタマイズができるようになります。
前回にご説明した見出しの色分けなども、
このようにピンクとグリーンの定義を追加しておけば、HTMLコードを直接修正することにより、
（見出しをピンクにした場合）
HTMLコードの修正
<p><h3-PINK>サンプル見出し</h3-PINK></p>
（見出しをグリーンにした場合）
HTMLコードの修正
<p><h3-GREEN>サンプル見出し</h3-GREEN></p>
というように、見出しを切り替えることが可能です。
また、前項でご説明した協調表示なども、
このように例えば赤いアンダーラインの定義を追加しておけば、HTMLコードを直接修正することにより、
HTMLコードの修正
<p><strongRED>サンプル文章</strongRED></p>
というように、アンダーラインを色分けすることも可能です。
まとめ
ブログのカスタマイズはかなり奥が深い反面、苦手な人にはちょっと取っつきにくい印象もあるかと思います。
が、前回、今回とご説明したように簡単にできるカスタマイズもありますので、このようなところから少しずつ始めてみてはいかがでしょうか。
カスタマイズの参考になるブログをひとつご紹介します。
読みやすいブログになるように、皆さんもカスタマイズに挑戦してみてくださいね！