投稿者:ヒッキー

 

ここでは、見やすい比較表の作り方(Wordpress編)について紹介する。

 

見やすい比較表の作り方

 

まず「比較表」を作る方法としては、3つの方法がある。

 

■1つは、予め用意されている「テンプレート」のテーブルタグ機能を使用することである。

■2つ目は、テーブルタグと呼ばれる「コード」をそのまま投稿ページor固定ページのテキスト画面に打ち込む方法。

■3つ目は、「プラグイン」を使用する方法である。

 

テンプレート

 

テンプレートでテーブルタグ機能を使用すると言っても、その機能が搭載されているテンプレートと搭載されていないものがある。

 

実際、「STINGER8」や「STINGER5」には搭載されていない、だが「カエテンWP」には有る。

では「カエテンWP」で、実際にテンプレートのテーブルタグ機能を使用して比較表を作ってみる。

 

投稿ページor固定ページに移動しよう。

 

 

移動したら、ビジュアル画面から、テキスト画面に切り替えて、そこにあるテーブルタグ(table上、table横、table上横、table無)のボタンをクリックして、「HTML」を打ち込む。

 

 

すると、このような4つの比較表が作成される。

ここでは、「table上横」を使用して実際に比較表を作ってみる。

 

 

テキスト画面で、「table上横」ボタンをクリックする。

 

メニュー項目を増やしたい場合

「table上横」のメニュー項目を増やしたい場合には、「メニュー1orメニュー2」のどちらかのコードをコピーして「メニュー1orメニュー2」のコード下に貼り付ける。

すると、メニューの項目が増やせるのである。

 

 

なので、「メニュー1」をコピーしよう。

 

 

空欄を開ける。

 

 

コピーしたコードを空欄に貼り付ける。

 

 

こんな感じになる。

メニュー項目が増えとる。

 

 

ちなみに、「テキスト画面」から「ビジュアル画面」に切り替えるとコードの表示が上記のようになるが、心配する必要はない。

 

画像を貼る場合

 

比較表に「アフィリエイトリンク付きの画像」などを入れたい場合には、画像の項目を全て「画」というふうにしておくと、かなりわかりやすい。

 

 

実際、テキスト画面で「アフィリエイトリンク付きの画像」を入れる場合には、この「画」の部分を消してここにコードを貼るだけである。

 

 

文字や画像などを入力するとこんな感じになる。

ニャンボー、ダンボーが表示されとる。

 

テーブルタグのコード

 

テーブルタグのコードを使用して比較表を作成する場合には、ある程度の「HTML」知識が必要になる。

だがしかし、私にはそうした知識がないので「HTMLテーブルタグを自動作成する」ツールを使用する。

 

「HTMLテーブルタグを自動作成する」、ツールページに移動しよう。

初心者にもやさしい 簡単HTML作成

 

このツールを使用すれば、誰でも簡単に見やすい比較表の作成が可能になるのである。

 

 

「簡単HTML作成」のページに移動したら、比較表の詳細設定を行う。

自分の好きなように入力しよう。

ちなみに私は、上記のように設定した。

 

 

終わったら、「プレビュー」ボタンをクリックする。

 

 

プレビュー画面が表示される。

これで良かったら、画面を閉じよう。

 

 

そうしたら、次は「HTML作成」ボタンをクリックする。

「作成されたテキスト」欄に表示されるコードをコピーする。

 

 

コピーしたコードを、「投稿ページor固定ページ」のテキスト画面に貼り付ける。

 

 

ビジュアル画面で確認すると、上記のような表が表示される。

 

 

文字や画像などを入れれば、比較表の完成である。

ダンボーが表示されとる。

 

プラグイン

 

プラグインで比較表を作るなら、下記のプラグインが良いのではないだろうか。

 

■比較表なら「TablePress

■料金表なら「Easy Pricing Tables

 

特に料金表とかなら、「Easy Pricing Tables」でカッコイイのが作成できるぞ。

