支援者募集中!仕事依頼はこちら

画像キャプションをアイコンで超可愛くする【HTML/CSS】

HTML、CSSを使って画像キャプションを可愛いくする カスタマイズ

かわいいものは好きですかー?

ということで今回はHTMLとCSSで画像のキャプションを可愛くします。

image-sample
ここに画像の説明を入れます

その前に…

画像キャプションのHTMLはfigure、figcaptionを使うのが一般的ですが仕様上実現が難しかったのでpタグを使っています。

2019/7/31更新:figureタグを使った方法を教えていただいたのでそちらのやり方も追記します。

コピペでできるようになっていますが、

  • 環境とアイコン画像によって各自位置を変更する必要があります。
  • 文字数によっては表示が収まらずに崩れてしまうことがあります。

また、当たり前ですがアイコン画像を各自用意する必要があります。

ちなみに紹介してるサンプルの素材はillust STAMPOさんのを使わせていただいてます!無料で利用可能です。オリジナルを作りたい人はココナラがオススメです。

figureタグを使う方法、pタグを使う方法の2通り紹介します。どちらか片方でOKです!

画像のキャプション(見出し)を入れる場合はfigure推奨です。効果音や感想など画像と関係のない言葉を入れるならpタグで!

作るのが楽なのはfigureの方ですかね!

ちなみにタグの違いは…

figureタグで囲む

本文の補足として挿入してる画像はfigureタグで囲みます。キャプション(見出し)が入れられます。
figureタグを使う方法へ

pタグで囲む

補足ではなく画像自体に意味があればpタグで画像を囲みます。
pタグを使う方法へ

流れは以下の通りです。

手順
  1. 共通CSSをコピペ
  2. サンプルを選びCSSをコピペ
  3. 試しにHTMLを入力
  4. 表示を確認しながら位置調整

STEP1:共通のCSSをコピペする(figure ver.)

下記CSSコードをコピペしてください。

メモ

WordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** 画像キャプション(figure)
************************************/
.figure-caption-icon-wrap{
	margin:0 auto 2em;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.figure-caption-icon-wrap > figure{
	position:relative;
}
.figure-caption-icon-wrap > figure > img,.figure-caption-icon-wrap > figure >amp-img{
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	display:block;
}
.figure-caption-icon-wrap > figure > amp-img{
	max-width:800px;
}
.figure-caption-icon-wrap figure figcaption{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items: flex-start;
  	position: absolute;
  	font-size: 13px;/* 文字の大きさ */
  	line-height: 1.5;/* 行間 */
	color:#777;/* 文字色 */
}
.figure-caption-icon-wrap .caption-icon-img{
   position: absolute;
}
.figure-caption-icon-wrap .img-caption-text{
	position:relative;
}

STEP2:サンプルを選びCSSをコピペする(figure ver.)

サンプルを5つ用意しました。やりたいことに一番近いサンプルを選び、CSSをコピペしてください。

デザインサンプル1:左上に表示させる

image-sample
ここに画像の説明を入れます


※こちらはfigureタグを使ったやり方です。

<div class="figure-caption-icon-wrap figure-caption-icon-1">
<figure>ここに画像を挿入<figcaption class="img-caption"><span class="img-caption-text">ここにキャプション</span></figcaption></figure>
</div>

/************************************
** 画像キャプション figure アイコン①(左上)
************************************/
/* 全体 */
.figure-caption-icon-1{
    margin-top:5em;/* 上に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-1 > figure figcaption{
    left: 0;/* 左から数値分移動 */
    bottom: calc(100% - 8px);/* 下から数値分移動 */
    min-height: 30px;
    padding: 0.5em 0 25px 4em;/* 余白(ここで文字の位置調整) */
}
 /* アイコン*/
.figure-caption-icon-1 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    left: 0; /* 左から数値分移動 */
    display: block;
    width: 50px; /* 横幅*/
    height: 60px; /* 高さ*/
    background-image: url(ここにアイコン画像URL); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}
 /* 吹き出し*/
