WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

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

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

WordPressテーマ『ストーク(STORK)』のメリットとデメリットを徹底調査!

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

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

子テーマの導入

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

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

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

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

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

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

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

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

スポンサーリンク

サイト基本情報

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

ここでは3か所記入していきます。

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

ここら辺は簡単ですねw

サイトカラー設定

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

スポンサーリンク

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

HTML

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

グローバル設定

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

icon-check-square-o シンプル

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

icon-check-square-o カード型

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

icon-check-square-o ビッグ

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

ふう、長かったな~。

トップページ設定

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

何だか殺風景ですね。


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

固定・投稿ページ設定

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

何だか淡泊ですねw

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法


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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

アクセス解析コード

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

メニュー

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

WordPress有料テーマ ストーク(STORK)のカスタマイズ方法

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

まとめ

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

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

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

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

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

2 COMMENTS

koko

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

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

返信する
ごりょんさん

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

返信する

ごりょんさん にコメントする コメントをキャンセル

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

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