しかし、これらのプラグインを使うのは正直めんどくさいし、プラグインはできるならあまり入れたくないのである(サイトが重くなることがあるから)。

 

ただ、プラグインなどで「比較表」や「料金表」を作成すると納得のいくものは作れるのである。

以上で、見やすい比較表の作り方(Wordpress編)についての解説は終了する。

 

関連記事

 

スマートフォンでWordPressの表(table)を横スクロールできるようにする方法

 

ここでは、楽天アフィリエイトでカスタマイズ可能な「テキストリンク」の作成方法と貼り方について紹介する。

 

楽天アフィリエイトのリンク作成について

 

 

楽天アフィリエイトのリンク作成方法としては、基本的には「商品検索からリンクを作成する方法」と「URLを直接入力してリンクを作成する方法」の2種類がある。

「商品検索からリンクを作成する方法」については、こちら(下記)のページで解説しているので参考にどうぞ。

 

楽天アフィリエイトの使い方(広告の貼り方、成果報酬の確認など)

 

で、楽天アフィリエイトでカスタマイズ可能な「テキストリンク」を作成する場合には、「URLを直接入力してリンクを作成する方法」を使用することが必要である。

じゃないと、テキストリンクのテキスト(文字)は、基本的にはカスタマイズすることができないのである。

 

ちなみに、私は「比較表」などを作成する場合に、こうした「テキストリンク」が必要になるので作成したのだった。

 

 

 

楽天アフィリエイトでカスタマイズ可能な「テキストリンク」の作成方法と貼り方

 

テキストリンクの作成方法

 

ではさっそく、楽天アフィリエイトのテキストリンクを作成する。

まずは、「楽天市場」のページに移動しよう。

 

楽天市場

 

 

楽天市場に移動したら、上部にあるキーワード欄に「商品名」を入力する。

 

 

ここでは、試しに「ダンボー」と入力する。

そうしたら、「検索」ボタンをクリックしよう。

 

 

紹介したい商品を選択する。

 

 

商品を選択すると商品ページに進むので、そこにある「商品番号」をコピーする。

 

 

楽天市場の検索欄に「ダンボー」と「コピーした商品番号」を入力して、「検索」ボタンをクリックする。

 

 

すると、商品一覧ページが先程選択した「ダンボー」一つになるのであった。

こうすると「レビュー」などを見せたいときに、一覧から目的の商品を探すユーザーの手間が省けるのである。

 

あとは、このページの上部に表示されている「URLをコピー」して、楽天アフィリエイトの「ぺージのURLを入力」の欄に貼り付けて、リンクを作成するだけである。

 

*ちなみに、一覧で商品を表示させたい場合には、「ダンボー」で検索したページのURLを取得する。

 

 

では、「楽天アフィリエイト」のトップページに移動しよう。

 

楽天アフィリエイト

 

移動したら、上部にある「ぺージのURLを入力」欄にコピーしたURLを貼り付けて、「リンク作成」をクリックする。

 

 

そうしたら画面表示が変わる。

「テキストを編集する」項目をクリックして、テキストを消去し任意の文字を入力する。

ここでは、「楽天レビュー」と入力する。

プレビュー画面の文字が「楽天レビュー」に無事変更されていればOKである。

 

 

下記にスクロールして、ソースコードをコピーしよう。

「コピー」ボタンをクリックする。

 

テキストリンクの貼り方

 

 

サイトやブログにソースコードを貼り付ける場合には、投稿ページor固定ページの「テキスト」欄に貼り付ける。

 

プレビュー画面で確認するとこうなる。

 

 

ちなみに、私はこのテキストリンクを使って「比較表」が作りたかったので、自分で表を作成してそこに「楽天レビュー」のリンクを貼った。

 

画像も一緒に表示させたい場合

 

 

画像も一緒に表示させたい場合には、

