以前作成したカスタムリンクボタン作成アプリですが、そちらを応用して他のリンクもデザイン変更する事が可能です。
リンクデザイン作成アプリの応用
カエレバ・ヨメレバ ブログパーツのデザイン変更
例えば、商品紹介の「カエレバ」および書籍紹介の「ヨメレバ」はご存知ですか？
商品名を検索するだけで、下記のようにAmazonや楽天など複数のアフィリエイトリンクを作成してくれる便利なサイトです。
作成したブログパーツは下記のように文字リンクはそのまま表示されるため、各社へのリンク部分は自分でカスタマイズする必要があります。
Amazonのリンクをデザインする
カスタムリンク作成アプリの記事へ移動し、Amazonのリンクボタンを作成します
それぞれの数値は好みで結構ですが、私は企業のテーマカラーに則した値に設定しています。
代表的なテーマカラーは下記の通りです。
| Amazon | RGB値(10進数)では赤が255、緑が153、青が0 (16進数では#FF9900) |
|---|---|
| Amazon(Kindle) | RGB値では赤が20、緑が110、青が180 (16進数では#146EB4) |
| 楽天 | RGB値では赤が191、緑と青が0 (16進数では#BF0000) |
| RGB値では赤が29、緑が161、青が242 (16進数では#1DA1F2) |
作成例を記載します。
【Amazonリンク作成例】
| 項目名（１） | 設定（１） | 項目名（２） | 設定（２） |
|---|---|---|---|
| 背景色（赤） | 255 | 余白（上下） | 5 |
| 背景色（緑） | 153 | 余白（左右） | 0 |
| 背景色（青） | ０ | 角の丸め | 5 |
| 文字色 | 黒・太字 | display | block |
| フォントサイズ | 16px | 文字の装飾 | 下線なし |
| クラス名 | custom_button_amazon | ||
デザインが終わったら【データ反映】ボタンを押して、コードを出力します。
「クラス名」と出力された「CSSのコード」を使用します。
「クラス名」はデザインを反映させるときに使用するのでメモしておいてください。
出力された【CSS】のコードはコピーして、CSSを適用してください。なお、WordPressの場合は下記の場所となります。
【外観】⇒【カスタマイズ】⇒【追加CSS】
Kindleのリンクをデザインする
同様にKindleのボタンも作成します。
【Kindleのリンク作成例】
| 項目名（１） | 設定（１） | 項目名（２） | 設定（２） |
|---|---|---|---|
| 背景色（赤） | 20 | 余白（上下） | 5 |
| 背景色（緑） | 110 | 余白（左右） | 0 |
| 背景色（青） | 180 | 角の丸め | 5 |
| 文字色 | 白・太字 | display | block |
| フォントサイズ | 16px | 文字の装飾 | 下線なし |
| クラス名 | custom_button_kindle | ||
こちらも同様にCSSをコピーしておきます。
楽天市場のリンクをデザインする
楽天市場のリンクも作成します。
【楽天市場リンクの作成例】
| 項目名（１） | 設定（１） | 項目名（２） | 設定（２） |
|---|---|---|---|
| 背景色（赤） | 191 | 余白（上下） | 5 |
| 背景色（緑） | 0 | 余白（左右） | 0 |
| 背景色（青） | 0 | 角の丸め | 5 |
| 文字色 | 白・太字 | display | block |
| フォントサイズ | 16px | 文字の装飾 | 下線なし |
| クラス名 | custom_button_rakuten | ||
同様に作成したCSSをコピーしておきます。
カエレバ・ヨメレバのブログパーツにデザインを反映させる
カエレバ・ヨメレバで作成したブログパーツに作成したデザインを反映していきます。
種類は好みに応じてですが、今回は「amazlet風-2(CSSカスタマイズ用)」で作成しています。
作成したブログパーツは「HTML」で書かれています。
WordPressでは、「HTML」で書かれたコードは【ビジュアル】編集モードではなく、【テキスト】編集モードに貼り付けます。
貼り付けたブログパーツの最後の方にAmazonや楽天などのリンクがあります。
<a href="https://～（省略)>Amazon</a>
この「href」の前にそれぞれデザインしたリンクの「クラス名」を追加することで、デザインを反映させることができます。
「クラス名」を追加するには下記をhrefの前に記載します。
<a class="設定したクラス名" href="https//～(省略)>Amazon</a>
Amazonのリンクでは「custom_button_amazon」と設定したので、下記のように入力します。
<a class="custom_button_amazon" href="https://～～(省略)>Amazon</a>
同じように作成したリンクデザインの会社名を見つけて追記してください。
そうすると、下記のようにデザインが反映されます。
もしリンクにスペースがなくて気になるという方は、コピーしたCSSの最後に下記の1行を加えてみてください。
a.(クラス名) {
background-color: #●●●●●●;
（省略)
font-size: △△px;
margin-top: 10px;
}
「margin-top: 10px」は上方向に10px（ピクセル)分の空白を空けるという意味です。
10pxは例なので、数値は見た目に応じて変更してみてください。
様々なリンクをデザインしてみてください
