蛍光ペンでアンダーラインを引いたような強調の仕方は、ブログなどでよく使われています。
この強調の仕方は、見やすくて見た目も良いので、個人的にはとても好きです。
しかし、Weeblyでこの強調をしようとすると、CSSのカスタマイズが必要で、コーディングが苦手な人にはちょっと敷居が高いかもしれません。
本記事では、そんな方でもわかりやすいように、Weeblyでハイライト強調する方法を解説します。
どんな感じに強調されるの？
この記事でご紹介する方法は、下記のように、テキスト中で”太字”にした部分がハイライトで強調されるようになります。
ハイライトするための準備
それではそのための準備を始めましょう。
どうしてもCSSを編集することになりますが、コピペで済むようにしていますので、安心してください。
まずはCSSの編集画面を開きましょう。
- 画面上部のテーマ→左下の「HTML/CSSの編集」ボタンをクリック
コードエディターが開くので、最後の行に下記のコードをコピペしてください。
strong {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
コピペしたら、設定を保存してください。
- 右上の「保存」ボタンをクリック
- 保存名を聞かれるので、適当に名前を付けて保存してください
準備はこれだけです。
ハイライトしてみる
実際にハイライトさせてみましょう。
適当なテキストの一部を”太字”にしてみてください。テキストの編集中は、単に”太字”のままですが、編集が終わるとハイライトされます。
カスタマイズしてみる
コピペしたコードをいじれば、色々をカスタマイズできます。
色を変えたり、アンダーラインの幅を変えたりできます。色を変えたい時は、#ffff66の部分を変えてください。アンダーラインの幅を変えたい時は、60%の数字を変えてください。
今回は”太字”の部分をハイライトするようにしましたが、イタリックの部分をハイライトするようにしても良いかもしれません。その場合は”strong”としているところを”em”に置き換えてください。
以上です。お疲れ様でした！