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

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

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

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

上記を配布します😌

リンクボタン画像

iPhoneユーザー用

Androidユーザー用

※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

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

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

リンクボタン設置用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を、ご自身のサイト背景のカラーコードへ書き換えてください。

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

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