見出し画像

SWELL サイトデザイン（画像をリストっぽく表示するトップページ）作り方を完全解説

Boon ☆ブログテクニック紹介ブロガー（旅行好き）

【はじめに】

本記事では、WordPress のテーマ「SWELL」で作ったサンプルサイトと同じサイトデザインができる方法を解説しています。


■ サンプルサイト

本記事で作成方法を紹介するサンプルサイトです。

SWELLテーマを利用した写真集的なデザインです。CSSで工夫を入れてアニメーションプラグインで動きを付けました。SWELLは素敵なデザインのサイトを簡単に作れる優良なテーマですね。

また、トップページについては、左側のイメージメニューと右側のNEWSエリアを固定表示し、真ん中のみスクロールするように作ってあります。


実際のサンプルサイトはこちら

本サンプルサイトは「SWELL」を利用しています。


■ SWELL のインストール

SWELL のインストールと初期設定（下記）は実施した状態でご利用ください。

  • SWELL テーマのインストール

  • パーマリンクを更新 / 設定する

  • サイトタイトルとキャッチフレーズの設定

  • SWELL の「ユーザ認証」を行う


SWELLの購入、インストール方法が不明の方は以下を参照してください。


■ 利用しているプラグイン

紹介しているサンプルサイトで利用しているプラグインです。

■ Category Order and Taxonomy Terms Order
カテゴリーの順番を変えるために利用

■ SEO SIMPLE PACK
SEO 対策のため

■ SiteGuard WP Plugin
サイトのセキュリティ向上のため

■ Blocks Animation: CSS Animations for Gutenberg Blocks
任意のブロックにアニメーション効果を付けるため


■ 前提事項・免責事項

  • サンプルサイトと同じ見た目、デザインになることを保証するものではありません。環境やバージョン、内容によってデザインが変わる可能性があります。

  • 当記事で掲載している「文章」、「動画」、「画像」、「イラスト」を含むすべてのコンテンツは、（フリー素材サイトから入手した「画像」、「イラスト」を除き）著作権は当記事管理者に帰属します。

  • フリー素材サイトから入手した「画像」、「イラスト」の著作権はフリー素材サイトの規約に準拠します。

  • 当記事内で用いている画像や文章の流用はお控えください。

  • 利用者は、当記事を閲覧し、その内容を参照した事によって何かしらの損害を被った場合でも、当記事管理者は責任を負いません。

本記事については 2023年12月17日 時点の WordPress、および SWELL を対象にしています。以降のバージョンアップで画面や操作が変わっている場合があります。あらかじめご了承ください。


【サイトデザインの方法（解説）】

本記事では、SWELL インストール後の初期状態からデザインを設定していく方法を記載しています。初期状態のまま設定を変える必要がない部分については記載しておりませんのでご了承ください。

１．全体設定

■ WordPress 設定（サイト基本情報）

WordPress の管理画面から「外観」→「カスタマイズ」→「WordPress 設定」→「サイト基本情報」を選択し、サイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

  • サイトのタイトルを指定する

  • キャッチフレーズを指定する

  • サイトアイコンに画像を指定する

サンプルサイトで設定している「サイトアイコン」の画像のサイズは「512×512」です。


■ サイト全体設定（基本カラー）

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」を選択し、メインの配色を設定します。

  • 「リンクカラー」に青（ #1176d4 ）を設定する


■ サイト全体設定（基本デザイン）

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」を選択し、メインのフォントを設定します。

  • 「ベースとなるフォント」に「ヒラギノゴシック > メイリオ」を設定する


■ カテゴリー作成

WordPress の管理画面から「投稿」→「カテゴリー」を選択し、カテゴリーを作成します。

  • カテゴリーを作成する


■ メニュー作成

グローバルナビ（ヘッダーメニュー）を作成します。

  • 「メニュー名」を設定する

  • 「グローバルナビ」をチェックして「メニューを作成」をクリックする


メニューを作成する

  • 「カテゴリー」や「カスタムリンク」などを用いてメニューを作成する


本サンプルサイトについては、トップページに対して、かなり細かい設定が必要になります。以降のページで細かく説明していますが、作成作業は決して簡単ではありません。

ご購入の際には、その点ご判断、ご了承の上ご購入くださいますよう、お願い申し上げます


ここから先は

8,436字 / 97画像

¥ 580

この記事が気に入ったらチップで応援してみませんか？