Diverには「入力補助」があるので、初心者であっても簡単に記事への装飾が可能ですし、中級者以上であっても満足できるページが作成できるWordpressテーマです。

今現在、23種類の「入力補助」の機能ですが、若干紛らわしいものもあります。「吹き出し」もそのひとつ。

そこで、Diverの入力補助の吹き出しの活用方法についてお伝えしていきます。

　初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの評判】実際使ってみた口コミとレビュー。SNSでの噂も調べてみた。

Diverの入力補助の中の吹き出し

まずは、入力補助のメニューを見てみましょう。以下の画像は、投稿ページのツールバーの上に出てくるボタンをクリックすると開きます。

Diver入力補助画面（新エディター）

基本的には、アイコンを見ていけばある程度なにができるのかがわかります。記事装飾のほとんどがこの入力補助でできます。

Diverの入力補助の出し方

旧エディターと新エディターでは、出し方が違います。新しいエディター（Gutenberg）ならブロック項目を進んでいくと入力補助のグループが出てきます。

もしくは、検索窓に「入力補助」と入れると出てきます。

旧エディターの入力補助の出し方

プラグインのclassiceditorで旧エディターを開いて使っている方は従来通り「入力補助」ボタンから入れます。

今現在は、Wordpressテーマを入れるとGutenbergになるので、そこから旧エディターを出すことも可能です。

項目部分の「クラッシック」をクリックします。

ブロックが挿入されますので、左端にあるクラッシックのマークを再度クリックします。
「クラッシックの段落」という文字をクリックします。

すると以下のような旧エディターが出てきますので、その中のDマークをクリックしてください。

項目では「旧入力補助」の方が多いです。基本で使うものは、ほぼ新入力補助に入っていますが、例えば、ランキングなんかも旧の方にありますので、上記のやり方で表示させてください。

↓芸大卒のなつがDiverのオリジナルデザインを作りました！

Diverの吹き出しで記事を作った例

まずは、Diverの入力補助「吹き出し」で作った例をご紹介します。

上記の画像を見て、ちょっと物足りない感じがしたかもしれませんね。「吹き出し」は吹き出しのみの表示で顔の画像がありません。

他テーマの一般的な吹き出し

このブログで使っているテーマで吹き出しを設定すると以下のようになります。

ですので、Diverの入力補助の「吹き出し」はシンプルに使いたい時や、なにかの説明で見やすくする場合などに使うのが向いています。

関連記事Diverのデザインサンプル例！公式サイトとオリジナルも！　（WordPressテーマ）

Diverで画像付きの吹き出しは「会話」

Diverで画像入りの吹き出しが作れないかというとそうではなく入力補助内の「会話」というパーツで作ります。

つまり、このWordpressテーマでいう「吹き出し」は画像のないもの、画像からの吹き出しは「会話」となります。

2種類の「吹き出し」が使えるので、シーンごとに変更していけばよいと思います。名前が違うので混乱しそうですが、ここだけ押さえれば簡単です。

Diverでは「吹き出し」と「会話」があります。一般のイメージでの吹き出しは画像がないので注意！

Diverの吹き出しを実際使ってみるとどうなる？

ここで実際、Diverにある吹き出し機能を使って、文章を装飾してみたいと思います。吹き出しを使うことでどこまで見やすくなるのか確認しておきましょう。

前の章の文章にDiverの吹き出しで区切ってみる！

前の章で読んでくださった文章も段落3つなので若干読みづらかったのではないでしょうか。そこで、上記の文章に吹き出しを入れて読みやすくしてみます。

この構成を見ると、吹き出しの部分の文章が印象に残ると思います。ユーザーも文章全部隅から隅まで読むわけではなく印象に残ったところを記憶しますので、どうしても伝えたい部分に「吹き出し」を利用すると便利です。

Diverの吹き出しの作り方（画像なし）

まずは、「吹き出し」について作り方をお伝えしていきます。文章量とか多くなる場合には吹き出し風味のこの枠を入れておけばメリハリがついてわかりやすいでしょう。

▼　入力補助　⇒　「吹き出し」

入力補助「吹き出し」画面

• テキスト・・・枠の中に入れたい文字
• タイプ・・・右・左・上・下
• 角丸・・・吹き出しの枠のカーブの深さ

上記を入力して「吹き出しを挿入する」をクリックします。実際に作ると以下のようになります。