.figure-caption-icon-1 .img-caption-text::before, .figure-caption-icon-1 .img-caption-text::after {
    border-bottom: 1px solid #777;
    content: "";
    width: 1em;
    position: absolute;
    top: -8px;
    left: 0;
    transform: rotate(-45deg);
}
/* 吹き出し*/
.figure-caption-icon-1 .img-caption-text::after {
    top: auto;
    bottom: -8px;
    transform: rotate(45deg);
}

アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。

メディアからリンクをコピー
画像URLの調べ方

デザインサンプル2:左下に表示させる

image-sample
ここに画像の説明を入れます


※こちらはfigureタグを使ったやり方です。

<div class="figure-caption-icon-wrap figure-caption-icon-2">
<figure>ここに画像を挿入<figcaption class="img-caption"><span class="img-caption-text">ここにキャプション</span></figcaption></figure>
</div>


/************************************
** 画像キャプション figure アイコン②(左下)
************************************/
 /* 全体 */
.figure-caption-icon-2{
	margin-bottom:5em; /* 下に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-2 > figure figcaption{
    left: 0; /* 左から数値分移動 */
    top: calc(100% - 5px);/* 上から数値分移動 */
    min-height: 30px;
    padding: 15px 0px 25px 60px;/* 余白(ここで文字の位置調整(上 右 下 左)) */
}
 /* アイコン*/
.figure-caption-icon-2 > figure figcaption::before{
    position: absolute;
    content: "";
    top:0;/* 上から数値分移動 */
    left: 0; /* 左から数値分移動 */
    display: block;
    width: 50px; /* 横幅*/
    height: 60px; /* 高さ*/
    background-image: url(ここにアイコン画像URL); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}

アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。

メディアからリンクをコピー
画像URLの調べ方

デザインサンプル3:中央上に表示させる

image-sample
ここに画像の説明を入れます


※こちらはfigureタグを使ったやり方です。

<div class="figure-caption-icon-wrap figure-caption-icon-3">
<figure>ここに画像を挿入<figcaption class="img-caption"><span class="img-caption-text">ここにキャプション</span></figcaption></figure>
</div>


/************************************
** 画像キャプション figure アイコン③(中央)
************************************/
/* 全体 */
.figure-caption-icon-3{
    margin-top:6em;/* 上に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-3 > figure figcaption{
    left: 50%;/* 左から数値分移動 */
    bottom: calc(100% - 8px);/* 下から数値分移動 */
    min-height: 30px;
    padding: 0px 0px 55px 0px;/* 余白(ここで文字の位置調整(上 右 下 左)) */
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
    width:100%;
}
 /* アイコン*/
.figure-caption-icon-3 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    left: 50%; /* 左から数値分移動 */
    display: block;
    width: 70px; /* 横幅*/
    height: 50px; /* 高さ*/
    background-image: url(ここにアイコン画像URL); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
}
.figure-caption-icon-3 .img-caption-text{
    left:50%;
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
}
 /* 吹き出し(左右)*/
.figure-caption-icon-3 .img-caption-text::before, .figure-caption-icon-3 .img-caption-text::after {
    border-bottom: 1px solid #777;
    content: "";
    width: 1em;
    position: absolute;
}
/* 吹き出し(左)*/
.figure-caption-icon-3 .img-caption-text::before{
    bottom:9px;
    left:-20px;
    transform: rotate(45deg);
}
/* 吹き出し(右)*/
.figure-caption-icon-3 .img-caption-text::after {
    bottom: 9px;
    right: -17px;
    transform: rotate(-45deg);
}

アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。

メディアからリンクをコピー
画像URLの調べ方

デザインサンプル4:右上に表示させる

image-sample
ここに画像の説明を入れます


※こちらはfigureタグを使ったやり方です。

