スポンサーリンク
どうも！イクミヤです！
ワードプレスには数えきれないほどのテーマが存在しています。
大きく分けると無料テーマと有料テーマがあり、多くのサイト運営者は無料から始めます。
たしかに最近の無料テーマはデザイン性も良く、「これが無料なの？」と思うほど素晴らしいです。
しかし、デザインが優れていても少なからずカスタマイズしないと何の特徴もないサイトになりユーザーの興味を引くことが出来ないでしょう。
カスタマイズにはプログラミングの知識が必要不可欠で知識がある方なら、まだしも無い方には無料テーマはハードルが高いです。
実際、僕も見様見真似で無料テーマをカスタマイズしていましたが、執筆どころじゃありません。
時間を掛けても満足できませんでした。
だからこそ、初心者には有料テーマをおすすめします。
当サイトが使っているテーマは「STORK」というテーマで読み方はタイトル通りストークです。
それでは「STORK」についてお伝えします。
目次
有料テーマのストーク
かの有名なブロガー。ブログマーケッターjunichiさんとOPENCAGEが共同制作したテーマです。
ストークはモバイルファースト対応
Googleがサイトの評価基準にしているモバイルファーストに特化したテーマです。
モバイル化プラグイン？そんなもの「ストーク」には必要ないんです。
テーマを有効化するだけでモバイル端末から見るサイトは素晴らしいとしか言いようがない出来栄えです。
ショートコード機能で執筆ラクラク
ストークには執筆に必要なショートコードが完備されています。
吹き出しやリンクボタンなどプログラミング知識ゼロの方でも簡単に使えるんです。
美しい…ストーク
ショートコード機能もさることながらデザインが美しいです。
CSSの知識がない初心者でも、あっという間にサイトデザインが完成します。
ユーザーに与える印象は絶大。
ストークを導入したら最初にする設定
他テーマと同じく設定は全てワードプレスの管理画面から行います。
簡単にできますので説明していきます。
子テーマの導入方法
子テーマは親テーマと紐づけされたテーマです。
親テーマでカスタマイズしているとテーマの更新の度に最初からやり直しになります。子テーマをカスタマイズすると親テーマに反映する仕組みでテーマを更新してもやり直しにならないので長期的な運用をする方は必ず導入して下さい。
ストークの子テーマダウンロード
下のリンクからダウンロードします。
インストール
ダウンロードが完了したら「外観」➡「テーマ」➡「新規追加」➡「テーマのアップロード」に進みインストールをして必ず有効化して下さい。
子テーマのカスタマイズは「外観」➡「テーマ編集」から可能で下記画像の赤枠の部分は消さないで下に追記していきます。
ストークの初期カスタマイズ
「外観」➡「カスタマイズ」
スポンサーリンク
今から説明する方法はストークの基本機能に組み込まれたカスタマイズ方法になります。サイトカラーやレイアウトの変更など、ストークでは管理画面から行えます。
サイトカラーの変更
ワンクリックで簡単にサイトカラーを変更できます。変更できる箇所は全部で２１箇所あって、自分好みのサイト作りが可能です。
ロゴ画像
設定するのは４種類。
サイトロゴ
サイトを象徴する大事なロゴでスマホ、PC、タブレットで表示されます。
ファビコン
ファビコンはサイトのシンボルマークでお店の看板のような役割です。複数のブックマークから探す時に活用されユーザーの利便性が向上します。
推薦サイズ：32×32px
IE用ファビコン（.ico）
こちらはインターネットエクスプローラーに表示させるファビコンです。表示される位置は変わりません。
推薦サイズ：16×16px
アップルタッチアイコン
スマホやタブレットに表示するアイコンです。これを設定すると一目でサイトを区別できます。
推奨：144 x 144px
グローバル設定
ヘッダーお知らせ設定
ヘッダー下に告知や記事を宣伝することができ、リンクの設定も可能です。
記事レイアウト
記事レイアウトは全部で４種類「シンプル」「カード型」「ビッグ」「マガジン」から選択可能です。お好みで選択してください。
シンプル
アイキャッチ画像と抜粋文字が規則的に表示されます。
カード型
規則的に配置されているので見やすいレイアウトです。
マガジン
記事がランダム風に表示されます。
ビッグ
１記事１記事をアピールするならビッグがおすすめです。
見出しデザイン
３種類の見出しデザインから選択できます。
シンプル
ボーダー
吹き出し
ウィジェット
設定方法は２種類。
ストークの特徴としてスマートフォン用のウィジェット、PC版のウィジェットを使い分けれます。
ここからアドセンスや広告の表示も簡単に設置可能。
- 外観 > カスタマイズ > ウィジェット
- 外観 > ウィジェット
メニューの作成
このようにおしゃれなメニューを作成できます。スマホ版ではスクロールでき一味違うサイト作りが可能。
メニューを作成すると下記画像のように表示されます。
作成するとヘッダー画像内にメニューが表示されます。ユーザーに伝わりやすいメニューを作成しましょう。
スポンサーリンク
「外観」➡「メニュー」
「外観」➡「カスタム」➡「メニュー」から追加できます。
ショートコードで執筆ラクラク
複雑なコードが必要なく記事作成に必要な作業が全てこのショートコードで補う事ができます。
ショートコードを使うのに便利なプラグインです。ショートコードを使うなら必須プラグインなので導入して下さい。
関連記事表示
このように記事を紹介したい時に使います。サイトの回遊率改善、PV数が向上します。
単一の関連コード
|
1 |
[kanren postid="記事ID"] |
複数設置
|
1 |
[kanren postid="記事ID,記事ID"] |
ラベルなし
|
1 |
[kanren2 postid="記事ID,記事ID"] |
記事IDの調べ方
関連記事を表示するには記事IDが必要になります。
記事IDは投稿画面から確認できるので、IDを記入すれば表示できます。投稿画面から記事一覧に表示されている記事にマウスオンすると左下に表示されます。
補足説明を入れる
|
1 2 |
[aside type="normal"] 補足説明 少し小さなフォントで少し目立つような補足説明を追加することができます。 [/aside] |
補足に小さいフォントを入れる
|
1 2 |
[aside type="warning"] 注意説明をいれる 少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。 [/aside] |
シンプルな枠
|
1 2 3 4 |
[aside type="boader"] シンプルな枠で囲む シンプルなサイトにピッタリ [/aside] |
ボックス
新機能として追加された補足やワンポイントに使えます
|
1 |
[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box] |
色の変え方
コードの頭にある
|
1 2 3 4 5 |
[box class="blue_box"] スッキリとした印象になります [/box] |
リンクボタンの設置
問い合わせなどユーザーに何かしらのアクションを起こしてもらうボタンです。
|
1 |
[btn]ここにリンクを貼る[/btn] |
|
1 |
[btn class="simple"]ここにリンクを貼る[/btn] |
|
1 |
[btn class="simple big"]ここにリンクを貼る[/btn] |
|
1 |
<p>[btn class="lightning"]ここにリンクを貼る[/btn]</p> |
|
1 |
[btn class="lightning big"]ここにリンクを貼る[/btn] |
|
1 |
[btn class="lightning bg"]ここにリンクを貼る[/btn] |
|
1 |
[btn class="lightning big bg-yellow"]ここにリンクを貼る[/btn] |
|
1 |
[btn class="lightning big bg-yellow maru"]ここにリンクを貼る[/btn] |
|
1 |
[btn class="rich_yellow"]ここにリンクを貼る[/btn] |
|
1 |
[btn class="rich_pink"]ここにリンクを貼る[/btn] |
吹き出し機能
吹き出しは文を読みやすくしたり自サイトのキャラを会話させたり、ブログを楽しくしてくれます。
|
1 |
[voice icon="https://technical-work.com/wp-content/uploads/2017/07/yuki-1.png" name="modeet" type="l"]ストークではプラグインを使わずに吹き出しを使えます[/voice] |
|
1 |
[voice icon="https://technical-work.com/wp-content/uploads/2017/07/yuki-1.png" name="modeet" type="r"]左と右にも簡単に変更できる[/voice] |
コードをtype=”r”にすると右にtype=”l”にすると左です。
|
1 |
[voice icon="https://technical-work.com/wp-content/uploads/2017/07/yuki-1.png" name="modeet" type="l fb"]フェイスブックのような表示[/voice] |
|
1 |
[voice icon="https://technical-work.com/wp-content/uploads/2017/07/yuki-1.png" name="modeet" type="l line"]ラインのような表示[/voice] |
吹き出しの色を変える
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
不正コピーを防止するプラグインですが、「外観」➡「カスタマイズ」のカスタマイズ機能が使えなくなるので、こちらも停止しましょう。
ストークカスタマイズ
初心者にとっての関門がカスタマイズです。
ストークはカスタマイズもいらないぐらいの出来栄えですが、その完成度の高さから生じるデメリットが「デザインが被る」という点です。
たくさんのブログを拝見しますが、ストークを使っているブログは一目でわかります。差別化をするにはカスタマイズは必須条件になります。
ヘッダーを大きく表示する
初期のストークはヘッダーが小さくロゴを大きく表示させたい人はカスタマイズが必要になります。
下記コードを追記すると大きいヘッダー画像が表示できます。
※ストークではこれ以上大きくできません。
|
1 2 3 4 5 |
@media only screen and (min-width: 768px) { #container #logo img{ max-height:initial; } } |
見出しのカスタマイズ
見出しのカスタマイズはstork_custom: スタイルシート (style.css)に追記するだけです。
文字が入っている部分はサイトカラーの設定から変更できます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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にブラウザーキャッシュのコードを記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<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が優秀かも！？（テーマ変更後に検索順位が上昇）
スポンサーリンク