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

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

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

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

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

WordPressのテーマをSimplicityからストーク(STORK)に変えてみた
ブログのテーマ(テンプレート)を有料テーマの ストーク(STORK)に変更しました。このページでは、WordPressのテーマをストーク...

ストーク(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に下記のコードを追加します。

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

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

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

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

グローバル設定

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

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

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

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


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

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

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

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


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

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

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


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

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

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

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


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

  • シンプル

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

  • カード型

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

  • マガジン型

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

  • ビッグ

    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種類用意されています。

  1. シンプル(デフォルト)
  2. ボーダー
  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テーマ「ストーク」

スポンサーリンク

フォローする

コメント

  1. koko より:

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

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

    • ごりょんさん より:

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

コメントをどうぞ

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