【大幅割引】Amazonタイムセール!!
通常ページへ

THE THORのTOPページに可愛いおしゃれなボタンを作成する方法

副業(ブログ・SNS)

THE THORに可愛いボタンを作ってもっとたくさんの人にサイトを回遊して欲しい。

今回はこちらのお悩みを解決します。
最近よくご質問いただく、THE THORのトップページに可愛いボタンを作成する方法をようやくご紹介します。
(お待たせしてしまい申し訳ありません。)

作成イメージは下記になります。

こういったボタンを作成することでパッと読者さんが読みたいと思ってくださる記事に飛べるのでとても便利です。
これがあるだけでサイトの回遊率がアップします。
ぜひ、最後までご覧ください。
目次

THE THORのTOPページに可愛いおしゃれなボタンを作成する方法

導入文でご紹介したボタンですが、参考にしたのは下の記事です。

からあげ棒、ありったけ
THE THOR ザ・トール オススメ記事の紹介にも使える どこでもメニューボタン

THE THOR で どこでも簡単にメニューボタンを表示できるcssを作りました。…

からあげ棒さんのカスタマイズ記事をよく参考しているので、ぜひたこみそのこの部分気になると思ったら探してみてください。

早速ポイントを簡単に解説します。

まずは、作成箇所ですが、私たちのボタンはこのようにして配置しております。

  1. 外観　→　カスタマイズ
  2. ウィジェット　→　トップページ上部エリア
  3. カスタムHTMLにエディタで作ったテキストをコピペ

１.　外観　→　カスタマイズ

２.　ウィジェット　→　トップページ上部エリア

 

ウィジェットを追加をクリック

 

３.　カスタムHTMLにエディタで作ったテキストをコピペ

下の画像はまさに今私たちが使っているトップページのキャプチャになるので、他にも真似できることがあれば真似してください。

<ul class=”omenu full-disp”>
<li><a style=”color: #FFFFFF; background-color: #FFB284;” href=”https://www.takomisofantasy.work/blog/category/couple-life/”><span class=”icon-man-woman”> Couple同棲</span></a></li>
<li><a style=”color: #FFFFFF; background-color: #FFC98B;” href=”https://www.takomisofantasy.work/blog/category/blogger/”><span class=”icon-quill”> ブログ術</span></a></li>
<li><a style=”color: #FFFFFF; background-color: #F5CEC7;” href=”https://www.takomisofantasy.work/blog/category/sns/”><span class=”icon-twitter”> SNS術</span></a></li>
<li><a style=”color: #FFFFFF; background-color: #E79796;” href=”https://www.takomisofantasy.work/blog/category/otoku-shopping/”><span class=”icon-cart”> お得情報</span></a></li>
</ul>

後は、こちらをコピペして使用すればおしまいです。少しだけこの上の呪文(htmlコード)の意味を解説します。

ポイント
  • color　は、文字の色を指します。お好きなカラーコードを調べてこの「#FFFFFF」を変更してください。
  • background-color　は、背景色を指します。ボタンの色を何色にしたいかをカラーコードで入力してください。
  • href　は、リンク先となります。現在たこみそのサイトがリンク先になっているので、そこをご自身のサイトのお好きなページのURLにしてください。
  • 「span class=”icon-man-woman”」はアイコン一覧からお好きなものを選択して変更してください。(※記事編集画面の左上、「メディアを追加の右にあります。」)
  • </span>の前にある、文字が実際にボタンに入力する文字になるので、お好きな文字に変更してください。

そうすると、下のようなイメージのものが作成されます。

最後に、「追加CSS」でCSSを追加しましょう！

カスタマイズ画面の追加CSSを選択

CSS
/* リストからメニュー */
/* 全体の枠 */
.omenu {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
}
/* 項目のサイズと隙間 */
.omenu li {
width: 25%;
}
/* 項目の形状と文字 */
.omenu li a {
margin: 3px;
font-size: 1.4rem;
border-radius: 4px;
display: flex;
-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
align-items: center; /* 縦方向中央揃え */
-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
justify-content: center; /* 横方向中央揃え */
height:6rem;
}
/* マウスオーバー */
.omenu li a:hover {
opacity: 0.5;
}/* サイドメニューにいれた場合のサイズ */
.menuBtn__content .omenu li {
width: 50%;
}
/* スマホ表示のサイズ */
@media only screen and (max-width: 767px){
.omenu li {
width: 50%;
}
}
/*THE THOR記事内用 omenuリスト行頭削除*/
.content ul.omenu>li:before {
content:””;
}
.content ul.omenu>li {
padding-left:0px;
}
.

まとめ：THE THORのTOPページに可愛いおしゃれなボタンを作成する方法

いかがでしたか。

今回はいつもご質問いただく可愛いボタンの作成方法をご紹介しました。

私たちもよく参考にさせていただいているからあげ棒さんのブログも参考にしつつ、少しだけアレンジを加えているのでみなさまの参考に少しでもなっていただけたら嬉しいです。

THE THORのカスタマイズについては他にも記事にしているので合わせてご覧ください。

広告
最新情報をチェックしよう！