ブログをWordPressの無料テーマ Simplicityから、有料テーマの ストーク（STORK） に変更しました。そのままでも利用可能ですが、少しばかり味気ないので、見栄え良くカスタマイズしていきたいと思います。
WordPress有料テーマ ストーク（STORK）とは、ブログマーケッターJUNICHIさんが監修をして、OPENCAGE
が開発をした、究極のモバイルファースト オールインワンWPテーマです。
ストーク（STORK）の導入方法は、過去記事で紹介しています。
ストーク（STORK）の主なカスタマイズは以下の通りです。
- 子テーマの導入
- サイト基本情報
- サイトカラー設定
- サイトロゴ・アイコンの設定
- グローバル設定
- トップページ設定
- 固定・投稿ページ設定
- アクセス解析コード
- メニュー
子テーマの導入
一番最初にしておきたい作業は、子テーマの導入 です。
親テーマを直接カスタマイズした場合は、テーマが更新（アップデート）されると、親テーマは新しく上書きされて、それまで親テーマにカスタマイズを施していたものが消えてしまいます。
子テーマを導入しておけば、たとえ親テーマがアップデートされても、子テーマ側でカスタマイズしたものは確実に残ります。
では早速、子テーマを導入していきましょう。下記のリンクから「ストーク」の子テーマをダウンロードします。
「jstork_custom」というフォルダが保存されました。このフォルダを「ダッシュボード」➝「外観」➝「テーマ」の「新規追加」からアップロードしてやります。
ここからは、ブログの外見をカスタマイズしていきます。カスタマイズ方法は、「ダッシュボード」➝「サイトをカスタマイズ」と進みます。
サイト基本情報
ここでは3か所記入していきます。
- サイトタイトル
- キャッチフレーズ
- サイトアイコン
サイトカラー設定
こちらはたくさんの設定項目があります。
サイトロゴ・アイコンの設定
サイトのロゴは、デフォルトのままのテキスト文字でも良いのですが、オリジナルのロゴの方が個性的なので、変更することに。
「画像を選択」からファイルをアップロードしていきます。
ロゴが小さくて目立たない場合は、「グローバル設定」➝「[ヘッダー]ロゴレイアウト」で、ロゴを中央配置にすると、少し大きくなります。
ロゴ画像を更に大きくしたい場合は、CSSに下記のコードを追加します。
1 2 3 4 | /* ロゴを大きく */ .header.headercenter #logo img { max-height: initial; } |
これでかなり大きくなりました。
続いて下に行くと、ファビコン・IE用ファビコン・アップルタッチアイコンをアップロード という項目がありますが、先ほど「サイト基本情報」でサイトアイコンを設定したので、こちらは何もしなくても良いです。ただ、IE(インターネットエクスプローラーや、アップルタッチアイコンを個別に設定したい場合は、画像をアップロードしてやります。
グローバル設定
ヘッダー下お知らせテキスト では、ロゴ画像の下にお知らせテキストを表示することが出来ます。
ヘッダー下お知らせリンク にはテキストをクリックすると表示されるページのURLを記入します。
① [ヘッダー]サイト内検索ボタンを非表示にする にチェックを入れると、検索ボタンが非表示になります。
② [ヘッダー]サイトディスクリプションを表示する にチェックを入れると、「サイト基本情報」で設定したキャッチフレーズが表示されます。
③ [ヘッダー]テキストロゴサイズ は、ロゴのフォントサイズを変更できます。なお、テキストのみ変更可能です。画像は変更できません。
[ヘッダー]ロゴレイアウト は、パソコン表示でロゴを左側と中央どちらかにに設定することが出来ます。
[ヘッダー]背景設定 では、ヘッダー背景を横幅いっぱいに表示することが可能です(パソコン表示)。
[全体]メインカラム表示位置は、メインカラムの位置を右にするか左にするか設定できます。
[全体]アニメーション機能 は、説明するのは難しいですが、フッター付近がゆっくりと表示される感じになります。
[全体]パンくずナビを表示しない にチェックを入れると、パンくずナビを非表示にすることが出来ます。パンくずナビとは下記の様な物です。
[SP]トップページ記事レイアウト は、記事の並び順を設定することが出来ます。
- シンプル
- カード型
- マガジン型
- ビッグ
[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点は是非カスタマイズしておきたいですね。
コメント
ありがとう！ありがとう!
マジでありがとう！
ストークのヘッダー背景が画像にできないわ文字はだっさいけどタイトルだけフォント変更なんてテクないわで
3,4時間ググりながら格闘して
このサイトのお陰でタイトル画像設定やりましたー！
ホントマジでありがとう！
kokoさん、コメントありがとうございます。お役に立てて何よりです。