こういった疑問に答えます。
✔︎ 本記事の内容
- ブログの吹き出しを作る方法【WordPress】
- ブログの吹き出しをオシャレにカスタマイズする方法
- ブログの吹き出しをオシャレにした後は
✔︎ 本記事の信頼性
- この記事を書いている私、なきゅはブログ歴３年です。
- 現役のWebエンジニアです。（HTMLCSSJavascript経験あり）
- 今はブログで月１０万円の収益を得ています。
今回は、
【WordPress】ブログの吹き出しをオシャレにカスタマイズする方法【STORK】をお伝えします。
WordPressでブログ開設をしていて、
WordPressテーマ「STORK」を使っている人を対象とした記事です。
（吹き出しを使うならもちろんの事、稼ぐなら「STORK」を導入した方が効率的です。）
WordPressでブログ開設してない方は以下の記事を参考にどうぞ。
あらかじめ言っておきますが、稼ぎたいなら無料ブログではなく、WordPressを選びましょう。
WordPressテーマ「STORK」を導入していない方は以下の記事を参考にどうぞ。
※ このブログのようなレイアウトにする場合は「STORK」というテーマを選んでください。
（吹き出しを使うならもちろんの事、稼ぐなら「STORK」を導入した方が効率的です。）
この記事を読めば、
ブログの吹き出しを作る方法、
そして、ブログの吹き出しをオシャレにカスタマイズする方法が分かります。
ブログの吹き出しを作る方法
ブログの吹き出しを作る方法は以下の通り。
- WordPressテーマ【STORK】を導入する
- 吹き出しのコードを記事内に挿入する
WordPressテーマ【STORK】を導入する
WordPressテーマ【STORK】を導入すれば簡単に吹き出しが作れます。
✔︎ WordPressテーマのメリット
- プログラミング不要でレイアウトをカスタマイズ可能
- SEO対策、デザイン修正も簡単にできる
- コストパフォーマンスが非常に高い
以下の記事でオススメのWordPressテーマと、導入方法を解説しています。
初心者でも簡単に導入することができるので、安心してください。
※ このブログのようなレイアウトにする場合は「STORK」というテーマを選んでください。
WordPressテーマを導入せずにブログ運営するのは正直言って無謀です。
膨大な時間をプログラミングに充てることになるので、初心者は迷わず導入しましょう。
吹き出しのコードを記事内に挿入する
下記のコードを、Wordpressの記事内に挿入してください。(赤い部分はお好みで)
これがベースになるので、後ほどこれをカスタマイズする方法をお伝えします。
吹き出し(左)
[voice icon="WordPress画像URL" name="名前" type="l"]（定型文）[/voice]
吹き出し(右)
[voice icon="WordPress画像URL" name="名前" type="r"]（定型文）[/voice]
“WordPress画像URL”の所に、自分の好きな画像のURLを設定しましょう。
✔︎ WordPress画像URLの取得方法
画像を追加する画面（メディアを追加）で画像を選択すると、右下に画像URLがあります。
このURLを先ほどのコードに入れれば、吹き出しに画像が表示されます。
ブログの吹き出しをオシャレにカスタマイズする方法
WordPressは「追加CSS」という項目に、
CSSのコードを加えることによってデザインを修正することができます。
コードを加える場所、コード（コピペ用）をご紹介します。
「外観」→「カスタマイズ」→「追加CSS」でカスタマイズ
吹き出し(左)の文字色を変更する
.voice.l .voicecomment{
color: red;
}
吹き出し(左)の文字の大きさを変更する
.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;
}
他の色に変更したいときは
✔︎ カラーコード一覧表
ブログの吹き出しをオシャレにした後は
ブログを吹き出しでオシャレにした後は、さらにブログを改善し、稼いでいきましょう。
やるべきことは以下の通り。
✔︎ ブログをオシャレにした後にやること
- ASPに登録、ブログをマネタイズする
- アフィリエイトで月「５万円」を目指す
ASPに登録、ブログをマネタイズする
ブログで稼ぐために、ASPに登録しましょう。
ASPからアフィリエイトリンクをとってきて、ブログに貼る。
ASPに登録をしないとブログのマネタイズはほぼ不可能です。
アフィリエイトで月「５万円」を目指す
ブログのデザインを整えて、ASPでアフィリエイトリンクを取得すれば、
アフィリエイトで月５万円を稼ぐ事が現実的になってきます。
