mesocolumn はデフォルトでレスポンシブに対応しており優れたテーマである事は間違いありません。ただし1点だけ気に入らないところがあります。それがレスポンシブデザインのメニューバーです。大きく２つ気になる箇所があります。
- メニューバーの縦幅が極端に広く、メニューが使いにくい
- サイトロゴとメニューバーの間が極端に広い
すっきり見せたいので次の様に修正します。
メニューをハンバーガーメニューにしてたたみ、サイトロゴとメニューバーと見出しの幅を狭くします。そうすることでファーストビューで最初の記事が少し見えるようになります。
はじめに
メニューはjqueryのtoggleでハンバーガーメニューに対応します。元々mesocolumnはjqueryをincludeしてあるので、phpとcssのみの修正で対応できます。
PHPを修正
/wp-content/themes/mesocolumn/header.php
dez_get_mobile_navigation関数の中で完結するように記述を修正
<div id="mobile-nav">
<?php if ( has_nav_menu( 'top' ) ) { ?>
<p class="select-pri">
<?php _e('Select Page:', TEMPLATE_DOMAIN); ?> <?php dez_get_mobile_navigation( $type='top', $nav_name="top" ); ?>
</p>
<?php } ?>
<?php if ( has_nav_menu( 'primary' ) ) { ?>
<?php dez_get_mobile_navigation( $type='main', $nav_name="primary" ); ?>
<?php } ?>
</div>
/wp-content/themes/mesocolumn/lib/functions/theme-functions.php
※URLはベタ書きですみません。必要に応じて動的に取得する処理を実装した方がよい。
function dez_get_mobile_navigation($type='', $nav_name='') {
$js =<<<SCRIPT
<script type="text/javascript">
jQuery(document).ready(function(){jQuery("#mobile-menu ul").hide('fast');
jQuery(".mobile-open-click").click(function(){jQuery("#mobile-menu ul").toggle('fast');});
jQuery("ul.sf-menu").supersubs({minWidth:18,maxWidth:18,extraWidth:1}).superfish();});
</script>
SCRIPT;
echo $js;
echo '<div class="mobile-open">
<a class="mobile-open-click" href="#">
<i class="fa fa-bars"></i>menu</a>
</div>
<div id="mobile-menu">
<ul id="mobile-menu-wrap" style="">
<form role="search" method="get" id="searchformmenu" class="searchform" action="https://dq310.com/nm/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input value="" name="s" id="s" type="text">
<input id="searchsubmit" value="検索" type="submit">
</div>
</form>
<li><a href="https://dq310.com/nm/"><i class="fa fa-home"></i>ホーム</a>
<li><a href="https://dq310.com/nm/category/%e3%82%b0%e3%83%ab%e3%83%a1%e3%83%ac%e3%83%9d/"><i class="fa fa-cutlery"></i>グルメ</a>
<li><a href="https://dq310.com/nm/category/%e6%97%a5%e8%a8%98/"><i class="fa fa-pagelines"></i>日記</a>
<li><a href="https://dq310.com/nm/category/%e8%b2%b7%e3%81%a3%e3%81%9f/"><i class="fa fa-hand-o-right"></i>買った</a>
<li><a href="#wpp-2"><i class="fa fa-heart"></i>人気の記事</a>
<li><a href="#my_theme_featured_multi_category_widget-2"><i class="fa fa-refresh"></i>最近の記事</a>
<li><a href="https://dq310.com/nm/"><i class="fa fa-github-alt"></i>このサイトについて</a>
</ul></div>';
CSSを修正
/home/homedqx/www/nm/wp-content/themes/mesocolumn/style.css
/*検索フォームCSSを追加*/
#searchformmenu label { display:none; }
#searchformmenu input[type='text'] {
background-color: #f7f7f7;
padding: 0.5em 0.75em;
border: 1px solid #ddd;
color: #666;
width: 60%;
margin: 0px 0px 10px 10px;
}
#searchformmenu input[type='submit'], #searchform input[type='button'] {
clear:both;
background: ;
font-size: 1.125em;
color: #FFF;
background: #52C0D4 none;
margin: 0.5em 0px 0px;
padding: 0.5em 0.75em;
border: 0px none;
}
#searchformmenu input[type='submit']:hover, #searchform input[type='button']:hover {
cursor: pointer;
}
/*paddingを削除*/
#mobile-nav {
display:none;
margin: 0px;
float: left;
width: 100%;
}
#siteinfo.header-overlay-on {
margin: 0;
float: left;
}
/*メニューバーの属性を追加*/
#mobile-nav ul li a:hover {
background: #FF7AB1 none;
}
#mobile-nav .mobile-open a {
background: #FF7AB1 none;
}
/*div.breadcrumbsをコピー。mobile css と書かれた後にコピー*/
div.breadcrumbs {
padding:55px 0px 0px 0px;
font-size:1.2em;
}
/*元々あるdiv.breadcrumbsを変更 paddingを小さくする*/
div.breadcrumbs {
padding:10px 0px 0px 0px;
font-size:1.2em;
}
/* ipad 780px の箇所 paddingを削除*/
#mobile-nav { width: 96%;}
/* ipad 780px の箇所 marginを小さくする*/
#siteinfo h1 {
width:100%;
float:left;
margin:0.3em 0 0;
}
#siteinfo {
float: left;
margin: 0 0 0;
text-align: center;
width: 100%;
}
/* ipad 780px の箇所 cssを追加*/
#mobile-nav a {
padding: 8px 3%;
width: 98%;
display: block;
color: #fff;
}
#mobile-nav .mobile-open a {
font-size: 1.5em;
}
#mobile-nav ul {
display: none;
margin: 0;
}
#mobile-nav ul li {
list-style: none;
font-size: 1.3em;
}
※直し方が間違っているかもしれませんので、その点多めに見てくださいTT
完成
これで完成です。見た目がかなりすっきりしました。
クリックでメニューリストが表示されます。
このうち人気の記事と最新の記事はページ内リンクです。PC画面では右カラム表示されている人気の記事や最新の記事はレスポンシブ画面ではかなり画面の下の方にあり辿り着けません。そこでページ内リンクを付けて簡単に移動出来るようにしました。アイコンはAwesome fontからチョイスして使ってます。