• タイプ・・・左
• 角丸・・・5

少し、枠の四隅に丸みをプラスして柔らかな感じにしました。

• タイプ・・・上
• 角丸・・・0

角の丸みをなくすとシンプルな囲い枠のようになります。囲い枠なら少し仰々しいかな・・・と感じる場合、こういった区切り方をしても見やすくなりますね。

Diverの吹き出しの作り方（画像あり）「会話」

一般でいう吹き出しを作っていきます。Diverの入力補助でいう「会話」がそれにあたります。実はこの会話が色等工夫できて可愛いのでいろんなシーンで使っていきましょう。

▼　入力補助　⇒　会話

Diver入力補助「会話」

会話の画面が開いたら画像を設定します。アイコンという部分にある「選択」というボタンを押すと以下のような画面となります。

アイコン画像を新規で追加したい時はコンピューターからのタブを開き、画像を取り込みます。Wordpressテーマ内の画像を使うならメディアライブラリのタブを開きます。

好きな画像の右側「表示」をクリックし、展開し下までスクロールし「投稿に挿入」をクリックすると画像が挿入されます。

アイコンの設定の後、名前を入力し以下の部分を選びます。

• 名前表示位置・・・アイコン下・セリフ上
• セリフ向き・・・左・右
• タイプ・・・セリフ・心の声

実際の吹き出し内に入るテキストを入力し、色を選択し「会話を挿入する」をクリックします。

Diverの吹き出しの作り方　（会話挿入例）

前半の文章そのままで「会話」として挿入してみました。Diverの場合、色の吹き出しに白抜きのテキストとなるのでとても目立ちます。

• 名前表示位置・・・アイコン下
• セリフ向き・・・左
• タイプ・・・セリフ
• 色・・・ピンク

• 名前表示位置・・・アイコン下
• セリフ向き・・・左
• タイプ・・・心の声
• 色・・・緑

Diverの吹き出しと会話の効果

このブログの中で、Diverは「ペラサイト」に向いているとお伝えしていますが、例えばペラサイトやアフィリエイトサイトとなるとおすすめする商品があります。

成分やその効能の説明は必要なため画像を入れながら文章を構成します。成分と効能を知ったユーザーは次に使っている人の感想を知りたがります。

「使い心地」を伝えるのには口コミに加え、文章を書いている人の気持ちを少し入れるとグッと距離が縮まります。

吹き出しを入れることでそのサイトはどんな人が書いているのか、商品についてどう思っているのかわかりやすくなります。

ただし、吹き出しだけでブログを作るとかなり読みづらいので文章9割、吹き出し1割くらいにした方が良いでしょう。

Diverの吹き出しと会話の使い分け

Diverの吹き出しについては、枠だけのシンプル構造なので、囲い枠では仰々しくなってしまう文章を配置するもの、会話については、筆者の意見や特に印象に残したいものと使い分けるのが良いでしょう。

吹き出しのおすすめ使用例

Diverの吹き出しを使った例をご紹介します。化粧品などの成分や使用方法を吹き出しに入れてみました。

【】があっても文章が続くよりも吹き出しを入れ区切るとまとまりが出てきます。吹き出しの中には成分だけではなく、料金設定や例えば、高額でも1日に換算するといくら・・・みたいな文章でもよいでしょう。

会話のおすすめ使用例

Diverの会話の使用例もご紹介します。こちらはセリフなのでできるだけ親近感のわく言い回しが良いです。

上記画像を見ていただくと、若い女性のセリフと文章とのやり取りを読んでいるうちに成分や金額がなんとなくイメージできるようになっています。

内容については、テレビショッピングのセリフですが（笑）、ユーザーが思いつきそうなことを先回りしてセリフで顕在化してあげてさらに読み進めてもらうというテクニックもDiverの会話を作成して使うことができます。

Diverの「吹き出し」と「会話」のまとめ

WordPressテーマでいう吹き出しというと画像付きのものを思いうかべますが、Diverの入力補助では「会話」というブロックで作るものが、一般の吹き出しに近いです。

どちらにしろ、入力補助から作ると簡単にできるものなので双方使いこなせるようにしておくと便利です。

↓　WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

初心者だからこそWordpress有料テーマ を使うべき理由

THE THORの使いやすい機能が「着せ替え機能」。

