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

Last modified on:

JuralMin / Pixabay

 

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

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

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

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

  • トップのヘッダーに、「メニュー」が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>

 

2つ目の「メニュー」は、日本語表記の「メニュー」の文字を記号に変えたいと思います。ここでは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
 }
 ?>

変更後のモバイル画面

 

変更した画面を確認してみます。以下のようになりました。少し見やすくなったでしょうか。

 

 

ちなみに、上記のAfter画像は、SNSアイコンも追加に変わっています。(変更後のキャプチャーを取り忘れてしまったため。)

SNSアイコンの追加方法は別記事をご参照ください。

 

更新履歴

2019.8.10 誤字修正


IsleMag カスタマイズ ④携帯画面を見やすくする」に3件のコメントがあります

    長瀬

    (2019-07-13 - 2:15 午後)

    お世話になります。
    現在のVer.に「contenc-single.php」が見当たりません。
    又、style.cssにモバイルでの日付削除を書き込みましたが反映されません。

    この記事自体に日付がないので、情報の新旧が分からず、、
    ご対応よろしくお願いいたします。

      管理者

      (2019-08-11 - 12:39 午前)

      返信が遅くなりまして申し訳ありません。
      正しくは、「content-single.php」になります。最新のバージョンでも、template-partsの下に置いてあるかと思います。
      style.cssの追加については、追加CSSに記載しても反映されないでしょうか?

      なお、記事に更新日付をいれるように修正しました。
      よろしくお願いいたします。

        管理者

        (2019-08-11 - 12:49 午前)

        補足ですが、style.cssは、左側に寄せているだけです。モバイル画面での左側の隙間をなくすための指定になります。
        日付削除自体は、先ほどのcontent-single.phpで削除しています。

長瀬 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です