𝕂𝕌𝕄𝕆ℝ𝕀-𝔹𝕃𝕆𝔾'𝕊

貯金体質!お金と暮らしの巻

もしもアフィリエイト簡単リンクにボカシで可愛くしました【備忘録】


f:id:kumori-pannda:20200930114603j:image

お馴染みもしもアフィリエイトの簡単リンクをカスタマイズについての備忘録です。

コピペ専門の初心者なので、コピペさせて頂いております~( °∇^)]

ところで、はてなテーマは気がついたら増えているという感じですよね。

ちょこちょこテーマを変えて不具合などあり、悶えることが多いのですけど・・・

プロフィールに画像を入れると大きく反映されるものと小さく反映されるものがあったりとムムム・・・という感じです。

はてなテーマは、全体のカラーについてもCSSコピペでこちらのカラーにも!というように本当に助かります。

テーマを変えちゃったときに困るのが膨大なCSSですよね。

囲み枠ひとつでも結構な量です。

そんなんで、囲み枠はHTMLのみのものにしました。

囲み枠とお揃いでもしもアフィリエイトの簡単リンクをカスタマイズしております。

もしもアフィリエイト簡単リンクを可愛く

基本的に私は調べてコピペです(へ´∀`)へ

もしもアフィリエイトの『かんたんリンク』をカスタマイズした話!! | 日曜日のOneRoom

アキさんのCSSをコピペさせて頂きました。

カテゴリーでライフスタイルもあり無印良品のレビューもあったりと面白いです。

 

変更するのは外枠のCSSの部分です。

外枠にボカシを入れたいね!ということで、shadowとinsetにはてなテーマのカラーを合わせております。

アキさんのCSSで外枠部分のみ変更です。

下2行のカラーコードをお好きなカラーで出来上がりです。

 

 /* --------- 外枠 --------- */
div.easyLink-box {
background: #fff !important; /* 背景色 */
border: 2px solid #ffe3db !important; /* 外枠 */
box-shadow: 0px 0px 10px 5px #eed7dd,
0 0 30px 5px #ffe3db inset;
} 

前提で書いてますが、簡単リンクはもしもアフィリエイトに登録です。

 

もしもの簡単リンクは、見栄えも良いのでお気に入りなのです。

 囲み枠とお揃いで!

何かと使いやすい四角の囲み枠です。

こちらは、HTMLのみの囲み枠なのでテーマを変更しても問題なし!だと思います。

⇩上が囲み枠で下が簡単リンクです。お揃いでいい感じに!(自己満足の世界に入りました)

f:id:kumori-pannda:20200930095918j:image

囲み枠のHTMLです。

box-shadowが外側、2行目の insetが内側のボカシです。5pxのところを変えたり、カラーコードを変えたり!

<div style="padding: 15px; max-width: 500px; box-shadow: 0 0 5px 5px #eed7dd, 0 0 30px 5px #ffe3db inset;">ここに文字を入力。<br />改行はshift+エンター</div>

 

HTMIはここに張ります。

定型文>定型文を作成するです>②タイトル、HTMLをコピペして保存です。
f:id:kumori-pannda:20200930095908j:image

↑すみません。②があって①がないという...

カラーコードについて

カラーコードから合う色を選ぶ!組み合わせを考える時って楽しいですよね。

今回は、テーマのカラーと合わせました。

カラーコードの調べ方です。

①バーのところへカーソルを合わせ右クリック

②開いた一番下の開発者ツールで。。。をクリック

③画面右側のフィルター下のafter要素をスクロールしていく

このブログはピンク3種類でした。

f:id:kumori-pannda:20200930101719j:image

f:id:kumori-pannda:20200930101614j:image

ここで調べたカラーコードを囲み枠と簡単リンクに入力です。

 

ボカシの柔らかい感じは、どうでしょう?

あっ!!ボカシでクリック率が上がるということはないですから~(私調べです)

では!( ̄- ̄)ゞ

プライバシーポリシー