本記事ではWordPressテーマSTORK19の導入からカスタマイズ方法まで解説します。
STORK19のメリットは、ムダのないミニマルな機能で初心者でも簡単にレイアウトができる点です。
当ブログでもSTORK19を利用していますが、少し手を加えるだけでブログが整い読みやすさや見た目の印象がアップします。
これからSTORK19の導入を考えている方、カスタマイズを始めている方はぜひ参考にしてみてください。
STORK19の使い方
導入手順
まずはSTORK19の導入手順から紹介します。
STORK19公式ページを開き【カートへ入れる】をクリックします。
▶︎STORK19購入ページはこちら 
カート内容を確認し【次へ】をクリックします。
『会員ではない方はこちら』の項目を入力し、【会員登録しながら次へ】をクリックします。
支払い方法を選択し、『利用規約に同意する』にチェックを入れ、【次へ】をクリックします。
クレジットカード払いの場合はカード情報を入力し【次へ】をクリック。その他の支払い方法を選択した場合は画面の指示に従って進みます。
内容を確認し、【上記内容で注文する】をクリックします。
完了画面で【ダウンロード】をクリックします。
ダウンロードした親テーマと子テーマのファイルをWordPressにインストールしていきます。
WordPress管理画面を開き、サイドメニューから【外観】＞【新規追加】をクリックします。
【テーマのアップロード】をクリックします。
【ファイルを選択】をクリックします。
ダウンロードした親テーマ【jstork19.zip】を選択します。
【今すぐインストール】をクリックします。
同様に子テーマ【jstork19_custom.zip】のファイルもインストールし、子テーマを【有効化】します。
親テーマと子テーマをインストールし、上記のように子テーマが有効になっていればOKです。
これでSTORK19の導入が完了しました。
基本操作
次にSTORK19の基本的な操作方法を紹介します。
まずWordPress管理画面で【外観】＞【カスタマイズ】を開きます。
サイドメニューから、サイトのカラーやレイアウトなど基本的な設定を行います。
CSSを用いた独自カスタマイズを行う際はサイドメニューから【追加CSS】を開き、コードを入力していきます。（中級者向け）
STORK19のカスタマイズ
ここでは最初に設定しておきたいカスタマイズを紹介します。
プロフィール
STORK19ではウィジェットを使って以下のようなプロフィールをサイトに設置できます。
作成手順は以下3ステップです。
- ウィジェットを配置する
- 画像をアップロードする
- テキスト入力とSNSアイコン設定
まずはプロフィール用のウィジェットを配置します。
WordPress管理画面で、【外観】＞【カスタマイズ】を開きます。
サイドメニューから【ウィジェット】を選びます。
【PC：メインサイドバー】をクリックします。
【+ウィジェットを追加】をクリックし、右側に開いた一覧の中から【カスタムHTML】をクリックします。
空欄に下記ショートコードをコピーペーストします。
[profile id="1"]
プレビュー画面でプロフィールのベースが表示されたことを確認し、【完了】をクリック後【公開】もクリックします。
これでウィジェットの配置は完了です。
次に、プロフィール画像を用意してアップロードします。
当ブログのアイコンはココナラでプロのイラストレーターさんに書いてもらったものを使用しています。
¥1,000〜5,000ほどで作成できるので気になる人はチェックしてみてください。¥1,000分のクーポンコード【GH08GB】
画像のアップロード手順は以下2パターンあります。
- プラグインを使う方法
- Gravatarを使う方法
簡単なのはプラグインを使う方法ですが、プラグインを増やしたくない方はGravatarを使う方法で進めてください。
まず、【Simple Local Avatars】というプラグインを導入します。
WordPress管理画面で【プラグイン】＞【新規追加】を開きます。
検索枠に【Simple Local Avatars】と入力し、【今すぐインストール】をクリックします。
インストール後、【有効化】をクリックします。
次に、【ユーザー】＞【プロフィール】を開きます。
画面を一番下までスクロールすると、Upload Avatarという項目があります。
【Choose from Media Library】をクリックし、プロフィール画像を選択します。
画像選択後、画面一番下【プロフィールを更新】をクリックすれば完了です。画像が反映されているか、サイトをチェックしてみてください。
まず、Gravatar公式を開きます。
【Gravatarを作成】をクリックします。
WordPress.comのアカウントを作成します。アカウントをお持ちの方は、【すでにお持ちですか？】から進んでください。
WordPress.comとWordPress.orgのアカウントは別物です。
アカウント作成をクリックすると、確認メールが送信されます。
届いたメールにある【アカウントを有効化】をクリックすれば、アカウント作成完了です。
そして再度Gravatar公式を開き、【ログイン】します。
【ここをクリックして追加してください！】をクリックします。
続いて【新規アップロード】をクリックします。
【ファイルを選択】からプロフィール画像を選択し、【次へ】をクリックします。
画像を調節し、【画像切り抜き】をクリックします。
Gを選択した状態で【レーディングを設定】をクリックします。
これでプロフィール画像の設定が完了です。
画像がサイトに反映されるまで時間がかかります。5〜10分ほど様子をみてください。
最後に、プロフィールに入れるテキストの編集とSNSアイコンの設定を行います。
【ユーザー】＞【プロフィール】を開き、下にスクロールしていくと、SNS情報や、プロフィール情報の入力項目があります。
それぞれの項目に必要な情報を入力し、画面一番下の【プロフィールを更新】をクリックすれば完了です。
ちなみに当ブログではプロフィールの余白を調節するため、追加CSSに以下を加えています。
/*プロフィール調節*/
.author_info .author_description {
margin: 1.5em 1.5em 2em;
}こんな感じでテキスト周りに余白ができます。
記事一覧ページ
記事一覧ページのレイアウトは3パターンから選択できます。
- シンプル
- カード型
- ビッグ
それぞれ以下のような見た目になります。
記事一覧ページのカスタマイズ手順は、まず【外観】＞【カスタマイズ】＞【記事一覧ページ設定】を開きます。
ここでPCとSP（スマートフォン）のレイアウトをそれぞれ選択できます。
SP（スマートフォン）のカード型（2カラム）は、以下のようなレイアウトになります。
当ブログでは、カード型に以下のCSSを加え独自カスタマイズを行なっています。
/*カード型*/
.eyecatch.of-cover img {
padding: 0.9em 0.9em 0;
}
.archives-list .entry-title {
margin: 0 0 2.2em;
font-size: 103%;
text-align: center;
padding: 0 5px;
}
.archives-list.card-list .post-list__link {
box-shadow: none;
}
画像の外枠に余白を入れポラロイド写真風に。そのほか文字のサイズや位置、シャドーの調節をしました。
目次
プラグインを使って以下のような目次を自動生成できます。
目次の設定手順は以下2ステップです。
- プラグイン導入
- プラグインの設定
まず、Table of Contents Plusというプラグインを導入します。
WordPress管理画面で【プラグイン】＞【新規追加】を開きます。
画面右上の検索枠に【Table of Contents Plus】と入力し、【今すぐインストール】をクリック。
インストール後、【有効化】をクリックすれば完了です。
この時点でサイトに目次が自動生成されますが、次のステップで目次の設定を整えていきます。
目次の設定をしていきます。
管理画面から【設定】＞【TOC＋】を開きます。
見た目の設定なので好みでOKですが、参考までに当ブログの設定は以下です。
| 設定項目 | 設定内容 |
|---|---|
| ①：表示条件 | 3つ |
| ②：以下のコンテンツ タイプを自動挿入 | postのみチェック入れる |
| ③：見出しテキスト | ・全部チェック入れる ・タイトル…もくじ ・表示/非表示…open/close |
| ④：階層表示/番号振り | 階層表示のみチェック入れる |
| ⑤：スムーズ・スクロール 効果を有効化 | チェック入れる |
| ⑥：プレゼンテーション | 白を選択 |
そのまま下にスクロールし、上級者向けの設定を開きます。【見出しレベル】の項目で【h2】と【h3】のみチェックを入れます。
一番下までスクロールし【設定を更新】をクリックすれば設定完了です。サイトに反映されているかチェックしてみてください。
当ブログではさらにCSSを追加し、目次の余白や色、文字のサイズなどをカスタマイズしています。
#toc_container p.toc_title {
font-size: 110%;/*タイトル文字サイズ*/
text-align: center;/*中央寄せ*/
}
#toc_container .toc_title::before {
color: #696969;/*タイトル横の三本線の色*/
}
#toc_container {
border: 3px solid #f5f5f5;/*外枠線の幅と色*/
width: auto!important;/*全体の幅*/
margin: auto;/*外側の余白*/
margin-top: 35px;/*外側上の余白*/
}
#toc_container p.toc_title+ul.toc_list {
margin: 2em;/*内側の余白*/
}
#toc_container .toc_list li ul li {
font-size: .9em;/*h3の文字サイズ*/
}
#toc_container.no_bullets li,#toc_container.no_bullets ul,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li {
list-style-type:disc;/*見出し前のドット*/
}当ブログに合わせた余白や色、文字サイズにしていますので、必要であれば変更してみてください。
STORK19カスタマイズまとめ
WordPressテーマSTORK19について紹介しました。
カスタマイズ内容によって違った雰囲気のサイトが作れるのでぜひいろいろ試してみてください。
またSTORK19は頻繁に機能のアップデートが行われているので、公式サイトのテーマ更新情報も要チェックです。