カスタマイズが苦手な初心者でもワンクリックでWebデザイナーが作ったクールなデザインを反映させることができます。

この機能があると面倒な手順を省きカッコいいデザインですぐにブログを作り始めることが可能。

THE THORの「着せ替え機能」の使い方と簡単な設定までを動画で説明していきます。

　2023年、話題のワードプレステーマ「THE THOR」
⇒　THE・THORの公式ページを確認する。

※　今なら、8大購入特典をプレゼント！

関連記事【THE THORの評判】実際使ってみた口コミとレビュー。

THE THORの着せ替え「01」

THE THORの着せ替え「01」は、公式のサイトのデザインともなっている代表的なものです。ヘッダー部分に動画を用いてブログを開くと動的にもアプローチします。

出典：THE THOR（ザ・トール）

今回は、この着せ替え「01」を元にして徐々にアレンジを加えて自分らしいデザインを作れるようにしていきます。

※ヘッダーの動画は、今回は静止画に変更して作る方法となります。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」！
⇒THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています！

関連記事【THE THORの8大特典！】ザ・トールの購入時の割引も調査。（WordPressテーマ）

THE THORの導入から着せ替えをするまでの準備　２STEP

まず、ここでは導入してから着せ替えが完成するまでを説明していきます。着せ替え機能を使うためにプラグインCustomizer Export / Importが必要です。

1. 購入～インストール
2. Customizer Export / Importをダウンロード

1.　購入～インストール

THE THOR（ザ・トール）を購入してZIP方式のファイルを導入してからインストールの仕方を丁寧に説明してきます。

• THE THOR（ザ・トール）の親テーマのインストール
• THE THOR（ザ・トール）の子テーマのインストール

ワードプレステーマの導入はとても簡単です。購入時にダウンロードしたZIPファイルをテーマにインストールします。

親テーマと子テーマの違いは、親テーマは基本の設定全般で、子テーマではカスタマイズなどをする場所と考えるとわかりやすいかと思います。

そんな時にでも基本の部分が変わってしまわないように2つに分けてあります。

• the-thor.zip
• the-thor-child.zip

この2ファイルを1つづつおなじやり方でインストールします。

2.　Customizer Export / Importをダウンロード

THE THOR（ザ・トール）の着せ替えは「Customizer Export / Import」のプラグインが必要です。プラグインの導入方法を説明します。

▼　プラグイン　⇒　新規

検索窓に、Customizer Export / Import　と入力してください。すると画面にプラグインが現れます。

「今すぐインストール」　⇒　「有効化」

※　プラグインを検索すると、よく似たアイコンやマークがでてきますので、できるだけ全文入力するようにしてください。尚、アイコンでも判断すると間違わないです。

THE THORオリジナルデザインプレゼント中！

当ブログのTHE THORオリジナルテンプレート！

このブログからTHE THORをご購入くださった方にマニュアルをプレゼントしています。

追加特典「綿毛」

特典「シンプル」

追加特典「ai」

※他のデザインは以下の記事で見れますので覧ください。
⇒【簡単】THE THORデザインの事例集6選！初心者でも作れるアレンジを紹介！

特典付きでTHE THORを購入する

／／今なら、なつ特製オリジナルデザインマニュアル付き！＼＼
※ヘッダーの画像は、写真ACとイラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

THE THORの着せ替え方法　1.　スタイルダウンロード

THE THOR（ザ・トール）の着せ替えは9種類あります。好きなものを選んだら「スタイルダウンロード」でPCに落とし込み、それをインストールします。

THE THOR（ザ・トール）はテーマの中に機能が組み込まれているものが多いので他のテンプレートのようにプラグインはたくさん必要ではありません。

しかし、着せ替えをするときなど最低限に必要なプラグインや、逆に相性の悪いプラグインもあります。

↓　THE THORに必須や相性の悪いプラグインなどを記事にしています。

関連記事THE THORのガチすぎるSEO対策10個を徹底調査！【WordPressテーマ】

THE THORの着せ替え方法　2.　着せ替えファイルのインストール

スタイル（着せ替えファイル）をダウンロードができたら、ブログへ導入していきます。ファイルがPCにありますので、Wordpressのブログに引き込んでいく作業です。

THE THOR（ザ・トール）のカスタマイザーのインストールなので間違いないようにしてください。ファイルの拡張子は.DATです。

ZIPでダウンロードされた場合にはクリックで開いてから使います。

