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

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

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

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

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

WordPress『ストーク(STORK)』導入のメリット・デメリットを徹底調査!

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

ストークのカスタマイズ
  • 子テーマの導入
  • サイト基本情報
  • サイトカラー設定
  • サイトロゴ・アイコンの設定
  • グローバル設定
  • トップページ設定
  • 固定・投稿ページ設定
  • アクセス解析コード
  • メニュー

子テーマの導入

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

子供のテーマ? なんだそりゃ。

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

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

WordPressに子テーマは必需品なんですね。

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

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

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

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

子テーマを有効化しておけば良いのですね。

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

スポンサーリンク

サイト基本情報

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

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

  • サイトタイトル
  • キャッチフレーズ
  • サイトアイコン

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

ここら辺は簡単ですねw

サイトカラー設定

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

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

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

21種類もあるのか?こりゃ大変だな~。

スポンサーリンク

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

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

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

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

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

何だかロゴが小さいような…。

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

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

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

HTML

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

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

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

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

グローバル設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

icon-check-square-o シンプル

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

icon-check-square-o カード型

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

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

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

icon-check-square-o ビッグ

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

4種類のパターンがあるのか。

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

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

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

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

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

ふう、長かったな~。

トップページ設定

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

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

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

何だか殺風景ですね。

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

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

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

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

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

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

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

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

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

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

固定・投稿ページ設定

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

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

  • シンプル(デフォルト)
  • ボーダー
  • 吹き出し風

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

何だか淡泊ですねw

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

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

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

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

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

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

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

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

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

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

アクセス解析コード

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

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

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

メニュー

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

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

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

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

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

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

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

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

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

これがストークの特徴ですね。

まとめ

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

テーマを購入後に最低限しておきたいカスタマイズは

  • 子テーマの導入
  • サイト基本情報
  • アクセス解析コード

この3点は是非カスタマイズしておきたいですね。

公式WordPressテーマ「ストーク」

2 COMMENTS

koko

ありがとう!ありがとう!
マジでありがとう!
ストークのヘッダー背景が画像にできないわ文字はだっさいけどタイトルだけフォント変更なんてテクないわで
3,4時間ググりながら格闘して
このサイトのお陰でタイトル画像設定やりましたー!

ホントマジでありがとう!

返信する
ごりょんさん

kokoさん、コメントありがとうございます。お役に立てて何よりです。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)