今回は、ブログやメディアサイトの記事文字装飾に使える基本的なスタイルを紹介します。
【初心者向け/html/css】ブログ等に使える文字装飾まとめ
今回紹介する、ブログやメディアサイトの記事内文字の装飾については、初心者でもコピーのみでも適用できる簡単なスタイルのみを紹介していきます。
既にWebデザイナーやコーダーという方は復習程度に見ていってください。※各装飾用のhtml、CSSはコピーしてお使い頂いても問題ありません。
強調文字の装飾
今回紹介する装飾は上記のような4種の装飾になります。
htmlコードの指定クラスに沿って説明していきます。（codepenのhtmlタブをcssに切り替えることでスタイルの記述を確認できます。スマホ版はresultタブで見た目の確認ができます。）
①「.marker1」（村の茂兵）部分→テキスト部分をspanタグで括って、背景色を指定しているだけのシンプルな装飾です。薄めの色を指定することで本物のマーカーに近い色味にすることができます。
②「.marker2」（中山さま）部分→テキスト部分をspanタグで括って、グラデーション（linear-gradient）の背景色を指定しています。今回の場合は、上60%を透過、下40%に色指定をすることで、文字下部にマーカーを引いているようなスタイルにしています。%の数値を変更することで、マーカーの上下始まり位置を変えることができます。
③「.bold」（ごんぎつね）部分→テキスト部分をspanタグで括って、文字を太字で強調しています。あわせて「color」で文字色を変更することでさらに目立たせることもできます。
④「.box」二重枠部分→箇条書きや強調したい文章をdivタグで囲う事で、前後文章やコンテンツと区別を持たせることができます。cssプロパティ「border」を指定し、枠線の種類を「double」にすることで、二重枠にすることができます。
②「.marker2」（中山さま）部分→テキスト部分をspanタグで括って、グラデーション（linear-gradient）の背景色を指定しています。今回の場合は、上60%を透過、下40%に色指定をすることで、文字下部にマーカーを引いているようなスタイルにしています。%の数値を変更することで、マーカーの上下始まり位置を変えることができます。
③「.bold」（ごんぎつね）部分→テキスト部分をspanタグで括って、文字を太字で強調しています。あわせて「color」で文字色を変更することでさらに目立たせることもできます。
④「.box」二重枠部分→箇条書きや強調したい文章をdivタグで囲う事で、前後文章やコンテンツと区別を持たせることができます。cssプロパティ「border」を指定し、枠線の種類を「double」にすることで、二重枠にすることができます。
また、③の太字についてはstrongタグで太字にさせる方法もありますが、こちらは大きな効果はありませんが、SEO的な部分やページに評価に多少繋がりますので、ページ内で最も強調したい箇所などに使うようにしましょう。
基本的な装飾については、上記装飾の色を変えるくらいで問題無いかと思います。画像を入れることで、ユーザーの評価にも繋がりますので、セクションごとに画像を入れるもの良いと思います。
まとめ
今回は、ブログやメディアサイトの記事内の文字装飾に使える、基本的なスタイルを紹介しました。それぞれのスタイルは、CSSプロパティを1行～数行記述するだけで適用できますので、是非参考にしてみてください。
前へ
