【WordPress】吹き出しや枠を追加して、ブログをもっと見やすくする方法

ステップ2 お金を稼ごう!
チョコ
チョコ

もっと読みやすいブログにしたいなぁ。

ネコ
ネコ

吹き出しをいれたり、枠で囲ってみたら?

もっと読みやすいブログにしたいと思い、いろいろなブログを読んでみると。吹き出しを使って会話風にしていることに気づきました。

会話風にすることで、どんな人に読んでもらいたいのか?ということが明確になります。

また、ポイントや目次を枠で囲うことで、視覚的にも記事にどんなことが書かれているのかが明確になります。

WordPressのCocoonをご使用のかたなら、簡単に吹き出しを追加することができます。

今回は、吹き出しの作り方と枠の作り方を紹介したいと思います。

吹き出しの作り方

1.[Cocoon 設定]をクリックして、[吹き出し]を選択します。

2.新しいアイコンを作成します。[新規追加]をクリックします。

3.必要事項を入力します。

[タイトル] ・・・アイコンの名称

[名前]・・・アイコンの下に表示される名前

[アイコンの画像]・・・使用したいイラストや写真を選択します

[吹き出しスタイル]・・・吹き出しの形を選択します

[人物位置]・・・右側か左側か、アイコンを表示する位置を選択します

[アイコンスタイル]・・・イラストまたは画像の形や枠などを選択します

4.[保存]をクリックします。

5.[吹き出し一覧]に保存したアイコンの吹き出しが追加されています。

6.[+]クリックして、[吹き出し]を選択します。

表示されない場合は、[すべてを表示]をクリックして、画面左側に表示されている[検索]に吹き出しを入力して、表示された[吹き出し]を選択します。

7.吹き出しをクリックすると、デフォルトのアイコンが表示されます。

8.画面右側にある[スタイル設定]を設定します。

人物・・・表示したいアイコン(設定したアイコンを選択します)を選択します

吹き出しスタイル・・・吹き出しの形を選択します

人物位置・・・アイコンを表示する場所を選択します

アイコンスタイル・・・アイコンの形などを選択できます

9.あとは文字を入力すればOKです。

チョコ
チョコ

こんな感じにできます

まとめ

手順

1.[+]クリックして、[吹き出し]を選択

2.画面右側にある[スタイル設定]を設定

3.文字を入力する

文字を枠で囲む方法

次は、文字を枠で囲んでみましょう。

こんな感じに文字を枠で囲みます

1.[+]をクリックして、[カスタムHTML]を選択します。

2.見つからない場合は、[検索]に [カスタムHTML]を入力して検索するか、[すべて表示]をクリックして画面左側に表示されるメニューから[カスタムHTML]を選択します。

3.[HTML]を表示します。

4.[HTMLを入力]の箇所に、下記をコピーして入力します。

<div style="padding: 10px; border: 2px solid #fc4a1a; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
ここに本文を入力します。<br>
角丸の囲み枠例です。
</div>

このサイトにはいろんな種類の枠が紹介されています!

コピペするだけ!はてなブログで使えるアレンジ囲み枠13選 – すまてくブログ (hatenablog.com)

【素材数No.1】アメブロ用の囲み枠・ボックス厳選300種 | アメブロメーカー (nk-media.org)

5.枠の色を変更するには、上記の中に記載されている[solid #fc4a1a]の#から後の[fc4a1a]箇所を変更します。

[#5f9ea0]を選択すると、下図のようになります。

色のコードはこちらのサイトから選択できます。

WEB色見本 原色大辞典 – HTMLカラーコード (colordic.org)

6.入力したい文字をコードの中に入力します。

7.改行したいときは、入力した文字の後ろに</p>を入力します。[プレビュー]をクリックして表示を確認します。

改行はこうすれば・・・

できますよ

8.これで完成です!お疲れ様でした!!

まとめ

手順

1.[+]をクリックして、[カスタムHTML]を選択

2.コードを入力

3.文字をコードないに入力する

4.[プレビュー]をクリックする

こんな記事もおすすめ

お問い合わせフォームを作成しよう – FIREまでの道 (the-road-to-fire.com)

ブログのデザインをいい感じにする方法 – FIREまでの道 (the-road-to-fire.com)

コメント