スポンサーリンク
スポンサーリンク

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

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

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

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

スポンサーリンク

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

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

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

ブログデザインのビフォア・アフター
ポイント

・ロゴの位置を左に寄せた(太字タイプのロゴに変更した)
・気軽に検索できるように、上部バーに検索ボタンを追加した
・下部バーを透過してコミュニケーションのボタンにした

デメリット

・サイト内の誘導リンクがメニューボタンの中に隠れてしまった
(ワンクリックで移動できなくなった)

スタイルは、[Cocoon Child]テーマの style.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;
}

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

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

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

.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>タグの文字色を設定しています。

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

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

キャプションを非表示にしてアイコンを大きくした
.mobile-menu-buttons .menu-caption {
  display: none;
}

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

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

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

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

上部バーの影を控えめにした
.mobile-menu-buttons {
  box-shadow: 0 0 1px rgba(34, 34, 34, 0.3);
  font-size: 28px;
  padding-left: 8px;
  padding-right: 8px;
}

ボタン同士の間隔を微調整

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

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

ボタン同士の間隔を調整した
.mobile-menu-buttons .menu-button {
  width: auto;
  height: 40px;
  margin-left: 8px;
  margin-right: 8px;
}

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

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

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

GIMPでロゴを微調整

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

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

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

検索ボタンの動作を変更

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;
}

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

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

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

メニューボタンをフロートボタンに変更した

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

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

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)にして色付けしています。

ハートボタン

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]で指定しています。

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を変更しているので、環境によって違うと思います。

ポイント

・ロゴの位置を左に寄せた(太字タイプのロゴに変更した)
・気軽に検索できるように、上部バーに検索ボタンを追加した
・下部バーを透過してコミュニケーションのボタンにした

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

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

QRコードを読み込むと、関連記事を確認できます。
タイトルとURLをコピーしました