<div class="figure-caption-icon-wrap figure-caption-icon-4">
<figure>ここに画像を挿入<figcaption class="img-caption"><span class="img-caption-text">ここにキャプション</span></figcaption></figure>
</div>


/************************************
** 画像キャプション figure アイコン④(右上)
************************************/
/* 全体 */
.figure-caption-icon-4{
    margin-top:5em;/* 上に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-4 > figure figcaption{
    right: 0;/* 右から数値分移動 */
    bottom: calc(100% - 8px);/* 下から数値分移動 */
    min-height: 30px;
    padding: 0px 85px 25px 0px;/* 余白(ここで文字の位置調整(上 右 下 左)) */
    text-align:right;
}
 /* アイコン*/
.figure-caption-icon-4 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    right: 0; /* 右から数値分移動 */
    display: block;
    width: 75px; /* 横幅*/
    height: 40px; /* 高さ*/
    background-image: url(ここにアイコン画像URL); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}
 /* 吹き出し*/
.figure-caption-icon-4 .img-caption-text::before, .figure-caption-icon-4 .img-caption-text::after {
    border-bottom: 1px solid #777;
    content: "";
    width: 1em;
    position: absolute;
    top: -8px;
    right: 0;
    transform: rotate(45deg);
}
/* 吹き出し*/
.figure-caption-icon-4 .img-caption-text::after {
    top: auto;
    bottom: -8px;
    transform: rotate(-45deg);
}

アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。

メディアからリンクをコピー
画像URLの調べ方

デザインサンプル5:右に表示させる

image-sample
短めな説明


※こちらはfigureタグを使ったやり方です。

<div class="figure-caption-icon-wrap figure-caption-icon-5">
<figure>ここに画像を挿入<figcaption class="img-caption"><span class="img-caption-text">ここにキャプション</span></figcaption></figure>
</div>


/************************************
** 画像キャプション figure アイコン⑤(右)
************************************/
/* 全体 */
.figure-caption-icon-5{
    margin-top:5em;/* 上に余白 */
    width:85%;
}
 /* アイコン+テキスト*/
.figure-caption-icon-5 > figure figcaption{
    right: -30px;/* 右から数値分移動 */
    bottom: 0;/* 下から数値分移動 */
    padding: 0px 10px 65px 0px;/* 余白(ここで文字の位置調整(上 右 下 左)) */
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height:1.2;
}
 /* アイコン*/
.figure-caption-icon-5 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    right: 0; /* 右から数値分移動 */
    display: block;
    width: 50px; /* 横幅*/
    height: 60px; /* 高さ*/
    background-image: url(ここにアイコン画像URL); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}

アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。

メディアからリンクをコピー
画像URLの調べ方

STEP3:サンプルからHTMLをコピペする(figure ver.)

HTMLをコピペします。

CSSをコピペしたサンプルのHTMLをコピーしてください。

WordPressの場合、HTMLは投稿画面でコードエディター(テキストエディタ)に貼り付ければOKです。

gutenbergコードエディタ
Gutenbergの場合
テキストエディタ
従来のエディターの場合

HTMLをコピペして画像を追加、キャプションを入力します。

プレビューで確認してみましょう!

STEP4:コピペしたCSSから位置やサイズを調整する(figure ver.)

変更する可能性があるものにはコメントで補足しています。

まずアイコンのサイズ調整。

/************************************
** 画像キャプション figure アイコン①(左上)
************************************/
/* 全体 */
.figure-caption-icon-1{
    margin-top:5em;/* 上に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-1 > figure figcaption{
    left: 0;/* 左から数値分移動 */
    bottom: calc(100% - 8px);/* 下から数値分移動 */
    min-height: 30px;
    padding: 0.5em 0 25px 4em;/* 余白(ここで文字の位置調整) */
}
 /* アイコン*/
.figure-caption-icon-1 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    left: 0; /* 左から数値分移動 */
    display: block;
    width: 50px; /* 横幅*/
    height: 60px; /* 高さ*/
    background-image: url(ここにアイコン画像URL); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}
 /* 吹き出し*/
