どうも！イクミヤです！

ワードプレスには数えきれないほどのテーマが存在しています。

大きく分けると無料テーマと有料テーマがあり、多くのサイト運営者は無料から始めます。

たしかに最近の無料テーマはデザイン性も良く、「これが無料なの？」と思うほど素晴らしいです。

しかし、デザインが優れていても少なからずカスタマイズしないと何の特徴もないサイトになりユーザーの興味を引くことが出来ないでしょう。

カスタマイズにはプログラミングの知識が必要不可欠で知識がある方なら、まだしも無い方には無料テーマはハードルが高いです。

実際、僕も見様見真似で無料テーマをカスタマイズしていましたが、執筆どころじゃありません。

時間を掛けても満足できませんでした。

だからこそ、初心者には有料テーマをおすすめします。

当サイトが使っているテーマは「STORK」というテーマで読み方はタイトル通りストークです。

それでは「STORK」についてお伝えします。

1 有料テーマのストーク
2 ストークを導入したら最初にする設定
3 子テーマの導入方法
4 ストークの初期カスタマイズ
5 メニューの作成
6 ショートコードで執筆ラクラク
7 吹き出し機能
8 ストークで相性が悪いプラグイン
9 ストークカスタマイズ
10 見出しのカスタマイズ
11 文字が入っている部分はサイトカラーの設定から変更できます
12 ストークのサイトスピードを上げる
13 まとめ

有料テーマのストーク

かの有名なブロガー。ブログマーケッターjunichiさんとOPENCAGEが共同制作したテーマです。

ストークはモバイルファースト対応

Googleがサイトの評価基準にしているモバイルファーストに特化したテーマです。

モバイル化プラグイン？そんなもの「ストーク」には必要ないんです。

テーマを有効化するだけでモバイル端末から見るサイトは素晴らしいとしか言いようがない出来栄えです。

ショートコード機能で執筆ラクラク

ストークには執筆に必要なショートコードが完備されています。

吹き出しやリンクボタンなどプログラミング知識ゼロの方でも簡単に使えるんです。

美しい…ストーク

ショートコード機能もさることながらデザインが美しいです。

CSSの知識がない初心者でも、あっという間にサイトデザインが完成します。

ユーザーに与える印象は絶大。

ストークを導入したら最初にする設定

他テーマと同じく設定は全てワードプレスの管理画面から行います。

簡単にできますので説明していきます。

子テーマの導入方法

子テーマは親テーマと紐づけされたテーマです。

親テーマでカスタマイズしているとテーマの更新の度に最初からやり直しになります。子テーマをカスタマイズすると親テーマに反映する仕組みでテーマを更新してもやり直しにならないので長期的な運用をする方は必ず導入して下さい。

ストークの子テーマダウンロード

下のリンクからダウンロードします。

子テーマダウンロード

インストール

ダウンロードが完了したら「外観」➡「テーマ」➡「新規追加」➡「テーマのアップロード」に進みインストールをして必ず有効化して下さい。

子テーマのカスタマイズは「外観」➡「テーマ編集」から可能で下記画像の赤枠の部分は消さないで下に追記していきます。

ストークの初期カスタマイズ

「外観」➡「カスタマイズ」

今から説明する方法はストークの基本機能に組み込まれたカスタマイズ方法になります。サイトカラーやレイアウトの変更など、ストークでは管理画面から行えます。

サイトカラーの変更

ワンクリックで簡単にサイトカラーを変更できます。変更できる箇所は全部で２１箇所あって、自分好みのサイト作りが可能です。

ロゴ画像

設定するのは４種類。

サイトロゴ

サイトを象徴する大事なロゴでスマホ、PC、タブレットで表示されます。

ファビコン

ファビコンはサイトのシンボルマークでお店の看板のような役割です。複数のブックマークから探す時に活用されユーザーの利便性が向上します。

推薦サイズ：32×32px

IE用ファビコン（.ico）

こちらはインターネットエクスプローラーに表示させるファビコンです。表示される位置は変わりません。

推薦サイズ：16×16px

アップルタッチアイコン

スマホやタブレットに表示するアイコンです。これを設定すると一目でサイトを区別できます。

推奨：144 x 144px

グローバル設定

ヘッダーお知らせ設定

ヘッダー下に告知や記事を宣伝することができ、リンクの設定も可能です。

