当ブログで使用しているテーマSWELL公式ページはこちら

【SWELLでブログをデザイン】トップページをおしゃれなサイト風にする手順

こんにちは!なおらんです。

トップページはブログの顔!

できれば洗練でおしゃれにしたいと誰もが思うところではないでしょうか。

今日は私が使用しているテーマSWELLで簡単におしゃれなトップページを作る手順を紹介したいと思います。

こんな方におすすめの内容です
  • CSSやプログラミングの知識がないけど、簡単におしゃれなトップページが作れる方法を知りたい。
  • SWELLを使い始めたけどどうやっておしゃれなトップページにするのか知りたい。
  • テーマをSWELLに移行したのでおしゃれにカスタマイズし、ブログ運営を楽しみたい。
なおらん

センス0。例えるならピンクのスウェットの上にトラ柄のセーターを羽織ってるようなトップページだった私のブログがSWELLに移行してから見違えるようになったわよ!

スポンサーリンク
目次

SWELLでトップページをおしゃれなサイト風にする手順

SWELLではCSSやプログラミングの知識がなくても、ブロックの組み合わせでおしゃれなトップページを作ることができます。

このブログのトップページをみてください。

知識もセンスもない私でもこのくらいのおしゃれ感を出すことができます。

それでは手順を追っておしゃれなトップページを作っていきましょう!

SWELLでおしゃれなトップページをつくる手順①ヘッダーをカスタマイズ

まず最初にヘッダーをカスタマイズしていきます。

ダッシュボード画面上部のカスタマイズ→ヘッダーを選択してください。

ロゴ画像の設定をします。私はCanvaで画像を作成しました。

〔Canva無料トライアルはこちらから〕


画像赤枠①の部分です。

ヘッダーカスタマイズ画面
ヘッダーのレイアウト・デザイン設定



