初心者でも本当に簡単に使えるの?STORK(ストーク)をレビューしてみた!

アイキャッチ画像

今回は初心者の方に超おすすめしたいWordPressのテーマSTORKについてご紹介します。

WordPress有料テーマでどれを購入しようか検討中でしょうか?

私はSTORKを強くオススメします!!

 

と言っても他のサイトでも言ってるしー、って感じですよね(笑)

有料テーマは値段も決して安いとは言えないので迷うのは当然です。

当記事では主にテーマ購入時の初期画面を多く載せており、初期状態からのカスタマイズ方法をイメージがつきやすいようにしております。

WordPress初心者の方で、本当にカスタマイズが簡単に行えるか不安な方、ぜひ参考にしてください。

無料テーマから有料テーマに切り替えたきっかけは?

Twenty Fourteen

私は以前無料テーマTwenty Fourteenを使っていました。

と一言で言ってもこの無料テーマにたどり着くまでには、ざっと1週間はかかりました。

WordPressを使用する上でまず悩むのはテーマをどれにするかですね。

このTwenty Fourteenのテーマはレスポンシブウェブデザインであり、無料とは思えないほどのクオリティでした。

レスポンシブウェブデザインとは?
あらゆる端末で文字や画像のサイズを最適化する仕組みです。
本来であれば、パソコンで表示する場合は大きく、スマートフォンで表示する場合は小さくするといった制御をCSS等でします。
しかし、レスポンシブウェブデザインではこのような制御は不要で、自動でサイズを調整してくれます。

 

無料テーマでレスポンシブウェブデザインであることは魅力でしたが、細部のカスタマイズをするには、やはりCSSの知識が必要となりました。

例えばヘッダー背景の色を変えるだけでも下記のようなCSSを書く必要があります。

.site-header {
  background-color: #ffa500;
}

 

私はCSSの知識が全くなかったので、Google先生に聞きながらなんとかカスタマイズをしていました。

今のご時世、Google先生に聞けばなんでも答えてくれるもんですね(笑)

しかし、色を変えるのはヘッダー背景だけでなくサイドバー背景、サイドバー下部背景、メインメニュー背景・・・、全てCSSで変更する必要がありました。

その度にGoogle先生に聞き、変え方がわかっても配色でまた悩んだり・・・。

仕事のない休日に少しずつしか作業ができなかったので、記事を書き始めるまでに、ざっと2ヶ月は軽くいきましたね。

2ヶ月もあれば他にどんなことができたでしょうか。

考えるだけでもったいない時間でした。泣

 

とりあえず無料テーマ全般的に言えることは・・・

記事を書くまでなかなかいけない!

 

と言っても、無料・有料テーマ関係なく、配色に悩むのは仕方ないですね。

しかし!!

カスタマイズのやり方を調べてる時間がもったいない!!!!

けどお金はかけたくない・・・

 

お金を取るか、時間を取るか、悩みに悩みまくるところです。

お金をかけるのはもったいないと思いつつも、時間をなかなか確保できない私は無料テーマをやめ、有料テーマを購入することに決めました。

同じような理由で有料テーマの購入を検討している方もおられるのでは?

 

STORKを購入後、試しにヘッダーの背景色を変更してみました。

ヘッダーの背景色変更方法

変更してみた結果が当サイトのヘッダーの背景色です。

さすがお金をかけただけのことはある、簡単だ 😆

正直なところ、ヘッダーの背景色の変更はこれくらい簡単にできてほしいですよねー。

有料テーマであればなおさらです。

しかし、無料テーマを利用し、CSSでしか色を変更できないと思っていた私からすれば、これだけでもかなりの時間短縮になります。

財布の紐が固い私でしたが、有料テーマを購入しても後悔しないクオリティがSTORKにはあり、正しいお金の使い方をしたと思っています。

私の葛藤を述べたところで、STORKの特徴を見ていきましょう。

 

STORKの魅力とはなにか?

冒頭で述べましたとおり、STORKは初心者の方でも非常に使いやすいテーマとなっています。

かつて、無料テーマを使用していた私が思うSTORKの魅力を述べていきたいと思います!

モバイルファーストを徹底

やはりSTORK最大の特徴は都民ファーストならぬ、モバイルファーストに特化したテーマであることですね。(自分は都民ではありませんが・・・笑)

SEO対策において、モバイル端末に対応したレスポンシブウェブデザインは非常に重要視されています。(Google公式発表)

モバイル対応しているコンテンツはモバイルフレンドリーと呼ばれており、Googleの公式ツールでモバイルフレンドリーとして認識されるか確認することができます。

試しにGoogle公式サイトからSTORKがモバイルフレンドリーとして認識されるか確認してみました。

ちなみに、モバイル用サイトを自動生成するプラグインなどありますが、モバイル対策は一切していません。

