WordPressのテーマ | まるログ

初心者の方向けにWordPressのテーマの選び方、テーマのインストール方法、おすすめのカスタマイズ方法を紹介します。

テーマの選び方
テーマをインストール
SWELL設定
高速化
リセット
外観カスタマイズ
基本カラー
ヘッダー
トップページのビジュアルパーツ
SNS情報
ウィジェット
表示場所にウィジェットを設定
サイドバーのプロフィールにSNSアイコンを表示
メニュー
ヘッダーメニュー
フッターメニュー
プロフィール
「この記事を書いた人」にSNSアイコンを表示

テーマの選び方

WordPressのテーマはたくさんありますが、SEO対策がしっかり行われていて、レスポンシブ対応で、かっこいいテーマを選びたいですよね。

スピードが速く、内部が最適化されていて、人にもクローラにもやさしい構造、かつ見た目がかっこよく美しいものがアクセス数にも影響するようです。

いろいろ調べてみましたが、今一番おすすめなのは有料テーマのSWELL（スウェル）です。

他のテーマより高額ですが、全体的に優れていて費用以上の価値があると思います。　

無料のテーマでは、Cocoonが多機能で長く人気です。

テーマをインストール

テーマの「本体」「子テーマ」の両方のファイルをダウンロードします。

WordPressメニュー：外観をクリック　「新規追加」ボタン＞「テーマのアップロード」ボタンをクリックし、「本体」「子テーマ」の順にアップロード、インストールします。

「子テーマ」を有効化します。

SWELL設定

高速化

次の項目を全てONにします。

WordPressメニュー：SWELL設定＞高速化>キャッシュ機能　

WordPressメニュー：SWELL設定＞高速化>遅延読み込み機能＞コンテンツの遅延読み込み

サイト作成中はOFFにしておくと、変更がすぐに反映されて便利です。

リセット

キャッシュをクリアします。

変更が反映されない場合などに使用します。

外観カスタマイズ

基本カラー

WordPressメニュー：外観＞カスタマイズ＞サイト全体設定＞基本カラーを選択し、次の色を設定します。

メインカラー
テキストカラー
リンクカラー
背景色

ヘッダー

WordPressメニュー：外観＞カスタマイズ＞ヘッダーを選択し、ヘッダー周りの設定をします。

キャッチフレーズの表示位置をカスタマイズ

キャッチフレーズの表示位置を「ヘッダーロゴの近くに表示」に設定します。

当サイトではヘッダーロゴの位置とバランスがいいように、キャッチフレーズの位置を少し下に移動しました。

WordPressメニュー：外観＞カスタマイズ＞追加CSS に、以下のCSSを追加します。

@media (min-width: 960px){
	.-series .l-header__logo {
		align-items: flex-end;
	}
}

トップページのビジュアルパーツ

WordPressメニュー：外観＞カスタマイズ＞トップページで設定します。

トップページには、メインビジュアルと記事スライダー、ピックアップバナーという３種類のビジュアルパーツが設定できます。

主に次のような違いがあります。

ビジュアルパーツ	表示内容	スライド動作
記事スライダー	カテゴリー、タグ、指定なしのいずれかで指定した記事	あり
メインビジュアル	任意の画像・動画のURLを指定	あり
ピックアップバナー	メニュー作成時に指定した記事・URL	なし

SNS情報

WordPressメニュー：外観＞カスタマイズ＞SNS情報で各SNSのページURLを設定します。

Twitter: https://twitter.com/ユーザー名
Instagram: https://www.instagram.com/ユーザーネーム/
Pinterest: https://www.pinterest.jp/ユーザー名/
Github: https://github.com/ユーザー名
YouTube: https://www.youtube.com/ハンドル URL

ウィジェット

表示場所にウィジェットを設定

WordPressメニュー：外観＞ウィジェットで、表示したい場所にウィジェットをドラッグ・アンド・ドロップして設定していきます。

例えば次のように設定します。

共通サイドバー: プロフィール、カテゴリー、タグ、人気記事
共通サイドバー（スマホ）: 広告コード
追尾サイドバー: 目次
スマホ開閉メニュー下: カテゴリー、タグ
フッター（PC）1: カテゴリー、タグ
フッター（PC）2: 新着記事
フッター（PC）3: 人気記事
フッター（スマホ）: 新着記事、人気記事

サイドバーのプロフィールにSNSアイコンを表示

WordPressメニュー：外観＞ウィジェット＞共通サイドバー　[SWELL]プロフィール

SNSアイコンリストを表示するをチェックします。

メニュー

ヘッダーメニュー

当サイトの場合、右上に表示しているABOUT、CONTACT等のヘッダーメニューの設定をします。

WordPressメニュー：外観＞メニュー＞メニュー名に「ヘッダーメニュー」と入力し、「メニューを作成」ボタンをクリックします（公式マニュアル）。

左側の「メニュー項目を追加」から項目を選択して設定します。

メニュー設定＞メニューの位置は、「グローバルナビ」と「スマホ開閉メニュー内」にチェックを入れます。

右上の「表示オプション▼」をクリックし「説明」にチェックを入れると、メニュー下に説明が表示できます。

フッターメニュー

WordPressメニュー：外観＞メニュー＞メニュー名に「フッターメニュー」と入力し、「メニューを作成」ボタンをクリックします（公式マニュアル）。

左側の「メニュー項目を追加」から項目を選択して設定します。

メニュー設定＞メニューの位置は、「フッター」をチェックします。

プロフィール

「この記事を書いた人」にSNSアイコンを表示

記事下の「この記事を書いた人」にSNSアイコンを表示します。

WordPressメニュー：ユーザー＞プロフィール＞「SWELL追加データ」に各SNSのページURLを設定します。

Twitter: https://twitter.com/ユーザー名
Instagram: https://www.instagram.com/ユーザーネーム/
Pinterest: https://www.pinterest.jp/ユーザー名/
Github: https://github.com/ユーザー名
YouTube: https://www.youtube.com/ハンドル URL