もしもアフィリエイトのかんたんリンクをカスタマイズ【デザイン7例】

もしもアフィリエイトのかんたんリンクをカスタマイズ【デザイン7例】

  • もしもアフィリエイトのリンクデザインってないの?
  • もっとかわいい・かっこいいデザインがいいな

こんな悩みはありませんか?

 

この記事ではもしもアフィリエイトのかんたんリンクのボタンデザインを紹介します。

 

セブでIT留学していた僕がオリジナルでカスタマイズしたデザインです。

 

内容

  • かわいい系リンクデザイン例
  • シンプル系リンクデザイン例

かんたんリンクデザイン7例

かんたんリンクデザイン7例

オリジナルで作成した、もしもアフィリエイトのかんたんリンクデザインを紹介します。

 

使用する際は「CSS」の欄のコードのみをコピーして使用して下さい。

 

wordpressのテーマの「追加CSS」もしくは「テーマエディターのstyle.css」に貼り付けすることでデザインが反映されます。

 

かわいい系デザイン1

See the Pen
LYpORgp
by Naoki (@pirablog_com)
on CodePen.

男性・女性向けどちらでも使えるかかわいいデザインです。

 

カーソルを当てると色が反転します。

 

かわいい系デザイン2

See the Pen
RwWjovB
by Naoki (@pirablog_com)
on CodePen.

中の文字と外枠を黒くして印象を強くしてみました。

 

かわいい系デザイン3

See the Pen
MWaObMy
by Naoki (@pirablog_com)
on CodePen.

これもまた印象の強いデザインです。

 

カーソルを当てると色が薄くなります。

 

シンプルデザイン1

See the Pen
YzyEpRL
by Naoki (@pirablog_com)
on CodePen.

背景を青色で統一させてみました。

 

どのWordPressテーマでも使えるデザインです。

 

人気記事 アフィンガー5を解説記事はこちら【初心者でも使える?メリット・デメリット】

 

シンプル系デザイン2

See the Pen
yLYPVre
by Naoki (@pirablog_com)
on CodePen.

ここからは白色をメインにデザインしています。

 

どんなサイトでも使える汎用性の高いリンクデザインです。

 

人気記事 WordPressおすすめ有料テーマ3はこちら【初心者でも◯】

 

シンプル系デザイン3

See the Pen
XWmzNvM
by Naoki (@pirablog_com)
on CodePen.

角を取ってみました。

 

丸みのデザインと比べると鋭い印象を受けます。

 

シンプル系デザイン4

See the Pen
RwWjKwq
by Naoki (@pirablog_com)
on CodePen.

外枠を無くしてみました。

 

カーソルを合わせるとボタンが下に動きます。

 

まとめ

まとめ

もしもアフィリエイトのかんたんリンクデザイン例をまとめてみました。

 

できる人は自分でカスタマイズもできるので試してみて下さい。

 

下記で他のWordPress記事も紹介しているのでぜひ御覧ください。

>> WordPress記事一覧へ

 

Copyright© ヒラハラナオキのブログ , 2021 All Rights Reserved Powered by AFFINGER5.