ワードプレステーマ『ストーク』の簡単カスタマイズ方法【初心者編】

ブログをWordPressの無料テーマ Simplicityから、有料テーマの ストーク（STORK） に変更しました。そのままでも利用可能ですが、少しばかり味気ないので、見栄え良くカスタマイズしていきたいと思います。

WordPress有料テーマのストーク（STORK）とは、ブログマーケッターJUNICHIさんが監修をして、OPENCAGE が開発をした、究極のモバイルファースト オールインワンWordPressテーマです。

ストーク（STORK）の導入方法は、過去記事で紹介しています。

ワードプレス『ストーク(STORK)』導入のメリット・デメリットを徹底調査！

ストーク（STORK）の主なカスタマイズは以下の通りです。

子テーマの導入

一番最初にしておきたい作業は、子テーマの導入 です。

親テーマを直接カスタマイズした場合は、テーマが更新（アップデート）されると親テーマは新しく上書きされて、それまで親テーマにカスタマイズを施していたものが消えてしまいます。

子テーマを導入しておけば、たとえ親テーマがアップデートされても子テーマ側でカスタマイズしたものは確実に残ります。

では早速、子テーマを導入していきましょう。下記のリンクから「ストーク」の子テーマをダウンロードします。

公式ストーク（STORK）子テーマのダウンロードページ

「jstork_custom」というフォルダが保存されました。このフォルダを「ダッシュボード」➝「外観」➝「テーマ」の「新規追加」からアップロードしてやります。

これからブログのカスタマイズを行う場合は、必ず子テーマをカスタマイズしていきましょう。

サイト基本情報

ここからは、ブログの外見をカスタマイズしていきます。カスタマイズ方法は、「ダッシュボード」➝「サイトをカスタマイズ」と進みます。ここでは3か所記入していきます。

サイトカラー設定

こちらはたくさんの設定項目があります。

サイトロゴ・アイコンの設定

サイトのロゴは、デフォルトのままのテキスト文字でも良いのですが、オリジナルのロゴの方が個性的なので、変更することに。

「画像を選択」からファイルをアップロードしていきます。

ロゴが小さくて目立たない場合は、「グローバル設定」➝「[ヘッダー]ロゴレイアウト」で、ロゴを中央配置にすると、少し大きくなります。

ロゴ画像を更に大きくしたい場合は、CSSに下記のコードを追加します。

/* ロゴを大きく */ 
.header.headercenter #logo img {
max-height: initial;
}

これでかなり大きくなりました。

続いて下に行くと、『ファビコン・IE用ファビコン・アップルタッチアイコンをアップロード』という項目がありますが、先ほど「サイト基本情報」でサイトアイコンを設定したので、こちらは何もしなくても良いです。

ただ、IE(インターネットエクスプローラー)やアップルタッチアイコンを個別に設定したい場合は、画像をアップロードしてやりましょう。

グローバル設定

『ヘッダー下お知らせテキスト』では、ロゴ画像の下にお知らせテキストを表示することが出来ます。

『ヘッダー下お知らせリンク』にはテキストをクリックすると表示されるページのURLを記入します。

①『[ヘッダー]サイト内検索ボタンを非表示にする』にチェックを入れると、検索ボタンが非表示になります。

②『[ヘッダー]サイトディスクリプションを表示する』にチェックを入れると、「サイト基本情報」で設定したキャッチフレーズが表示されます。

③『[ヘッダー]テキストロゴサイズ』は、ロゴのフォントサイズを変更できます。なお、テキストのみ変更可能です。画像は変更できません。

『[ヘッダー]ロゴレイアウト』は、パソコン表示でロゴを左側と中央どちらかにに設定することが出来ます。

『[ヘッダー]背景設定』では、ヘッダー背景を横幅いっぱいに表示することが可能です(パソコン表示)。

『[全体]メインカラム表示位置』は、メインカラムの位置を右にするか左にするか設定できます。

『[全体]アニメーション機能』は、説明するのは難しいですが、フッター付近がゆっくりと表示される感じになります。

『[全体]パンくずナビを表示しない』にチェックを入れると、パンくずナビを非表示にすることが出来ます。パンくずナビとは下記の様な物です。

『[SP]トップページ記事レイアウト』は、記事の並び順を設定することが出来ます。

icon-check-square-o シンプル

icon-check-square-o カード型

icon-check-square-o マガジン型

icon-check-square-o ビッグ

『[SP]トップページ記事レイアウト』は、「SP」なので、スマホの記事の並び順を変更できます。なお、ワタシの環境では「カード型」がパソコンみたいに2列になりませんでした。

『[PC][SP]その他一覧ページ記事レイアウト』は、アーカイブページやタグページなどのレイアウト設定を行います。

トップページ設定

ロゴ画像の下に、英語と日本語のテキストを表示させることが出来ます。

ヘッダー背景画像に画像を挿入することが出来ます。

ちなみに、スマホはこんな感じに。

ヘッダー背景サイズと、ヘッダー背景繰り返しで背景を調整することが可能です。

ヘッダーボタンURL・ヘッダーボタンテキストで、リンク付きのテキストを挿入できます。その下のヘッダーテキストカラー・ヘッダーボタンテキストカラー・ヘッダーボタン背景カラーで色の変更を行います。

テキストレイアウトで、テキストの配置を変更できます。

固定・投稿ページ設定

H2の見出しは3種類用意されています。

記事下のシェアタイトルを表示では、SNSボタンの上に文章を書き込みことが出来ます。

固定ページでもSNSボタンを表示するは、固定ぺーにSNSボタンを表示するかどうかの選択、SNSボタンを表示しないにチェックを入れると、SNSボタンが非表示になります。

記事・固定ページでアイキャッチ画像を非表示にチェックを入れておかないと、記事・固定ページで最初に画像を貼った場合、同じものが2枚表示されてしまいます。

記事・固定ページでアイキャッチ画像を非表示にチェックを入れると、「ABOUTこの記事をかいた人」が非表示になります。なお、「ABOUT」は、「ユーザー」➝「あなたのプロフィール」と進んで、「プロフィール情報」欄に自己紹介文を記入すると表示されます。

投稿日・更新日表示設定は、投稿日・更新日を表示させるかどうかを設定できます。

記事下にfacebookいいねボックスを表示では、facebookページのURLを入力することが出来ます。

アクセス解析コード

GoogleAnalyticsの解析コードを貼りつけるだけでOKです。

メニュー

ここでは、グローバルメニューに「ホーム」以外の任意のメニューを追加していきます。最初に「ホーム」をクリックします。

①「項目を追加」をクリックして、②カスタムリンクを開き、追加したいページの名前とURLを記入して、③「メニューに追加」をクリックします。

こんな感じにメニューを追加していけば良いですね。

スマホでもグローバルメニューが表示されました。

まとめ

今回は、WordPressの有料テーマ ストーク（STORK）のカスタマイズ方法を紹介しました。何だか長ったらしい説明になりましたが、最低限の設定方法だけを覚えておいて、後々テーマの扱いに慣れてきたら、細かいところまでカスタマイズしていけば良いと思います。

テーマを購入後に下記の3点は最低限設定しておきたいですね。

追記：今後はストークの最新バージョンのSTORK19が購入可能です。

STORK最新バージョン【STORK19】

WordPress有料テーマSTORK(ストーク)関連記事一覧はコチラ