今回はSTREETISTの吹き出しの使用と設定の方法を説明します。
ブログテーマをSTREETISTにした方やこれから導入する方にとって役に立つ記事になります。
たくさんの機能が搭載されているSTREETISTで記事の読みやすさと表現の拡張性を向上させたいという方の中に「吹き出し」機能を使いたいと考えている方がいらっしゃるかと思います。
そこでこの記事ではその「吹き出し」の設定方法から使用法、そして少しの工夫も紹介していきますので、ぜひ最後までご覧ください！
STREETIST「吹き出し」設定
吹き出しの設定は以下のステップで完了します。
- STEP
設定１
吹き出し用の画像を用意する - STEP
設定２
吹き出し管理画面で新規追加 - STEP
設定３
ショートコードを保存する
詳しく見ていきましょう！
設定１．吹き出し用の画像を用意する
吹き出しに適用するアイコンをあらかじめ用意しておきましょう。
僕が普段【図解】記事で使用しているアイコンサイトを下に記載しておきます。シンプルなアイコンを使用したい方はぜひ、参考にしてください！
シンプルなアイコンを使っている記事はこちら！
| こんにちは、97年生まれの「僕」です。259個のアイテムと4.5畳部屋で豊かに暮らしているミニマリストブロガーです。ミニマリストに関する記事を中心に色々なことをお伝えしています。今日も記事を見に来て... 【図解】ミニマリスト思考｜ミニマリストになるには全２０の意識と行動を - less-is-idea.com |
| メリットがたくさんあるように見えるミニマリストについて。デメリットはないの？と思われる方に向けてミニマリストのデメリットについて紹介していきます。メリットがあるからこそ、悪い側面も考えていきたいで... 【図解】ミニマリストのデメリットが全12のイラストでわかる - less-is-idea.com |
参考サイト3選
今回はカラーが入った下の画像を保存してみました。
設定２．吹き出し管理画面で新規追加
アイコンに設定する画像が決まったら、早速設定する画面に移っていきましょう！
まずはWordPressの管理画面の左側から「吹き出し管理」を選択して、吹き出しが管理できるダッシュボードへ飛びましょう！
管理画面が表示されたら、「新規作成」をクリックします。
「新規作成」画面は以下の通りです。これから増えていく吹き出しとの区別がつきやすいように分かりやすいタイトルにしておきましょう！
BAD
「吹き出し１」とかはオススメしません。使用するときにほかの吹き出しと区別がつきにくくなります。
※１解説
「名前」はアイコンの下に表示されるアイコン名のことを指しています！
自分の名前や特定の人を指したいときには設定しておくと便利です。
※２解説
吹き出しのコメント表示背景を変更することができます。
デフォルトで4種類のカラーが用意されています。
設定３．ショートコードを保存する
吹き出しが保存できたら、「公開」をクリックして、吹き出し管理画面に戻ります。
吹き出し管理画面に戻ると先ほど作成した吹き出しの内容が反映されているので、反映された吹き出しの「ショートコード」をコピーして、メモ帳などに保存しておきましょう！
STREETIST「吹き出し」使用方法
続いて使用方法についてです。
使用方法はいたって簡単です。
文章中の吹き出しを挿入したい部分にコピーしておいたショートコードを貼り付けます。あとは「本文」という欄に自分が表示させたいコメントを入力するのみです！
上手く表示されたでしょうか？
下のようにアイコンとコメントが入力されていれば成功です！
STREETIST「吹き出し」工夫
工夫１：吹き出しの位置の調整
吹き出しの位置は左右の位置どちらかを選択することができます。
吹き出しの左右調整方法
下のように「pos」をleftかrightを選択することで位置を変えることができます！
talk set="吹き出しテスト" pos="left" color="gray"
talk set="吹き出しテスト" pos="right" color="gray"
工夫２：吹き出しの背景カラーの一時的変更
コメントの背景を設定しましたが、一時的に背景の色を変更することも可能です！
一時的な背景チェンジ方法
下のように「color」の部分を変更することで背景カラーを変更することが可能です。
talk set="吹き出しテスト" pos="left" color="blue"
talk set="吹き出しテスト" pos="left" color="pink"
talk set="吹き出しテスト" pos="left" color="gray"
talk set="吹き出しテスト" pos="left" color="skin-color"
工夫３：ボックスの中に挿入
吹き出し機能はSTREETISTに搭載されているボックスの中にも挿入することができます。
ボックスの中に吹き出しを挿入する方法
ボックスの開始タグと終了タグの間に吹き出しを挿入することで、可能になります。
<div class="box box--border-bk">
<p class="box__title">ボックスの中に入れてみた</p>
<---ここに吹き出しのショートコードを挿入する--->
</div>
ボックスの中に入れてみた
まとめ：STREETIST「吹き出し」設定→使用→工夫
今回は「【初心者のための】STREETIST「吹きだし」使い方と設定方法」というタイトルで設定から使用方法、工夫を3点紹介してきました。
シンプルかつSTREETISTを使いこなして、よりよい文筆活動をしてきましょう！
STREETISTについてたくさん記事を書いています！
| STREETISTが良いって聞いたんだけどほんとにそう？STREETISTのどんなところが良いの？という疑問をお持ちの方に向けてWordPressブログテーマ【STREETIST】の良さをレビューしながらご紹介すると同時に、購... 使用者レビュー｜ブログテーマ「STREETIST」の機能・ポイントすべて - less-is-idea.com |
| 無料のテーマのままでいいのかな…最近WordPress（ワードプレス）のブログテーマの変更で悩んでいて、STREETISTというテーマが気になっている！という人に向けて今回は購入前にSTREETISTで使用できるショートコー... 【全26種類】STREETIST(WPテーマ)のショートコードボックスをすべて公開 - less-is-idea.com |
| 今回はSTREETISTのブログテーマを購入したんだけど、マイパーツの使い方がわからない！といったSTREETISTのマイパーツの使い方がわからないという方にむけてマイパーツの使い方を紹介します。こちらのブログテー... 【初心者のための】STREETIST「マイパーツ」使い方 - less-is-idea.com |
| こちらの記事はブログテーマSTREETISTでタイムラインを表示させる方法を解説する記事です。記事の見やすさを向上させるためには欠かせないブログパーツの「タイムライン」を使用してブログの文筆活動をより楽しく... 【初心者のための】STREETISTタイムラインの使い方と種類について解説 - less-is-idea.com |
