note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。

前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。note風デザインの記事一覧「note（ノート）」というブログサービスをご存知ですか？ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。２カラムのアメブロと比べてみますと…パ...

chiilabo.com

今回のメインは モバイルメニューです。

どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。

1. モバイルメニューボタンをいろいろ変更した

上部バーはすっきりさせました。

下部バーはLINE登録、ツイッター共有、ブログランキングにしぼりました。

スタイルは、[Cocoon Child]テーマの style.css に記述しています。

モバイルメニューボタン部分のCSSの全体はこちら

/**
* モバイルメニューボタン
*/

.mobile-menu-buttons, .mobile-menu-buttons .home-menu-button>a, .mobile-menu-buttons .top-menu-button>a, .mobile-menu-buttons .menu-button>a {
  color: #a08010;
}

.mobile-menu-buttons {
  box-shadow: 0 0 1px rgba(34, 34, 34, 0.3);
  font-size: 28px;
  padding-left: 8px;
  padding-right: 8px;
}

.mobile-menu-buttons .menu-caption {
  display: none;
}

.mobile-menu-buttons .menu-button {
  width: auto;
  height: 40px;
  margin-left: 8px;
  margin-right: 8px;
}

.mobile-menu-buttons .logo-menu-button {
  height: 44px;
}

.logo-menu-button img {
  margin-left: 8px;
}


.search-menu-button #search-menu-close {
  background: none;
}

.search-menu-content {
  top: 0%;
  left: 0%;
  right: 0%;
  width: 100%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.search-menu-content .search-box {
  margin: 0;
}



.mobile-menu-buttons .fa-line:before {
  font-family: "icomoon";
  position: relative;
  top: 6px;
  color: white;
  content: "\e915";
}

.mobile-menu-buttons .fa-line {
  position: relative;
  top: -8px;
  left: -0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #06c755;
}

.mobile-menu-buttons .fa-heart:before {
  position: relative;
  top: 8px;
  font-size: 80%;
  color: #ea3f60;
}

.mobile-menu-buttons .fa-heart {
  position: relative;
  top: -10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #ea3f60;
}

#menu-item-11410 {
  right: 0px;
  margin-left: auto;
}

.mobile-menu-buttons .share-menu-icon {
  position: relative;
  top: -2px;
  left: -0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #f2f2f2;
  opacity: 0;
}

.mobile-menu-buttons .share-menu-icon {
  color: gray;
  opacity: 0;
}

.mobile-menu-buttons .share-menu-content {
  position: relative;
  top: -42px;
  left: -0px;
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  width: 40px;
  height: 40px;
}

.mobile-menu-buttons #share-menu-input:checked~#share-menu-close {
  display: none;
}

.share-menu-content .sns-share-buttons a {
  width: 100%;
  margin: 0;
}

.share-menu-content .sns-buttons a {
  height: 40px;
}

.share-menu-content .facebook-button, .share-menu-content .pocket-button, .share-menu-content .hatebu-button, .share-menu-content .line-button, .share-menu-content .copy-button, .share-menu-content .comment-button, .share-menu-content .pinterest-button, .share-menu-content .linkedin-button {
  display: none;
}

.mobile-footer-menu-buttons {
  box-shadow: none;
  background: none;
  height: 88px;
}

以下、要素ごとに解説してみます。

2. アイコンフォントの色を変更する

これは以前からですが、モバイルメニューボタンのアイコンフォントの色を変更しています。

.mobile-menu-buttons, .mobile-menu-buttons .home-menu-button>a, .mobile-menu-buttons .top-menu-button>a, .mobile-menu-buttons .menu-button>a {
  color: #a08010;
}

各メニューボタンの<a>タグの文字色を設定しています。

2-1. モバイルメニューボタンの説明文字をなくす

.menu-captionがモバイルメニューの説明文字（キャプション）です。

.mobile-menu-buttons .menu-caption {
  display: none;
}

キャプションはあったほうが利用者には意図がわかりやすいんですよね。

今回はデザイン重視で非表示にしてみました。

2-2. モバイルメニュー全体のデザイン

上部バーの影を少し狭し、左右の余白を増やしました。

.mobile-menu-buttons {
  box-shadow: 0 0 1px rgba(34, 34, 34, 0.3);
  font-size: 28px;
  padding-left: 8px;
  padding-right: 8px;
}

2-3. ボタン同士の間隔を微調整

既定では、各ボタンは幅100%のメニューバーに均等に配置されます。

今回は、左右に寄るようにしています。

.mobile-menu-buttons .menu-button {
  width: auto;
  height: 40px;
  margin-left: 8px;
  margin-right: 8px;
}

3. モバイルメニューのロゴのサイズ調整

スマホで表示したときにも見やすくなるように、ロゴの画像ファイルを微調整しました。

GIMPでロゴと文字のバランスを調整しました。

CSSでも、左余白など微調整しています。

.mobile-menu-buttons .logo-menu-button {
  height: 44px;
}

.logo-menu-button img {
  margin-left: 8px;
}

3-1. 検索ボタンの動作を変更

Cocoonのモバイルメニューボタンのカスタムリンク「#search」の既定は、検索欄が画面中央に出現する動作です。

