ココカラブログ

お金を稼ぎたい人のためのブログ

MENU

【これで出来た】はてなブログでボタンリンクを表示する方法

今回は、はてなブログでボタンリンクを作成する方法を紹介します。

 

私はブログを始めた当初ボタンリンクを作成しようと思い、CCSコードやHTMLコードを書いて試みたのですが、何度やり直しても上手く表示されず、苦労しました。

 

原因は数ヶ月経った今も不明ですが(^_^;) 改善を重ねた結果、本記事のコードでやっと成功したため記録しておきたいと思います。もしよければ参考にしてください。

 

※当ブログははてなブログpuroを使用しているため、はてなブログ向けの方法になります。Wordpressでできるかは不明です

 

ボタンリンクにするメリット

  • リンクという感じが少ない
  • 影付きのボタンがあるとついついクリックしたくなってしまう

等の効果により、ユーザーからのクリック率アップが望めます。

 

色はリラックスする色である緑がクリックされやすいそうですが、もちろんご自身のサイトに合った色にするのも良いと思います。

コピペOK!ボタンリンクの作り方

ボタンリンクを表示させるには、CCSコードHTMLコードを書き込む必要があります。

 

はてなブログのCCSコードはここです▼

 

HTMLコードはここです▼

 

以下コピペOKなので、コピーしてそれぞれ貼り付けてください。

 

*注意*

CCSコードを書き加える際には、既存のCCSコードをコピペしておくことをおすすめします。万が一体裁が崩れても責任は負いかねます。

 

 コピペ前に読んでください! 

ASPのテキスト広告は、

「自由テキスト(好きな文をリンクにできる)のコード」

「テキストが決まっていて変更できないコード」の2つがあります。

 

 

私がボタンリンクを作ろうとしたとき、「自由テキストのボタン」「テキストが変更できないボタン」どちらも同じボタンのコードで作成すると、上手く表示されませんでした…

 

そのため、今回は、自由テキストの場合とテキストが決まっている場合に分けてコードを掲載します。

 

※実際はテキストが決まっている場合もコード内の文を書き換えると変更できます。しかし、ASPによってはコードの改変に規制がある可能性もあるので、コードの改変は規約などを確認してから行いましょう!

 

テキストが決まっている場合

▶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★