どうも、たむぽよです！
ブロガーの皆さん、ブログでボタンって使っていますか？
僕は、ボタンの存在に気付いていたのに面倒で使ってこなかったんですよね(笑)
でも、なんとなく使った方が記事を読んでくれる可能性増えるんじゃないかな？と思い、重い腰を上げて使い始めました♪笑
そしたら、他の記事にもアクセスしてもらえるようになったんですよ♪
ということで、今回はボタンの設置方法を記事に書きましたよ♪
ボタンの設置方法
まず、ボタンの設置方法ですが、テーマがCocoonの場合は、このような順番になります。
ビジュアルのページでボタンに表示させたい文字を入力し選択する。
今回は『関連記事』と入力します。
↓
スタイル
↓
ボタン
↓
好きな色と大きさを選択
するとこのようなボタンが出てきます。
ちなみにボタンのみのHTMLコードはこんな感じです。
<a class=”btn btn-red btn-m”>関連記事</a>
上のボタンのようにセンターに寄せているとコードはこうなります。
<p style=”text-align: center;”><a class=”btn btn-red btn-m”>関連記事</a></p>
Cocoonのように簡単にコードを出せないテーマの方は、ビジュアルではなくテキストのページに切り替え、このコードを入力するとボタンが出ると思われます♪
ちなみに今出ているボタンは、リンク先を設定していないので押してもどこにも飛べないただの飾りの状態です！
リンク先の追加
リンク先に飛べるようにするには、先程の設置したボタンにコードを少し追加しなければなりません。
ビジュアルページに出ている先程のコードにhref=”リンク先のURL”を追加します。
<p style=”text-align: center;”><a class=”btn btn-red btn-m” href=”リンク先のURL“>関連記事</a></p>
これがURLを追加したボタンのコードになります！
押せばリンク先へ飛ぶようになってますよ♪
ちなみに色を変えたい時はこうします。
今はred(赤)になってますよね？
<p style=”text-align: center;”><a class=”btn btn-red btn-m” href=”リンク先のURL”>関連記事</a></p>
この赤字の部分を変えます。
今度はオレンジにしてみましょう♪
redだったところをorangeに変えるだけです♪
<p style=”text-align: center;”><a class=”btn btn-orange btn-m” href=”リンク先のURL”>関連記事</a></p>
すると、こんな風にオレンジになります♪
Cocoonなら色も選べますよ♪
これからボタンを使ってみようかなって方は、このコードをテキストページにコピペして試してみてね♪
ボタンのメリット
最初に少し言いましたが、ボタンのメリットは目立たせる事で他の記事へのアクセスが増える可能性があるということです♪
実際、ボタンを設置してから他の記事へのアクセスが増えました♪
僕は今読んでもらっている記事のカテゴリーに飛ぶようにリンクを設定していますが、他にも使い方は色々できそうですね♪
まとめ
いかがでしたか？
ブログ始めたばかりの方だと難しく感じるかもしれませんが、先程のコードに自分の見てもらいたいリンク先のURLを入れるだけで簡単にボタンを設置できますよ♪
そして、極端にアクセスは増えないかもしれませんが、ボタンがあった方が効果的だと思います♪
まだボタンを設置したことのない方は、コピペして試してみてね♪
