ビジネス向けWEBサイトをつくる

Cocoonをデザイン広告・PR

Cocoonのモバイルデザインを改善する

本ページはプロモーションが含まれています

いよいよ「Cocoon」のモバイルデザインを修正していきましょう。

このカテゴリーの過去記事は以下からご覧いただけます。古い順番から並んでいます。

「Cocoon」が搭載している機能だけでは、できないカスタマイズを行っています。

lin

このページでは「Cocoon」のモバイルデザインを整えてみます。

プロモーション

Cocoonのモバイルデザイン

今までの変更でモバイルがどのように表示されるか、まず見てみましょう。

モバイルのデザインでも余白がうまくコントロール出来ていません。

これは元々のデザイン仕様だったり、これまでの変更でおかしくなってしまった箇所があります。

ひとつ一つ問題点をピックアップしてみます。

モバイルデザインの問題点
  • ヘッドロゴに余白がない
  • 各モバイルボタンの色がグレー（サイトカラーと統一感がない）
  • ヘッダーボタンとフッターボタンの影が邪魔になっている
  • おすすめカードの余白が中途半端
  • 更新日、投稿日がモバイル機器によっては改行する恐れがある

最後の「更新日、投稿日」については、このカテゴリーで変更したためです。

それ以外は、もともと「Cocoon」の持っていたデザイン的な問題点でしょう。

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

関連記事 企業のWEB担当者にオススメ、ビジネス戦略のPDCAを回すコーポレートサイトの作り方

更新日、投稿日を改善する

まず、「更新日、投稿日の問題」に対策します。

解決策としては以下。

更新日、投稿日の問題点を解決
  • 更新日、投稿日を削除する
  • エントリーカードの並びを1カラムにする

更新日、投稿日を削除する

スマホ縦の場合「更新日、投稿日」を以下のCSSで削除できます。

@media screen and (max-width: 480px){
	.e-card-info {
    	display:none
	}
}

エントリーカードを1カラムにする

エントリーカードを1カラムにする機能は「Cocoon」の標準設定にあるのではないかと思ったのですが、上手くいきませんでした。

そこで、以下のCSSを設定します。

「更新日、投稿日」の削除より、こちらを採用した方がよいでしょう。

@media screen and (max-width: 480px){
	.ad-index-middle, .main .list .a-wrap {
	    padding: 0;
	    margin-right: 0;
	    margin-bottom: 45px;
	    margin-left: 0;
	    width: 100%;
	}
}

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

関連記事 企業のWEB担当者にオススメ、ビジネス戦略のPDCAを回すコーポレートサイトの作り方

おすすめカードのデザインを変更する

おすすめカードは一貫性をもったデザインとして改善が難しいです。

以下のPCサイト改善の記事でもお伝えしたように、今だ暫定的な対応に留まっています。

関連記事Cocoonのおすすめカードのデザインを変更する

モバイルでもおすすめカードのデザインを変更するためには以下のCSSを設定しました。

トップページにのみおすすめカードを設定した場合に機能します。

しかし、このCSSでは、全ての画面幅において満足のいくデザインになっていません。

引き続き改善していく予定です。

/*　おすすめカードの設定　*/
.recommended {
    margin: 1em 0 0;
}
.recommended .widget-entry-cards.card-large-image .a-wrap {
    max-width: initial !important;
}
.recommended .card-snippet {
  display: none;
}
.home .notice-area-wrap + .recommended {
    margin: 1em 0 -15px;
}
.archive .notice-area-wrap + .recommended {
    margin: 1em 0 -15px;
}
.home .breadcrumb.sbp-main-before+.content,.home .breadcrumb.pbp-main-before+.content {
    margin-top: 30px;
}

.breadcrumb .breadcrumb-item:last-child a {
	color: #999999;
	pointer-events:none;
}
.paged .breadcrumb .breadcrumb-item:last-child a {
	color: #222;
	pointer-events:auto;
}

.recommended-in {
	margin-right: auto;
	margin-left: auto;
}
.recommended.rcs-card-margin a {
    margin: 1.5% 0.5%;
}
.recommended {
	margin-right: auto;
	margin-left: auto;
}
@media screen and (min-width:1024px) and (max-width:2124px){
	.home .notice-area-wrap + .recommended {
		
		padding-right: 26px !important;
		padding-left: 26px !important;
	}
}
@media screen and (max-width: 834px) {

	.notice-area-wrap + .recommended.rcs-card-margin a:first-child {
	    margin-left: 0.5%;
	    margin-left: 0;
	}
	.notice-area-wrap + .recommended.rcs-card-margin a:last-child {
	    margin-right: 0.5%;
	    margin-right: 0;
	}
	.notice-area-wrap + .recommended .navi-entry-cards {
	    display: flex;
	    justify-content: space-between;
	    gap: 0px;
	}
	.notice-area-wrap + .recommended.rcs-card-margin a {
	    margin: 0% 0;
	    width: 50%;
	}
	
	.home .notice-area-wrap+.recommended {
		padding: 4px 17px 0px;
	}
	.home .notice-area-wrap+.recommended {
	    margin: 1em 0 -10px;
	}
}

ヘッダーボタンとフッターボタンの影をなくす

そもそも影など必要ないでしょう。

@media screen and (max-width: 1023px) {
	.mobile-header-menu-buttons {
	    box-shadow: none;
	}
}
.mobile-menu-buttons {
    box-shadow: none;
}

各モバイルボタンの色をサイトカラーに統一する

各モバイルボタンがテキストカラーに設定されているので、強制的にカラーを変更します。

設定カラーはサイトに馴染むカラーにします。

@media screen and (max-width: 1023px) {
	.mobile-header-menu-buttons label,
	.mobile-footer-menu-buttons label,
	.mobile-footer-menu-buttons .top-menu-button a,
	.mobile-menu-buttons .menu-button>a {
	    color: #00078b !important;
	}
}

ヘッドロゴの余白を調整

ヘッドロゴの調整は、設定されたロゴによります。

以下のCSSを元に試行錯誤が必要です。

@media screen and (max-width: 1023px) {
	/*ロゴ*/
	.logo-menu-button img {
	    max-height: 44px;
	    display: block;
	    margin: 7px auto 0;
	    width: 130px;
	    height: 32px;
	}
}

結果

紹介したCSSを設定すると以下のようなデザインになります。

モバイルも、とてもスッキリしました。

ひとつ一つ紹介したCSSを設定しながら、テストしてみて頂けると理解が深まると思います。

「おすすめカード」と「更新日、投稿日」以外のCSSをまとめたものを最後に記載しておきます。

/*　モバイルの調整　*/
@media screen and (max-width: 1023px) {
	/*影*/
	.mobile-header-menu-buttons {
	    box-shadow: none;
	}
	/*カラー*/
	.mobile-header-menu-buttons label,
	.mobile-footer-menu-buttons label,
	.mobile-footer-menu-buttons .top-menu-button a,
	.mobile-menu-buttons .menu-button>a {
	    color: #00078b !important;
	}
	/*ロゴ*/
	.logo-menu-button img {
	    max-height: 44px;
	    display: block;
	    margin: 7px auto 0;
	    width: 130px;
	    height: 32px;
	}
}
/*影*/
.mobile-menu-buttons {
    box-shadow: none;
}

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

コメントを残す

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

four + 16 =

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※SNSは私が活動している企業アカウントにリンクしています。