今回は、はてなブログでボタンリンクを作成する方法を紹介します。
私はブログを始めた当初ボタンリンクを作成しようと思い、CCSコードやHTMLコードを書いて試みたのですが、何度やり直しても上手く表示されず、苦労しました。
原因は数ヶ月経った今も不明ですが(^_^;) 改善を重ねた結果、本記事のコードでやっと成功したため記録しておきたいと思います。もしよければ参考にしてください。
※当ブログははてなブログpuroを使用しているため、はてなブログ向けの方法になります。Wordpressでできるかは不明です
ボタンリンクにするメリット
- リンクという感じが少ない
- 影付きのボタンがあるとついついクリックしたくなってしまう
等の効果により、ユーザーからのクリック率アップが望めます。
色はリラックスする色である緑がクリックされやすいそうですが、もちろんご自身のサイトに合った色にするのも良いと思います。
コピペOK！ボタンリンクの作り方
ボタンリンクを表示させるには、CCSコードとHTMLコードを書き込む必要があります。
はてなブログのCCSコードはここです▼
HTMLコードはここです▼
以下コピペOKなので、コピーしてそれぞれ貼り付けてください。
＊注意＊
CCSコードを書き加える際には、既存のCCSコードをコピペしておくことをおすすめします。万が一体裁が崩れても責任は負いかねます。
テキストが決まっている場合
▶CCS
/***ボタンリンク テキストが決まっている場合***/
.btn,
a.btn,
button.btn {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn_first a {
display: inline-block;
width: 58%;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
background: #83c93c;/***色の変更***/
border-bottom: 3px solid #157542;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
}
.btn_first a:hover {
cursor: pointer;
text-decoration: none;
color: #fff;
background: #157542;
transform: translate3d(0, 2px, 0);
border-bottom: none;
text-decoration: none;
font-weight: bold;
}
▶HTML
<p class="btn_first">○○○
○○○の部分にはASPのホームページからコピーしてきた広告コードです。
自由テキストの場合
▶CCS
/*** ボタンリンク 自由テキスト***/
.second-btn {
font-size:15px;
margin-left: auto;
margin-right: auto;
display: block;
width: 32
0px;
margin-bottom: 1em;
}
.second-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 62%;
font-weight: bold ;
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color:#83c93c;/***色の変更***/
color: #ffffff !important;
padding: 14px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.second-btn a:hover {
-ms-transform: translateY(3px);
-webkit-transform: translateY(3px);
transform: translateY(2px);/***動く(下方向)***/
border-bottom: none;
box-shadow:none;
}
▶HTML
<div class="second-btn">○○○</div>
○○○には、貼りたい広告のコードを入れます。
ボタンのカスタマイズ
上記コード内のカラーコードや数字を変えることで、ボタンの色、ボタンの幅、影の色などをカスタマイズすることが出来ます。
カスタムの際は、
ぜひご自身のサイトに合ったボタンにカスタマイズしてください^^
おすすめカラーコードを探すページ▶原色大辞典
ボタンリンクを中央に表示させる方法
ついでに、ボタンを記事中央に表示させる方法を紹介します。
何かを記事の中央に表示させたい場合は、中央に表示させたい部分をHTML編集にて<center>と</center>で囲います。
<center>△△△</center>という感じです。これで中央に配置できます。
最後に
いかがでしたでしょうか。私も最初ボタンリンクの作成が上手くいかず苦労しましたが、このコードで表示させることができました。
ボタンリンクを使用するだけでサイトの質がアップするため、活用してみてください。この記事が少しでも参考になれば幸いです
★おすすめ記事TOP5★