Stinger5デフォルトのままでした。
少しカスタマイズしてみました。
Stinger5モバイル時メニューをカスタマイズ
色んなやり方が様々なサイトで紹介されています。
良さそうだなと思ったのが…
【STINGER5】スマホ時のナビメニューをクリックしやすいタイプのものに変更
http://shufulife.com/mobilemenu/
クリックすると、テーブルのようになったメニュー一覧が表示されます。
見やすくて良さそうです。
色んなファイルを触るので、中級者向けでしょうか。
ちなみに、PC表示のメニューをカスタマイズする方法もあります。
私の過去記事にあります。
こちらです。
WordPressメニューバーをドロップダウン形式にする。階層式にしてより使いやすくしたい。
簡単にmenuを見やすくアレンジする・カスタム方法
もう少し簡単に出来る方法で、チャレンジしてみました。
menuはあまり使われないので、
そこそこ見やすければOKという事で。
参考にしたサイト
STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ
http://www.memorou.com/2015/02/stinger5.html
素晴らしいのは、CSSだけでカスタム出来る事です。
初心者でもやりやすそうです。
では始めます。
親テーマstyle.css→
以下のコードを探します。
/*--------------------------------
アコーディオン
---------------------------------*/
#s-navi dl.acordion p {
margin: 0;
}
#s-navi dl.acordion {
margin: 0 10px;
}
#s-navi dt.trigger {
text-align: right;
padding: 10px 0px;
cursor: pointer;
}
#s-navi dt.trigger .op {
font-size: 14px;
color: #333;
padding: 0px 10px;
}
#s-navi dd.acordion_tree {
padding: 0px 10px;
display:none;
overflow: hidden;
}
.acordion_tree li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border: 0px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li a {
float: left;
color: #333;
text-decoration: none;
}
以上です。
これらは、PC以外に適用されるmenuのCSSです。
このコードをテキストエディタにコピペして、
カスタムして、子テーマに貼付けます。
子テーマに記入するので、
カスタムした箇所だけを載せておきます。
こんな感じにしました。
/*--------------------------------
アコーディオン
---------------------------------*/
.acordion_tree li {
border: 1px solid #ccc;
margin-bottom: 1px;
margin-left: 1px;
padding: 0px;
width: 48%;
border-radius: 5px;
background: #fefefe;
line-height: 35px;
text-align: center;
}
.acordion_tree li li {
float: left;
border: 0px;
padding-left: 0px;
display: inline;
padding-right: 0px;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 1px;
width: 98%;
border-top: 1px solid #ccc;
border-radius: 0;
}
.acordion_tree li a {
width: 100%;
}
.acordion_tree li a:hover {
background: #FAE6E6;
border-radius: 5px;
width: 100%;
}
以上です。
実際にスマホで確認してみてくださいね。
キレイに表示されていればOK、あとは調整して下さい。
ついでにタブレットでも見てみると良いです。
何か変な時や、気になるときは、
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px){
に修正したいCSSを追加すればOKです。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク