モバイルメニュー

AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾) ニッチな話題

AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾)

cocoonのAMP機能で生成している CocoonテーマのAMP設定でAMPページを生成しています。 通常ページとAMPページの差 デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。 ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。 そこで、メニューを追加したいと思います。 ウィジェットにナビゲーションメニューを追加 まずは、ウィジェットでナビゲーションメニューを追加します。 ただ、この...
note風スタイル第2弾!モバイルメニューを編集 ニッチな話題

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

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインは モバイルメニューです。 どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。 モバイルメニューボタンをいろいろ変更した 上部バーはすっきりさせました。 下部バーはLINE...
とりあえず今の追加CSSをバックアップしておく(2020年9月11日現在) ニッチな話題

とりあえず今の追加CSSをバックアップしておく(2020年9月11日現在)

いろいろスタイルを設定したので、ここまでの「追加CSS」の中身をここにメモしておきます。 それぞれの機能について、ブログで説明しているページがあればリンクも貼っておきます。 ブログのデザインを練り上げている過程が全部わかる! 改めてみるとコードの重複があったりするので、ちょっと整理したほうが良さそうですね。 追加CSS全体(2020年9月11日現在) 長いのでこちら /** * 印刷時のフォント */ @media print { p { font-family: 'Noto...