キャラクターに話させるとぐんと親近感がわきますよね。
どうやってやるのかな。
プラグインもあるけど、CSSとHtmlでもできるようです。
コンテンツ [表示]
手っ取り早く結論
| /*吹き出しバルーン */ | |
| .balloon5 { | |
| width: 100%; | |
| margin: 1.5em 0; | |
| overflow: hidden; | |
| } | |
| .balloon5 .faceicon { | |
| float: left; | |
| margin-right: -90px; | |
| width: 80px; | |
| } | |
| .balloon5 .faceicon img{ | |
| width: 100%; | |
| height: auto; | |
| border: solid 3px #d7ebfe; | |
| border-radius: 50%; | |
| } | |
| .balloon5 .chatting { | |
| width: 100%; | |
| } | |
| .says { | |
| display: inline-block; | |
| position: relative; | |
| margin: 5px 0 0 105px; | |
| padding: 17px 13px; | |
| border-radius: 12px; | |
| background: #d7ebfe; | |
| } | |
| .says:after { | |
| content: ""; | |
| display: inline-block; | |
| position: absolute; | |
| top: 18px; | |
| left: -24px; | |
| border: 12px solid transparent; | |
| border-right: 12px solid #d7ebfe; | |
| } | |
| .says p { | |
| margin: 0; | |
| padding: 0; | |
| } |
上のコードを
外観→TCDテーマオプション→基本の下の方にある「追加CSS」に貼り付けます。
そして、記事部分で使うときは、まず使いたい顔アイコンのイラストを正方形で整形して、メディアにアップ。そのURLをメモして下のコードのようにします。
| <div class="balloon5"> | |
| <div class="faceicon"><img class="alignnone size-full wp-image-209" src="https://rekisitravel.com/wp/wp-content/uploads/2018/02/naruhodo.jpg" alt="" width="72" height="72" /></div> | |
| <div class="chatting"> | |
| <div class="says"> | |
| <p>ワードプレス難しいー！</p> | |
| </div> | |
| </div> | |
| </div> | |
実際の画像は下のようになります。
ワードプレス難しいー！
そのあとで、さらに左右に画像をつけて、会話ができるCSSを開発したブログがありました。
顔アイコンも大きいし、いいかも！ありがとうございました。
上の形に至るまでのいろいろな試行錯誤
まずは顔イラストのないふきだしのだけ
ここらへんで勉強して、外観→カスタマイズ→CSS追加していきました。
会話風のやりかたはこちら（おすすめ）
ふきだしの背景色をHTMLでカエルことがしたくなりました。（キャラによってかえるとか）
好きな色を選ぶのは
グーグルで色コードで検索すると、ジェネレーターがでてきて、自由に選べます。それをCSSの色のコードと張り替えればOK
横幅を文字数に合わせて大きくなりすぎないようにする。
いろいろやりましたが、シンプルな「さるわか」のコードにしました。
ひんぱんに使えるように
こちらを学んで、だんだんと移行していこうとおもっています。
前にスクリプトをコピペというのがわからなかったけど、こちらでわかりました。
外観 テーマの編集 右サイドバーからfooter-phpというのをクリックして、その最後のほうにあります。
bodyの閉じタグ（/body）直上に設置する場合はfooter.phpを、bodyの開始タグ直下に設置する場合はheader.phpをそれぞれ編集して下さい。
追加CSSにコードをいれて、記事はテキストでテンプレをつくる
http://design-plus1.com/tcd-w/2016/08/speech-bubble.html
自分の理解力のなさにオコです(´；ω；｀)
目次も作れるように予習
目次もつくります。自動でなく、長くなったものだけ
こちらを参考にしました。
さて、つぎは会話プラグインを使ってみます。
この記事へのコメントはありません。