イメージ的にはこんな感じです。うーん(^^;)結耶イメージ湧かない?じゃあ、上で使ってる引用枠を見た方がわかりやすいかも~beforeとafterを使ってボックスの先頭と最後に引用符を表示させています。before、afterの擬似要素を使えば上のようなボックスや見出しなどに画像やアイコンフォントをつけたりでき、ブログのカスタマイズにも使えます。}セレクタはHTMLタグの他にもクラス名、ID名でもつけることができます。擬似要素はセレクタの後に「:(半角コロン)」を付けて描きます。見出しに画像やアイコン(アイコンフォント)をつける方法を紹介します。使えば見出しに画像を表示させることができます。お好みによってh3、h4などに変更してください。上記のように指定するとサンプルのようにできます。使う画像サイズは小さいものをお使いください。Point画像の位置を調整する場合はposition:relative;を使って調整してください。/*左からの位置*/</div>}見出しにアイコンをつける注意!アイコンはFontAwesomeを使います。アイコンを使うにはFontAwesomeの導入が必要です。導入方法についてはこちらを参考にしてください。『CSS(スタイルシート)で指定する』を少し書き換えました。transparent;』は私が使っているテーマのデフォルトで設定されている左線が表示されてしまうので入れているものです。必要なければ削除してください。※11行目のアイコンのコードはFontAwesomeのアイコンのページのアイコン名の下あたりにあります。※12行目のアイコンの種類はアイコンによってRegularやSolidが指定されているものがあります。ここを指定しないとRegularのアイコンが表示されます。(表示されないこともあります。)リンクの後ろにアイコンをつけるリンクの後ろにアイコンをアイコンをつけることもできます。margin-left:7px;}きらりこれWordPressで作ったサイトで見かけるよね。リンクの後ろにアイコンをつけるから『after』を使うんだね!結耶そうそう。WordPressのテーマによってリンクにアイコンがつくのあるね。ブランドアイコンを使う場合WordPressなどのブランド系のアイコンを使う場合はfont-familyを以下のようにしてください。して12行目の『font-weight』を削除してください。使えるアイコンが違います。CSSで指定しておけばHTMLの方で指定しなくても表示されるんだね。結耶そうそう!見出しとかは常に使うものだからね。アイコンを挿入させることもなく表示されるから楽だよ(^-^)文字を入れる擬似要素を使えば画像やアイコンのように文字もつけることができます。引用符のアイコンフォントを擬似要素で指定すれば、引用符付きの囲み枠を作ることができます。以下のサイトで引用符のアイコンフォントを使った囲み枠のデザインがありますので参考にしてください。CSSで作る!魅力的な引用デザインのサンプル30(blockquote)画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。...https://saruwakakun.com/html-css/reference/blockquote箇条書きで使う擬似要素を使えば箇条書きリスト(ul、li)の黒ポチをアイコンフォントや画像にすることができます。ここに文章が入ります。/*アイコンのコード*/}サンプルには他にもいろいろ指定されていますが、ひとつひとつ説明すると『ul、li』の説明をしなくてはならなくなるため、とりあえず『黒ポチを消してアイコンに変える』コードのみ載せておきます。RinkerAmazon楽天市場Yahooショッピングこんなこともできるbefore、after以外にも要素はあります。/*文字の色*/}first-letterを使って1文字目を大きくしています。サンプルではh5を使用していますが、pタグにすると<p>~</p>の先頭の文字が大きくなります。