リンクボタン置いてくー - セブンおやじ

セブンおやじ

つれづれなるままに

よもやま話

リンクボタン置いてくー

2017/05/19

スポンサーリンク

テキストボタン

こんなボタン

【HTML】
<span class="button"><a href="URL">こんなボタン</a></span>

【CSS】
/*--------------------------------
リンクボタン
---------------------------------*/
.button a {
max-width:100%;
font-size:18px;
font-weight:bold;
text-decoration:none;
display:block;
text-align:center;
padding:8px 0 10px;
border:1px solid #225588;
border-radius:5px;
box-shadow: inset 0 -2px 2px rgba(0,0,0, 0.5);
}

.button:active a {
position: relative;
top: 2px;
box-shadow: none;
}

カード型

高級ボールペン

製品名

説明文

イチオシ

【HTML】
<h3>高級ボールペン</h3>
<div class="item-box">
<div class="item-box-left">"画像リンク"</div>
<div class="item-box-right">
<h4>製品名</h4>
説明文
<div class="item-btn"><a href="アフィリエイトリンク" target="_blank" rel="noopener noreferrer nofollow">公式サイトを見てみる</a></div>
<div class="item-label">イチオシ</div>
</div>
</div>

【CSS】
/*--------------------------------
カード型アフィリエイトリンク
※2017年5月9日ソース全面改訂
画像は300px ✖ 300pxくらいのスクエアが綺麗に収まります
---------------------------------*/
.item-box {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 5px #ccc;
}
.item-box:after {
content: '';
display: block;
clear: both;
}.item-box img {
max-width: 100%;
}.item-box > div {
float: left;
width: 50%;
}.item-box-left {
padding-left: 0;
}.item-box-right {
position: relative;
}.item-box-right h4 {
margin: 0;
padding: 10px;
background: #eee;
border-radius: 5px;
}.item-box-right h4 a {
letter-spacing: 1px;
font-size: 20px;
font-weight: bold;
color: #666;
margin-top: 0;
padding-top: 0;
}

.item-box-right p {
font-size: 14px;
}

.item-box-right .item-btn {
font-size:18px;
text-align:center;
position: relative;
background-color: #4CAF50;
border-radius: 4px;
color: #fff;
line-height: 35px;
max-width:100%;
-webkit-transition: none;
transition: none;
box-shadow: 0 3px 0 #0e8c73;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.item-box-right .item-btn a {
color: #fff;
display: block;
}

.item-box-right .item-btn a:hover {
color: #FF0000;
}

.item-box-right .item-btn:hover {
background-color: #55ce5a;
box-shadow: 0 3px 0 #23a188;
}

.item-box-right .item-btn:active {
top: 3px;
box-shadow: none;
}

.item-box-right .item-label {
background-color: #FBC02D;
display: inline-block;
border-radius: 50%;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
color: #fff;
position: absolute;
top: -50px;
right: -50px;
transform: rotate(10deg);
box-shadow: 1px 1px 5px #ccc;
}

@media screen and (max-width: 740px) {
.item-box > div {
width: 100%;
}
.item-box-right {
margin-top: 40px;
}

.item-box-right .item-label {
right: -20px;
}
}

スポンサーリンク

タイトルとURLをコピー ※このページの下にボタンあります

【HTML】
<!-- URLコピーボタン -->
<div class="copy_btn" data-clipboard-text="">
このボタンをクリックすると記事タイトルとURLがコピーされます
</div>

<script src="//cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>

<script>
var clipboard = new Clipboard('.copy_btn'); //clipboard.min.jsが動作する要素をクラス名で指定

//クリックしたときの挙動
jQuery(function(){
var title = jQuery('title').text(); //タイトル取得
var url = location.href; //URL取得
jQuery('.copy_btn').click(function(){
jQuery(this)
.attr('data-clipboard-text', title + ' ' + url) // コピー内容生成
.css('background-color','#FFD8D8') // 背景切り替え
.css('color','#000') // フォント切り替え
.css('cursor','default') // カーソル切り替え
.text('Thank you for copying!'); // テキスト切り替え
});
});
</script>
<!-- URLコピーボタン -->

【CSS】
/*--------------------------------
URLコピーボタン
---------------------------------*/
.copy_btn {
max-width:100%;
font-size:16px;
text-decoration:none;
display:block;
text-align:center;
padding:8px 0 10px;
color:#fff;
background-color:#49a9d4;
border-radius:5px;
box-shadow:2px 2px #1a6ea0;
}

留意事項

◇CSSは子テーマに記述することをおすすめします。

◇キャッシュ系プラグインやサービスを使っている場合はキャッシュクリアかプラグインを止めてCSSの反映を確認してください。

◇xServerに標準のmod_pagespeedはCSSを確認する場合はオフにしておくことをおすすめします。オンのままだと手動ではキャッシュをクリアできず、経験上数時間単位でCSSが反映されない場合があります。

最後に

URLコピーボタンはもともと水野さん(@mizunodayoの発案で記事にされてたと思うのですが記事が探せない・・・見つけたらリンクします。

環境はSTINGER PLUSです。
いろいろいじってるのでコピペでうまく実装できないかもですがその点はご容赦を(^_^;)


-よもやま話

[juiz_sps buttons="pinterest, viadeo, mail, bookmark"]
このボタンをクリックすると記事タイトルとURLがコピーされます。
メールやメモ帳などに貼り付けてご利用ください。

TOP