SWELLで整ったトップページを作る方法と手順

2024年1月6日

ワードプレステーマ SWELL を使用すると、最小限の設定で整ったページを作ることが可能になります。ここでは簡単な例（このサイト）を使って実際にトップページを作っていきましょう。

WordPressテーマ「SWELL」

コンテンツ

このサイトの作例

このサイトを例に、SWELLでのトップページの作り方について説明していきます。

※このスクショは FireShot というクロームのプラグインで撮っています。とても便利なのでWEBデザインをやっている人は活用してください。

メインビジュアルエリアは「カスタマイズ」で見た目を作ります。その下の投稿サムネイルが9枚ある部分は、固定ページで作ってそれをトップページに表示するように設定をしてあります。フッターは「カスタマイズ」で簡単に編集することが可能です。

では以下で具体的に作り方を説明をしていきます。

メインビジュアルを設定する

表示されてるモニターいっぱいに画像を表示させ、その上に文字列を二つ配置する、ほぼSWELLのデフォルトの状態を使用しています。

画像をモニターサイズに合わせる

カスタマイズ→トップページ→メインビジュアルと進み、最初の項目が画像になっていることを確認します。その少し下に「メインビジュアルの高さ設定」という項目があるので、「ウインドウサイズにフィットさせる」を選択しましょう。

これで表示デバイスが変わってもいつでもその画面いっぱいに画像が表示されます。

背景画像を変更する

デフォルトの状態だと Lorem Picsum というサイトにつながるようになっていて、ランダムで画像がピックアップされています。これを任意のものに変えてみましょう。

先ほどの項目（カスタマイズ→トップページ→メインビジュアル）を下にスクロールすると、「各スライドの設定」という項目があります。スライド画像[1]（PC）にメインビジュアルとして使いたい画像を設定しましょう。

このサイトではグラデージョンに塗っただけのシンプルなものを使っています。なお、画像選びはとても重要で、素人が撮影したものだとどんなに頑張ってもダサくなりがちです。

画像は o-dan などから拾ってきたほうがいいでしょう。

サイズは 1920×1080px がPCモニター用として最適です。その下でスマホ時の画像も設定することができます。設定をしていない場合はPC用の画像がトリミングされて表示されます。

見た目にこだわる方は別々に設定したほうがいいでしょう。

文章を入れる

次に文章の設定をしましょう。

先ほどと同じ画面（カスタマイズ→トップページ→メインビジュアル）をさらに下にスクロールすると、メインテキスト[1]、サブテキスト[1]という項目があります。それぞれに適当に入力をしてどのように表示されるか確認してみてください。

なお、そのままだとサンプルのような大きさになりません。その変更方法を次で解説します。

【応用】メインテキスト文字の大きさとアニメーション

では先ほど設定したメインビジュアルの文字を調整する追加CSSです。

※赤字の部分は左からしゅっと出てくるアニメーションの部分なので、いらなければ削除してください。

/* メインの文字いじる*/
.p-mainVisual__slideTitle {
	font-size: 70px;
	font-weight: 700;
	opacity: 0;
	transform: translate(-80px, 0);
	animation: mvImg .5s .5s forwards;}
            @keyframes mvImg {
                0% {
                    opacity: 0;
                    transform: translate(-80px, 0);
                }
                100% {
                    opacity: 1;
                    transform: translate(0);
                }
            }

/* メインの文字下いじる*/
.-height-full .p-mainVisual__slideText {
	padding-left: 6px;
	margin-top: 0;
	font-size: 18px;
	font-weight: 500;
	opacity: 0;
	transform: translate(-80px, 0);
	animation: mvImg2 .5s 1s forwards;}
            @keyframes mvImg2 {
                0% {
                    opacity: 0;
                    transform: translate(-80px, 0);
                }
                100% {
                    opacity: 1;
                    transform: translate(0);
                }
            }

追加CSSの記述方法がわからないという方はこちらの記事を参考にしてください。

SWELL ( WordPress テーマ ) の見た目を整える追加CSSの書き方 | キタテン

またデバイスが変わったとき（PC→タブレット→スマホ）にそれぞれ文字の大きさと余白も調整したほうが良いでしょう。レスポンシブ対応の方法についてもこちらのページで紹介しています。