みなさまこんにちは、webライターのikiikiです！
webライター兼ikiruLAB. の運営をしつつ、ikiru LAB.ではサイト構築・ライティング情報記事も書いております
ジブンだけのメディアサイトを作ろう!というきっかけでこのikiru LAB.を立ち上げました。
今回は、サイト構築のお話。ikiru LAB.サイト構築にも使用している、WordPressテーマ「ストーク」 
についてご紹介します
※2018年秋、本サイトのテーマをJINに移行しました。記事内容自体は、STORKを使おうと考えている方・使っている方に役立つ内容となっていますので、ご覧いただけたら何よりです。
WordPressテーマ「STORK / ストーク」を選んだ理由
さて、WordPress をダウンロードし・独自ドメイン・レンタルサーバーを契約した前提で進めていきますが、
テーマの選択って、「何を選べばいいんだ！」と迷うことも多いかもしれません。
無料も有料も数がかなり多いのですが、選び方としては『作りたいサイトの方向性』によって決めるということになります。
色々見比べた上で、ワタシが決めたのは「 STORK 」 」
- 視覚的におしゃれなサイトが簡単に作れる
- ユーザー目線で ”触りやすい” サイト構築ができる
- SEO対策に優れている
- 最新のパフォーマンスに必須の”スマートフォン向け設計” が標準装備
このほかにも、まだまだ挙げたくなる充実機能が沢山あります。
それでも、「STORK」を使ったことでサイトをジブンの思い描くようにサイト設計できました。
ちなみにこの『吹き出し』のようなコメントスタイルも、「STORK」なら簡単にできちゃいます、HTMLの知識がなくてもです。
WordPressテーマには無料で使えるモノもあり、数多くの無料テーマが配信されています。
”WordPressテーマ”とは、サイトの見た目に影響するものです。
視覚的なデザインを選ぶことが、テーマを選ぶということです。LINEでも設定によって好きなキャラクターテーマへの着せ替えとかありますよね、簡単に言えばあの感覚です。
そしてその選択肢として、今回はOPENCAGE（オープンケージ） 
さんが配信しているテーマ、「STORK（ストーク）」について見ていきましょう。
初心者なのに、「STORK」を使ったらほぼ1日で骨組みが作れた
全くweb用語にも詳しくなくて、それでも『ジブンのメディアを持ちたい！』と一念発起しました。
キッカケは、”限りある人生の中でいかに自分を生きられるか” ということにこだわりを強く持ったことです。仕事をして体調を崩したこともあったけど前向きになれたとき、人生にワクワクしようとする姿勢ってなんだかいいなと思ったのです。「ワクワクを発信・シェアする場所があったらイイな」と思って挑戦しようと思いました。
パソコンはそれなりに使えましたが、システムを造るというのは無知で、「HTML・SEOってなに？」というレベルでもありました。
結論から言うと「SEO対策」ってサイト運営に非常に大事なことですが、「STORK」は感覚的なビジュアル設定ができる・SEO対策を前提としたサイト設計がプログラミングされているので、とりあえずは『STORKを使えばSEO対策はできるのね』ってところを抑えれば今は大丈夫です。
後でまたSEOの話もしますね。
「STORK」をインストールしてその当日にサイトの骨組みができ、翌日以降には記事を書き始め、その後約3週間でこの記事を書いています。
■ ちなみに、この期間内にGoogle Adsense にも申請し、申請5日目で審査通過もしました
「STORK」を使い始めて3週間当時のサイトページがこちら
3週間前にはこのサイトがこの世にはなかったと考えると、とっても感慨深いです！
でも、こうしたビジュアルも難しいことはなく、やり方さえ覚えてしまえば後はテーマの設計に任せるだけでこんな風に作ることができるんですね。
「ブログ・サイト構築にはコンテンツ＝記事がないと始まらない」、だから「STORK」
テーマ「STORK」を語る上で魅力的なことは ”充実した機能と設計”
各機能を紹介していきたいと思うのですが、なぜ機能や設計を賞賛するのか・・・それは、
「STORK」は『コンテンツを充実させること＝記事を書くこと』に集中させてくれる！
先ほど、「『STORK』をインストールしてその当日にサイトの骨組みができ、翌日以降には記事を書き始め、・・・」と書きましたが、
「トップページはこんな感じにしたい」「サイトのメインの色使いはこんな色」「サイドバーにはカテゴリーを表示させたい」などの設定は、始めたその日におおよその骨格ができました。
すると、もう後は＜記事を書く・投稿してみる＞という、実践にすぐ移れたのです
- この写真を例にあげますね、こちらはikiru LAB.トップページです
サイトを充実させているのは「各記事」！
「サイトを通して、訪れるみなさんにワクワクを届けたい！」というワタシの思いを形にするには、やっぱり記事がないと始まりません。
視覚的にも、”コンテンツ＝記事”を豊富にすることでサイトはよりイキイキとしていきます
写真を見ていただきたいのですが、
「STORK」の特徴的デザイン設計の１つ、記事をスライドさせながらトップ画面で紹介してくれるアニメーションがあります。（静止画ですが実際は記事が横方向にスライドして、いろんな記事を表示してくれます）・・・・このアニメーションやデザイン、もし自力で作ろうとしたら、どのくらい時間がかかるでしょうか。
WordPress にWordPressテーマ「ストーク」 
をインストールした場合のカスタマイズ管理画面
他にも、『トップ』『ikiru LAB.とは』『アソブ』『タベル』のように、メニューを配置したり、記事をカテゴリーに分けています。この設計も、「STORK」の標準設計に助けられてこのようにしっかり機能しています。「STORK」に備わっている機能を上手に組み合わせれば骨組みは出来ていくので、後は記事を増やすことに時間とパワーを費やすことができるのです。
有料テーマでも使いやすさが伴ってなければ同じ事態が起きかねないとの声が多くあります。せっかくであれば、初心者にも使いやすくて長続きするテーマで始めるのがやっぱりおすすめ！
では、「STORK」の具体的な機能を見ていきましょう！
スマートフォン・タブレットにも最適化した設計
こちらは、テーマのカスタマイズ管理画面・左下に出る表示を拡大したスクリーンショットです
＜ PC ・ タブレット・ スマートフォン ＞を指しています
みなさんは普段、パソコンとスマートフォン、もしくはタブレット、どれを使ってネットを見ていますか？通勤・通学では、多くの人がスマホやタブレットを片手にネットを見ている時代。つまり、webサイトも『ポータブルデバイスに対応したサイト設計がとっても重要』ということを表しています。
「STORK」は、各デバイスに最適化するための設計が標準装備
デバイスごとに設定をすることが出来ます。
しかも、たとえ共通表示設定をしている項目でも、”見せ方”・”見やすさ” はそれぞれ・・・違いますよね？ その為の、各々のデバイスに合わせた優先表示機能も備わっているため、「STORK」が自動的に判断して ”ユーザーにとって見やすい・巡りやすい状態” に保ってくれるのです！
[aside type=”boader”]
このように、「STORK」の キャッチコピーの１つをご覧いただくと、
究極のモバイルファーストというワードがアピールされています。
実は配信元からは、「STORK」の他にも
といったテーマを制作・配信しているのですが、『モバイル対応』に最も特化した最新型が「STORK」だというイメージで理解いただければOKです。
制作側さんの視点で比較もされていますので、OPENCAGE（オープンケージ）さんホームページでチェックできます
クリックひとつでトップページの印象を思いのままに
サイトの顔でもあるトップページに、 ”思わず記事を読みたくなる” ようなキャッチーな印象を与えます。サイトのメニュー表示位置やロゴ・画像はもちろん、記事をどのように並べて表示させるかも選ぶことができます。
ikiru LAB. は『ライフハックメディア』としてwebマガジンの印象を与えたかったので、この表示タイプがハマりました
＊PC / スマホ それぞれに対して、個別に設定ができるのも嬉しいです！
SNSボタンも標準装備
サイトをSNS経由で届けてくださる訪問者さんもいます、その時はこのボタンが活躍。
これをもしHTMLタグで入力して細かな設定をしなきゃいけないコトを想像したら….ゾッ
＊カスタマイズの「投稿・固定ページ設定」から各項目表示をカスタム
・・・基本的に、様々な設定事項はチェックをON/OFFする簡単アクションですぐに設定できる
サイトをジブン流に変えるなら、ウィジェットを使いこなそう
” 画面に設置することで、アプリケーションの視覚的な機能を表示させるモノ”
スマホアプリなども一種のウィジェットであって、例えば時計マークのウィジェットはわざわざ開かなくてもホーム画面で「何時だな」ってわかりますよね、あんな感じ。
WordPress ではウィジェットを配置できるのですが、「STORK」はウィジェットを賢く使いこなせるようにできています。
＊ウィジェット管理画面です
見せたいウィジェットは、該当箇所に意図した順番に配置すればそのまま反映されます
- 画像ウィジェット：ワタシはここに『ikiru LAB. ロゴ画像』を入れました。画像ソースは、左列の”WordPress管理項目”の「メディア」にアップロードすることで使えます
- テキスト：テキストは、任意の入力で思いのまま使えるウィジェットと言っていいですね！
- カスタムメニュー：「STORK」はメニューがデバイスごとに設定できるのですが、その設定したメニューをウィジェットにも組み込むことができます。
『グローバルメニュー（スマホ）』というのは、スマホの『ハンバーガーメニュー』のことを指します。『ハンバーガーメニュー』とは、スマホでwebサイトを見るときに画面上部端っこに「 ≡ 」こんなマーク見たことありませんか？、アレです！ タップするとサイト内のメニューが表示されるあの機能も「STORK」は標準装備なのですが、すでに設定している「グローバルメニュー（スマホ）」の内容をそのままサイドバーに表示させたい為に、このように設定したわけなんです。
カスタムメニューの設定自体はまず、サイトを作るみなさんが自由に組み込めるものであって、ウィジェットに適用させる際にこの3種類から選択するのも、みなさんのお好きなメニューを選ぶということになります
- テキスト：またまたテキストですが、先ほどと違う使い方をご紹介します。「STORK」を使いこなす上で大変便利なのは『ショートコード』の存在
＊下の例は、『関連記事』のショートコードをテキストウィジェット内に入力したものです
＊後ほどまた紹介しますが、『ショートコード』は、
記事を書く際やテキストを打ち込むときに、意図したビジュアルを表示させるためのHTMLコード
と思ったみなさま、安心してください、簡単ですよ！
AddQuicktag というプラグインをインストールすれば選択１つで記事にすぐに呼び起こすことができるので、見た目にはHTMLコードなのですが”文字の大きさを変える為にフォントの数字チョイスする” のと、さほど変わらないアクションで出来ちゃいますからね
どうでしょう、ウィジェットを使うとかなりオリジナリティがでると思いませんか？
「STORK」が WordPress サイト設計に優れているからこその使い勝手ですね！
最初のうちは「テキストウィジェットで広告入れて・・・」などとあまり凝りすぎなくても、試しに『カテゴリー』『最新記事』『検索窓』など、サイトらしいウィジェットを配置してみてとりあえず始めることをオススメします。
なぜなら、いくら記事がない段階で「こんなサイトにするぞ！！」とカスタマイズ画面をいじくっていても、表示する記事がないとプレビューも何もないのです。笑
ワタシがそうだったのですが、設定してるのに「あれ？アニメーション動かないなぁ」「ウィジェットに最新記事入れてみたけどイマイチデザインが掴めないなぁ」なんて思って、「STORK」の使い方わからないかも！！と焦ったのですが、そもそも記事書かないと全くもってサイトはイキイキしてこないのですね。笑
とりあえずは記事を書く！
記事も、デザインを凝って書くのはひとまずは後回しで、できる範囲の装飾でいいので最低3.4個まず書く。
すると、「アニメーションがちゃんと動いてる！」と感動します。笑
そのほかの機能も動き始めて、サイトにだんだんと息が吹き込まれていきます。
記事が7〜10、ある程度増えてきたところで改めて、”この記事を表示させるならこのウィジェットを使おう！” というような見え方ができてくる！
最初に伝えた通り、サイトをイキイキさせてくれるのはコンテンツ
イキイキさせる為に、記事を書く時間をたくさん作ることが大切！
それが何より、訪問してくれるお客様への真摯な姿勢だとワタシは考えていますので、これからもサイトにワクワクを充実させていきたいと思います！
多彩な「ショートコード」で記事に息を吹き込もう
記事を書くにあたって、文章に抑揚をつけたりはもちろん、
視覚効果として ”ユーザーを楽しませる” ためのミソが標準装備されています。使用したい効果を選択してクリックするだけで呼び起こせる、魔法のような機能です
では、実際の記事編集画面（ビジュアルモード）を見てみましょう
- 右側に、縦に【】で囲まれたもの１つ１つが、「ショートコード」です。選択してクリック１つで記事編集画面に呼び起こすことができます
- クリックすると、白背景のメイン編集画面にコードが反映されます。ここでは【吹き出し】Facebook風（右）を選択
が現れました
■ガイドの通り、アイコンにはめたい画像をメディアから貼り付け、”名前”には任意の名前を入れます。「STORK」にはこのようにインストール後すぐに使える「ショートコード」が用意されています。使っていくうちにだんだんカスタマイズしていける感覚を覚えていくので、焦らずまずはシンプルに使っていきましょう
標準装備されている「ショートコード」は、最低限必要なものが揃っているので、
まずは初めのうちは記事作りに困らないでしょう、
むしろ文章を整理整頓させるには余計な装飾は悪影響なので、初期設定で十分なほどですね
▶︎「枠」系 ショートコード
文章のまとまりをわかりやすく囲ったり、本文の補足や注意事項としてある箇所を目立たせたいときに使える「枠」系。
注意説明ショートコード
・注意を引くマークと色が特徴です
・枠ショートコードの間に文章を打てば、どんなものもおさまります
こんな風に関連記事を収めることも簡単
ショートコードの文頭と文末の間に入れれば勝手におさまってくれるので楽チン♪
※ここから先は、『STORK』で有効なコードが埋め込まれています。
現在使っているテーマ『JIN』での再現性は保たれませんが、STORK紹介の記事のため、あえてそのままとさせていただきます。
▶︎ セリフ風に使える「吹き出し」系ショートコード
単調になりがちな文章にテンポを作ってくれるのがこの「吹き出し」
[aside type=”boader”]- 会話形式の文章に
- 持論をさらりと目立たせるときに
- 擬人化してセリフを喋らせるときに
[voice icon=”https://search-for-mylife.com/wp-content/uploads/2017/06/2147f4616382857a64ead516c803b4d4.png” name=”” type=”r”] 「シンプル枠」という名前のショートコードがこちら！シンプルな吹き出しショートコード、こちらをカスタムしたのが次の吹き出し！ [/chat]
でも、あらかじめ”いろんな心情・表情のアイコン”を用意すると、記事を書くときに構成がすごく立てやすいんですよ！それに表情があると記事に想いが乗っかる気がしますね！
ショートコードの使い方や、公式制作チームによる新しいショートコード情報は、「STORK」公式配信・運営サイトOPENCAGE（オープンケージ） 
で確認できます
▶︎リンクをおしゃれに・スマートに表示するボタンツール
『リンク』とは、閲覧ページとは違うサイト・ページへ訪問者さんを導くもの。
- 文字リンク
- ボタンリンク
など、アクセス方法が多様に設定できる中で、特にボタンについて注目
[btn class=”simple”]WordPressテーマ「ストーク」 [/btn]
[btn class=”big”]WordPressテーマ「ストーク」 [/btn]
[btn class=”bg-yellow big lightning”]WordPressテーマ「ストーク」 [/btn]
このように、ショートコードからボタンのコードをクリックして呼び起こすだけで、簡単にボタンリンクが作れてしまいます。
見た目にも楽しくおしゃれだと、見てくださる方もきっとストレスなく記事を読めたり、リンクアクセスまでたどり着けるのではないでしょうか。
▶︎「関連記事」や「注目記事」もショートコードで簡単設定
実はこの記事の中でも、すでに「関連記事」の紹介をしてきました。
こんな感じ・・・
[kanren postid=”683″]” 余談ですが、お蕎麦が好きです “
・・・・『いや、全然関連してないでしょう』というときは、
[kanren2 postid=”683″]「関連記事」のラベルを取ることもできちゃいます。
っといった具合に、『記事の本題とは違うけどこんなことも盛り込みたいな』とか、『記事内で関連ワードの補足が欲しいものの、文章で付け加えると長々としちゃうなぁ』なんて場合に、別記事を有効なアクセントに使うことができます。
標準装備のショートコードに【関連記事】が入ってるので、クリックで呼び出せば簡単。
最新機能も随時追加・更新してくれる
「STORK」を制作している「OPENCAGE」さんでは、随時追加機能の紹介や最新情報を提供しています。
テーマの購入・導入後にも、カスタマーサポートをしてくれる点で非常に安心感があります。
導入後も、こちらの ブロガー専用WordPressテーマ「OPENCAGE」 
さんホームページで配信されていきます。
サイトを運営するにあたって
正直、サイト構築の初心者だからこそ、なるべくリスクが低くてコストもかからないようにと考えていたので、「STORK」購入検討時の10,800円は・・・しばし熟考しました。
そこで購入前に大切にしたことは、いろんなサイトをよく見て、『こんなデザインにしたい』『これは使いやすい、見やすい』という感覚をまず持つことです。どんなテーマを使うのかは、そしてもしもテーマを購入するならば、欲しい機能がなければいけないなと思ったんですよね。
そこで、設計図とまでいかなくても、『パソコンやスマホで見たときに欲しい機能』をイメージしたのです。
いくつかの企業サイト・個人ブログを見ていくと、『 ”当然のように見ていた・使っていた機能やウィジェット” が、あるサイトと無いサイトがある・・・』ということに気づきました。正直、機能が乏しく素っ気ないブログという印象を受けたサイトもありました。
それからまた改めて「STORK」の公式サイトを見たときに、『 WordPressに特化したテーマだからこそ、そして高機能な標準装備があるテーマだからこそ、イメージに近いサイトづくりができるのかもしれない』と感じたのです。
「STORK」は有料テーマですので導入のためには購入が必要ですが、
初心者でもすぐにサイト構築を始めることができて、「記事を書く」スタートを”早められる”素晴らしいテーマだとワタシは思いました。設定ばかりに時間を奪われて、結局は記事を書くことが億劫になるのは本末転倒ですもんね。
費用対効果の優秀さは、１週間もあれば感じられるのでは無いでしょうか。少なくともワタシは、導入したその日にサイトの骨組みが完成し１週間以内には感動を得られたので、導入してよかったです。
”初めてつくるサイト”だからこそ、「OPENCAGE」さんの技術力を投じて作ってくださったテーマを導入したことでここまでできたんだろうなと感じています。
web言語も知らずにサイト構築なんて全くの初心者だったワタシが、ネットでなんとなく調べて出会った「STORK」・・・、こうして「ikiru LAB.」の運営を始めるキッカケをくれたので、非常に感謝しています。
ノートPCの作業を快適に♪
