一瞬でいい感じのブログに！スワローで始める初めてのWordPressカスタマイズ

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。

WordPressでブログを運営するにあたり、やっておくべきことの1つに『ブログデザインのカスタマイズ』があります。

ブログのデザインは、WordPressに適用されているテーマをカスタマイズすることで変更できます。

今回はこのブログ（Enjoy IT Life）でも実際に利用しているWordPressの有料テーマスワローのカスタマイズ方法について紹介します。

スワローは有料ということもあり多機能なテーマですが、今回は『ブログを運営するにあたり、まずはここまでやっておけば十分』というレベルのカスタマイズをゴールとします。

なお、当記事の情報は2019年10月現在のものとなっています。

カスタマイズ後のブログの完成形

具体的なカスタマイズの方法を紹介する前に、まずはカスタマイズをする前とした後でどのようにブログの見た目が変わるか紹介をします。

今回行うカスタマイズの一覧は以下の通りです。

上記のカスタマイズを完了させると記事一覧ページは以下のようになります。↓

カスタマイズ前

カスタマイズ後

記事ページは以下のようになります。↓

カスタマイズ前

カスタマイズ後

WordPressのテーマをスワローにする

まずはスワローをWordPressのテーマとして設定する手順について説明をします。

配布されているテーマファイルをアップロードすることで任意のテーマをWordPressに設定できるのですがそれだと少し問題があります。

なぜなら、テーマのCSSファイルやPHPファイルをカスタマイズする場合、オリジナルのテーマファイルを直接編集するとテーマのアップデートがあった際にカスタマイズした内容が上書きされてしまうからです。

WordPressではテーマをカスタマイズする場合に備え、子テーマと呼ばれる、オリジナルのテーマのデザインや機能を引き継いだテーマを活用するのが一般的です。
子テーマを編集することで、オリジナルのテーマを直接変更することなくテーマのカスタマイズができます。
オリジナルのテーマのことを子テーマと対比させて親テーマなどと呼びます。

話をまとめると、スワローのテーマをWordPressに設定する手順は以下のようになります。

以下では上記手順について解説をしていきます。

スワロー（親テーマ）を購入する

スワローは販売会社のOPENCAGE(オープンケージ)のサイトから購入ができます。

テーマを購入後、マイページからzip形式でテーマファイルをダウロードできます。

スワローの子テーマをダウンロードする

スワローの子テーマは親テーマ同様、OPENCAGE(オープンケージ)のサイトからダウンロードできます。

子テーマはOPENCAGE『子テーマのダウンロード・導入』で配布されているのでダウロードしましょう。

スワローの親テーマ・子テーマをWordPressにアップロードする

テーマのアップロードはダッシュボード画面から行うので、まずはWordPressにログインします。
WordPressのログインページは/wp-loginです。

ログイン後、『外観』→ 『テーマ』を選択します。

『新規追加』ボタンを押し、先ほどダウンロードした親テーマ（yswallo）と子テーマ（yswallo_custom）をアップロードします。
アップロード後、以下のようにテーマが2つ表示されていればOKです。

子テーマをWordPressのテーマに設定する

テーマファイルのアップロード後、スワローの子テーマをクリックして詳細画面を開いて『有効化』を選択します。

有効化をした後、ブログにアクセスして以下のようにスワローのテーマが反映されたWordPressのトップページが表示されればOKです。

まずはこれだけやっておこう！スワローの初期カスタマイズまとめ

ここまででスワローのカスタマイズをする準備ができました。
テーマのカスタマイズをするには『カスタマイズ』ボタンを押します。

ボタンを押すと以下のような画面になります。

テーマのカスタマイズは、ほとんどの場合上記の画面から行えます。
以下でも、上記の画面をベースにカスタマイズ方法の紹介をしていきます。

ブログのタイトルやロゴ、アイコンをカスタマイズする

ブログのタイトルやロゴ、アイコンのカスタマイズは『サイト基本設定・ロゴ画像』で行います。

『サイトのタイトル』がブログのタイトル、『キャッチフレーズ』がタイトル下に表示される説明文となります。
『キャッチフレーズ』はブログのコンセプトなどを紹介したいときに利用するといいでしょう。

スワローではブログタイトル表示部分に画像も配置できます。
タイトルの代わりに画像を配置したい場合は『ロゴ画像をアップロード』から画像をアップロードしましょう。

『サイトアイコン』にアップロードされた画像がブログのアイコンとなります。
サイトアイコンとは、ブラウザのタブに表示される小さなアイコンのことを指し、別名ファビコン（fabicon）と呼ばれています。

サイトアイコンはブログをブックマークしたときや、スマートフォンでGoogle検索をしたときに表示されます。
ブログのシンボル的な役割を担っているため設定をしておくとよいでしょう。

ブログの配色をカスタマイズする

ブログの配色は『サイトカラー設定』で行います。

色の変更ができる項目が一覧で表示されているので、自分好みの配色になるように設定をしていきましょう。

もし配色に困るようでしたらcolorhuntなど、配色ツールを利用してみるとよいでしょう。

記事一覧のページをカスタマイズする

投稿した記事の一覧が表示されるページのカスタマイズは『記事一覧ページ設定』で行います。

スワローでは記事一覧の表示方法として、『シンプル』『カード型』『ビッグ』の3種類のデザインが用意されています。

シンプル

カード型