レイアウト・デザイン設定でどの位置にロゴとメニューを設定するのか決めます。(赤枠②の部分

ロゴを中央にしたりメニューを左右上下選ぶことができるのでお好みで設定してくださいね。

次に私がカスタマイズしたのはヘッダーの追従設定です。

ヘッダーカスタマイズ画面
ヘッダーの追従設定

赤枠部分にチェックを入れ、スクロールするとヘッダーが追従してくる設定にしました。

この時に背景不透明度を0.5に設定して後ろが透けて見えるようにし、おしゃれ感を出しています。

ヘッダー部分のカスタマイズはこれで終了です。


SWELLでおしゃれなトップページを作る手順②メインビジュアルをカスタマイズ

ダッシュボード画面上部カスタマイズ→トップページ→メインビジュアルを選択。

画像にチェックを入れサイズを設定します。(サイズ設定は画像を入れた後でもいいです)

メインビジュアルカスタマイズ画面

SWELLではメインビジュアルを複数枚設定しスライドさせることができます。

下の方に行ってスライド画像(1)でまずお好みの画像を選択します。

画像の上にテキストを載せることもできるので、メインテキスト、サブテキストにそれぞれ載せたい言葉を入れてください。

当ブログはメインテキストだけ入れています。

赤枠の下にURLを入れる箇所があるのですが、見せたいページを入れて誘導することも可能です。

URLを入れるだけでボタン表示されます。

ちなみに当ブログでは設定していません。

スライド画像(2)、スライド画像(3)でも同じように設定してください。

メインビジュアルカスタマイズ画面

画像を入れた後、上の方に戻り各種設定します。

ここではフィルター処理をドットにし、オーバーレイカラーを黒にして不透明度を0.2に設定し少し影のある感じを出しました。

記事スライダーでメインカテゴリーを表示

メインビジュアル上で見せたいページへ誘導せずに、記事スライダーでメインカテゴリーを設定して目立たせるようにしました。

とは言え、今までのアイキャッチだとせっかくのおしゃれ感が台無しになるので一気にアイキャッチを変更し、統一感を出すようにしています。


今までのアイキャッチ画像参照

以前のアイキャッチ画像
以前のアイキャッチ画像
以前のアイキャッチ画像

これはこれで味があって気に入ってはいたのですが、おしゃれなトップページを作るには釣り合わないので変更しました^^;



設定方法はカスタマイズ→メインビジュアル→記事スライダーの順で進んで左側に出てくる設定項目に従ってお好みで設定してください。

SWELLでおしゃれなトップページを作る手順➂固定ページでカスタマイズ

次はメインの固定ページを利用してのカスタマイズです。

固定ページの新規追加からタイトルをトップページとし作成していきます。

固定ページでのカスタマイズ画面
タイトルをトップページと入れてます

NEW POSTの作成手順

次にブロックを追加からフルワイドブロックを選択します。検索にフルワイドと入れるとすぐ出てきます。

固定ページでのカスタマイズ画面
フルワイドブロックを選択

最初の見出しをNEW POSTと入れ、新着記事や人気記事を表示させるブロックを作っていきます。

右側のブロックを開いてスタイルをセクション用に合わせてください。

固定ページでのカスタマイズ画面
見出しをNEW POSTとする

続いてタブブロックを選択してください。

固定ページでのカスタマイズ画面
タブブロックを選択
固定ページでのカスタマイズ画面
Tab1に新着記事Tab2に人気記事を入れます

当ブログではTab1に新着記事、Tab2に人気記事と入れています。

右側でスタイルを下線にし、タブサイズを端まで並べるを選択します。

お好みで設定してください。

固定ページでのカスタマイズ画面
投稿リストを入れます

それぞれのTabの中で投稿リストブロックを追加していきます。

固定ページでのカスタマイズ画面
投稿リストブロックを追加

右側で表示する投稿数やレイアウト、投稿の表示順序を選んでください。

当ブログではリスト型(左右交互)にしています。

新着記事のタブでは新着順、人気記事のタブでは人気順を選ぶと自動で表示されます。

カテゴリーの作成手順

続いてカテゴリーブロックをカスタマイズしていきます。

固定ページでのカスタマイズ画面
見出しにCATEGORYといれます

NEW POSTと同様に見出しにCATEGORYと入れます。

次にブロックの追加でカラムを選択します。

固定ページでのカスタマイズ画面
2カラムを選択

当ブログは親カテゴリーが4つなので2カラムを選択し、2つ作成していきます。

固定ページでのカスタマイズ画面
お好きな画像を入れていきます

お好きな画像を選択し、右側で好みのスタイルを選んでください。

キャプションにカテゴリー名を入れています。

固定ページでのカスタマイズ画面
それぞれのカテゴリーのURLを入れてリンクさせます

カテゴリーの一覧記事を表示させるには、カテゴリーのURLをリンクさせます。

ダッシュボード画面から投稿のカテゴリーで該当するカテゴリーを表示させ、URLをコピペしリンクに貼り付け適用させればOKです。

同じ手順でそれぞれのカテゴリーを作成して終了です。

アーカイブの作成手順

次にアーカイブブロックをカスタマイズします。

ここで私は背景色を変えたかったので、最初のようにフルワイドブロックを選択しています。

固定ページでのカスタマイズ画面
見出しにARCHIVEと入れアーカイブブロックを追加

見出しにARCHIVEと入れてアーカイブブロックを追加します。

固定ページでのカスタマイズ画面
アーカイブブロックを追加

以上でアーカイブブロックのカスタマイズはひとまず終了です。

続いてカレンダーを設定していますが、これはなくてもいいです。設定するなら今までと同じ手順でフルワイドブロックを選択→カレンダーブロックを追加で終了です。

背景&デザインをカスタマイズ

固定ページの背景とデザインをカスタマイズするにはそれぞれのフルワイドブロックで行います。

固定ページでのカスタマイズ画面
背景をカスタマイズ

フルワイドブロックに合わせ右側で好きな色を選択します。(ブロックごとに設定してください)

背景効果カスタマイズ画面
背景画像を設定



背景に画像を入れたい場合は画像をメディアから選択して入れます。(上記画像赤枠部分)

当ブログのように透けさせる感じを出したい場合はオーバーレイの不透明度をお好みの数値に設定してください。

背景効果カスタマイズ画面
背景効果を設定



背景効果でFixed Backgroundにチェックを入れると、背景画像が固定され作成したブロックだけが上下に動くようになるのでおしゃれ感がアップします。(上記画像赤枠部分)


固定ページのカスタマイズが終了したら、公開ボタンを押したあとトップページに設定します。

手順はカスタマイズ→Wordpress設定→ホームページ設定→ホームページの表示→固定ページをチェック→ホームページ→トップページを選択で完了です。

SWELLでおしゃれなトップページを作る手順④フッターをカスタマイズ

フッターのカスタマイズは外観→ウィジェットで行います。

フッター画面
フッターは3つの部分から構成されています

上記のように3つの部分から構成されているので、ウィジェットのフッター(PC)1,2,3でそれぞれカスタマイズしていきます。

フッターのカスタマイズ画面

それぞれのフッターに入れたいものを左から選んで入れ込むだけで終了です。

フッターの背景色はカスタマイズ→フッターに進み設定してください。

以上でトップページをおしゃれなサイト風にカスタマイズする手順は終わりです。

全体のチェックを忘れずに

すべてのカスタマイズが終了したら、全体のチェックを必ずしてください。

その際はモバイルでのチェックも忘れずにしてくださいね。

PCとモバイルでは見え方が違うので、イメージが違ったということもあります。

さいごに

SWELLではこのようにCSSやプログラミングの知識がなくても簡単におしゃれなトップページを作成することができます。

操作性も抜群でサクサクと進めることができるので、特にブログ初心者のかたにはおすすめのテーマです。

関連記事
【ブログ初心者に告ぐ】最初から有料テーマにすべき3つの理由



今回私が参考にした動画が次の動画です。

もっと自分のブログのトップページをおしゃれにしたいと思っているかたは是非参考にしてください。

そしてブログ運営を楽しんでいきましょう!

お名前.com



にほんブログ村 主婦日記ブログ アラ還主婦へ
にほんブログ村







Twitterも毎日更新!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる