ちょっとしたボタンをレスポンシブルに表示するCSSを作りました。
記事内やウィジェットなどで簡単にメニューボタン設置することができます。
THE THOR 以外のテーマでも適用が可能だと思いますが、ここではTHE THOR にあわせた設定を行っています。
※カスタマイズは自己責任でお願いします。
THE THOR どこでもメニューボタン
執筆中にcssをなるべく触らないで済むよう、汎用性が高くなるよう作りました。
このCSSで出来ること
- スマホで2列表示、PCで4列表示のボタンが設置できます。
- 記事内またはウィジェットにリストを設定するだけでメニューになります。
- 色などは投稿画面で設定できます。
使用例は以下の通り。
どこでもメニューボタンを作る手順
少しだけテキストエディタでの編集が必要になります。
ボタンのメニューをリストで作る
リストはビジュアルエディタで作ります。項目がメニュータイトルになるのであまり長くならないよう注意。
リストの項目にリンクを挿入
こちらもビジュアルエディタでリンクを挿入します。このへんは皆さんが普段やっている作業と同じだと思います。
リストの文字に文字色/背景色を設定する
THE THOR の設定項目[スタイル]で文字装飾を行います。テキストエディタを使って通常のhtmlを使っても同じことができますがスタイルを使用したほうが簡単です。
ここでの設定がボタンのカラーになります。枠線も利用可能。
リストにclassを設定する
作ったリストだけにcssが適用されるようclassを設定します。テキストエディタで少しだけコードを追加します。意味合い的には作ったリストに名前を付けて識別できるようにするということです。ここでは「omenu」という名前を付けています。
追加CSSでコードを設定
記述するコードは後述。列数や並びはこちらで変更も可能です。いくつかパターンを作ってclassわけして使い分けるのも良いかもしれません。
今回は背景色など装飾の一部をhtml上（投稿ページ）で指定しています。そのほうが使い勝手が良いだろうという判断です。
どこでもメニューボタンを作る
リストを作りリンクを設定する
ビジュアルエディタでリストを作ります。文字数に注意しましょう。
各項目にリンクを設定してください。いつも通りの作業ですね。出来上がりsampleは以下の通り
sample
リストの文字に文字色/背景色を設定する
リンクを設定してからビジュアルエディタのスタイルを使って色を設定していきます。
classを追加
テキストエディタでclassを追加します。ここではomenuという名前を付けています。
リストのコードの最初<ul>という部分にコードを追加して<ul class=”omenu”>とします。
ここまでの作業をテキストエディタで見ると以下のようなコードになります。カラーの部分が追加したコードです。
<li><a class=”bgc-Lorange ftc-VPorange” href=”https://karaagebow.com”>home</a></li>
<li><a class=”bgc-Lred ftc-VPred” href=”https://karaagebow.com/archives/category/wordpress/the-thor”>THE THOR</a></li>
<li><a class=”bgc-Lmagenta ftc-VPmagenta” href=”https://karaagebow.com/list_articles”>記事一覧</a></li>
<li><a class=”bgc-Lpink ftc-VPpink” href=”https://karaagebow.com/page-2794″>お問い合わせ</a></li>
</ul>
sample※最後に追加するcssが適用された状態です。
THE THOR 用の対処をする
THE THOR の特徴で記事中のリストの最初の項目にマージンがありません。最初の項目だけ位置が上がってしまいます。これに対処するためリストの最初の項目にコードを追加します。cssで一括で設定することもできますがここでは通常のウィジェットでも使用することを考え個別に対応することにしました。記事中での使用が多い場合は記事中用のcssとそれ以外用のcssを用意してclass指定で使い分けると良いでしょう。
※カスタムHTMLウィジェットに使用する場合は必要ありません。
最初の<li>だけにstyle=”margin-top: 1rem”を追加。カラーの部分が追加したコードです。
<li style=”margin-top: 1rem;”><a class=”bgc-Lorange ftc-VPorange” href=”https://karaagebow.com”>home</a></li>
<li><a class=”bgc-Lred ftc-VPred” href=”https://karaagebow.com/archives/category/wordpress/the-thor”>THE THOR</a></li>
<li><a class=”bgc-Lmagenta ftc-VPmagenta” href=”https://karaagebow.com/list_articles”>記事一覧</a></li>
<li><a class=”bgc-Lpink ftc-VPpink” href=”https://karaagebow.com/page-2794″>お問い合わせ</a></li>
</ul>
sample※最後に追加するcssが適用された状態です。
以上でメニュー項目の準備は完了です。
実際にやってみると文章で読むより簡単だと思います。
メニューをレスポンシブに装飾する
追加cssに以下のコードを記述してください。
サイズの変更やマウスオーバー時のカラーなど数値を変更することで出来ます。
変更の仕方など質問があればコメントからどうぞ。
以下のコードを追加cssにコピペ
/* リストからメニュー */
/* 全体の枠 */
.omenu {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
margin:30px 15px
}
/*omenuリスト行頭削除*/
.content ul.omenu>li:before {
content:"";
}
.content ul.omenu>li {
padding-left:0px;
}
/* 項目のサイズと隙間 */
.omenu li {
width: 25%;
margin:1px 0!important;
text-align:center;
}
/* 項目の形状と文字 */
.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.3;
}
/* サイドメニューにいれた場合のサイズ */
.menuBtn__content .omenu li {
width: 49%;
}
/* スマホ表示のサイズ */
@media only screen and (max-width: 767px){
.omenu li {
width: 50%;
text-align:center;
}
}
使用するウィジェットについて
使用するウィジェットは[THE]スタイルテキストまたはカスタムHTMLになります。
[THE]スタイルテキストはTHE THOR用のウィジェットでリストのマージンが無くなるなど記事中と同じ挙動をしますので個別に対応してください。
カスタムHTMLはTHE THOR特有の機能が使用できないので、色や背景色の設定などをTHE THOR の機能を使わずに行ってください。※背景色はテキストエディタでコード入力。
※この記事では記事中での使用を想定しています。当サイトではウィジェットのみで使用。ウィジェットで使用しているものを記事用に変換したので少々中途半端な状態です。ご了承ください。
THE THOR どこでもメニューボタン まとめ
- ボタンの装飾はTHE THOR の装飾が適用されます。（カスタムHTML不可）
- 使用するウィジェットはカスタムHTMLまたは[THE] スタイルテキスト
- ウィジェットへの適応は投稿ページで作成してからウィジェットへコピペが便利
わかりづらいところはコメントいただければ幸いです。
こんな表現が可能
↑記事でこれを作ると↓cssでこれになる
↑記事でこれを作ると↓cssでこれになる
以上です。カスタマイズは自己責任でお願いします。