【カスタマイズ入門③】スマホも対応!商品紹介ブログパーツ『カエレバ』のボタン実装カスタマイズ紹介!

シェアする

  • このエントリーをはてなブックマークに追加
SNSフォローボタン

フォローする

ブログのカスタマイズは何のためにするのか?

間違いなく『検索者』の利便性のためです。

カスタマイズをサイトに施してオリジナルのブログを作り上げたとしても、検索者の利便性の悪いサイトにはアクセスは集まりません。

アバター画像
今回紹介するカスタマイズはAmazonや楽天の商品を紹介している人の多くが利用している商品紹介ブログパーツ『カエレバ』のボタン実装カスタマイズです!

※商品紹介ブログパーツ『カエレバ』は かん吉 さんが作成しているブログパーツです

アバター画像
今回、ボタンを実装するにあたって、スタイルシートのコードを記述してくれたのは前回のヘッダーカスタマイズでもお世話になった『らすさん』!
毎日使うiPhoneやPCをより快適に使えるよう便利だと感じたものをご紹介!PCのカスタマイズソフト、HTML、CSS、JavaScriptなどをメインに、デザインや生活全般のTipsも書いています。

カエレバにボタンを実装したことにより

  1. ビジュアルの変化
  2. リンク先ボタンが押しやすくなった
  3. スマホでもキレイに反映されるようになった

と、ぼくが検索者だったら嬉しい仕様になりました。

プラグイン必要なし!ブログ初心者でも簡単設置!『カエレバ』にボタンを実装する2つのSTEP紹介!

手順は簡単!プラグインなしでも作業完了!

「コードとかPHPって何?」という初心者ブロガーでも確実にボタン設置が可能です。

紹介する手順通りに作業を行うと、このブログの表示とまったく同じ状態になります。

アバター画像
コピペができる人なら誰でも作業可能なので安心してください!

※WordPressの無料テーマ『Simplicity』を利用しています

WordPress(ワードプレス)のおすすめテーマは『Simplicity』!!
WordPressでブログを始めたばかりのみなさん。ブログのテーマって何使ってますか?? デフォルトのままで使ってます?それと...

WordPressでブログを開設!おすすめのレンタルサーバー《mixhost(ミックスホスト)》の公式サイトはこちら→月額480円からの高性能クラウドレンタルサーバー

独自ドメインでブログ運営するなら…ムームードメインの公式サイトはこちら!→年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─

《STEP①》Simplisity2のスタイルシートにコードを貼り付ける

まずはWordPressのスタイルシートにコードを貼り付けましょう。

外観→テーマの編集からスタイルシートの編集。スタイルシートの最後尾に以下のコードをそのまま貼り付けてください。

/* Amazon Btn */ .shoplinkamazon { width: 150px; background: ; background: -webkit-linear-gradient(top,,); background: linear-gradient(to bottom,,); border: 1px solid; border-color: ;display: inline-block; border-radius: 5px; margin-bottom: 5px; } .shoplinkamazon a { display: block; padding: 7px 1em 7px 1em !important; color: #111; text-decoration: none; } /* 7net Btn */ .shoplinkseven { width: 150px; background: ; border: 1px solid; border-color: ;display: inline-block;border-radius: 5px; margin-bottom: 5px; } .shoplinkseven a { display: block; padding: 7px 2em 7px 2em !important; color: ; text-decoration: none; } .shoplinkseven img { display: none; }

ボタンの設置完了です。

《STEP②》『カエレバ』のリンクコードを編集する

カエレバのリンクコードを修正します。

カエレバのリンクコードは長いので、一部のみ抜粋で説明します。

もかり風のデフォルトコードだと

<div class=“shoplinkamazon” style=”display:inline; padding-right:5px;background: url(‘http://img.yomereba.com/kl.gif’) 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;”><a href=”http://www.amazon.co.jp/gp/search?keywords=%E5%BC%B1%E8%99%AB%E3%83%9A%E3%83%80%E3%83%AB&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=自分のID” target=”_blank” >Amazonで探す</a></div><div class=“shoplinkseven” style=”display:inline; padding-right:5px;background: url(‘http://img.yomereba.com/kl.gif’) 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;”>

と記述されているコードの部分があります。

この赤字部分のコードがあるとボタンがうまく表示されません。

一気に削除します。

長いコードの中から該当する赤い部分を探すのは大変です。

青字部分を目印に赤字部分を探してみてください。

赤字部分のコード記述を見つけたら削除。

ぼくの場合は『Amazon』と『7.net』のみのリンクなので2ヶ所削除しました。

【終わりに】作業が完了したら…ストック記事のカエレバリンクの変更を忘れずに!

ボタン実装は2つの簡単な作業のみ。

コードの記述方法がわからない初心者の方でも簡単に作業が完了します。記述するコードに詳しくなれたら、さらに自分好みのデザインやカラーに変更できるようにもなります。

アバター画像
ボタンを設置したら、ブログのストック記事のカエレバリンクを変更しましょう!

カエレバリンクの変更は、リンクコードの変換を行ってくれるプラグインを利用する方法とすべての記事を手作業で修正する方法があります。

ぼくのおすすめは『すべての記事を手作業で修正する』方法です。

  1. 過去記事の確認ができる
  2. 紹介したい商品を変更することができる
  3. 必要のない商品リンクを削除できる

普段から過去記事の修正をしている人はほとんどいないと思います。リンクの修正作業をしながら過去記事を見返す機会が作れるので、すべての記事を手作業で見直しましょう。

初心者ブロガーの人は、記事ストック数も手作業で修正できる範囲内だと思うので時間もかからないと思います。

「リンクを修正して自分のサイトを確認したんだけど、変更されてない…」

過去のキャッシュが残ったままで表示されていないケースがあるのでGoogleChromeのシークレットモードで検索して確認してみると良いです。

シークレットウィンドウは

  • Windows:『shift+Ctrl+n』キー
  • Mac:『shift+command+n』キー

で表示可能です。

アバター画像
シークレットモードは自分の記事が何位で表示されているかの確認にも便利なので、日頃から利用するクセをつけておくと良いですよ!

【カスタマイズ入門④】では、ブログのTOPページを固定ページに設定しながらグローバルナビで最新記事一覧を表示するカスタマイズ方法を紹介します。

【カスタマイズ入門④】『最新記事一覧』をTOPページではなくグローバルナビで表示する方法!
「トップページを固定ページに設定したら最新記事の表示ができなくなった…。最新記事も表示できないの?」 WordPressのブロ...

WordPressでブログを開設!おすすめのレンタルサーバー《mixhost(ミックスホスト)》の公式サイトはこちら→月額480円からの高性能クラウドレンタルサーバー

独自ドメインでブログ運営するなら…ムームードメインの公式サイトはこちら!→年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─

スポンサーリンク
太もも

シェアする

  • このエントリーをはてなブックマークに追加

フォローする