キャラクターに話させるとぐんと親近感がわきますよね。
どうやってやるのかな。
プラグインもあるけど、CSSとHtmlでもできるようです。
コンテンツ
手っ取り早く結論
上のコードを
外観→TCDテーマオプション→基本の下の方にある「追加CSS」に貼り付けます。
そして、記事部分で使うときは、まず使いたい顔アイコンのイラストを正方形で整形して、メディアにアップ。そのURLをメモして下のコードのようにします。
実際の画像は下のようになります。
ワードプレス難しいー！
そのあとで、さらに左右に画像をつけて、会話ができるCSSを開発したブログがありました。
顔アイコンも大きいし、いいかも！ありがとうございました。
| 2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれているので正々堂々と改良いたします！ ... 誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS - OHAMAstyle |
上の形に至るまでのいろいろな試行錯誤
本日は面白いプラグインを見つけましたのでご紹介します。LINEやFacebookメッセージのように会話形式でブログを表示できる、プラグイン「Speech Bubble」です。
吹き出しの会話を手軽に使えるプラグイン「Speech Bubble」 - ワードプレステーマTCD
まずは顔イラストのないふきだしのだけ
コピペで使える「吹き出し」のCSSサンプルをまとめました。使うのはHTMLとCSSだけ。シンプルなデザインから、円形、会話形式、LINE風チャット形式まで。
CSSで作る！吹き出しデザインのサンプル19選 - サルワカ | サルでも分かる図解説明マガジン
CSSだけでつくれる「吹き出し」のデザインサンプルを26個、用意しました！どのサンプルもコピペで利用することができますので、デザインの参考にぜひ取り入れてみてください。
CSSだけで吹き出しをつくる！デザインサンプル26個 - Tech2GO
ここらへんで勉強して、外観→カスタマイズ→CSS追加していきました。
会話風のやりかたはこちら（おすすめ）
コピペで使える「吹き出し」のCSSサンプルをまとめました。使うのはHTMLとCSSだけ。シンプルなデザインから、円形、会話形式、LINE風チャット形式まで。
CSSで作る！吹き出しデザインのサンプル19選 - サルワカ | サルでも分かる図解説明マガジン
ふきだしの背景色をHTMLでカエルことがしたくなりました。（キャラによってかえるとか）
好きな色を選ぶのは
Google -
グーグルで色コードで検索すると、ジェネレーターがでてきて、自由に選べます。それをCSSの色のコードと張り替えればOK
横幅を文字数に合わせて大きくなりすぎないようにする。
CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介します。RWDにも対応できるので何気に覚えておくと便利だなーと思いました。これにより文字の長さに合わせたbackgroundやbor...
CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方 - bl6.jp
いろいろやりましたが、シンプルな「さるわか」のコードにしました。
ひんぱんに使えるように
意外と簡単に表示できた会話風のテキスト。たまに表示するならいいんですが、多用するとなると少し面倒です。そこで、どうすれば誰でも簡単に使えるのか考えてみたところ、良さそうな方法があったので、その方法をご紹介します。TinyMCE Templatesをインス...
WordPressで会話風の画像とテキストをコピペで簡単表示！ - MORIAWASE（モリアワセ）
こちらを学んで、だんだんと移行していこうとおもっています。
前にスクリプトをコピペというのがわからなかったけど、こちらでわかりました。
外観 テーマの編集 右サイドバーからfooter-phpというのをクリックして、その最後のほうにあります。
アクセス解析用のタグの設定方法は解析ツールの仕様により異なりますので、解析タグの開発元にご確認ください。
アクセス解析のタグを設置するには、どの部分に挿入すれば良いのでしょうか？ - ワードプレステーマTCD
bodyの閉じタグ（/body）直上に設置する場合はfooter.phpを、bodyの開始タグ直下に設置する場合はheader.phpをそれぞれ編集して下さい。
追加CSSにコードをいれて、記事はテキストでテンプレをつくる
http://design-plus1.com/tcd-w/2016/08/speech-bubble.html
自分の理解力のなさにオコです(´；ω；｀)
目次も作れるように予習
目次もつくります。自動でなく、長くなったものだけ
プラグインを使わない 目次の作り方を紹介します。 ここで言う目次とは ↓以下のようなものです。 ■目次の例 &・・・
WordPress目次の作り方！htmlでページ内リンクを作成する方法 - アフィ活 ～サラリーマン副業ブログ実践記～
こちらを参考にしました。
さて、つぎは会話プラグインを使ってみます。