.figure-caption-icon-1 .img-caption-text::before, .figure-caption-icon-1 .img-caption-text::after {
    border-bottom: 1px solid #777;
    content: "";
    width: 1em;
    position: absolute;
    top: -8px;
    left: 0;
    transform: rotate(-45deg);
}
/* 吹き出し*/
.figure-caption-icon-1 .img-caption-text::after {
    top: auto;
    bottom: -8px;
    transform: rotate(45deg);
}

アイコンのサイズは22行目あたりにあるwidth、heightで決められています。widthが横のサイズでheightが縦のサイズになります。

配置はtop、left、right、bottomの数値で決められています。

これは画像からの距離を示すものになっています。

例えばtop:0;と書けば画像の上から0pxの位置に配置、top:20px;と書けば画像の上から20pxの位置に配置となります。

ちなみにマイナスも使えます。

画像position例
配置決め方の例

デベロッパーツールを使えばすぐに位置決めできるのですが使い方がわからなければ編集→更新を繰り返して地道に調整してみてください。

キャプションのテキストの配置はコメントにも書いてある通りpaddingも関係しています。4つの数字は(上 右 下 左)の余白になっているのでここの数値を変更すれば配置が変わります。

流れは以下の通りです。

手順
  1. 共通CSSをコピペ
  2. サンプルを選びCSSをコピペ
  3. 試しにHTMLを入力
  4. 表示を確認しながら位置調整

STEP1:共通のCSSをコピペする(p ver.)

下記CSSコードをコピペしてください。

メモ

WordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** 画像キャプション
************************************/
.caption-icon-wrap{
   margin:0 auto 2em;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}
.caption-icon-wrap > p{
   position:relative;
}
.caption-icon-wrap > p > img,.caption-icon-wrap > p >amp-img{
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   display:block;
}
.caption-icon-wrap > p > amp-img{
   max-width:800px;
}
.caption-icon-wrap .img-caption{
   position: absolute;
   font-size: 13px; /* フォントサイズ*/
   line-height:1.5; /* 行間*/
}
.caption-icon-wrap .caption-icon-img{
   position: absolute;
}

STEP2:サンプルを選びCSSをコピペする(p ver.)

サンプルを5つ用意しました。やりたいことに一番近いサンプルを選び、CSSをコピペしてください。

デザインサンプル1:左上に表示させる

image-sample
ここに画像の説明を入れます



※こちらはpタグを使ったやり方です。

<div class="caption-icon-wrap caption-icon-1">
<p>ここに画像を挿入<span class="img-caption">/<br>ここに画像の説明<br>\</span><span class="caption-icon-img">ここにアイコン挿入</span></p>
</div>

画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。


/************************************
** 画像キャプション アイコン①(左上)
************************************/
.caption-icon-1{
  margin-top:5em; /* 上に余白 */
}
/* 画像説明文 */
.caption-icon-1 .img-caption{
  bottom: 103%; /* 下から数値分移動 */
  left: 72px; /* 左から数値分移動 */
}
/* アイコン位置 */
.caption-icon-1 .caption-icon-img{
  top: -63px; /* 上から数値分移動 */
  left: 5px; /* 左から数値分移動動 */
}
/* アイコン画像 */
.caption-icon-1 .caption-icon-img img,.caption-icon-1 .caption-icon-img amp-img{
  max-width:60px; /* アイコンサイズ */
  margin:0 !important;
  padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
  /* (スマホ)画像説明文 */
  .caption-icon-1 .img-caption{
    bottom:103%; /* 下から数値分移動 */
    left: 52px; /* 左から数値分移動置*/
    font-size: 12px; /* フォントサイズ*/
  }
  /* (スマホ)アイコン位置 */
  .caption-icon-1 .caption-icon-img{
    top: -43px; /* 上から数値分移動 */
    left: 5px; /* 左から数値分移動 */
  }
  /* (スマホ)アイコン画像 */
  .caption-icon-1 .caption-icon-img img,.caption-icon-1 .caption-icon-img amp-img{
    max-width:40px; /* アイコンサイズ */
  }
}