ヘッダーモバイルメニューバーに重なって表示されるように、配置を変更しました。

.search-menu-button #search-menu-close {
  background: none;
}

.search-menu-content {
  top: 0%;
  left: 0%;
  right: 0%;
  width: 100%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.search-menu-content .search-box {
  margin: 0;
}

4. 下部モバイルメニュー全体のデザイン

こっちが大きな変更です。

まず、文章の表示部分を増やすために、背景を透過させました。

その分、ボタンが上に表示されるように高さを調節しています。

.mobile-footer-menu-buttons {
  box-shadow: none;
  background: none;
  height: 88px;
}

4-1. LINEアイコン

LINEアイコンは、Font Awesomeにありません。

CocoonのSNSシェアボタンでどうやっているのか見てみると、「icomoon」のフォントを利用していました。文字コードは”¥e915″です。

メニューのカスタムスタイル「fa-line」として、「:before」要素の表示内容をCSSで変更しています。

.mobile-menu-buttons .fa-line:before {
  font-family: "icomoon";
  position: relative;
  top: 6px;
  color: white;
  content: "\e915";
}

.mobile-menu-buttons .fa-line {
  position: relative;
  top: -8px;
  left: -0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #06c755;
}

緑色の円の背景は、div要素を円形（border-radius）にして色付けしています。

4-2. ハートボタン

noteには「いいね」機能があります。

しかし、これはnoteアカウントのログインがあるからこそ成り立ちます。

「wp-ULike」プラグインで擬似的に「いいね」機能を作ることもできますが、「いいね」したのに次に表示すると戻っていたりするので、利用者にとって「既読」としての使い方ができないのが難点です。

今回は、ブログランキングの投票リンクにしています。

.mobile-menu-buttons .fa-heart:before {
  position: relative;
  top: 8px;
  font-size: 80%;
  color: #ea3f60;
}

.mobile-menu-buttons .fa-heart {
  position: relative;
  top: -10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #ea3f60;
}

#menu-item-11410 {
  right: 0px;
  margin-left: auto;
}

基本的なアイコンの指定の仕方は、LINEと一緒です。

位置を右端に寄せるために、id [menu-item-11410]で指定しています。

4-3. Twitterシェアボタン

Twitterシェアボタンはもともとありません。

そこで、いったんSNSシェアボタン（カスタムリンク#share）を用意してから不要なものを非表示にする方法で実現しています。

SNSシェアボタンを押すと各SNSシェアボタンが出てくるからです。

.mobile-menu-buttons .share-menu-icon {
  position: relative;
  top: -2px;
  left: -0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #f2f2f2;
  opacity: 0;
}

.mobile-menu-buttons .share-menu-icon {
  color: gray;
  opacity: 0;
}

.mobile-menu-buttons .share-menu-content {
  position: relative;
  top: -42px;
  left: -0px;
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  width: 40px;
  height: 40px;
}

.mobile-menu-buttons #share-menu-input:checked~#share-menu-close {
  display: none;
}

ここまではSNSシェアボタンを非表示にして、押したときのメニューの位置をSNSシェアボタンに重なるように移動しています。　

.share-menu-content .sns-share-buttons a {
  width: 100%;
  margin: 0;
}

.share-menu-content .sns-buttons a {
  height: 40px;
}

.share-menu-content .facebook-button, .share-menu-content .pocket-button, .share-menu-content .hatebu-button, .share-menu-content .line-button, .share-menu-content .copy-button, .share-menu-content .comment-button, .share-menu-content .pinterest-button, .share-menu-content .linkedin-button {
  display: none;
}

Twitterボタン以外のボタンをオフにしています。

Twitterボタンの幅と高さが40pxになるように調整しています。

この辺は、すでにSNSシェアボタンのCSSを変更しているので、環境によって違うと思います。

CocoonのSNSフォローボタンが大きかったので小さくした（border-radius）[CSS]

ちいラボのブログ メンテナンス日記！今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。環境WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1)「SNSフォロー」ボタンを見つけたホームページのメンテナンスをしながら「Cocoon設定」を見ていたら、「SNSフォロー」ボタンがありました。さっそく表示させてみたところ、スマホでみると３行とだいぶ「目立ちすぎる」感じです。フォローボタンが５つもあると、ちょっと圧迫感がありま...

chiilabo.com

モバイルメニューなので、スマートフォンで閲覧した時にしか表示されません。

今度は、パソコン画面との整合性を考えないといけませんね。

こちらもどうぞ。

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。note風デザインの記事一覧「note（ノート）」というブログサービスをご存知ですか？ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。２カラムのアメブロと比べてみますと…パ...

chiilabo.com

CocoonのSNSフォローボタンが大きかったので小さくした（border-radius）[CSS]

ちいラボのブログ メンテナンス日記！今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。環境WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1)「SNSフォロー」ボタンを見つけたホームページのメンテナンスをしながら「Cocoon設定」を見ていたら、「SNSフォロー」ボタンがありました。さっそく表示させてみたところ、スマホでみると３行とだいぶ「目立ちすぎる」感じです。フォローボタンが５つもあると、ちょっと圧迫感がありま...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。