この記事はもしもアフィリエイトに登録していて、「Amazon」「楽天」「ヤフーショッピング」との連携審査が終わっている方向けです!
デフォルトの見た目から少しおしゃれなリンクにする方法です。
3社と連携が終わり、いざアフィリエイトリンクを作成してブログ等に貼り付けると、こんな感じのデザインになると思います。
これですと、なんか縦に長いし、3社とも同じ色であまりピンとこないデザインだと私は感じました。そこでcssを編集して独自のデザインを作成してみました。
もしもアフィリエイトリンクのcssで編集することは違反ではありませんが、推奨はされていません。編集による損害はあくまで自己責任でお願いします。編集前に必ずバックアップをとってやりましょう。
編集した結果がこんな感じです。hover機能も軽く実装させてあります。
こだわった点としては色ですかね。
なんとなくこれらの色が私の中でのイメージだったので実装させてみました。
後ほど、このコードも載せておきますので、気に入っていただけたらコピペして使ってみてください。
方法は簡単で、cssに書き込むだけです。問題があるとすれば、元々cssのデザインがあるのでそれを上書きする形で必要な箇所には『!important』を記載する必要があります。実際に私が使っているコードはこちらになります。
これをこのままコピペで使ってもいいですし、さらにご自身で手を加えても良いと思います。
参考になれば幸いです。
Next Post
おすすめのASP もしもアフィリエイト
今回は「もしもアフィリエイト」が使っていてとても便利でした...
Prev. Post
作業環境 ノートPC+モニターがかなり便利です
私の作業環境について 現在一人暮らしで1Kの広くもな...
コメント
名前 *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
1件のコメント
[…] もしもアフィリエイト CSSカスタマイズの方法 […]
[Cocoon]WordPressに無料テーマをインストールする方法
私はこのブログは自分でテーマを作成していますが、今回新たに無料テーマを使ってワードプレスでサイトを...
私はこのブログは自分でテーマを作成...
2021年1月10日
WordPressで引用符の付け方
先日初めて私のブログでも引用を使ったのでそのやり方について記載したいと思います。 Wordp...
先日初めて私のブログでも引用を使っ...
2020年12月14日
WordPressに動画を埋め込む方法
以前の記事で参考用に動画を貼り付けました。 その動画の貼り付け方、また合わせてスクリーンムー...
以前の記事で参考用に動画を貼り付け...
2020年12月27日
WordPressをローカル環境で作成
私はワードプレスのテーマを自作してブログを作成しています。 以前までは、本番環境のファイルを...
私はワードプレスのテーマを自作して...
2020年11月26日
[…] もしもアフィリエイト CSSカスタマイズの方法 […]