デザインサンプル2:左下に表示させる

image-sample出典はぽんひろ.comだ…
ここは俺に任せて…早く…行け…



※こちらはpタグを使ったやり方です。

<div class="caption-icon-wrap caption-icon-2">
<p>ここに画像を挿入<span class="img-caption">ここに画像の説明</span><span class="caption-icon-img">ここにアイコン挿入</span></p>
</div>

画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。


/************************************
** 画像キャプション アイコン②(左下)
************************************/
.caption-icon-2{
	margin-bottom:5em; /* 下に余白 */
}
/* 画像説明文 */
.caption-icon-2 .img-caption{
	top: 103%; /* 上から数値分移動 */
	left: 75px; /* 左から数値分移動 */
}
/* アイコン位置 */
.caption-icon-2 .caption-icon-img{
	bottom:-70px; /* 下から数値分移動 */
	left: 5px; /* 左から数値分移動 */
}
/* アイコン画像 */
.caption-icon-2 .caption-icon-img img,.caption-icon-2 .caption-icon-img amp-img{
	max-width:60px; /* アイコンサイズ */
	margin:0 !important;
	padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
	/* (スマホ)画像説明文 */
	.caption-icon-2 .img-caption{
		top: 103%; /* 上から数値分移動 */
		left: 55px; /* 左から数値分移動 */
		font-size: 12px; /* フォントサイズ*/
	}
	/* (スマホ)アイコン位置 */
	.caption-icon-2 .caption-icon-img{
		bottom:-50px; /* 下から数値分移動 */
		left: 5px; /* 左から数値分移動 */
	}
	/* (スマホ)アイコン画像 */
	.caption-icon-2 .caption-icon-img img,.caption-icon-2 .caption-icon-img amp-img{
		max-width:40px; /* アイコンサイズ */
	}
}

デザインサンプル3:中央上に表示させる

image-sampleHello!



※こちらはpタグを使ったやり方です。

<div class="caption-icon-wrap caption-icon-3">
<p>ここに画像を挿入<span class="img-caption">ここに画像の説明</span><span class="caption-icon-img">ここにアイコン挿入</span></p>
</div>

画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。


/************************************
** 画像キャプション アイコン③(中央上)
************************************/
.caption-icon-3{
	margin-top:5.5em; /* 上に余白 */
}
/* 画像説明文 */
.caption-icon-3 .img-caption{
	top: -75px; /* 上から数値分移動 */
	text-align:center;
	width:100%;
}
/* 吹き出し */
.caption-icon-3 .img-caption::before{
	content:"\ ";
}
/* 吹き出し */
.caption-icon-3 .img-caption::after{
	content:" /";
}
/* アイコン位置(中央配置) */
.caption-icon-3 .caption-icon-img{
	top: -47px; /* 上から数値分移動 */
	left: 50%; /* 左から数値分移動(中央配置) */
	-webkit-transform: translateY(0) translateX(-50%);/* (中央配置) */
	transform: translateY(0) translateX(-50%);/* (中央配置) */
}
/* アイコン画像 */
.caption-icon-3 .caption-icon-img img,.caption-icon-3 .caption-icon-img amp-img{
	max-width:80px; /* アイコンサイズ */
	margin:0 !important;
	padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
	/* (スマホ)画像説明文 */
	.caption-icon-3 .img-caption{
		top:inherit;
		bottom: 123%; /* 下から数値分移動 */
		font-size: 12px; /* フォントサイズ*/
	}
	/* (スマホ)アイコン位置 */
	.caption-icon-3 .caption-icon-img{
		top:-36px; /* 上から数値分移動 */
	}
	/* (スマホ)アイコン画像 */
	.caption-icon-3 .caption-icon-img img,.caption-icon-3 .caption-icon-img amp-img{
		max-width:60px; /* アイコンサイズ */
	}
}

