無料会員制サイト

アフィリエイト記事を書くなら文章は会話するように書け!

会話する

あなたの記事はリズム感がありますか?

そう、リズム感の無い記事って読みづらいですよね。

私もアフィリエイトの記事を書く時はいつも心がけているのですが、読み返してみるとまるでリズム感がなくて自信喪失した経験が何度もあります。

会話調で文章を書く簡単な方法は、よく見かけると思いますがWordpressの「Speech bubble」などのプラグインを使う導入すること。

今回は「Speech bubble」ではなくて「TinyMCE Templates」というプラグインを導入する方法を紹介します。

プラグイン
Wordpressには多くの便利なプラグインがありますが、気をつけなければいけない点がいくつかあります。
  • プラグインを多く導入するとページの表示速度に影響する
  • お互いのプラグインが干渉しあって動作しなくなる
  • プラグインの更新やセキュリティの管理が面倒になる
以上のような理由から、プラグインの数は少なければ少ないほど良いということです。

会話プラグインと言われる「Speech bubble」は、会話調の文章を記述することにに特化したプラグインです。

一方「TinyMCE Templates」は、よくつかうHTMLなどをテンプレート化して記事の投稿画面で簡単に呼び出すことができるプラグインです。

たとえば、どんな時に使うのか?

  • 独自にカスタマイズしたHTMLを表示させたい
  • デフォルトのテーマの機能だけでは満足できない
  • いちいちHTMLを書くのは面倒で打ち間違いが心配
こんな時は、「TinyMCE Templates」にHTMLを登録しておくだけで、好きな時に簡単に呼び出す事ができます。

たぶん、あまりイメージが湧かないと思うので、次からは具体的な会話調の文章を書きながら説明していきます。

会話調文章を書くための具体例

女性2

会話調にするなら「Speech bubble」のほうが簡単なんじゃないですか?

男性2

そうなんだよね。会話調にするなら「Speech bubble」で充分なんだけど、「Speech bubble」は会話に特化したプラグインんだんだ。

女性2

それじゃダメなんですか?

男性2

うん、プラグインは少なければ少ないほうがいいんだよ。「TinyMCE Templates」なら他にも色々と使えるから便利なんだ。

女性2

たとえば、どんな利用方法があるんですか?

男性2

そうだね、他にもボタンのデザインとかボックスのデザインとかテンプレートとして保存できるんだよね。

女性2

そうなんですか。テンプレートとして保存できると、どんなメリットがあるんですか?

男性2

記事の投稿画面で簡単にテンプレートを読み込むことができるんだ。いちいちHTMLとかを書かなくてもいいから面倒じゃないよね。

女性2

でも、かえって難しそうな感じがするんですけど?

男性2

そんなことはないよ。次からは「TinyMCE Templates」の使い方を説明していくね!

「TinyMCE Templates」の導入方法

最初にダッシュボードにログインしてください。
左メニューのプラグインをクリック

TinyMCE Templates

  1. 左メニューの「プラグイン」⇒「新規追加」をクリック
  2. 検索窓に「TinyMCE Templates」と入力
  3. 今すぐインストール⇒有効化
  4. 左メニューに「テンプレート」が追加されます
  5. テンプレートをクリックしてください
  6. 「テンプレートが見つかりませんでした」と表示されます
  7. 新規追加をクリックしてください。
画像のアップロード

画像URL

  1. メディア⇒新規追加⇒ファイルの追加
  2. 追加されたファイルをクリックすると画像のURLが表示されます

<div class="item-box4">

<div class="item1"><img src="https://abater-w01.jpg" alt="女性1" /></div>


<div class="item2">

<div class="balloon1-left">


会話


</div>

</div>

</div>

2行目の画像のURL「https://abater-w01.jpg」を、あなたがアップした画像のURLに書き換えてください。

テンプレートの新規登録

テンプレート新規登録

  1. 自分が分かりやすいタイトルを記入(例:会話女性画像左1)
  2. 右にある「ショートコードとして挿入」は「いいえ」のままで
  3. テキストモードを選択してください
  4. HTMLを貼り付けて「更新」をクリックしてください
これでテンプレートの新規作成は終了しました。

次はカスタムCSSの設定を行っていきます。

カスタムCSSの設定

ほとんどのWordpressのテーマにはCSSのカスタマイズが出来るようにカスタムCSSが設定されています。

一般的なテーマの例では

  1. 外観
  2. カスタマイズ
  3. 追加CSS
追加CSSをクリックすると入力ボックスが表示されますのでソースを貼り付けてください。

もしも、追加CSSがないテーマを使用している場合は「Simple Custom CSS」プラグインを導入して、ソースを貼り付けてください。

直接テーマをカスタマイズすることもできますが、初心者の方にはオススメできません。

それでは、CSSのコードを追加CSSに貼り付けてください。

/* Flex box1
********************************************/