「商品検索からリンクを作成する方法」で作成すればOKである(実際には、このように表を作る場合、画像については、Amazonリンク画像の方が良いように思う)。

 

 

比較表に画像や文字を入力すると、上記のような「ダンボー」の比較表が作れるぞ。

ダンボーが表示されとる。

 

以上で、楽天アフィリエイトでカスタマイズ可能な「テキストリンク」の作成方法と貼り方についての解説は終了する。

 

 

 

関連記事

 

楽天アフィリエイトの会員登録方法(やり方)

楽天アフィリエイトのサイト追加登録の方法

楽天アフィリエイトの使い方(広告の貼り方、成果報酬の確認など)

カエレバの使い方(amazonと楽天のアフィリエイトリンクの作成方法)

 

まず「関連コンテンツユニット」とは、Googleアドセンスが提供するもので、

自分のサイトがトラフィック量とページ数の最低要件を満たせば、サイトに関連コンテンツのユニットを設置できる、というものである。

 

で、そこである程度の収益が得られると判断されたサイトには、関連コンテンツユニット内に「広告」を表示できる機能が追加されるようになっているのだが、

 

最近、Googleアドセンスから、このようなメールが届いた。

 

「関連コンテンツ ユニットの作成を完了させてください」のメールが届く

関連コンテンツ ユニットの作成はまだ完了していません

 

関連コンテンツ ユニットを作成していただきましたが、まだ広告コードが ○○○.jp に挿入されていません。 おすすめの関連コンテンツと広告がお客様のサイトに表示されるようにするため、以下の関連コンテンツ コードをコピーして、○○○.jp のページの <body> タグと </body> タグの間に貼り付けてください。

 

というものだ。

しかし、私は関連コンテンツは「記事下」と、あと広告の表示はないものの「サイドバー」にもしっかりと設置しているのだが・・・

私が思うにもしかしたら、最近関連コンテンツの位置を変えたのが原因かもしれない。

けど、記事下の関連コンテンツは、広告も順調に配信されているので問題はないと思うのだが。

 

もう一度文章を読んでみる。

すると少し引っかかる部分があることに気付く、

「おすすめの関連コンテンツと広告がお客様のサイトに表示されるようにするため」

という部分である。

つまりは、「広告を許可したから早く関連コンテンツユニットに表示させなさい」ということだろうか。

 

Googleアドセンスの管理画面(ダッシュボード)に何か出ていないか確認してみる。

すると「最適化」のページで、それらしい文言を見つけた。

 

 

上から2番目の

「関連コンテンツでコンテンツを宣伝し、収益アップを図る」という文言である。

さっそくクリックしてみる。

 

 

そうしたら、上記のようなことが書かれていた。

つまり、「記事下の関連コンテンツの他にも広告表示が許可されたユニットがありますよ」ということらしい。

なので広告を表示したい場合には、「適用」をクリックしよう。

これで、メールの問題は解決したはずである。

 

ちなみに、今まではメインサイトの記事下だけでしか「関連コンテンツ」では、広告配信が許可されていなかったのである。

で、今回からやっと「サイドバーでもお金が稼げる」と、Googleアドセンスチームが判断したということなのかもしれない。

 

結局のところ私のように「関連コンテンツユニットの最適化」をしないでいると、Googleアドセンスチームから、

「関連コンテンツ ユニットの作成を完了させてください」というメールが届くのかもしれない。

たぶんだけど・・・

 

2017年6月2日追記

 

その後、Googleアドセンスチームから

[訂正]関連コンテンツ ユニットの作成を完了させてください、という文言のメールが届く。

 

なんだそれ!?

 

ここでは、【STINGER5とSTINGER8】コメント欄を削除してGoogleアドセンス(関連コンテンツ)を挿入する方法について紹介する。

 

なぜコメント欄を削除してその位置にGoogleアドセンス(関連コンテンツ)を挿入するのか

 

 