デザインサンプル4:右上に表示させる

image-sample眠い…



※こちらはpタグを使ったやり方です。

<div class="caption-icon-wrap caption-icon-4">
<p>ここに画像を挿入<span class="img-caption">ここに画像の説明</span><span class="caption-icon-img">ここにアイコン挿入</span></p>
</div>

画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。


/************************************
** 画像キャプション アイコン④(右上)
************************************/
.caption-icon-4{
	margin-top:5.5em; /* 上に余白 */
}
/* 画像説明文 */
.caption-icon-4 .img-caption{
	top: -31px; /* 上から数値分移動 */
	right:90px; /* 右から数値分移動 */
	text-align:right;/* 段落右寄せ */
}
/* アイコン位置*/
.caption-icon-4 .caption-icon-img{
	top: -35px; /* 上から数値分移動 */
	right:0; /* 右から数値分移動 */
}
/* アイコン画像 */
.caption-icon-4 .caption-icon-img img,.caption-icon-4 .caption-icon-img amp-img{
	max-width:80px; /* アイコンサイズ */
	margin:0 !important;
	padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
	/* (スマホ)画像説明文 */
	.caption-icon-4 .img-caption{
		top:inherit;
		bottom: 104%; /* 下から数値分移動 */
		right:63px; /* 右から数値分移動 */
		font-size: 12px; /* フォントサイズ*/
	}
	/* (スマホ)アイコン位置 */
	.caption-icon-4 .caption-icon-img{
		top:-27px; /* 上から数値分移動 */
	}
	/* (スマホ)アイコン画像 */
	.caption-icon-4 .caption-icon-img img,.caption-icon-4 .caption-icon-img amp-img{
		max-width:60px; /* アイコンサイズ */
	}
}

デザインサンプル5:右に表示させる

image-sampleチラッ



※こちらはpタグを使ったやり方です。

<div class="caption-icon-wrap caption-icon-5">
<p>ここに画像を挿入<span class="img-caption">ここに画像の説明</span><span class="caption-icon-img">ここにアイコン挿入</span></p>
</div>

画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。


/************************************
** 画像キャプション アイコン⑤(右)
************************************/
/* 画像説明文 */
.caption-icon-5 .img-caption{
   bottom: 90px; /* 下から数値分移動 */
   right: -24px;/* 右から数値分移動 */
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   letter-spacing: 3px;
}
/* アイコン位置*/
.caption-icon-5 .caption-icon-img{
   bottom: 0; /* 下から数値分移動 */
   right: -45px;/* 右から数値分移動 */
}
/* アイコン画像 */
.caption-icon-5 .caption-icon-img img,.caption-icon-5 .caption-icon-img amp-img{
   max-width:80px; /* アイコンサイズ */
   margin:0 !important;
   padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
	.caption-icon-5> p > img,.caption-icon-5 > p >amp-img{
		max-width:320px;
	}
	/* (スマホ)画像説明文 */
	.caption-icon-5 .img-caption{
		top:inherit;
		bottom: 60px; /* 下から数値分移動 */
		right:-22px; /* 右から数値分移動 */
		font-size: 12px; /* フォントサイズ*/
		line-height:1.2;
	}
	/* (スマホ)アイコン位置 */
	.caption-icon-5 .caption-icon-img{
		bottom: 0px;/* 下から数値分移動 */
		right:-29px; /* 右から数値分移動 */
	}
	/* (スマホ)アイコン画像 */
	.caption-icon-5 .caption-icon-img img,.caption-icon-5 .caption-icon-img amp-img{
		max-width:35px; /* アイコンサイズ */
	}
}

STEP3:サンプルからHTMLをコピペする(p ver.)

HTMLをコピペします。