このデータだけ、デスクトップなどに移動しておくと引き込む時にわかりやすいです。

エクスポート/インポートのところを開き、ファイルを選択をクリックして、先ほどの着せ替えファイルを選びます。

そして、「インポート」ボタンを押すと新しいデザインが反映されます。

THE THORの着せ替え後のカスタマイズ

好きな着せ替えのテンプレートを導入するとそのまま使えますが、少しアレンジするためにサイトの色設定や、ヘッダー部分の設定方法などをお伝えします。

1. サイトの色の設定
2. サイトロゴの設定
3. ヘッダーの設定
4. お知らせの設定
5. グローバルメニューの設置
6. CTAの管理

サイトのベース色とロゴの設定は「基本設定[THE]」で行います。

• サイトのベース色
• ロゴ設定

1.　サイトの色の設定

着せ替え機能の「01」は黒と赤のモダンな色合いとなっています。ブログの内容や自分の好みの色にも変更可能です。

以下の画像を見ていただくと、番号の部分の色とかサムネイルの下の帯などの色が基本の色となっているのがわかります。

まずは、ブログの要所要所で出てくる基本のカラーの設定をしましょう。

2.　サイトロゴの設定

あらかじめロゴを作ってあるものを設置します。若干小さく表示されますので作る時に注意してください。

ちなみに、上のロゴの寸法は、500×181ピクセルとなっています。

3.　ヘッダーの設定

ヘッダーエリアの文字の色や配置などはここでおこないます。ここでは、ヘッダーのレイアウトの変更をお伝えします。

ヘッダーのレイアウトの違い

上部、「ヘッダー設定」のレイアウト設定です。2種類あり、シンプルとダイナミックがあります。

この部分では、その他、ヘッダー全体の色や、テキストの色、サーチパネルの配置、メニューパネルの配置の設定ができます。

4.　お知らせの設定

ヘッダーエリアの動くお知らせ表示も簡単に変更できます。文字が動くのでなにか目立たせたいページなどがあれば設定しましょう。

ヘッダーお知らせを表示するか選択で【表示】とすると、この部分に流れるお知らせが出てきます。お知らせで流す文章や、リンク先のURLも併せて設定してください。

5.　グローバルメニューの設置

ヘッダーの下にあるグローバルメニューはブログのいろんな記事への窓口にもなりますし、整理しておくとユーザーも見やすいので記事が増えてきたら設定しておきます。

配置する手順は以下の通り

• メニューを作成
• メニューの位置を設定

メニューの作り方は他のテーマと同じです。

左側に選ぶ項目がありますから、どれをメニューにするかここで選びます。忘れてはいけないのは、ここで位置の設定をしておくことです。

次に設置をしていきます。

PC/スマホで表示するになっていればOK！

6. 　CTAの管理

CTAは投稿画面の一番下に位置するボックスのことです。記事を読んだあとに注目を集めたい時に使います。

たとえば、THOR（ザ・トール）でいえばこの部分。

出典：THE THOR（ザ・トール）

それぞれのページによってCTAを違うものを設置したり、表示したくない場合にも対応できます。

CTAの管理画面で、複数のCTAが作成できます。

投稿画面の右側にCTAの表示画面がありますので、そこでどのCTAを表示するのかチェックします。

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか？

• 思い通りのデザインにできない・・・
• なかなか稼げない・・・
• アクセス数が増えない・・・

こんな悩みを抱えていませんか？
 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる５つのこと

1. 検索上位を目指せる
2. 見た目が綺麗でおしゃれになる
3. 機能が豊富で出来ることが多い
4. 会員フォームなどのサポート
5. 有名ブロガーも有料テーマを使っている

 

これまでにあげた5つの有料テーマの特徴を説明していきます。

1.　検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。

• 情報の信頼性
• ユーザーへの役立つ情報であるか？
• スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2.　見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典：THE THOR 着せ替え「01」

↓　クリックで拡大します
出典：特製THE THORオリジナルアレンジ

 

3.　機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4.　会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5.　有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

当ブログおすすめWordpressテーマ！

WordPressテーマ「THE・THOR」

• 高機能の最新テーマで有名ブロガーも使用
• 着せ替え機能でいろんな用途に使える
• 複数のブログに使える（本人のブログ）
• 会員フォーラムやマニュアル完備

THE THORの8大特典を見てみる！