記事レイアウト

記事レイアウトは全部で４種類「シンプル」「カード型」「ビッグ」「マガジン」から選択可能です。お好みで選択してください。

シンプル

アイキャッチ画像と抜粋文字が規則的に表示されます。

カード型

規則的に配置されているので見やすいレイアウトです。

マガジン

記事がランダム風に表示されます。

ビッグ

１記事１記事をアピールするならビッグがおすすめです。

見出しデザイン

３種類の見出しデザインから選択できます。

シンプル

ボーダー

吹き出し

ウィジェット

設定方法は２種類。

ストークの特徴としてスマートフォン用のウィジェット、PC版のウィジェットを使い分けれます。

ここからアドセンスや広告の表示も簡単に設置可能。

外観 > カスタマイズ > ウィジェット
外観 > ウィジェット

メニューの作成

このようにおしゃれなメニューを作成できます。スマホ版ではスクロールでき一味違うサイト作りが可能。

メニューを作成すると下記画像のように表示されます。

作成するとヘッダー画像内にメニューが表示されます。ユーザーに伝わりやすいメニューを作成しましょう。

「外観」➡「メニュー」

「外観」➡「カスタム」➡「メニュー」から追加できます。

ショートコードで執筆ラクラク

複雑なコードが必要なく記事作成に必要な作業が全てこのショートコードで補う事ができます。

ショートコードを使うのに便利なプラグインです。ショートコードを使うなら必須プラグインなので導入して下さい。

AddQuicktag使い方-記事作成の効率がアップするwordPressプラグイン

2017年7月16日

補足説明を入れる

補足説明少し小さなフォントで少し目立つような補足説明を追加することができます。

 補足説明
 少し小さなフォントで少し目立つような補足説明を追加することができます。

補足に小さいフォントを入れる

注意説明をいれる少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。

 注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。

シンプルな枠

シンプルな枠で囲むシンプルなサイトにピッタリ

 
シンプルな枠で囲む
シンプルなサイトにピッタリ

ボックス

新機能として追加された補足やワンポイントに使えます

ポイント

補足や強調する時に使います。派手すぎずに表示されるのおすすめです

ここにタイトル
ここにコンテンツを記載

色の変え方

コードの頭にある

スッキリとした印象になります



スッキリとした印象になります

リンクボタンの設置

問い合わせなどユーザーに何かしらのアクションを起こしてもらうボタンです。

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

サイトトップ

<p>ここにリンクを貼る
</p>

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

サイトトップ

ここにリンクを貼る

吹き出し機能

吹き出しは文を読みやすくしたり自サイトのキャラを会話させたり、ブログを楽しくしてくれます。

ストークではプラグインを使わずに吹き出しを使えます

modeet
ストークではプラグインを使わずに吹き出しを使えます

左と右にも簡単に変更できる

modeet
左と右にも簡単に変更できる

コードをtype=”r”にすると右にtype=”l”にすると左です。

フェイスブックのような表示

modeet
フェイスブックのような表示

ラインのような表示

modeet
ラインのような表示

吹き出しの色を変える

きき黄色に変更

赤に変更

青に変更

黒に変更

voice icon=”写真のURL”

name=”アイコンに表示する名前”

type=”l icon_black”色のクラスや種類

type=”l 〇〇〇”

上記〇の部分に下記コードを記載すると色が変わります。※半角で入力

icon_yellow
icon_red
icon_blue
icon_black

ストークで相性が悪いプラグイン

ストークの公式サイトで公開している相性の悪いプラグインを紹介していきます。

相性が悪いと表示やレイアウトが崩れてしまうあるので下記プラグインは停止して下さい。

JETPACK

JETPACKに付いている機能の「photon」を「OFF」にしましょう。プラグインそのものは問題ありません。

photonの機能がONになっていると画像の読み込みの遅延や表示がされない不具合があります。

Head Cleaner

このプラグインはHEADを最適化するプラグインで人気も高いプラグインですが、ストークでは不具合があるので停止をおすすめします。

WP Super Cache

キャッシュプラグインを代表するプラグインですが、こちらも停止にする方が無難です。WP　Fastest Cacheは問題なく使用できています。

スマホの広告がPCに表示される
サイトカラーの設定が反映しない

