東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。!】Cocoonトップページをスッキリとサイト型へカスタマイズ!2019.08.042019.12.11【Cocoon】ヘッダーメニューをオシャレに!上部に固定追従!2019.06.262019.12.19どこよりも簡単にJINのトップページをサイト型にカスタマイズ!2019.08.072020.01.29【Cocoon】プロフィールをオシャレで可愛くしてみた!2019.06.242020.02.01【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK!2019.02.182019.06.11Twitterはこちら仕事依頼はこちら画像キャプションをアイコンで超可愛くする【HTML/CSS】TwitterFacebook0はてブ1Pocket14LINE2019.10.11かわいいものは好きですかー?ということで今回はHTMLとCSSで画像のキャプションを可愛くします。/ここに画像の説明を入れます\その前に...画像キャプションのHTMLはfigure、figcaptionを使うのが一般的ですが仕様上実現が難しかったのでpタグを使っています。2019/7/31更新:figureタグを使った方法を教えていただいたのでそちらのやり方も追記します。環境とアイコン画像によって各自位置を変更する必要があります。文字数によっては表示が収まらずに崩れてしまうことがあります。当たり前ですがアイコン画像を各自用意する必要があります。STAMPOさんのを使わせていただいてます!無料で利用可能です。figureタグを使う方法、pタグを使う方法の2通り紹介します。どちらか片方でOKです!画像のキャプション(見出し)を入れる場合はfigure推奨です。効果音や感想など画像と関係のない言葉を入れるならpタグで!作るのが楽なのはfigureの方ですかね!ちなみにタグの違いは...figureタグで囲む本文の補足として挿入してる画像はfigureタグで囲みます。キャプション(見出し)が入れられます。figureタグを使う方法へpタグで囲む補足ではなく画像自体に意味があればpタグで画像を囲みます。導入済みのブログ、サイト紹介させてください他にもカスタマイズやってます!figureタグを使って画像キャプションをCSSで可愛くする流れは以下の通りです。ver.)下記CSSコードをコピペしてください。メモWordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。「外観→カスタマイズ→追加CSS」に貼り付けてください。ver.)サンプルを5つ用意しました。やりたいことに一番近いサンプルを選び、CSSをコピペしてください。※こちらはfigureタグを使ったやり方です。rotate(45deg);}アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。※こちらはfigureタグを使ったやり方です。no-repeat;}アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。※こちらはfigureタグを使ったやり方です。rotate(-45deg);}アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。※こちらはfigureタグを使ったやり方です。rotate(-45deg);}アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。※こちらはfigureタグを使ったやり方です。no-repeat;}アイコン画像はurl()の中に画像URLを入れますがWordPressの場合、メディア→リンクをコピーで調べられます。ver.)HTMLをコピペします。CSSをコピペしたサンプルのHTMLをコピーしてください。WordPressの場合、HTMLは投稿画面でコードエディター(テキストエディタ)に貼り付ければOKです。従来のエディターの場合HTMLをコピペして画像を追加、キャプションを入力します。ver.)変更する可能性があるものにはコメントで補足しています。アイコンのサイズ調整。rotate(45deg);}アイコンのサイズは22行目あたりにあるwidth、heightで決められています。widthが横のサイズでheightが縦のサイズになります。配置はtop、left、right、bottomの数値で決められています。これは画像からの距離を示すものになっています。top:0;と書けば画像の上から0pxの位置に配置、top:20px;と書けば画像の上から20pxの位置に配置となります。ちなみにマイナスも使えます。配置決め方の例デベロッパーツールを使えばすぐに位置決めできるのですが使い方がわからなければ編集→更新を繰り返して地道に調整してみてください。キャプションのテキストの配置はコメントにも書いてある通りpaddingも関係しています。左)の余白になっているのでここの数値を変更すれば配置が変わります。pタグを使って画像キャプションをCSSで可愛くする流れは以下の通りです。ver.)下記CSSコードをコピペしてください。メモWordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。「外観→カスタマイズ→追加CSS」に貼り付けてください。ver.)サンプルを5つ用意しました。やりたいことに一番近いサンプルを選び、CSSをコピペしてください。※こちらはpタグを使ったやり方です。class="caption-icon-img">ここにアイコン挿入</span></p></div>画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。※こちらはpタグを使ったやり方です。class="caption-icon-img">ここにアイコン挿入</span></p></div>画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。※こちらはpタグを使ったやり方です。class="caption-icon-img">ここにアイコン挿入</span></p></div>画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。※こちらはpタグを使ったやり方です。class="caption-icon-img">ここにアイコン挿入</span></p></div>画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。※こちらはpタグを使ったやり方です。class="caption-icon-img">ここにアイコン挿入</span></p></div>画像はそのままimgタグで入れてください。WordPressの場合はメディアを追加からでOKです。ver.)HTMLをコピペします。先ほど選んだサンプルにあるHTMLをコピーしてください。WordPressの場合、HTMLは投稿画面でコードエディター(テキストエディタ)に貼り付ければOKです。Gutenbergの場合>従来のエディターの場合HTMLをコピペして画像、アイコン画像を挿入します。プレビューで確認してみましょう!環境やアイコン画像によってサイズが変わるのでほぼ100%ズレてるかと思います。ver.)最低限変更するべき箇所はサイズと位置です。あとは余白でしょうか。サンプル1を例に説明します。サイズはmax-widthと書いてあるところで調整をしています。ちなみにmax-widthの数値より小さいサイズだとうまく表示されないのでアイコン画像はやや大きめで作るといいと思います。サンプル1では二箇所書いてあるかと思います。}}コメントに書いてるので何となくわかるかと思いますが上がPC(タブレット)で見たときのサイズ、下はスマホで見たときのサイズになっています。次に一番大事な位置の決め方です。位置はtop、left、right、bottomの4つのいずれかを使って決めています。これは画像からの距離を示すものになっています。top:0;と書けば画像の上から0pxの位置に配置、top:20px;と書けば画像の上から20pxの位置に配置となります。スマホでのアイコン位置、説明文位置を調整してください。デベロッパーツールを使えばすぐに位置決めできるのですが使い方がわからなければ更新を繰り返して地道に調整してみてください。複数のパターンを作りたい場合はそれぞれCSSを用意して位置を調整してください。位置が決まればもう終わりです。WordPress限定ですが何度も使いたい場合はAddQuicktagにHTMLを登録しておきましょう。AddQuicktagの使い方と設定方法!AddQuicktagの使い方と設定方法!Gutenbergでの使い方も紹介するよ!AddQuicktagの使い方と設定方法をわかりやすく説明します!WordPressの必須プラグインと言われているAddQuicktag!設定は簡単で超便利、超時短になります。ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】コピペでできるブログカスタマイズまとめ【HTML&CSS】ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。Cocoonカスタマイズまとめ!【30通り以上!】Cocoonカスタマイズ!コピペで簡単!Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。ID:E2NTY4OTEこんにちわ、これの画像の部分が、リストの背景になっているバージョンがあればいいなと思いました。要するにこのデザインを活かしたリストがあれば良いなと。以前に作られた画像つきリストの様に右側の幅を取られなくて良いんじゃないかと思いました。ID:M2MDE4NjY初めまして。いつも参考にさせていただいています。今回、このキャプションを導入してみたんですが、画像の幅がワードプレスの記事幅よりも大きくなってしまいます。生地の幅に収まるようにしたいんですが、どうしたらいいでしょうか?あと、画像が中央になるのも左寄せにしたいと思っています。忙しいところ申し訳ありませんが、よろしくお願い致します。画像幅は投稿後に確認したら大丈夫でした。確認不足でコメントして申し訳ありませんでした。コメントをキャンセルメールアドレスが公開されることはありません。東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。