私のメインサイトでは、今上記のようにGoogleアドセンスを配置していて、最近になってなんか「いいね!」のボタンがクリックされていない、と感じていたのである。

 

なので、フェイスブックの「いいね!」や「はてブー」のクリックをより効率的に貰うべく、「メインサイトのアドセンス広告の配置を変更しよう」と思った次第であり、その過程において「コメント欄」は削除しなければならなかったのである(ちなみに、私は以前にコメント欄は削除済み)。

 

 

ちなみに、完成するとこのようになる予定。

 

STINGER5のカスタマイズ

 

では、先にメインサイトのテーマから配置の変更を行うので、

まずは、STINGER5の管理画面(ダッシュボード)に移動しよう。

移動したら、「外観」、「テーマの編集」へと進む。

 

コメント欄の削除方法

 

テーマの編集ページでは、単一記事の投稿(single.php)を選択する。

そうしたら、上記のソースコードを探す。

コードを見つけたら上記の部分のみを削除する。

 

 

すると、このような状態になっていると思う。

これで、STINGER5のコメント欄の削除は完了である。

 

コメント欄のあった部分にGoogleアドセンス(関連コンテンツ)を挿入する方法

 

で次は、このコメント欄のあった部分にGoogleアドセンス(関連コンテンツ)の広告を挿入する。

「アドセンス広告のコードはここに入れる。」の部分にGoogleアドセンス(関連コンテンツ)のコードを挿入しよう。

 

 

上記のようにコードを挿入したら、「ファイルを更新」ボタンをクリックする。

これで、STINGER5でのカスタマイズは完了である。

 

実際の投稿ページを見てみると下記のように表示されるぞ。

 

 

SNSボタンの下に関連コンテンツが表示されとる。

 

STINGER8のカスタマイズ

 

STINGER8のテーマ(サイト)も同様に広告の配置を変更してみる。

まずは、STINGER8の管理画面(ダッシュボード)に移動しよう。

 

コメント欄を非表示に設定する方法

 

移動したら、次は「設定」、「ディスカッション設定」へと進もう。

 

 

ディスカッション設定では、「新しい投稿へのコメントを許可する」のチェックを外して、「変更を保存」ボタンをクリックしよう。

そうすることで、STINGER8ではコメント欄の「非表示」が可能になるのである。

 

ただ、これは今現在から反映される設定なので、過去の投稿などには反映されないから注意である。

 

過去の記事データのコメント欄も削除する場合

 

ちなみに、過去の記事データのコメント欄も削除したい場合には、STINGER5のようにテーマの編集ページで「コメント欄」のみを削除すればいいのである。

 

「外観」、「テーマの編集」から、個別投稿 (single.php)に進もう。

そうしたら、上記のようなソースコードを探す。

見つけたら上記の部分を削除する。

 

 

すると、コメント欄は完全に削除されるのである。

コメント欄が削除されとる。

 

コメント欄のあった部分にGoogleアドセンスを挿入する方法

 

STINGER8で、コメント欄のあった部分にGoogleアドセンスなどの広告を挿入したい、という場合には管理画面(ダッシュボード)から、「外観」、「テーマの編集」から、個別投稿 (single.php)に進む。

個別投稿 (single.php)ページに進んだら、上記のソースコードを探す。

見つけたら「アドセンス広告のコードはここに入れる。」という部分に、Googleアドセンスなどの広告を挿入する。

 

 

実際に「広告コード」を挿入するとこのようになる。

終わったら、「ファイルを更新」をクリックして完了である。

 

 

ちなみに、「コメント欄」を削除している場合には上記のようになる(</article>の位置が少し変化してしまったが、そんなに気にしなくてもいいと思う)

 

 

投稿ページで確認してみると、SNSボタンと関連記事の間にGoogleアドセンスの広告が表示されているはずである。

以上で、【STINGER5とSTINGER8】コメント欄を削除してGoogleアドセンス(関連コンテンツ)を挿入する方法についての解説は終了する。