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

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

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

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

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

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

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

からあげ棒、ありったけ
THE THOR ザ・トール オススメ記事の紹介にも使える どこでもメニューボタン THE THOR で どこでも簡単にメニューボタンを表示できるcssを作りました。

からあげ棒さんのカスタマイズ記事をよく参考しているので、ぜひたこみそのこの部分気になると思ったら探してみてください。
早速ポイントを簡単に解説します。
まずは、作成箇所ですが、私たちのボタンはこのようにして配置しております。

  1. 外観 → カスタマイズ
  2. ウィジェット → トップページ上部エリア
  3. カスタムHTMLにエディタで作ったテキストをコピペ
それぞれ具体的な方法をみていきましょう。

1. 外観 → カスタマイズ

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

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


3. カスタム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はこちらです。

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のカスタマイズについては他にも記事にしているので合わせてご覧ください。

簡単にシェアできます
  • URLをコピーしました!

この記事を書いた人

25歳┃1,000日間ブログ毎日投稿続けた夫婦の夫の方です┃月9.9万PV(最高)┃日刊SPA!掲載┃早稲田→大手コンサルサラリーマン┃社会人4年目┃世帯年収1,400万円┃積立投資┃4サイト運営中┃雑記ブロガー→特化メディア編集者┃いつ消えるか分からない副業で震えながら生活中。

目次
閉じる