STORKのモバイルフレンドリーテスト

事前設定不要でモバイルフレンドリーとして認識されました!

モバイル対策をしなくていいのはありがたいですね。

 

そして気になる初期画面ですが・・・

スマートフォンの初期画面

良いスマホ枠画像があったのでスマホ画面にはめ込んでみました(笑)

初期状態でこのクオリティです!!有料テーマ恐るべし。

何もしなくても、スマホのサイズに合わせた幅で表示されているのがわかりますね!!

まさしくモバイルフレンドリーです!!

有料テーマならではの問い合わせサポート

日本の企業(株式会社bridge)が提供しているテーマということもかなりのポイントであると思っています。

使用方法に関する問い合わせができるからです!!

よくある質問もサイトにまとめられているので、参考にすることもできます。

また、テーマの機能強化や不具合修正も行われているので、今後のアップデートにも注目していきたいですね!!

アップデート内容は、公式サイトから確認できます。

私も一度メールで質問しましたが、1日以内(土日祝日の営業日外を除く)に返信ありました。

それも、ものすごく丁寧で気持ちの良い対応をして頂きました!

カスタマイズは管理画面から完結!!

色の変更などのカスタマイズはWordPressの管理画面(ダッシュボード)で完結します。

CSSの知識は一切不要です。

これが無料テーマにない最大の特徴と言えますね!!

 

カスタマイズは本当に簡単にできるの?初期状態から考察!!

カスタマイズは簡単に行えると散々言ってきましたが、実際どのようにカスタマイズすることができるの?

管理画面からどのような画面イメージで設定を行えるのか見ていきましょう。

サイトカラーの設定イメージ

最初に皆さんが取り掛かる作業としては、サイトの色の設定ではないでしょうか?

配色を考えることに時間を費やしたいので、色の変更はSTORKでサクッと終わらせましょう!!

それでは色のカスタマイズ画面を見てみます。

サイトカラーのカスタマイズ

見てください!このカスタマイズ項目の多さ!!

基本的なテキストの色からマウスオン時の色の設定まで、豊富なカスタマイズ項目が揃っています!!

もちろん、無料テーマであればほとんどの項目をCSSで実現する必要があります。

色の設定をボタン一つでできるのでかなりの時間短縮になります。

例えば、リンク(マウスオン時)の色を画像のようにピンクにしてみます。

マウスオン時のカラー変更イメージ
マウスオン時のカラーイメージ

カーソルがリンクと重なったときに、青色からピンク色に変わっていますね!!

このように細部のカラー設定まで可能です。

 

ウィジェットの設定イメージ

次にウィジェットの設定画面を見てみましょう。

ウィジェットのカスタマイズ

こちらも色の設定に負けず劣らずのカスタマイズ項目の多さです!

画面左半分がウィジェットに表示できる項目、画面右半分がウィジェットの表示領域です。

[PC]と付いているのがパソコン・タブレットに表示されるウィジェット、[SP]と付いているのがスマートフォンに表示されるウィジェットです。

それぞれで表示を切り分けることが可能であり、もし両方に設定するのが面倒な場合でも[PC]のほうを設定していれば、スマートフォンには[PC]の設定内容が反映されます。

 

例えば、表示領域のPC:スクロール領域という項目を設定してみます。

通常では、ページをスクロールするとウィジェットもスクロールされますが、PC:スクロール領域に設定されている項目はスクロールされずに追従して表示されます。

追従型ウィジェットのイメージ
追従型ウィジェットのイメージ

上の例の通り、追従型ウィジェットと表示されている画像が、スクロールしても画面に固定されているのがわかりますね。

PC:スクロール領域に常に表示しておきたいバナーやアフィリエイト広告を表示させておくと便利ですね!

ウィジェットも豊富な表示領域があり、大変魅力的です。

 

カテゴリーの設定・表示イメージ

カテゴリーをパソコンとスマートフォンのヘッダに表示してみます。

当サイトでヘッダーにホームページ作成や知識というカテゴリーを表示しているイメージです。

下の画像のように、メニュー構造に作成したカテゴリーを追加し、グローバルナビとグローバルナビ(スマートフォン)にチェックを入れるだけ!!

グローバルナビの設定方法

設定後、まずスマートフォンでどのように表示されるか見てみます。

カテゴリーをスマートフォンで表示

スマートフォンのヘッダーに先ほど設定した、カテゴリー1・カテゴリー2・カテゴリー3が表示されています。

STORK独特の表示方法で、カテゴリーが増えてくると、カテゴリー部を右にフリックすると表示されていないカテゴリーも表示されます。

さらに左上のMENUボタンを見てみます。

見た目の特徴から、ハンバーガーメニューと呼ばれています。

ウィジェットの表示領域にも、「SP:ハンバーガーメニュー」として表示されていた項目ですね。

