STORK19カスタマイズガイド|WordPress初心者向け

WordPressのカスタマイズをお考えでしょうか?

本記事では、WordPressテーマSTORK19のカスタマイズ方法をまとめてご紹介します。

STORK19はカスタマイズしやすい設計になっており、初心者でも簡単に外観設定を行えるのが魅力です。

当ブログでもSTORK19を利用していますが、少しのカスタマイズを加えるだけで全く違った印象のサイトに仕上がります。

STORK19デモサイト
当ブログ

STORK19の基本的なカスタマイズ手順から、当ブログのオリジナルカスタマイズまでご紹介していますので、ぜひ参考にしてみてください。

STORK19|カスタマイズの前に…

STORK19のカスタマイズを行う前に、カスタマイズの基本を確認しておきましょう。

  • 子テーマの有効化を確認
  • カスタマイズの基本操作

子テーマの有効化を確認

まずは子テーマが有効になっているか確認しておきましょう。

子テーマを使わずに親テーマでカスタマイズした場合、テーマのアップデート時にカスタマイズ内容が初期化されてしまいます。

WordPress管理画面で【外観】を開き、STORK19子テーマが【有効】になっていればOKです。

まだ子テーマの導入が済んでいない方は、子テーマをインストール/有効化し、その後カスタマイズを始めましょう。

まず、子テーマのダウンロードページを開きます。

【jstork19_customをダウンロード】というボタンをクリックすると、子テーマのファイルがダウンロードできます。

続いて、ダウンロードしたファイルをWordPressにインストールしていきます。

WordPress管理画面を開き、サイドメニューから【外観】>【新規追加】をクリックします。

【テーマのアップロード】をクリックします。

【ファイルを選択】をクリックします。

ダウンロードしたファイル【jstork19_custom.zip】を選択します。

【今すぐインストール】をクリックします。

【有効化】をクリックすれば子テーマの導入が完了です。

カスタマイズの基本操作

カスタマイズを行う際の基本操作をご紹介します。

WordPress管理画面で【外観】>【カスタマイズ】を開きます。

画面左側に並んでいるのがカスタマイズできる項目です。

ここでサイトのカラーやレイアウトなど、基本的なカスタマイズが行えます。

CSSを用いた独自カスタマイズを行う際は【追加CSS】を開き、コードを入力していきます。

カスタマイズ中は、ライブプレビュー機能によって実際に反映される画面を見ながら変更を加えていきます。

トップページのカスタマイズ

トップページのカスタマイズをご紹介します。

記事一覧のレイアウト

記事一覧のレイアウトは、3パターンから選択できます。

  • シンプル
  • カード型
  • ビッグ

当ブログで3パターン試してみると以下のようになります。

シンプルの場合
カード型の場合
ビッグの場合

このようにレイアウトによって全く違った印象になります。

記事レイアウト設定手順

記事一覧のレイアウトは、まず【外観】>【カスタマイズ】>【記事一覧ページ設定】を開きます。

ここでPCとSP(スマートフォン)のレイアウトをそれぞれ選択できます。

当ブログの場合カード型を選択しており、さらに独自カスタマイズを加えています。

Before

After

このように画像の外枠に余白を入れ、ポラロイド写真風にカスタマイズしています。また、文字のサイズや配置も微調節を加えていいます。

以下のコードを追加CSSに加えるとこのようなレイアウトになります。

/*カード*/
.eyecatch.of-cover img {
	padding: 0.9em 0.9em 0;
}
.archives-list .entry-title {
	margin: 0 0 2.3em;
  font-size: 103%;
	 text-align: center;
	 padding: 0 10px;
}

投稿記事ページ内のカスタマイズ

投稿記事ページ内のカスタマイズをご紹介します。

見出し

見出しは、記事内の各項目のタイトルとして使用します。

STORK19では、あらかじめ4パターンの見出しデザインが用意されており、お好みデザインとカラーを選択できます。

当ブログではさらにオリジナルカスタマイズを加えており、以下記事で詳しく解説しています。

目次

記事ページに目次があると、各項目にジャンプできて非常に便利です。

STORK19では、プラグインを導入して各記事ページ内に目次の自動生成ができます。

目次の設定手順は、当ブログのオリジナルカスタマイズも加えて以下記事で解説しています。

ヘッダーのカスタマイズ

ヘッダー部分のカスタマイズです。

ヘッダーメニュー(グローバルナビ)

サイトの主要な項目をヘッダーメニューに表示できます。サイトの主軸を示す重要な役割を果たします。
▶︎ヘッダーメニューのカスタマイズはこちら

サイドバーのカスタマイズ

サイドバーのカスタマイズです。

プロフィール

画像付きプロフィールを作成し、サイドバーに設置できます。SNSリンクも表示でき、リピーターの獲得に繋がります。
▶︎プロフィールのカスタマイズはこちら

その他のカスタマイズ

その他のカスタマイズです。

お問い合わせフォーム

プラグインを導入してお問い合わせフォームを設置できます。お問い合わせフォームは稼ぐブログに必須です。
▶︎お問い合わせフォームのカスタマイズはこちら

まとめ:STORK19をカスタマイズしよう

STORK19のカスタマイズをまとめました。
いろいろ試して自分好みのサイトにしていきましょう。

▶︎ブログ記事の構成手順はこちら
▶︎ブログ収益化の手順はこちら