IsleMag カスタマイズ ④携帯画面を見やすくする

この記事の内容

モバイル画面のカスタマイズ

islemag（アイルマグ）のテンプレートで気になっていたところとして、携帯画面が少し見づらいのです。

下の画像がモバイルの表示画面（ほぼデフォルト設定）ですが、私が変更したいと思っていたところに、青い矢印をつけています。

分かりづらい以下の2点を修正します。

トップのヘッダーに、「メニュー」が２つ表示される
記事の左側に日付と隙間があるため、記事が読みにくい

変更①　「メニュー」の記載を変更する

これは、phpの修正を実施するため、子テーマ作成をお勧めです。

IsleMag カスタマイズ①子テーマ作成

子テーマ作成が完了していたら、親テーマ（islemagフォルダーの下）からheader.phpをダウンロードします。

まず一番上の「メニュー」はheader.phpの以下の部分で記載されています。

このサイトでは使用しないため、header.phpからざっくり以下を削除します。

　　　　　　　　　　　　　　　　　<div class="navbar-right">
					<div id="navbar" class="navbar">
						<nav id="top-navigation" class="navigation top-navigation" role="navigation">
							<button class="menu-toggle"><?php _e( 'Menu', 'islemag' ); ?></button>
							<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'islemag' ); ?>"><?php _e( 'Skip to content', 'islemag' ); ?></a>
							<?php
							wp_nav_menu(
								array(
									'theme_location' => 'islemag-header',
									'menu_class'     => 'nav-menu',
									'menu_id'        => 'primary-menu',
									'depth'          => 1,
								)
							);
								?>
						</nav><!-- #site-navigation -->
					</div><!-- #navbar -->
				</div>

２つ目の「メニュー」は、日本語表記の「メニュー」の文字を記号に変えたいと思います。ここではFont Awesomeに変更します。

同じくheader.phpを修正していきます。以下の部分は真ん中のメニューの箇所です。

　　　　　　　　　　　　　　　　　　<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<button class="menu-toggle"><?php _e( 'Menu', 'islemag' ); ?></button>
					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'islemag' ); ?>"><?php _e( 'Skip to content', 'islemag' ); ?></a>
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'islemag-primary',
							'menu_class'     => 'nav-menu',
							'menu_id'        => 'primary-menu',
							'depth'          => 6,
						)
					);
						?>
				</nav><!-- #site-navigation -->

上記の部分のbuttonの記載を変更します。以下のように、元の部分をコメントアウトし、変更したものを、下に記載します。

 <!--<button class="menu-toggle"><?php _e( 'Menu', 'islemag' ); ?></button> -->
 <button class="menu-toggle"><i class="fa fa fa-bars"></i></button>

修正したheader.phpを、子テーマのフォルダにUploadします。

変更②　記事の左側の隙間を変更する

子テーマの style.cssに以下を追加します。

@media (max-width: 767px) {
 .entry {
 padding-left: 0; /* ← 75px */
 }
 .entry::after {
 display: none;
 }
}

記事の日付表示は、モバイルだけではなく、PCの記事でもいらないかなと私は思ったので、こちらはcontent-single.phpから、以下の部分をコメントアウトしました。

<?php
 islemag_entry_date();
 $id = get_the_ID();
 $format = get_post_format( $id );
 switch ( $format ) {
 case 'aside':
 $icon_class = 'fa-file-text';
 break;
 case 'chat':
 $icon_class = 'fa-comment';
 break;
 case 'gallery':
 $icon_class = 'fa-file-image-o';
 break;
 case 'link':
 $icon_class = 'fa-link';
 break;
 case 'image':
 $icon_class = 'fa-picture-o';
 break;
 case 'quote':
 $icon_class = 'fa-quote-right';
 break;
 case 'status':
 $icon_class = 'fa-line-chart';
 break;
 case 'video':
 $icon_class = 'fa-video-camera';
 break;
 case 'audio':
 $icon_class = 'fa-headphones';
 break;
 }
 if ( ! empty( $icon_class ) ) {
 ?>
 <span class="entry-format"><i class="fa <?php echo $icon_class; ?>"></i></span>
 <?php
 }
 ?>