ハンバーガーメニューの構成
ハンバーガーメニューにも、追加したカテゴリーが表示されています。

スマートフォンのメニュー構成も簡単に変更できそうですね!!

 

パソコンで表示した場合も同様に、ヘッダーにカテゴリーが表示されているのがわかりますね!

カテゴリーをパソコンで表示

 

さて、ここまでで下記カスタマイズをご説明しました。

カスタマイズ項目
  • サイトカラーの簡単な設定
  • ウィジェットの細かな設定項目
  • メニュー項目の表示

その他、もちろんサイト名やサイトのアイコン設定も簡単にできます。

CSSなどの専門知識不要で、サイトの主な構築は完了できるでしょう。

 

記事の投稿とイメージ

ここからは実際に記事を投稿していきましょう。

記事の投稿方法

カテゴリー1に属する形で投稿してみます。

まずパソコンから表示したイメージを見てみましょう。

パソコンの投稿記事のイメージ

STORK独自の項目として、パンくずリスト、ラベル、ソーシャルメディア連携があります。

もちろん事前設定不要で表示されます。

パンくずリスト、ソーシャルメディア連携の表示有無は設定可能です。

特にソーシャルメディア連携は、通常プラグインを導入して表示させることが多いので、初期状態で表示されるSTORKでは手間が減りますね。

またラベルの背景色は、ご説明しましたカスタマイズのサイトカラー設定から簡単に変更可能です。

 

次に投稿した記事をスマートフォンで表示してみます。

スマートフォンの投稿記事のイメージ
うん!いいですね!!

パソコンと同じようにスマートフォンでもパンくずリスト、ラベル、ソーシャルメディア連携が表示されています。

もちろんスマートフォンで表示する用にソーシャルメディア連携などのボタンも最適化されているので、綺麗に画面に収まっていますね!

 

さらに簡単カスタマイズで一歩進んだおしゃれなサイトへ

ここまでご説明しましたカスタマイズですが、サイトカラーの変更などサイト構築する上では必ず設定が必要な項目でした。

他にもSTORK独自に用意された更なるカスタマイズ項目を使用し、もっとおしゃれなサイト、記事にしていくことができます。

コンテンツスライダーを表示する

トップページにコンテンツスライダーを表示することができます。

コンテンツスライダーのイメージ
コンテンツスライダーのイメージ

記事を選んでコンテンツスライダーに表示することができます。

ホームページに訪れた人に、おすすめの記事へ誘導することもできますね。

WordPressのプラグインでも表示することはできますが、プラグインはサイトの表示速度にも影響する可能性があるので、多用は極力避けたいと思っていました。

なので、こうしたプラグインなしで使用できる標準機能は個人的にかなり重宝しています。

 

トップページのヘッダーにアニメーションを付ける

トップページをさらにおしゃれにカスタマイズすることができます。

トップページのアニメーション
トップページにアニメーションを付ける

背景画像の上に文字をアニメーションで表示させ、さらにリンクを1つ設定することができます。

高度なアニメーションで表示されていますが、設定はもちろんWordPressの管理画面で完結です!

トップページのカスタマイズ設定イメージ

表示させる文字から色、背景画像、リンクの設定もご覧の通り簡単に行えます。

なお、当ブログのトップページではのアイコンが表示されていますが、表示にはFontAwesomeを使用しています。

つまり、HTMLの使用も可能ということです。

 

記事一覧の表示方法を変更する

記事一覧の表示方法を4パターンから選ぶことができます。

カード型

カード型の記事一覧表示イメージ

定番の表示タイプです。

均等な間隔で記事一覧が表示されます。

パソコンでは表示する端末の画面サイズによって、2列または3列表示になります。

スマートフォンでは1列表示になります。

マガジン型

マガジン型の記事一覧表示イメージ

カード型とは少し異なり、マガジンのように表示されるタイプです。

均等な間隔で表示されるのではなく、記事によって少しずれた間隔で表示されるのが特徴です。

パソコンでもスマートフォンでも2列表示されます。

シンプル

シンプルの記事一覧表示イメージ

シンプルに1列表示させます。

アイキャッチ画像の横に記事本文の一部を表示させます。

ビッグ

ビッグの記事一覧表示イメージ

名前の通り、1つ1つの記事の画像が大きく表示されます。

さらに続きを読むボタンが設置されています。

 

これらの4パターンからお好みに合わせて表示方法を選択できます。

表示方法の変更は下の画像のように、表示タイプを選ぶだけでOKです!

パソコン[PC]とスマートフォン[SP]で表示方法を変更することも可能です。

記事一覧の表示変更方法

 

豊富なショートコードで記事を簡単カスタマイズ

STORKには標準で、様々なショートコードが用意されています。

指定のコードを入れるだけで使用することができます。

 

