WPテーマ【ストーク】×hetemlでAmazonのボタンをカッコよく表示する方法

このmiologはストークというWordPressの有料テーマを使っています。
 
 


 
使いやすくて最高に気に入っているのですが、本や物を紹介した時のAmazonへのリンクボタンが小さく、どうにかならないかなぁと思っていました。
 
▼miologのAmazonリンクボタン。小さくて押しにくい(※これは画像です)


そんなわけで今日は、Amazonのリンクボタンをカッコよくするやり方を紹介しようと思います!

▼目指す最終系はこちら!

前提条件は下記の通りです。

前提条件
WP使用テーマ・・・ストーク
使用サーバ・・・heteml
アソシエイト・・・ヨメレバ、カエレバ

 

子テーマをダウンロードする

 

まず、ストークをインストールした時に「子テーマ」をインストールしなかった人はここから始めましょう。

WPテーマ「ストーク」の子テーマダウンロード画面に行き、ストーク用のファイルを落とします。

適当なフォルダに保存しておきましょう。

 

FTP転送を設定する

 

次に、この子テーマファイルをFTP転送する必要があります。

FTP転送とは
ファイル転送のやり方。ここでは、ダウンロードした子テーマのファイルをサーバにアップロードしてあげる、と考えればOK

ただし、アップロードをダウンロードする際にツールが必要になるため、これを落としておく必要があります。

▼それがこちら。このリンクからダウンロードします。
「Cyberduck」

ダウンロードが完了すると、デスクトップ上にアヒルのアイコンが出来ていると思うので、それをクリックしてCyberduckを立ち上げます。

ファイル > 新規接続 からhetemlのサーバ情報などを入力して、接続を設定します。

一番上のプルダウンメニューはそのままで「FTP(ファイル転送プロトコル)」を選択
サーバは、heteml FTPにログインした際右上に出てくる「.jp」のついているアドレスを入力
ユーザ名とパスワードは、いつもhetemlのコンソール画面にログインする時に使用しているものを入力してください。

▼接続が完了すると、こんな画面になります。

 

home.phpを子テーマにコピーする

 

フォルダを
Web > wp-content > themes > jstork と進んでいくと、「home.php」というファイルがあります。

home.phpをコピーして子テーマを作ります。

メニューのアップロードから、先ほどダウンロードした子テーマのzipファイルをアップロードします。

 

子テーマが有効になったことを確認

ここまでくれば後もう少し!

WordPressのダッシュボードから 外観 < テーマ を選択して、子テーマ(storkcustom)がいれば成功。

「有効」ボタンをクリックして子テーマを有効化します。

 

デザインを変更するCSSを張り付ける

 

最後にトドメの一発。
アソシエイトのリンクボタンをお洒落にするCSSコードを貼り付けます。

貼り付ける場所は、Wordpressダッシュボードの 外観 > カスタマイズ > 追加CSS

▼ 貼り付けるコードは下記を参考にしました。

追加CSSを保存して再度開きなおすと・・・・。

 

 
出来たー!!!!

Amazonリンクが、お洒落に、押しやすくなりました!!!

 

CSSの保存が出来ない時は・・・

 

追加CSSの「保存」ボタンが押せず、保存が出来ない時はサーバ側の設定を見直してみましょう。

WAFというファイアウォールの設定が有効になっていると、保存が出来ないことがあるみたいです。

hetemlのコントロールパネルから、「WAF設定」をクリック

ONになっている有効を

OFFにします。

OFFにしてから数分待つと、状態が反映されて追加CSSの保存が出来るようになります。

無事保存が出来たら、またONにしておきましょう。

 

まとめ

 

無事にAmazonリンクはお洒落にカッコよくなりましたか?

せっかくのブログなので、愛着あるデザインにして、どんどん記事を書いていきましょう!