WordPress Visual Icon Font

アイコンフォントが使えるプラグウインです。レイアウトが崩れるので使用する場合はfontawesomeを使用して下さい。

WP-Copyright-Protection

不正コピーを防止するプラグインですが、「外観」➡「カスタマイズ」のカスタマイズ機能が使えなくなるので、こちらも停止しましょう。

ストークカスタマイズ

初心者にとっての関門がカスタマイズです。

ストークはカスタマイズもいらないぐらいの出来栄えですが、その完成度の高さから生じるデメリットが「デザインが被る」という点です。

たくさんのブログを拝見しますが、ストークを使っているブログは一目でわかります。差別化をするにはカスタマイズは必須条件になります。

ヘッダーを大きく表示する

初期のストークはヘッダーが小さくロゴを大きく表示させたい人はカスタマイズが必要になります。

下記コードを追記すると大きいヘッダー画像が表示できます。

※ストークではこれ以上大きくできません。

@media only screen and (min-width: 768px) {
 #container #logo img{
 max-height:initial;
 }
}

見出しのカスタマイズ

見出しのカスタマイズはstork_custom: スタイルシート (style.css)に追記するだけです。

文字が入っている部分はサイトカラーの設定から変更できます

.entry-content h2 {
position: relative;
background: #f1f8ff;
padding: 0.25em 0.5em;
border-left: solid 2em #5c9ee7;
}

.entry-content h2:before {
font-family: FontAwesome;
content: "\f040";
position: absolute;
padding: 0em;
color: white;
font-weight: normal;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
background: transparent !important;

見出しのおすすめサイト

追記中

ストークのサイトスピードを上げる

ストークはデザインに優れていますがサイトスピードが遅いという欠点があります。

当ブログはサイトスピードについても記載していますが、グーグルの評価、ユーザー観点から見ても良くないので改善しましょう。

.htaccessにブラウザーキャッシュのコードを記述していきます。

注意！！.htaccessはサーバーを制御する重要なファイルです。管理画面にログインできないといった不具合がでる可能性があるのでバックアップは必ず行って下さい

<span style="font-size: 16px;"># ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化（1秒に設定）
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule></span>

まとめ

ストークはメリットの方が多く、デメリットが少ないテーマです。大きなデメリットとしては１サイトに１アカウント必要で使いまわしが出来ないという点。値段も１０８００円とは思えない高機能です。

当ブログで感じたメリットです。

すでに完成されたテーマである
初心者でもお好みにカスタマイズができる
グーグルが推薦するモバイルファーストが備わっている
ショートコードが便利
ストーク愛用者が多くカスタマイズ情報が多い
SEOが優秀かも！？（テーマ変更後に検索順位が上昇）

最近の投稿

有料テーマのストーク

ショートコード機能で執筆ラクラク

美しい…ストーク

ストークを導入したら最初にする設定

子テーマの導入方法

ストークの子テーマダウンロード

インストール

ストークの初期カスタマイズ

サイトカラーの変更

ロゴ画像

サイトロゴ

ファビコン

IE用ファビコン（.ico）

アップルタッチアイコン

グローバル設定

記事レイアウト

シンプル

カード型

マガジン

ビッグ

見出しデザイン

ウィジェット

メニューの作成

ショートコードで執筆ラクラク

関連記事表示

単一の関連コード

複数設置

ラベルなし

記事IDの調べ方

補足説明を入れる

補足に小さいフォントを入れる

ボックス

色の変え方

リンクボタンの設置

吹き出し機能

ストークで相性が悪いプラグイン

JETPACK

Head Cleaner

WP Super Cache

WordPress Visual Icon Font

WP-Copyright-Protection

ストークカスタマイズ

ヘッダーを大きく表示する

見出しのカスタマイズ

文字が入っている部分はサイトカラーの設定から変更できます

ストークのサイトスピードを上げる

まとめ

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

仕事を辞めて後悔した時の乗り越え方。後悔する前に確認すべき４つのこと

Amazon「Fire TV Stick」の使い方。接続から設定を徹底解説

自転車のルールやマナーを守らない迷惑な人多すぎ！危険だと思う７つの乗り方

職場で気の合わない人と話す必要ない！僕が２年間続けた対処法

人気の記事

カテゴリー

目次

コメントを残すコメントをキャンセル