.flex-box1 {
  margin: 12px auto;  
  display: flex;
}
.flex-box1 .item1 { 
  max-width: 16%;
  width: 100%; 
  padding: 1%;
  display: inline-block;
  vertical-align: top;
} 
.flex-box1 .item2 { 
  text-align: left;
  max-width: 78%; 
  width: 100%;
  padding: 1%;
  vertical-align: top;
  display: inline-block;
}  
.flex-box1 .item1 img { 
  width: 100%; 
} 

/* speech-left */

.flex-box1 .speech-left {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0 1.5em 10px;
	width: 98%;
	padding: 10px 1% ;
 	color: #555;
	font-size: 16px;
}
.flex-box1 .speech-left:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #e0edff;
}

.flex-box1 .speech-left p {
	font-size: 16px;
	margin: 0 auto;
	padding: 0.8em;
    display: block;
}

/* Flex box2
********************************************/

.flex-box2 {
  margin: 12px auto;
  display: flex;
  flex-flow: row-reverse;
}
.flex-box2 .item1 { 
  max-width: 16%;
  width: 100%; 
  padding: 1%;
  display: inline-block;
  vertical-align: top;
} 
.flex-box2 .item2 { 
  text-align: left;
  max-width: 78%; 
  width: 100%;
  padding: 1%;
  vertical-align: top;
  display: inline-block;
}  
.flex-box2 .item1 img { 
  width: 100%; 
} 

/* speech-left */

.flex-box2 .speech-right {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0 1.5em 10px;
	width: 98%;
	padding: 10px 1% ;
 	color: #555;
	font-size: 16px;
}
.flex-box2 .speech-right:before{
	content: "";
	position: absolute;
	top: 50%;
	right: -30px;
 	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #faf0e6;
}

.flex-box2 .speech-right p {
	font-size: 16px;
	margin: 0 auto;
	padding: 0.8em;
  display: block;
}


.bg-blue{
	background: #e0edff;
}

.bg-linen{
	background: #faf0e6;
}
@media(max-width: 800px) {
/* Flex box1
********************************************/
	.flex-box1 {
	 display: flex;
    flex-direction: column;
	}
  .flex-box1 .item1 {  
    max-width: 40%;  
    width: 100%;
    margin: 0 auto;
    padding:0;
    display: block;
  } 
  .flex-box1 .item1 img {  
    width: 100%;
    display: block; 
    margin: 0 auto; 
  }  


 .flex-box1 .item2 { 
    max-width: 100%;  
    width: 100%;
	text-align:center;
    padding:0;
    display: block;
  } 

  .flex-box1 speech-left {
    position: relative;
 	  max-width: 100%;
    display: inline-block;
 	 	margin: 1.5em auto;
	 	padding: 7px 10px;
 	 	color: #555;
	 	font-size: 16px;
  }

  .flex-box1 .speech-left:before{
	 	content: "";
	 	position: absolute;
	 	top: -15px;
	 	left: 50%;
 	 	margin-left: -15px;
	 	border: 15px solid transparent;
	 	border-bottom: 15px solid #e0edff;
 	}

 	.flex-box1 .speech-left p {
		max-width: 100%;
	 	margin: 0 auto;
	 	padding:0.8em;
		text-align:left;
        display: block;
 	}
/* Flex box2
********************************************/
	.flex-box2 {
	display: flex;
    flex-direction: column;
	}
  .flex-box2 .item1 {  
    max-width: 40%;  
    width: 100%;
    margin: 0 auto;
    padding:0;
    display: block;
  } 
  .flex-box2 .item1 img {  
    width: 100%;
    display: block; 
    margin: 0 auto; 
  }  


 .flex-box2 .item2 { 
    max-width: 100%;  
    width: 100%;
    padding:0;
    display: block;
  } 

  .flex-box2 .speech-right {
    position: relative;
	  max-width: 100%;
    display: inline-block;
 	 	margin: 1.5em auto;
	 	padding: 7px 10px;
 	 	color: #555;
	 	font-size: 16px;
  }

  .flex-box2 .speech-right:before{
	 	content: "";
	 	position: absolute;
	 	top: -15px;
	 	right: 50%;
 	 	margin-left: -15px;
	 	border: 15px solid transparent;
	 	border-bottom: 15px solid #e0edff;
 	}

 	.flex-box2 .speech-right p {
		max-width: 100%;
	 	margin: 0 auto;
	 	padding: 0.8em;
		text-align:left;
    display: block;
 	}
}

118行目はスマホ表示用のブレイクポイントです。
それぞれの環境に合わせて変更してください。

以上で設定は終了です、お疲れ様でした!

やり過ぎは危険?ライバルに差をつけるためには冒険も必要!

挑戦
何事もやり過ぎると、あまり良い結果につながらないことが多いようです。

ただ、アフィリエイトの記事を書いていると、カスタマイズしたくなるのも現実です。

今回紹介したプラグインは、一度登録してしまえば何度でも簡単に使えるので、読者の読みやすさを考えると導入したいプラグインの一つです。

ネットで調べれば様々なカスタマイズ方法を見つけることができますので、一度「TinyMCE Templates」に登録しておくとだけで色々な表現が出来るようになります。

たまには冒険も必要かもしれませんね。

私のようにブログが消えてしまう事もありますから気をつけて!

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください