2017-03-09

【アップデート情報】販売中の全テーマ対象にユーザービリティの改善を行いました(Ver.20170309)

重要度★☆☆

Minimal WPテーマのご利用ありがとうございます。
全テーマ対象に、ユーザビリティを改善する細かなアップデートを行ないました。
2017年3月9日16:30以降のダウンロードファイルは修正済みです。

以下に、変更点をまとめました。

1) サイドバーのサイズの微調整(全テーマ)

サイドバーにJPGバナー画像を掲載した時に、
PC版Chromeで見ると、特定の条件で画像がボケることがあるので、
解消する為にサイドバーの幅に小数点が入らないように微調整しました。

スタイルシートの最後の方のレスポンシブ欄のPC部分に、
以下の1行(.sidebar { width: 300px; })を追加します。

/* PC 画面の横幅が960px以上 */

@media only screen and (min-width: 960px) {
.sidebar { width: 300px; }
}

<Juliet、MDM (million dollar man)、Suger Suger Baby、Ultra Rocket Manの場合>

/* PC 画面の横幅が960px以上 */

@media only screen and (min-width: 960px) {
#sidebar { width: 300px; }
}

2) 投稿ページのHタグのデザインを修正(Juliet、MDM (million dollar man)、Suger Suger Baby、Ultra Rocket Man)

スタイルシートに以下を追加。

/* 見出し
---------------------------------------------------- */

.post h2 {
font-size: 22px;
line-height: 130%;
font-weight: bold;
color: #333;
margin: 40px 0px 20px 0px;
padding: 18px 0px 15px 0px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.post h3 {
font-size: 20px;
line-height: 130%;
font-weight: bold;
color: #333;
padding: 0 0 5px 0;
margin: 40px 0 15px 0;
border-bottom:1px solid #ccc;
}

3) ヘッダーのサーチフォームを削除(Juliet)

PCのみ表示していたヘッダーのサーチフォームを削除しました。

1)テーマヘッダー (header.php)から以下の部分を削除。

<!-- サーチ -->
<div class="contact">
<?php get_search_form(); ?>
</div>
<!-- / サーチ -->

2-1)スタイルシートを調整(padding: 50px 0 10px 0;⇒padding: 50px 0 50px 0;)

<変更前>

.header-inner {
overflow: hidden;
margin: 0px auto 0 auto;
padding: 50px 0 10px 0;
max-width: 960px;
}

<変更後>

.header-inner {
overflow: hidden;
margin: 0px auto 0 auto;
padding: 50px 0 50px 0;
max-width: 960px;
}

2-2)スタイルシートのレスポンシブ欄を調整(margin-top:30px⇒0px)

<変更前>

/* Mobile (Portrait) 画面の横幅が767pxまで */

@media only screen and (max-width: 767px) {
#nav { float: none; text-align:center; width: 300px; background: #fff; margin-bottom:-10px; margin-top:30px; padding: 0; border-top: double 3px #ccc; border-bottom: double 3px #ccc;}
}

<変更後>

#nav { float: none; text-align:center; width: 300px; background: #fff; margin-bottom:-10px; margin-top:0px; padding: 0; border-top: double 3px #ccc; border-bottom: double 3px #ccc;}

4) ヘッダーの余白の調整(Vanilla City)

1) スタイルシートの以下の部分を修正(padding: 30px 30px 50px 30px;⇒padding: 0px 30px 50px 30px;)

<変更前>


/* *****************************************************************
*	全体Wrapper
* ***************************************************************** */

.wrapper {
margin: auto; 
max-width: 960px;
padding: 30px 30px 50px 30px;
}

<変更後>


/* *****************************************************************
*	全体Wrapper
* ***************************************************************** */

.wrapper {
margin: auto; 
max-width: 960px;
padding: 0px 30px 50px 30px;
}

2) スタイルシートの以下の部分を修正(padding: 30px 30px 50px 30px;⇒padding: 0px 30px 50px 30px;)

<変更前>


/* *****************************************************************
*	イメージヘッダー
* ***************************************************************** */	

#top-slide-max {
width: 960px;
max-height: auto;
overflow: hidden;
padding: 0px;
margin: 30px auto 20px auto;
}

<変更後>


/* *****************************************************************
*	イメージヘッダー
* ***************************************************************** */	

#top-slide-max {
width: 960px;
max-height: auto;
overflow: hidden;
padding: 0px;
margin: 30px auto 50px auto;
}

3) スタイルシートの以下の部分を修正(padding: 30px 20px 50px 20px;⇒padding: 0px 20px 50px 20px;)

<変更前>


/* Tablet (Portrait) 画面の横幅が768px〜959pxまで
---------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.wrapper { width: 728px; padding: 30px 20px 50px 20px; }
}

<変更後>


/* Tablet (Portrait) 画面の横幅が768px〜959pxまで
---------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.wrapper { width: 728px; padding: 0px 20px 50px 20px; }
}

4) スタイルシートの以下の部分を修正(padding: 0px 0px 50px 0px;⇒padding: 30px 0px 50px 0px;)

<変更前>


/* Mobile (Portrait) 画面の横幅が300px~767pxまで(基本)
---------------------------------------------------- */

@media only screen and (max-width: 767px) {
.wrapper { width: 300px; padding: 0px 0px 50px 0px; }
}

<変更後>


/* Mobile (Portrait) 画面の横幅が300px~767pxまで(基本)
---------------------------------------------------- */

@media only screen and (max-width: 767px) {
.wrapper { width: 300px; padding: 30px 0px 50px 0px; }
}

以上です。

*作業をする時はバックアップを忘れずに!

*本日、2017年3月9日16:30以降のダウンロードファイルは修正済みです。

おすすめWordPressテーマ10選
by