2016年1月3日

スマホ表示のメニューを見やすく・使いやすくカスタム。Stinger5のメニュー。

スポンサードリンク

 スマホ表示では、メニューはあまり目立たないようにしています。
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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク