【SWELL】スマホ用メニューをオシャレにしたい！

スマホ用のメニューを下のようにオシャレに仕上げたい！

という人に向けた解説です！

完成系↑↑↑↑↑↑

では、みていきましょう。

方法

この方法はブログパーツというものを使っています。

ブログパーツの作成

まず、ダッシュボードから、ブログパーツを作っていきます。

ここから「投稿を追加」を押します。

この投稿というのは、いつもの投稿とは別なので、ホームページに反映されることはありません！

投稿を新しく作成し、自分が追加したい項目を並べて記入してみてください！

僕のはこんな感じ↓↓↓↓↓↓

そして、項目ごとに、固定ページのリンクを貼り付けてください。

リンクを貼り付けているため、テキストがリンクカラーになっているはずです。

作成できたら、ブログの「呼び出しコード」をコピーしておきます。

ウィジェットとしてはめ込む

続いて、作成したブログパーツをはめ込んでいきます。

場所は↓これです。

ダッシュボード>外観>ウィジェット>スマホ開閉メニュー下

ここに、下のような「カスタムHTML」という名前のブロックをドラッグしてみてください！

すると、はめ込むことができたと思います！

そしてここのカスタムHTMLに先ほどコピーした「呼び出しコード」をペーストします。

ペーストするとこんな感じ。

これで貼り付けは完了です！

さあ、最後の手順に入りましょう。

既存のスマホメニューをCSSで消す

今のままだと、既存のメニューの下にブログパーツがはめ込まれている状態になっているので

CSSで、もともとあったスマホメニューを消していきます。

ダッシュボード>カスタマイズ>追加CSS（スクロールして一番下）

この部分に以下の文を貼り付けてください！

/*スマホメニューを消す*/
.p-spMenu__nav{
	display:none;
}

.c-widget__title.-spmenu{
	display:none;
}

これで、スマホメニューが消えるはずです！

完成！！

まとめ

いかがでしたでしょうか？

ちょっと今回はややこしかったですね、、

しかし！かっこいいメニューになったのではないでしょうか！

あわせて読みたい

【SWELL】フォントを変更したい人向けの解説 ブログをもっとオシャレにしたい！ Swellのデフォルトのフォントを変更したい！ フォントはブログのデザイン性を決めると言っても過言ではないくらい 重要なデザイン要…