【WordPress】ブログの吹き出しをオシャレにカスタマイズする方法【STORK】

ブログの吹き出し
初心者ブロガー
WordPressの吹き出しをオシャレにカスタマイズしたいけど。。やり方わかんないから教えて欲しい。

こういった疑問に答えます。

 

なきゅ
この吹き出しの作り方、カスタマイズ方法を教えます!WordPressでSTORKを使っている人向けの記事となります!

 

✔︎ 本記事の内容

  1. ブログの吹き出しを作る方法【WordPress】
  2. ブログの吹き出しをオシャレにカスタマイズする方法
  3. ブログの吹き出しをオシャレにした後は

 

✔︎ 本記事の信頼性

  • この記事を書いている私、なきゅはブログ歴3年です。
  • 現役のWebエンジニアです。(HTMLCSSJavascript経験あり)
  • 今はブログで月10万円の収益を得ています。

 

今回は、

【WordPress】ブログの吹き出しをオシャレにカスタマイズする方法【STORK】をお伝えします。

 

注意
WordPressでブログ開設をしていて、

WordPressテーマ「STORK」を使っている人を対象とした記事です。

(吹き出しを使うならもちろんの事、稼ぐなら「STORK」を導入した方が効率的です。)

 

なきゅ
WordPressで「STORK」を使っている人だけ読んでください!

 

 

WordPressでブログ開設してない方は以下の記事を参考にどうぞ。

【簡単すぎ】ブログ初心者がWordPressを始める手順【クイックスタートが神】

 

 

あらかじめ言っておきますが、稼ぎたいなら無料ブログではなく、WordPressを選びましょう。

なきゅ
無料ブログなら0円ですが、無料ブログで稼ぐのはほぼ不可能です!

 

WordPressテーマ「STORK」を導入していない方は以下の記事を参考にどうぞ。

 

【2020年最新】ブログ初心者にオススメなWordPressテーマ5選【SEO対策済み】

 

※ このブログのようなレイアウトにする場合は「STORK」というテーマを選んでください。

(吹き出しを使うならもちろんの事、稼ぐなら「STORK」を導入した方が効率的です。)

 

 

なきゅ
STORKを導入すればオシャレな吹き出しも簡単に作れます!

 

この記事を読めば、

ブログの吹き出しを作る方法、

そして、ブログの吹き出しをオシャレにカスタマイズする方法が分かります。

 

なきゅ
吹き出しを活用して読みやすいブログを作り、稼ぎましょう!

 

ブログの吹き出しを作る方法

【WordPress】ブログの吹き出しをオシャレにカスタマイズする方法【STORK】

 

ブログの吹き出しを作る方法は以下の通り。

  1. WordPressテーマ【STORK】を導入する
  2. 吹き出しのコードを記事内に挿入する

 

WordPressテーマ【STORK】を導入する

WordPressテーマ【STORK】を導入すれば簡単に吹き出しが作れます。

 

✔︎ WordPressテーマのメリット

  • プログラミング不要でレイアウトをカスタマイズ可能
  • SEO対策、デザイン修正も簡単にできる
  • コストパフォーマンスが非常に高い

 

以下の記事でオススメのWordPressテーマと、導入方法を解説しています。

初心者でも簡単に導入することができるので、安心してください。

 

【2020年最新】ブログ初心者にオススメなWordPressテーマ5選【SEO対策済み】

 

※ このブログのようなレイアウトにする場合は「STORK」というテーマを選んでください。

 

 

注意

WordPressテーマを導入せずにブログ運営するのは正直言って無謀です。

膨大な時間をプログラミングに充てることになるので、初心者は迷わず導入しましょう。

 

なきゅ
STORKを導入したら、早速吹き出しを作りましょう!

 

吹き出しのコードを記事内に挿入する

下記のコードを、Wordpressの記事内に挿入してください。(赤い部分はお好みで)

