【WordPress】cssを使って画像つき吹き出しをブログ記事に表示させる方法

2020/5/16追記

この記事はsimplicity2というテーマを使っていた時に画像つき吹き出しをつけるために設定を行った作業メモの記事です

今使っているcocoonというテーマにははじめから画像付き吹き出しをつける機能がついているので、こういう設定がめんどくさい人はテーマを変えてみるのも手だと思います

————————————————————————————————————————————-

吹き出しで文章にアクセントをつけたい！

長い文章を読んでいると集中が途中できれてしまうことがあります

ブログでも長い記事では途中で読むのをやめてしまうことがあります

そうならないために、アイキャッチの画像をいれたりするわけです

吹き出しで会話形式にすることでも読者の気分転換になって、より長くブログに滞在してもらえると思って、cssを編集してやってみました

今回はこちらのページを参考にさせてもらいました→リンク

初心者の自分では調べないとわからなかったところを補足しながら書いていきます

画像を用意する

吹き出しだけをいれるならsimplicity2の機能でもっと簡単にできるっぽいですが、絵があった方がアクセントになるので、画像付きで吹き出しをいれる方法でいきます。

まずは顔部分の画像をつくります。

ダッシュボード→メディア→新規追加→ファイル選択

の順で使いたい画像を選びます。

次に編集で画像サイズを小さくします。

今回の画像はもともと96px×96pxでそのまま使っています。

編集後、保存したら画像ファイルのURLをコピーしてメモ帳などに貼っておきます。

ＣＳＳカスタマイズ

この工程は2パターンあります。

• Simplicityのレスポンシブ設定を使っている場合
• Simplicityのレスポンシブ設定を使ってない場合

まずは

外観→テーマの編集

でcss編集画面にいきます。

自分のブログの設定にあわせて、cssを編集します。

レスポンシブ設定が何かわからないという方は、たぶん設定してないパターンでいいと思います。

私もこの設定の意味がわからず、緑→赤の順で設定すると赤の設定をしたときに初めて吹き出しがでるようになったので、デフォルトはレスポンシブ設定が無効になっていると思われます。

レスポンシブ設定とはPCとモバイル端末でのサイトの表示を同じにする設定のようです。

コードについては、参考リンクに詳しく書いてあるので割愛します。

Add Quick Tagの設定

毎回吹き出しを出したいときに上記のスタイルを適用させるために手入力をすると大変なので、プラグインAdd Quick Tagを使いましょう

このブログでは、見出しもこのプラグインでつくってます

インストール

プラグイン→新規追加

でAdd Quick Tagと検索すればでてきます。

設定

インストール完了後、プラグイン設定画面にいきます

それぞれの入力欄にいれる内容ですが、

左端の列は自分がわかるようになっていればなんでもいいです

真ん中の列はコードに合わせる必要があります

右端は特に何もいれてません

またどの範囲に適用するかを右のほうにあるチェック欄で決めます

ここにチェックを入れないと、記事を書く画面で使えません

私は以下の3つにチェックを入れてます

• ビジュアルエディター
• post
• page

これで記事と固定ページで吹き出しを出せるようになります

記事に適用してみる

編集画面上のQuick Tagのプルダウンから吹き出しが選べるようになります。

吹き出しにしたい文章を選択して、このプルダウンの中の吹き出しコマンドをクリックすれば吹き出しを追加することができます

まとめ

前々からやってみたかったけど、普通に文章を書くよりブログのデザインとかをいじるのって大変そうでなかなかやる気にならず、時間がかかってしまいました

でも、実際にやってみるとそこまでむずかしくなかったです

途中調べものをしても1時間くらいで設定はできました

皆さんもぜひやってみてください!