ホームページ内のリンクを画像付きで表示

記事を書いていく上で、内部リンクを貼りたいって時ありますよね?

STORKでは画像付きで内部リンクを表示することができます。

関連記事ラベルありのリンクのイメージ

上の画像では関連記事というラベルが付いていますが、ラベルなしにすることも可能です。

関連記事ラベルなしのリンクのイメージ

2カラム、3カラムで表示する

記事内で必要に応じて、2カラムまたは3カラム表示をすることができます。

カラム数を増やすことで、スペースを有効活用できますね!

スマートフォンでは両カラムともに1カラム表示となりますので、注意が必要です。

2カラムで表示

2カラム中の1カラム目のサンプル画像1カラム目のサンプル画像
2カラム中の2カラム目のサンプル画像2カラム目のサンプル画像

 

3カラムで表示

3カラム中の1カラム目のサンプル画像1カラム目のサンプル画像
3カラム中の2カラム目のサンプル画像2カラム目のサンプル画像
3カラム中の3カラム目のサンプル画像3カラム目のサンプル画像

注釈を入れる

補足説明欄と注意説明欄を記事中に挿入することができます。

例えば、STORKの超簡単な説明とその注意事項を書いてみます。

WordPressテーマSTORKとは?
スマートフォンユーザーを第一に考え、モバイルファーストを徹底したテーマです。
STORK購入の上での注意事項
1回の購入(1ライセンス)につき、1サイトのみテーマを適用可能です。

私は記事中の要所要所に使用するようにしています。

背景付きの注釈を入れることで、読者の目を引くことができます!

ボックスを挿入する

シンプルなボックスを挿入することができます。

タイトル付きとタイトルなしのボックスがあり、色は7種類あります。

タイトル
青のタイトル付きボックスです。
青のタイトルなしボックスです。
ボックスのイメージ

色の種類が豊富なので、ご自身のサイトカラーに合った色のボックスを挿入できるのが魅力ですね。

ボタンを挿入する

ボックスと同様、豊富な種類のボタンを挿入することができます。

マウスオン時に少しへこむ動作が起きるので、ボタン感がより表現されていますね!

吹き出しを挿入する

おしゃれな吹き出しを挿入することができます。

シンプルな吹き出し

おっちゃん
シンプルな吹き出しです 😆
よっしー
右側からの吹き出しも挿入できるので、会話形式でやりとりもできますね!

Facebook風の吹き出し

おっちゃん
Facebook風の吹き出しです 😆
よっしー
本当にFacebookを彷彿させる色合いですね!

LINE風の吹き出し

おっちゃん
LINE風の吹き出しです 😆
よっしー
普段よく見ている色なので、馴染みやすそうですね!

吹き出しのアイコンを大きくする

おっちゃん
アイコンを大きくします 😆
よっしー
通常サイズのアイコンは少し小さいので、アイコンが見やすいですね!

アイコン周りの色を変更

よっしー
ボーダー色を黄色に変更します!
よっしー
ボーダー色を赤色に変更します!
よっしー
ボーダー色を青色に変更します!
よっしー
ボーダー色を黒色に変更します!

STORK標準でこれだけの吹き出しパターンがあります。

私は作成してもらった自分の顔のアイコンをできる限り使用したいと思っているので、非常に嬉しい機能です!

完全に自己満です(笑)

 

まとめ

サイトの構築からカスタマイズ方法までご説明しましたが、難しい操作はありましたでしょうか?

やはり有料テーマということもあり、CSSなどの専門知識なしで管理画面からカスタマイズは完結するので、WordPress初心者の方でも簡単にサイト構築ができますね!

配色に悩む時間はありますが、サイト自体の構築は1時間もあれば終わりそうな勢いだと思っています。

最後にSTORKポジティブポイントネガティブポイントをまとめました。

ポジティブポイント
  • CSSなどの専門知識がいらない。
  • サイトカラーの変更などカスタマイズが管理画面から簡単に行えるので、初期設定をすぐ終えることができ、記事を書く時間・自分の時間を作れる。
  • レスポンシブウェブデザインなので、スマートフォンで画面が崩れないか意識せずに記事を書ける。
  • ソーシャルメディア連携や吹き出し機能をプラグインなしで実装できるので、インストールするプラグインを削減できる。
  • 機能追加や不具合修正などのアップデートが定期的に行われている。
  • 販売元に問い合わせができる。
ネガティブポイント
  • 初期費用がかかる。
  • サイト構築が簡単な分、他のサイトとデザインが被る。

最終有料テーマを購入するかどうかを決めるのはご覧頂いている方の判断になりますが、その判断材料の一部になればと思います。

よっしー
STORKを使用し、ご自身のサイトレベルをさらにアップしましょう!!

ご覧頂きありがとうございました。

コメントを残す

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