先ほど選んだサンプルにあるHTMLをコピーしてください。

WordPressの場合、HTMLは投稿画面でコードエディター(テキストエディタ)に貼り付ければOKです。

gutenbergコードエディタ
Gutenbergの場合
テキストエディタ>
従来のエディターの場合

HTMLをコピペして画像、アイコン画像を挿入します。

プレビューで確認してみましょう!

環境やアイコン画像によってサイズが変わるのでほぼ100%ズレてるかと思います。

STEP4:コピペしたCSSから位置やサイズを調整する(p ver.)

最低限変更するべき箇所はサイズと位置です。あとは余白でしょうか。

サンプル1を例に説明します。

サイズはmax-widthと書いてあるところで調整をしています。ちなみにmax-widthの数値より小さいサイズだとうまく表示されないのでアイコン画像はやや大きめで作るといいと思います。

サンプル1では二箇所書いてあるかと思います。

/************************************
** 画像キャプション アイコン①(左上)
************************************/
.caption-icon-1{
  margin-top:5em; /* 上に余白 */
}
/* 画像説明文 */
.caption-icon-1 .img-caption{
  bottom: 103%; /* 下から数値分移動 */
  left: 72px; /* 左から数値分移動 */
}
/* アイコン位置 */
.caption-icon-1 .caption-icon-img{
  top: -63px; /* 上から数値分移動 */
  left: 5px; /* 左から数値分移動動 */
}
/* アイコン画像 */
.caption-icon-1 .caption-icon-img img,.caption-icon-1 .caption-icon-img amp-img{
  max-width:60px; /* アイコンサイズ */
  margin:0 !important;
  padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
  /* (スマホ)画像説明文 */
  .caption-icon-1 .img-caption{
    bottom:103%; /* 下から数値分移動 */
    left: 52px; /* 左から数値分移動置*/
    font-size: 12px; /* フォントサイズ*/
  }
  /* (スマホ)アイコン位置 */
  .caption-icon-1 .caption-icon-img{
    top: -43px; /* 上から数値分移動 */
    left: 5px; /* 左から数値分移動 */
  }
  /* (スマホ)アイコン画像 */
  .caption-icon-1 .caption-icon-img img,.caption-icon-1 .caption-icon-img amp-img{
    max-width:40px; /* アイコンサイズ */
  }
}

コメントに書いてるので何となくわかるかと思いますが上がPC(タブレット)で見たときのサイズ、下はスマホで見たときのサイズになっています。

次に一番大事な位置の決め方です。

位置はtop、left、right、bottomの4つのいずれかを使って決めています。

これは画像からの距離を示すものになっています。

例えばtop:0;と書けば画像の上から0pxの位置に配置、top:20px;と書けば画像の上から20pxの位置に配置となります。

マイナスも使えます。

画像position例
配置決め方の例

PCでのアイコン位置、説明文位置。スマホでのアイコン位置、説明文位置を調整してください。

デベロッパーツールを使えばすぐに位置決めできるのですが使い方がわからなければ更新を繰り返して地道に調整してみてください。

複数のパターンを作りたい場合はそれぞれCSSを用意して位置を調整してください。

HTMLをAddQuicktagに登録しておくと楽

位置が決まればもう終わりです。

WordPress限定ですが何度も使いたい場合はAddQuicktagにHTMLを登録しておきましょう。

あわせて AddQuicktagの使い方と設定方法!

AddQuicktagの使い方と設定方法!Gutenbergでの使い方も紹介するよ!
AddQuicktagの使い方と設定方法をわかりやすく説明します!WordPressの必須プラグインと言われているAddQuicktag!設定は簡単で超便利、超時短になります。Gutenbergでの使い方も紹介します!

他にもカスタマイズやってます!

他にもカスタマイズをやってますので良かったらご覧ください!

あわせて ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】

ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】
ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。

あわせて Cocoonカスタマイズまとめ!

Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

ページトップへ