ウェブコーディング

WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

会話風吹き出しのテンプレートとして使えるCSSを作ってみました。

会話風吹き出しのデザインは一見難しそうに見えるのですが、要点さえ抑えてしまえば誰でも簡単に作ることができます。

例えば・・・

  1. ブログの中で会話してるみたいな吹き出しが作りたいんだよね。
  2. うんうん!LINEみたいな会話調のブログって読みやすいよね。
  3. CSSでできるみたいなんだけど、結構難しそうなんだよね・・・
  4. それが、実はそんなに難しくないんだ。
  5. そーなの?「after」とかでてきてよくわかんなくなっちゃうんだ。
  6. なるほどね。基礎知識無しでいきなりは難しいかもね。
    「::after」とか疑似要素って言うんだけど、そのあたりも含めて一緒に作りながら見ていこうか!

こんな感じの会話もサクッと作れてしまうのです。

更に今回の目標はWordPressのビジュアルエディタでも簡単に使えるように作ってみました。

会話風吹き出しを構成する3つの要素

会話風吹き出しは3つの要素で構成されています。

  1. 吹き出し本体(会話内容の部分)
  2. 吹き出しの出っ張り
  3. 人物画像(またはアイコン画像)

この3つをCSSで個別に作って配置を調整すると、会話しているような吹き出しを作れてしまうということです。

で、それぞれどのようにCSSを作るのかというと、リスト(olやul)の「li」要素と疑似要素の「before」「after」を使うことで、1つの要素として作ります。

役割 CSS
吹き出し本体(会話部分) リストの要素【li】
人物画像(アイコン画像) 擬似要素【li::before】
吹き出しの出っ張り 疑似要素【li::after】

では順番に進めていきますね。

会話風CSSデザインのための準備

今回は1から作るというテーマなので、まずはCSSを設定する準備とデザインを確認する準備をしておきます。

「準備」と言ってもプレビュー用の記事の用意とCSSを設定するための子テーマの用意なので、すぐに終わりますね。

サクッと進めていきましょう。

プレビュー用の記事を準備する

CSSのスタイルをプレビューできるようにWordPressのテキストエディタにこのHTMLを貼り付けておきます。

プレビュー用の記事の用意はこれだけでOKです。

CSSを更新するたびにプレビュー用の記事で「プレビュー」ボタンを押すと、CSSの変更を確認することができるようになりました。

CSS設定のための子テーマを準備する

CSSの設定を追加するときは子テーマを使うことになります。

子テーマのテンプレートを用意していますので、まだ子テーマを使っていない方はこちらをどうぞ。

子テーマを自作したい方はココ↓でチェックしてくださいね。

ここまでで準備完了です。

吹き出しを作るCSS

吹き出しをデザインしていく順番は

  1. 共通設定
  2. 文字エリア(吹き出し本体)
  3. 出っ張り部分
  4. 画像・アイコン部分

という感じになります。

途中に色の設定をする箇所があったりするので、そのあたりはブログの雰囲気に合わせて変更してみてください。

では進めていきます。

共通設定

今回はリストを使ってデザインしていくので、リスト全体の表示幅やリストのマークを消すためのCSSが必要になります。

その設定がこのCSSです。

このままコピペして使うこともできますし、表示幅を変更して使うこともできます。

吹き出し本体の部分を設定するCSS

本体部分は会話のテキストを表示する部分です。

色を付けたり、角を丸めたりしていますがテキストの枠になる部分なので過度な装飾は辞めておいたほうがいいと思います。

ここまでのCSSで先程のプレビューを一度確認しておきます。

背景色と枠があるだけでも会話風吹き出しに近づいているのがわかりますね。

吹き出しの出っ張り部分を設定するCSS

出っ張り部分は吹き出しっぽく見せるために欠かせない要素です。

リストのafter疑似要素で作っていきます。

出っ張り部分をプレビューするとこうなっています。

