画像やテキストを追加できる before/after を使った魅せ方と、\Aを使ってCSSで改行を可能にする小技

CSS CSS

デザインを弄るのが好きな人で、なおかつ無料ブログサービスを使っている人は必ず思うハズです。

「そこにかわいい画像を置きたい…」「そこに好きな文字を書けたら…」

そんな悩みを解決するのが擬似要素 before/after です。
擬似要素は、HTMLを汚さずに、画像はもちろんテキストも追加できます。

擬似要素 before / after を使って画像をアイコン化して表示する

まずデベロッパーツールで対象に使われているセレクタを調べます。
そのセレクタにbefore/afterを使い、場所を指定します。

例えば、beforeを使うとサイドバーのH3見出しの文章の前に画像を表示することが出来ます。

今この記事を開いてる状態でサイドバーを見てください。この記事を開いている時だけサイドバーの見出しに擬似要素 before を使っているので、文章左側にWordPressのロゴが表示されています。

.widget-sidebar-title::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(image.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    vertical-align: -15%;
}

上記は実際に設置しているCSSです。

まず、セレクタの後に擬似要素の before/after どちらかを付けます。
セレクタにプロパティcontent: url(“image.jpg”); を付けると画像の表示は出来ますが、アップロードした画像は width/height でサイズを変えられません。

画像サイズを変えるには background-image: url(“image.jpg”) を使います。しかし、元の画像の余白をきっちりと切り取ってください。位置調整が楽になります。

display: inline-block;
width: 〇〇px; /* サイズ調整 */
height: 〇〇px; /* サイズ調整 */
background-image: url(“image.jpg”);
background-size: contain;
background-repeat: no-repeat; /* 画像一つを表示 */
margin-right: 〇px; /* 画像から文字の間に余白 */


vertical-align: 〇〇%;
これは値を増やすと画像が上に移動します。値にマイナス（-）を付けてあげると下に移動します。

キーワード指定もできます。ただし、キーワード指定は「ざっくり・だいたい」の場合のあるので数値のよる調整が良いと思います。

キーワード指定の例：vertical-align: middle;
これが最も使いますが、それでも今回は微妙なズレが生じました。

  • top：その行の一番高いところに合わせます。
  • bottom：その行の一番低いところに合わせます。
  • sub / super：化学式の添え字（H₂Oの2）や、注釈の肩文字（※¹）のように、少し下げたり上げたりします。

今回の設定では最もvertical-align: sub; が今の設定と同等でした。

画像サイズを小さくして表示してますが、画像の容量が小さくなった訳ではありません。あまり多用すると、Webサイトが重くなってしまうので、使用用途には気を配りましょう。

擬似要素 before / after を使って文字を追加して表示する

基本的に画像を使った時と同じように、まずはデベロッパーツールで対象に使われているセレクタを調べます。今回はセレクタにafterを使い、場所を指定します。

サイドバーにあるプロフィールの一部を切り取って下に例として設置しました。
名前「ミコト」の下の文字が::afterを使って表示した文字です。

ミコト

ミコトホド管理人のミコトです。ゲームが好きなアマチュアブロガーです。一言二言では伝えきれないので三言程でミコトホドです。

実際に書かれているCSSです。

.myname02::after {
    content: "～ようこそ私のWebサイトへ～\A いつでも遊びに来てください！";
    display: block;
    font-size: 12px;
    color: #43577a;
    margin-top: 5px;
    font-weight: normal;
    text-align: center;
    white-space: pre-wrap; /* 改行を有効にする必須設定 */
}

今回は文字だけを使うのでcontent: “文字” を使います。
対象の文字の下に表示したいので、ブロック要素化をする為にdisplay: blockを使います。

擬似要素は文字のすぐ後ろに並ぼうとします。しかし、display: blockを使う事で、本来のセレクタ（親要素：ここでは.myname02）とのブロックを変える事で、強制的に次の行へ押し下げます。

親要素がテキストに対して位置を指定していると、それを継承します。実際には念のためにtext-align: centerを使ってますが、本来は必要ありません。

content: “表示する文字”;
display: block; /* 次の行に下げるなら */
font-size: 〇〇px;
color: #000000;
margin-top: 〇px;
font-weight: normal;　/* 太さは好みで */
text-align: center;　/* 親要素と位置を変えるなら必要 */

テキストに\Aを入れることで改行する

\A_（バックスラッシュA半角スペース）
これが content のテキスト内で改行の役割をします。しかし、これだけでは改行として働いてくれません。

white-space: pre-wrap;

テキスト内の \A を改行として働かせるにはこのプロパティが必要です。\A を使うには、セットで使ってください。

使いこなせばカスタマイズの幅が一気に広がる

表現の幅が広がりますし、限られた機能の殻を破るために使って欲しいお勧めのCSSです。
Webサイトの彩りに是非とも活用してください。

補足： バックスラッシュは、日本語キーボードでは円マーク「¥」として表示されますが、プログラム上の役割（改行コードなど）は同じです。半角の「¥」をそのまま使っても問題ありません。

コメント