Cocoon WordPress

【Cocoon】吹き出しの表示のさせ方【できて損なし】

スポンサーリンク

WordPressでは当たり前のように使われている

ハルマチ
今日はいい天気だな~
そうね
女性

こんな感じの「吹き出し

やってみたくないですか?

 

会話を使うことでコンテンツの表現の幅も広がるし、できるようになって損はないです!!

 

今回は「吹き出し」の設定その表示のさせ方について解説します。

設定

とっても簡単!

Cocoon設定>吹き出しに移動して

右にある「編集」をクリックすると吹き出しの編集が行えます。

 

クリックするとこんな画面が表示されます。

タイトル: 投稿画面での吹き出しのタイトルです。わかりやすくしておきましょう。

名前: 吹き出しの画像の下の名前の設定です。なくても大丈夫です。

アイコン画像: アイコン画像をフォルダから追加します。
注意点として画像は正方形、つまり160×160のように同じ縦横にしなければいけません。
画像正方形にする方法は下のほうでを解説しています。

吹き出しスタイル: デフォルトが白枠、フラットが灰色になります。ほかにもLINEに似た吹き出しになったり破線の吹き出しに変更できます。

人物位置: 左端か右端どちらにするか設定します。

アイコンスタイル: 丸枠、四角枠、それらの枠なしに変更できます。

TinyMCE: ビジュアルエディタに表示させるかどうか設定します。つけたままで大丈夫です。

 

設定が終わったら保存して完了です!

 

アイコン画像を正方形にしないと…

こーんな感じに楕円形の吹き出しになっちゃいます…

 

確認

投稿画面から保存した吹き出しを表示させましょう。

プラスマークを押して下のほうにスクロールすると「Cocoonブロック」のところに「吹き出し」があります。

クリックすると吹き出しが出てきます。

吹き出しを選択したままビジュアルエディタのブロックの欄に行くと

吹き出しの変更

背景枠の色など変更できます。

 

画像を正方形にする方法

Windowsに最初から入っている「ペイント」を使って簡単に正方形にできます!

Windows画面の隣にある検索バーから「ペイント」と検索するとソフトが出てきますので、起動させます。

貼り付け」の下の▼マークをクリックしてフォルダを表示させて画像を選ぶか、

直接ペイントにポイっと入れるかのどちらかをすると画像が表示できます!

画像の下側にある白い〇をクリックしたままマウスを動かす画像の大きさ調整できます。

調製が終わるとこんな感じになります!

縦横373×373にできていますね!!

 

ちなみに、切り取らずに大きさを変えたい場合は画像の上をマウス右クリックを押して「サイズ変更」を選ぶとできます。

まとめ

いかがだったでしょうか。

 

吹き出しをつかうと一気にブログの表現の幅が広がりますよね。

それでは!

こちらもCHECK

【Cocoon】スキン設定を使って簡単にサイトをカスタマイズする方法

悩んでいる人CocoonをカスタマイズしたいけどCSSとよくわからないな… なら、Cocoonのスキン機能を使ってみたら?女性 CSSをいじらなくてもクリック1つで簡単に設定が可能よ女性 スキン機能を ...

続きを見る

こちらもCHECK

【Cocoon】吹き出しの表示のさせ方【できて損なし】

WordPressでは当たり前のように使われている ハルマチ今日はいい天気だな~ そうね女性 こんな感じの「吹き出し」 やってみたくないですか?   会話を使うことでコンテンツの表現の幅も広 ...

続きを見る

スポンサーリンク

  • この記事を書いた人

Harumachi

現在絶賛引きこもりニートのハルマチです。 とても東大に行きたくなったので現在それに向けて勉強しております。 よろしくお願いします!

-Cocoon, WordPress
-, ,

© 2021 ハルマチのブログ