一見すると複雑なCSSに見えるのですが、やっていることはafter疑似要素のborderプロパティで擬似的に三角形を作っているだけなのです。

よくわからないときはコピペしておけばOKですね。

色は吹き出し本体と同じ色にしておくことをお忘れないように。

人物画像(アイコン画像)を設定するCSS【その1】

最後にbefore疑似要素とウェブフォントの組み合わせでアイコン画像を設定します。

プレビューしてみると冒頭の会話風の吹き出しが完成しています。

ここではFontAwesomeというサービスを利用して、ウェブフォントをアイコンとして使っています。

使い方はこちらの記事で詳しく解説しています。

人物画像(アイコン画像)を設定するCSS【その2】

画像をアイコンとして使いたい場合はこっちのCSSを利用してください。

ちょっとだけ違いますが、アイコンフォントを使う場合と仕組みは一緒です。

画像を指定するとこんな表示になります。

画像はご自分のサーバーにアップロードして、その画像のURLをそのまま記入します。

WordPressでアップロードするならこの部分が画像のURLになります。

これで一通りの設定ができました。

作ったCSSをWordPressで使う方法

今回はリストの要素として会話風吹き出しを作りました。

その理由というのもWordPressで簡単に使えるようにするためです。

普通はテキストエディタ側で

のようにスタイルを指定しないといけないのですが、記事中に定形のタグを挿入する「Add Quicktag」というプラグインを使って簡単に使えるようにしたかったのです。

その方法だけ少し説明しておきますね。

「AddQuicktag」をインストールして設定を開きます。

ここに1つ設定を追加します。

この1つを追加して保存しておきます。

ビジュアルエディタに戻って、吹き出し会話をしたい部分でQuicktagからスタイルを選ぶと・・・

こんな風に会話のやり取りをリストの奇数偶数の番号でやり取りできるようになります。

WordPressサイトで会話風の吹き出しを使うなら一番簡単な方法だと思います。

ぜひ試してみてください。

あとがき

この会話風の吹き出しはこのブログで使っているMAGというテーマに最適化されているので、他のテーマで使うにはちょっとカスタマイズが必要になるかと思います。

画像サイズや吹き出しのサイズをうまく調整してみると思い通りの吹き出しが作れると思います。

今回の設定を全部まとめたCSSをダウンロードできるようにしておいたので、よろしければ使ってやってください。

Icon
【CSS】会話風CSSテンプレート

詳細は

WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

を御覧ください。

あと、position関連の設定についてはこちらでも解説しているのでご参考までにどうぞ。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

ブログ向けWordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. ウェブコーディング

    WEB言語を手を動かして1から学べるサイト

    HTML・CSS・PHPなどのウェブ系の言語をどれくらい理解しているで…

  2. ウェブコーディング

    PHPなどのプログラムコードをUTF-8で保存するときの注意点

    サーバーで実行されるPHPやJavascriptなどをテキストエディタ…

  3. ウェブコーディング

    意外と重要なCSSのidとclassを使い分け

    WordPressテーマを作ったり、ホームページを作ったりするとき、間…

  4. ウェブコーディング

    CSSのfloatを使ってリキッドレイアウトを組んでみた

    先日ふと思い立って、一からWEBサイトをデザインし始めることにしたので…

  5. ウェブコーディング

    NetBeansでSQliteのドライバーを有効にするプラグイン

    PHPなどのwebアプリケーションを作成できるNetBeansですが、…

  6. ウェブコーディング

    PHPでデータベースから取得した配列を加工する方法

    データベースからデータをfetch関数などで取得すると、大体は2次元配…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

カテゴリー

ピックアップ記事

WordPressテーマ「MAG(TCD036)」     ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
  1. グラフィックデザイン

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  2. ブログの収益化

    報酬の受取に苦労してません?Amazon・楽天のアフィリエイトで効率的に報酬を受…
  3. ブログやサイトの作り方

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  4. 便利なツールの話

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  5. 便利なツールの話

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
PAGE TOP