CSS Program

もしもアフィリエイトのかんたんリンクをカスタマイズ!ボタン色やテキスト変更など

投稿日:2019年4月18日 更新日:

もしもアフィリエイトかんたんリンクカスタマイズ

もしもアフィリエイトのかんたんリンク、とても便利ですよね。

商品検索して、選んで、スクリプトを記事に貼りつけるだけで、カエレバのようなボタン付きリンクが作成できます。

ですが、ボタンが全部同じ色だったり、サイズが大きく感じたりが気になってしまい、ちょっとカスタマイズしたいな~と思ってしまいました。

この記事では、かんたんリンクの

ボタンの色を変える

ボタンのテキストを変える

画像の表示を小さくする

といった内容をご紹介していきます。

(この記事ではかんたんリンクの使い方の説明については割愛します。)

かんたんリンクのカスタマイズ前とカスタマイズ後

カスタマイズ前

かんたんリンクカスタマイズ前PC
かんたんリンクカスタマイズ前SP

私が気になったのは、ボタンの色がすべて同じなこと、ボタン含め全体的にサイズが大きいことですね。

カスタマイズ後

かんたんリンクカスタマイズ後PC
かんたんリンクカスタマイズ後SP

ボタンの色とテキストを変更し、全体的に少し小さく、スッキリさせました。

カスタマイズして問題ないの?

こちらの記事で、もしもアフィリエイトのサポートデスクに「かんたんリンク」のCSSカスタマイズをしても構わないか確認してくださっています。

  • 原則、CSSによるカスタマイズは推奨してはいないが、自身の責任の下でカスタマイズしても特に違反とはならない。
  • CSSによるカスタマイズは、サポートの対象外となる。
  • 今後の機能変更・修正によっては、独自のCSSは適用されなくなる可能性もある。

環境によって、カスタマイズがうまく反映されない、動作しない可能性もありますので、ご理解いただいた上でカスタマイズしていただければと思います。

※当ブログではWordpressテーマstinger8を使用しております。

ソースコード

CSS

style.cssに貼り付けていただければOKです。

ボタンのサイズは、この後設定するテキストの長さに応じて変更してください。


javascript

footer.phpに貼り付けていただければOKです。

貼り付け位置は、bodyの閉じタグの直前です。

javascript部分をjsファイルに保存して、function.phpでキューへ追加、アクションフックshutdownで読み込もうとしたのですが、うまく動かなくて断念しました。

追加分のソースは背景を黄色くしています。なので、この部分をコピーして該当の位置に貼り付けてください。

かんたんリンクが描画された後にテキストを上書きしているので、描画の前にこのjavascriptが動いてしまうと文字内容は反映されません。
なるべく後に動くようにこの位置に配置していますが、もしうまくいかなかったときの表示崩れが怖いという方は、
色の変更や画像サイズの変更にとどめておいた方がいいでしょう。

おわりに

作業の際は、必ずバックアップを取るようにしてください。

また、お使いのテーマによってはうまく動作しない可能性があります。

さらに、もしもアフィリエイト側でかんたんリンクを変更した場合にも、うまく動かない可能性があります。

以上のことをふまえてご利用いただければと思います。

ではまた!

-CSS, Program
-, ,

執筆者:


  1. […] 参考にさせて頂いたブログ様もしもアフィリエイトのかんたんリンクをカスタマイズ!ボタン色やテキスト変更など […]

関連記事

【コピペOK】CSSで会話形式の吹き出しを作る方法

他の人のブログをいろいろ見ていると、吹き出しを使って会話形式で進めていくスタイルに出会うことがあります。 文字だけの文章に比べて、とても読みやすく、自分も使ってみたい!と思ったことはないでしょうか? …

floatが効かない…CSSではまったので対処法などまとめ

あれー、float:left;って指定しているのに全然効かないよ…?と、少しはまってしまった。いろいろ試したけどなかなか正解に辿り着けなかったので、対処を載せておきます。 floatに限らず、 CSS …

簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法

プログラミングの記事を書きたいな。 記事にソースコードを埋め込みたいんだけど、どうしたらいいんだろう? できればプラグイン無しでできるといいんだけど。 WordPressのプラグインという選択肢もあり …

プロフィール

運営者:シオリ

法学部卒→システムエンジニア(SE)としてSI企業に9年勤めてます。結婚後、共働きで仕事と家事に追われる毎日に疑問を持ち、ひとり働き方改革中。
プログラミングとイラストとおいしいご飯とゲームが好きな超インドア派です。
アイキャッチなどのイラストはスマホの無料アプリ使って自分で描いています。

当ブログは、私が勉強したことや日々の暮らしの中で考えたことなどを発信する雑記ブログです。同じ壁にぶつかっている方のお役にちょっとでも立てればうれしいです。
お仕事依頼・ご相談はお問い合わせまたはツイッターDMからどうぞ!