【スマホ読者向け】リンクボタン画像【DL & コピペ用】

今日僕はこんなツイートをしました。

スクリーンショット 2019-10-02 23.38.27

僕がこちらのツイートで紹介した、

・リンクボタン画像
・HTML、CSSコード

上記を配布します😌

リンクボタン画像


iPhoneユーザー用

画像3

Androidユーザー用

画像2


※png形式ファイルなので、背景の色は自動で同化するようになっており、違和感無く使えます。

ですが、pngはjpegより容量が大きくSEO的にはよくないので、各自サイトの背景色と同色の背景を追加して使った方がいいかもしれません。

よくわからない方は、そのまま使ってもいいと思います。

リンクボタン設置用HTMLコード【コピペでOK】

<div id="linkbotan">
<div class="left">
<a href="リンク先URL" target="_blank" rel="nofollow">
<img src="画像URL" width="100%" height="100%" alt="iPhone用">
</a>
</div>
<div class="right">
<a href="リンク先URL" target="_blank" rel="nofollow">
<img src="画像URL" width="100%" height="100%" alt="android用">
</a>
</div>
<div class="clear"></div>
</div>
・リンク先URL
・画像URL

上記2つを記入すると、下記の画像のように表示されます。

他の画像でも流用可能です。

スクリーンショット 2019-10-02 23.50.07


リンクボタン設置用CSSコード【コピペでOK】

*-------------------------
リンクボタン
-------------------------*/ #linkbotan{
	padding-bottom:0em;
	width:100%;
	margin:0 auto;
	background-color:#FFFFFF;
	border:none;
}
.left{
	width:45%;
	border:none;
	float:left;
	margin:0.5em;
	padding:0px;
}

.right{
	width:45%;
	border:none;
	float:right;
	margin:0.5em;
	padding:0px;
}
.clear{
	clear:both;
}

上記のCSSをwordpressへ追加してください。

※背景の色が合わない場合

background-color:#FFFFFF;

この記述の#FFFFFFを、ご自身のサイト背景のカラーコードへ書き換えてください。

カラーコードが一致すれば同化し、画像だけが表示されます。


それでは、今日はこのへんで。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
俺もスキ❤️
47
元ASP社員→福岡在住フリーランス。2017年末ASP勤務→2年で月収100万達成 / 最高月収220万 / 法人1期目 / 専門分野はWEB集客、セールスライティング、下ネタです。片目の愛猫を愛してます|LINE@(https://lin.ee/46lhlee
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。