初心者WordPress「SWELL」で和風なWebサイトって作れるの？
和風なデザインのデモサイトを見てみたいなぁ
そんな人向けにWordPress有料テーマSWELLで作成した和風デザインのデモサイトを紹介します。
SWELLのテーマファイルを一切編集せずにどんな和風デザインに仕上がるかご覧ください。
SWELLで作った和風テイストなWebサイト
和風サイト制作に使ったプラグイン
和風のSWELLデモサイト制作に以下2つプラグインを使いました。
①Blocks Animation: CSS Animations for Gutenberg Blocks
デモサイト上でフォントが「フワッ」と浮き出てくるアニメーションを設定しています。アニメーションの種類やタイミングなどをブロック単位で制御できます。
あまり派手にやり過ぎると素人感が出てしまいサイトの質を落とすことなるのでバランスが大事。なるべくアニメーションの種類を増やさず、速度や再生のタイミングを調整すると高級感を演出できます。
②Countdown Block
数字が刻々と減っていく様子を表現するのにピッタリなのがこのCountdown Blockです。
和風のデモサイト上ではイベント部分の告知に使っています。「イベント開催まであと何日」的な場面に使えるプラグインです。
カウントダウンの日付は年～秒単位、フォントの大きさやデザインもブロックオプションから設定できるのでノーコードでオシャレなカウントダウンタイマーが設置できます。
かんたCountdown Blockプラグインの使い方は次の記事で詳しく解説しています。
【セールやイベント告知に使える】Countdown Block使ったカウントダウンタイマーの作り方
【結論】和風なテイスト用プラグインは不要
SWELLのデモサイトではプラグインを2つ使いましたが、正直和風テイストのWebデザインに役立つプラグインはありません。今回導入したのはアニメーション系のプラグインのみです。
プラグインは使わなくても和風のテイストに影響は出ません。
かんた和風なデザインを表現するために必須なプラグインはありません。
和風サイトデザインに使った機能
| パーツ | 制作に使った機能 |
|---|---|
| メインビジュアルのスライドショー | SWELLの機能 |
| コンテンツの全幅表示 | カバーブロック |
| 画像とテキストを2カラムで表示 | メディアとテキストブロック |
| レイアウトを分割 | リッチカラム |
| ギャラリー | ギャラリーブロック |
サイトの上部に表示されるメインビジュアル部分はSWELLの機能で作成しています。SWELLはメインビジュアル部分を全画面に表示させるオプションがあるので、インパクトの強いファーストビューが作成できます。
メインビジュアルにはSWELLのスライドショー機能を使いました。スライドショー以外にも動画を指定することができます。
ギャラリー部分はWordPress標準のギャラリーブロックです。一切独自カスタマイズはしていません。
CSSを少しだけ追加
和風デモサイトでは既存のCSSを変更せずCSSを少し加えました。SWELLのテーマファイルは一切変更していません。
かんたどんなコードを追加したかを紹介します！
コンテンツエリアで縦書きのアクセントを追加
コンテンツエリアの一部でフォントが縦書きになるCSSを追加しました。デモサイト上は特定のカバーブロックと特定のフルワイドブロックが縦書きになるよう設定しています。
かんた縦書きにしたいフルワイドブロックにtateクラスを付けています。
.tate .swell-block-fullWide__inner{
writing-mode: tb-rl;
}フルワイドに設定した縦書きのフォントは、標準だと文字間がキツキツで窮屈に感じたので余白を設定しました。
.tate .swell-block-fullWide__inner{
letter-spacing: .11em ! important;
}1つ1つの文字間同様に列の間の余白を広げました。
.tate .swell-block-fullWide__inner{
line-height: 45px;
}グーグル・マップを白黒に調整
和風らしさを出すために「色味」を減らす加工です。グーグル・マップを黒に変更するCSSコードを加えました。
.gmap{
filter: grayscale(1);
}グロナビを縦書きで和風っぽさを出した
ページ上部に表示させるグローバルナビゲーションはSWELL標準の出力です。ダッシュボード上でメニューの設定をした後、グローバルナビゲーションを縦書きにするCSSコードを加えました。
かんた詳しい方法は次の記事で解説しています。
2カラム化のレイアウト
左サイドに固定式のサイドバーを設置しました。
かんたカスタマイズ方法は次の記事で紹介しています。
まとめ
WordPres人気有料テーマ「SWELL」で作成した和風サイトと作り方を紹介しました。
ぜひSWELLで和風デザインのサイト制作にチャレンジしてみてください！