これがベースになるので、後ほどこれをカスタマイズする方法をお伝えします。

 

吹き出し(左)

名前
(定型文)
コード(コピペ用)

[voice icon="WordPress画像URL" name="名前" type="l"](定型文)[/voice]

 

吹き出し(右)

名前
(定型文)
コード(コピペ用)

[voice icon="WordPress画像URL" name="名前" type="r"](定型文)[/voice]

 

“WordPress画像URL”の所に、自分の好きな画像のURLを設定しましょう。

 

✔︎ WordPress画像URLの取得方法

プロフィール用の画像URLの取得方法

画像を追加する画面(メディアを追加)で画像を選択すると、右下に画像URLがあります。

このURLを先ほどのコードに入れれば、吹き出しに画像が表示されます。

 

なきゅ
STORKを導入していればこれだけで吹き出しが作れます!この後、デザインのカスタマイズを説明します!

 

ブログの吹き出しをオシャレにカスタマイズする方法

WordPressは「追加CSS」という項目に、

CSSのコードを加えることによってデザインを修正することができます。

コードを加える場所、コード(コピペ用)をご紹介します。

 

「外観」→「カスタマイズ」→「追加CSS」でカスタマイズ

「外観」>「カスタマイズ」をクリック

 

「追加CSS」をクリック

 

コードを書く場所

 

吹き出し(左)の文字色を変更する

名前
(定型文)
コピペ用

.voice.l .voicecomment{
color: red;
}

 

なきゅ
吹き出し(右)をカスタマイズするときは、「.voice.l」→「.voice.r」に変更すればOKです!

 

吹き出し(左)の文字の大きさを変更する

名前
(定型文)
コピペ用

.voice.l .voicecomment{
font-size: 24px;
}

 

吹き出し(左)の文字の太さを変更する

名前
(定型文)
コピペ用

.voice.l .voicecomment{
font-weight: 600;
}

 

吹き出し(左)の背景色を変更する

名前
(定型文)
コピペ用

.voice.l .voicecomment{
background-color: #99FF99;
border-color: #99FF99;
}

.voice.l .voicecomment:after{
border-right-color: #99FF99;
border-left-color: #99FF99;
}

.voice.l .voicecomment:before{
border-right-color: #99FF99;
border-left-color: #99FF99;
}

 

他の色に変更したいときは

悩んでいる人
もっといろんな色にしたいんだけど・・

 

なきゅ
こちらのサイトからカラーコードを調べれば色を変更できます!

 

✔︎ カラーコード一覧表

 

なきゅ
吹き出し(右)をカスタマイズするときは、「.voice.l」→「.voice.r」に変更すればOKです!

 

ブログの吹き出しをオシャレにした後は

ブログの吹き出しをオシャレにカスタマイズする方法

 

ブログを吹き出しでオシャレにした後は、さらにブログを改善し、稼いでいきましょう。

やるべきことは以下の通り。

 

✔︎ ブログをオシャレにした後にやること

  • ASPに登録、ブログをマネタイズする
  • アフィリエイトで月「5万円」を目指す

 

ASPに登録、ブログをマネタイズする

ブログで稼ぐために、ASPに登録しましょう。

ASPからアフィリエイトリンクをとってきて、ブログに貼る。

ASPに登録をしないとブログのマネタイズはほぼ不可能です。

 

ブログのマネタイズに必須な、ASP5選【広告収入】

 

なきゅ
ASPの登録をしないとマネタイズはほぼ不可能です!

 

アフィリエイトで月「5万円」を目指す

ブログのデザインを整えて、ASPでアフィリエイトリンクを取得すれば、

アフィリエイトで月5万円を稼ぐ事が現実的になってきます。

ブログ初心者がアフィリエイトで「月5万円」を稼ぐ方法【簡単3ステップ】

なきゅ
アフィリエイトで月5万円を稼ぐのは意外と簡単です。手順さえ守れば誰でも達成可能。