ビッグ

記事一覧のページは以下の4種類があり、それぞれのページごとにカスタマイズできます。

記事ページをカスタマイズする

記事ページのカスタマイズは『投稿・固定ページ設定』で行います。

『記事・固定ページレイアウト』で記事ページのレイアウトを変更できます。
スワローでは記事ページのレイアウト方法として、『デフォルト』『ワンカラム』『バイラル風』の3種類のデザインが用意されています。

ワンカラム（サイドバーなし）

ワンカラム（サイドバーなし）

バイラル風（サイドバーなし）

『見出しデザイン』で記事中の見出しのデザインを変更することができます。
スワローでは『シンプル（デフォルト）』『ステッチ風』『吹き出し風』の3種類が用意されています。

シンプル（デフォルト）

ステッチ風

吹き出し風

メニュー表示をカスタマイズする

ブログのヘッダーやフッターなどに表示するメニューのカスタマイズは『メニュー』で行います。

スワローではメニューの表示位置として『グローバルナビ』『グローバルナビ(スマートフォン)』『フッターナビ』の3種類が用意されています。
メニューの項目にはブログのカテゴリーやタグ、固定ページなどを設定できます。

例として、グローバルナビのメニューにカテゴリ一覧を設定する手順について紹介します。

はじめに『メニューを新規作成』を選択します。

次に任意の『メニュー名』を決定後、メニューを配置したい位置を決定します。

メニュー作成後に表示される『項目を追加』というボタンから、メニューに設置する項目を選択できます。
例えばカテゴリーを全て選択すれば、カテゴリー一覧が表示されるメニューが完成します。

これで以下のようなメニューが作成できました。

同様の手順でメニューを複数作成すれば、ヘッダーには『カテゴリ一覧』、フッターには『カテゴリ一覧 + 免責事項の固定ページ』のように、位置ごとに異なるメニューを表示させることもできます。

なお、メニューの編集はダッシュボードの『外観』→『メニュー』からも編集可能です。

ブログのパーツ配置をカスタマイズする

ブログのどの位置にどういった機能（リンク、ボタン、画像など）を配置するかという、ブログのパーツ配置のカスタマイズは『ウィジェット』で行います。

ウィジェットとはブログのイチ機能を提供するパーツのようなものです。

WordPressには『ウィジェットエリア』と呼ばれる、ウィジェットを自由に組み合わせられるスペースがあります。
ウィジェットエリアをカスタマイズすることで、簡単にブログのパーツ配置を変更できます。

ウィジェットエリアの数はWordPressのテーマによって異なっており、スワローでは合計14箇所のウィジェットエリアが提供されています。

WordPressインストール時のデフォルトのテーマ(Twenty Nineteen)のウィジェットエリアは3箇所となっています。デフォルトのテーマと比較するとスワローのウィジェットエリアはかなり多いということがわかると思います。
ウィジェットエリアが多ければ多いほど柔軟にウィジェットを配置できるようになるため、ブログのカスタマイズの幅が広がります。

今回は例として、サイドバーの配置をカスタマイズする手順を紹介します。

はじめに『ウィジェット』を選択します。

次にカスタマイズしたいウィジェットエリアを選択します。

『ウィジェットを追加』ボタンでウィジェットの追加、各ウィジェットの項目でウィジェットの削除ができます。
また、『並び替え』をクリックするか、ウィジェットをドラッグすることでウィジェットの表示順を変更できます。

これで以下のようなサイドバーが作成できました。

なお、上記の手順でカスタマイズできるウィジェットエリアは、スワローで提供されている14箇所のうちの主要9箇所となっています。

ウィジェットのカスタマイズはダッシュボードの『外観』→『ウィジェット』からでも行えます。こちらでは全14箇所のウィジットエリアの編集ができます。
より細かいウィジェットのカスタマイズを行いたい場合はダッシュボードからウィジェットの編集をするとよいでしょう。

まとめ

以上でスワローを利用したブログデザインのカスタマイズ方法の紹介を終わります。
スワローを購入されたばかりの方や、購入を検討されている方の参考になればと思います。

今回の記事をご覧になってわかる通り、スワローを導入することで一瞬でブログをいい感じのデザインにカスタマイズできます。

ブログを公開してまもない段階であれば今回紹介したカスタマイズをしておけば十分だと思います。

数クリックですぐにブログをカスタマイズできるのは有料テーマを導入する大きなメリットですね。

いちスワローユーザーのぼくも、スワロー導入後はブログのデザインを気にする必要がなくなり、安心してブログ記事作成に注力できているのでスワローには非常に助かっています。

『有料テーマの購入』というと特にブログ初心者にとっては少しハードルが高いかもしれませんが、ブログのデザインをカスタマイズするのにかかるコストをお金で解決できると考えれば理にかなった選択だと思います。

有料テーマの導入が早ければ早いほどテーマの恩恵をより多く受けられるので、早めにテーマを購入して損はないと思います。

今回は紹介しきれませんでしたが、スワローには他にも充実した機能があります。
オープンケージではスワローのカスタマイズ機能をフルに活用したスワローのデモサイトが用意されています。
スワローに関するノウハウもデモサイトの記事に公開されているので、興味のある方はぜひご覧になってみてください。

この記事がいいなと思いましたらツイッター(@nishina555)のフォローもよろしくお願いします！

スワローの公式サイトはこちらから