【WordPressテーマSWELL】メニューを縦書きにして和風なサイトに！

メニューを縦書きにして、和風なサイトを作りたいんだけど〜

こんにちは！ちょのろです。（誰やねんｗ）

WordPressテーマ「SWELL」を使用してのサイト作りを、できるだけたくさんの人に作成してもらえるように詳しく解説しています。

今回は和風なサイトにするために、メニューを縦書きにする方法を解説していきたいと思います。

コードをコピペするだけでメニューを縦書きにできるのですが詳しく解説もしていますので、興味がある方は最後まで読んでいただけると嬉しいです。

WordPressがよくわからないよ。。。って方はまずこちらをご覧になって慣れてみてくださいね。

あわせて読みたい

【初心者】【SWELL】WordPressにインストールからホームページ（企業 コーポレート）を低コストで自作す… 自分でホームページをゼロから作りたい人に届いて欲しいな〜 ホームページを作りたいけど、費用が。。。と思いますよね。Web制作会社に依頼すると、20万は下りません。 …

【WordPressテーマSWELL】ヘッダーとメインビジュアルのデモ画像

こんな感じでメニューが縦書きです。

■Googleフォントを使用してます。
>>Googleフォント使用方法の詳しい解説はこちら

WordPressの追加CSSにコードを入力

以下のコードをWordPressのカスタマイズの追加CSSにコピペすれば縦書きになります。

このコードをコピペしてくださいね。

/*メニューを縦書き*/
.c-gnav>.menu-item>a .ttl {
	writing-mode: vertical-lr;
	padding: 20px;
	font-size: 18px;
}

.c-gnav>.menu-item>a {
	justify-content: normal;
}

追加CSSの解説

縦書きにするプロパティと値

縦書きにするにはwriting-modeというプロパティを使います。>>MDN公式サイト

日本語はltrになります。

メニューは１行ですので、
vertical-rlもしくはvertical-lrどちらでもいいです。

メニューをデベロッパーツールを見てみると、左記のクラス名がついています。

.c-gnav>.menu-item>a .ttl {
	writing-mode: vertical-lr;
	padding: 20px;
	font-size: 18px;
}

列の最初の文字の高さを揃える

縦書きにはなりましたが、列の最初の文字の高さが揃っていません。

デベロッパーツールで見てみるとflexでjustify-content: center;になっているからだとわかります。

それぞれ上下に対して真ん中に配置されています。

>>MDN公式サイト

通常の配置に戻すには、justify-content: normal;で戻ります。

.c-gnav>.menu-item>a {
	justify-content: normal;
}

解説は以上になります。

まとめ

文字が縦書きになるだけで、グッと和風な感じが増しますね！

フォントを変えてみたりと素敵にデザインしてみてくださいね。

〜本日も最後まで読んでいただき、ありがとうございました。〜

SWELLを使用したカスタマイズを色々解説しています。

あわせて読みたい