Wordpress

「画像の見出し風」に画像キャプションをデザインする方法-WordPress

  1. HOME >
  2. Wordpress >

「画像の見出し風」に画像キャプションをデザインする方法-WordPress

「画像の見出し風」に画像のキャプションをデザインする方法

「画像の見出し風」にデザイン

  • WordPress上の操作だけで、画像の見出しを作成したい。
  • 直接画像内に見出しを書いていたため、後で編集できない。
  • 見出し作成を手動で位置調整しているため、統一感が出ない。

ココがポイント

結論:

画像に使うことのできる「figcaption」をCSSスタイルで調整し、目的の見出しに見えるようにします。

  1. 「figcaption」の見た目をカスタマイズするCSSをご紹介。
  2. class属性をWebページのコンソール画面(「検証(I)」)から探す。
  3. 作成しているCSSに探し出したclass属性を指定しする。

この手順で行えば、画像の見出しのようにデザインすることができます。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、WordPressで記事を書いていると、よく見出しタイトルの下に画像を入れていると思います。

この画像に他のWebページでよく見るように、見出しを入れる作業が頻繁にあるのではないでしょうか?

ただし、

  • 見出しの入れ方が、画像に直接書き込む方法になっている。
  • 位置調整が手動なので、見た目が思うように統一できない。
  • 文字が埋め込まれるため、後で変更できない。

このような問題に直面してはいないでしょうか?

今回は、WordPressに機能として備わっている、画像のキャプション(画像の下につけられる文字)を利用。このキャプションをCSSで体裁調整して、見出しのように見えるようにします。

この方法だと、後々編集も可能になるので、見出しが気に入らなかったときに時間を無駄にせず、修正できるようになります。

フォントも自分好みのものに変更可能ですし、文字の大きさ位置、色もカスタマイズする部分もご紹介してまいります。

それでは、続きをご覧ください。

完成イメージ
figcaptionを使った「画像の見出し風」CSS設定。完成イメージ

 

1.<figcaption>とは?

疑問

「figcaption」ってなに?

HTMLコードの中に<figcaption>タグがあります。

このタグを使うと画像にキャプション(画像の見出し)をつけることができるようになります。

全てのWordPressのテーマを確認してはおりませんが、図版にキャプションをつける機能はどのテーマにも必ずはいっているはずです。

この機能をこれから使用して、画像の見出し風に見た目を調整していきます。

 

2.<figcaption>をレイアウト調整して「見出し風」にできる

2.Step1 CSSコードをコピペ

以下のCSSコードをコピー。各々のCSSを追加できるカスタマイズエリアに貼り付けるだけです。

.example {
  text-align: center;
  font-size: 2em;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  transform: translateY(-2em);
  color: #163999;
  text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, 0px 2px 1px #fff, 0-2px 1px #fff, -2px 0 1px #fff, 2px 0 1px #fff;
}

 

2.Step2 それぞれのコードの説明

1行目:.example {

class確認

この部分には、皆様それぞれのWebページから確認します。

画像下につくキャプションの「class="○○○"」の○○○をメモします。

このメモした○○○を「.(ドット)」の後ろに入れればOKです。

2行目:text-align: center;

これはテキスト中央揃えの意味です。特に変更する必要はありません。(center意外にもleft、rightを指定できます)

3行目:font-size: 2em; ←超重要

フォントサイズを変更する部分です。

後ろのem単位は、親文字に対してどれだけ大きいかを表す単位です。今回であれば、通常テキストサイズよりも2倍大きい設定にしています。

この部分を調整して皆様の好みの大きさにしましょう。

4行目:font-family: 'Noto Sans JP', sans-serif;

使用するフォント名になります。見た目の良いフォントを自分で指定していきましょう。

もっと詳しく

5行目:font-weight: 900;

文字の太さを指定します。最大が「900」なので、ここはママで良いと思います。太すぎると思ったら、100ずつ下げていってください。

6行目transform: translateY(-2em); ←超重要

文字の位置を指定するコードになります。後ろのem単位は、親文字にたいしてどれだけ大きいかを表す単位です。今回は、2文字分上に移動するという命令になってます。

7行目:color: #163999;

文字色を指定します。自身のカラーテーマから表示されている「Hex」(#からはじまる値)などをコピペしてください。今回好みの色に新しく変えてもOKです。

8行目:text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, 0px 2px 1px #fff, 0-2px 1px #fff, -2px 0 1px #fff, 2px 0 1px #fff;

文字にドロップシャドウをつけて、フチがついているようにしてます。(x軸位置 y軸位置 ぼかし幅 色)の順番に記述していきます。

あまりに太くしすぎるとガビガビになるので、このくらいが限界だと思います。色の#fffは#ffffff(白)と同じ意味です。略して表記できるので略してあるだけになります。

もっと詳しく

 

3.レスポンシブ対応させる(スマホやタブレットで見た目を変える)

3.Step1 CSSコードをコピペ

次のコードをコピペしてください。

ペーストする場所は追加しているCSSの一番最後に必ずします。ペーストする場所は重要になりますので、注意してください。

/* レスポンシブ設定 ↑PC ↓タブレット */
@media screen and (max-width: 768px){
  .example {
    font-size: 1.5em;
    transform: translateY(-2.2em);
  }
}

/* レスポンシブ設定 ↑PC、タブレット ↓スマホ */
@media screen and (max-width: 480px){
  .example {
    font-size: 0.8em;
    transform: translateY(-2.2em);
  }
}

「.example」は、目次「2.Step2 それぞれのコードの説明」の一行目と同じclass属性の値に変えます。

 

3.Step2 画面で確認しながらスタイルを変更

後は、「タブレット」と「スマホ」それぞれの画面を確認しながら値を変更します。フォントサイズは「font-size」で。上下移動設定は「transform」で行ってください。

ココに注意

なぜ、CSSを一番下にペーストするのか

答えは簡単です。Web上ではCSSのスタイルをコードの上から読んでいきます。下に同じ設定があると下の値が優先され、スタイルが上書きされるからです。

以上のことから、CSSを追加するときは、一番優先したいスタイルを一番下に書くようにしましょう。

以上になります。

 

まとめ

お疲れ様でした。

今回は、画像に付加できるキャプションを調整して「画像の見出し風」にする方法のご紹介をさせていただきました。

ココがポイント

問題解決のステップ

  1. CSSコードをコピペ。
  2. 自身のWebページのソースコード画面から、画像につけたキャプションのclass属性を確認。
  3. コピペしたCSSコードを編集。

以上になります。

設定は非常に簡単だと思います。後は皆様の好みにカスタマイズしていただければとおもいます。

最後まで、ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.