【stork(ストーク)19設定方法】WordPressにおすすめテーマを導入してブログ構築をしよう

【stork(ストーク)19設定方法】WordPressにおすすめテーマを導入してブログ構築をしよう

こんにちは!はち(旦那)みつ(妻)です!

今回は、大人気ブログテーマstork19の導入・構築などの設定方法に関する記事です。

OPENCAGEが出しているこのブログテーマは見栄えがとっても良く、それでいて使いやすさ、機能性が優れています。

初心者もラクラク使うことができるstork19を使い、質の高いブログを作成しましょう!

stork19とはどのようなテーマか?使いやすさや機能面をまとめます!

まず初めに、このstork19とはどのようなテーマなのかをご紹介していきます。

ズバリ、このはちみつぶろぐ自体のレイアウトがそれにあたります!

スマホで見ている方は、一番上にメニューがあり、その下に画像、記事の下には検索バーやカテゴリーなんかも選択できます。

PCで見ている方は、記事の右側に検索バーなどがありますね。

WordPressをインストールしたばかりの頃は「Hello World!」のような記事があり、全てがデフォルトです。

それらがこのようなレイアウトに変更できるということです!

レイアウト変更はとっても簡単!

レイアウトの変更もプログラムを打つということはほとんどなく、ドラッグ&ドロップのような作業だけでできます。

元々見栄えの良いテーマで、自分で好きな位置に好きな項目を埋め込むことができます。

【補足①】レイアウトに凝りすぎるとメンテナンスが大変

レイアウトが簡単だからと言って、なんでも追加しすぎるのはNGです。

ブログを始める際、レイアウトに凝りたくなる気持ちはとてもわかります。

しかし、何か不具合が起きたときのメンテナンスもそれだけ大変になります。

あくまで相手視点を持って、見やすい、読みやすいを意識しましょう。

【補足②】隅々までこだわるとブログが重くなる【SEO低下】

レイアウトに関してもう一点いうと、凝りすぎるとSEO低下します。

これは、ブログが重く、読み込み速度が遅くなるために起きることです。

なんと、

記事読み込みが3秒以上になると、ユーザーの53%がそのページから離脱する

というデータもあります。

一度レイアウト構築をしたら、

無駄なところ、削れるところはないかな?

と見直してみましょう!

stork19の購入から設定方法までをお伝えします

さてここから、stork19の購入から設定方法までをお伝えしていきます。

難しい設定はほとんどありません。

初心者でも一つずつ理解をしながら進んでいけるため、まずは色々と操作をしてみましょう。

まずはサイトからstork19を購入

まず初めに、公式サイトからテーマを購入していきます。

\当ブログで使用しているテーマはこちら/

そうすると、このような画面が出てくるので、右下の「カートを入れる」を押します。

 

数量をチェックし「次へ」を押します。

 

お客様情報が出てきますが、会員ではないため、下へ進みます。

 

こちらに必要事項を入力し、右下の「会員登録しながら次へ」を押します。

「会員登録しながら次へ」を押すとでホーム画面へ遷移する場合があります。

その際は再度購入画面へ進み、今度は「会員の方はこちら」より先ほどのメールアドレス、パスワードを入力して「次へ」を押してください。

 

次に、支払方法を選択します。

 

例えばクレジットカードを選択した場合下記表示されるため、情報を入力します。

その後利用規約に同意して「次へ」を押します。

 

内容確認後「上記内容で注文する」を押して購入完了となります。

zipファイルをダウンロードし、これで購入手続きは完了です!

子テーマというファイルもダウンロード

ブログには一般的に親テーマと子テーマが存在します。

今ダウンロードしたものを親テーマといい、構築に必要なコードが全て書かれています。

 

しかし、親テーマは今後特に触りません。

結論:編集は子テーマで行います。

スマホのアップデート同様、テーマもアップデートがあります。

その際に、親のコードも初期化されるため、データが消えてしまうことが起こるのです。

 

対して、子テーマはアップデートさないため、ここで編集・追加コードを入れていきます。

一般的に親→子の順でコードが読まれ、後に読み込んだ方を反映します。

stork19の子テーマのダウンロードは、こちらから行います。

 

先ほどのOPENCAGEのホーム画面上の

「テーマの使い方」→「子テーマのダウンロード・導入」

を押します。

 

こちらの画面一番下に「ストーク19用」のダウンロードファイルがあるため、こちらをダウンロードします。

終わったら、親テーマ、子テーマ両方のzipファイルが保存されているかと思います。

これで子テーマのダウンロードも終了です。

ここまできたら、続いてWordPressにアップロードし、レイアウトを変更していきます。

【超簡単】WordPressにstork19を導入しよう!

WordPressに入れるために、まずは自身のアカウントにログインしましょう。

ログインをすると、このような画面が表示されるので、

「外観」→「テーマ」

と進みます。

WordPressにアップロードした後に子テーマを有効化

下の画面が開いたら

「新規追加」

を押します。

 

「テーマのアップロード」→「ファイルを選択」

を押し、親テーマのzipファイルを選びます。

その後、アップロードをして完了となります。

子テーマも同様にして進めてください。

これで両方のファイルが一覧に表示されたと思います!

 

ここで、子テーマを有効化してください。

親テーマを気づかず有効化していると、テーマのアップデートの際に編集内容が消えるため再度確認しましょう。

デフォルトのブログレイアウトを変更しよう!

子テーマ有効化後、ホームページを見ると下のようなレイアウトになっていると思います。

ここから、自分好みにブログを作っていくということです!

詳細設定もたくさんできますが、まずは楽しみながら軽く触ってみましょう!

 

まずは

「ダッシュボード」→「サイトをカスタマイズ」

を押します。

 

そうすると、レイアウト編集画面が出ます。

たくさんできることがありますが、操作はとっても簡単なので、進めていきましょう。

【簡単な初期設定】stork19を手順に沿ってカスタマイズ!

ここから一つずつ設定をしていきましょう!

ただ、レイアウトに凝りすぎると時間がかかってしまいます。

左側の項目は、これだけあるため、まずはざっくりとした設定で問題ありません。

細かい設定に関しては、徐々に慣れてきたらレイアウトを再構築することをおすすめします。

基本的に以下の通りの設定で問題ないです。

サイトの基本設定・ロゴ・ヘッダー

こちらの設定では、サイトの上部(ヘッダー)にサイトタイトルやキャッチフレーズなどを入れます。

さらにロゴを差し込むこともできます。

サイトの基本設定・ロゴ・ヘッダー設定方法

サイトカラーの設定

サイトカラーは、ブログ全体の色合いを決めるため、とても大切な項目です。

見出しの色などを設定していきます。

サイトカラーの設定方法

サイト全体の設定

こちらでは、サイトの構成に関する内容を設定します。

基本的にデフォルトのままで問題ありません。

しかし、ヘッダー下にお知らせを表示させたい場合は、テキストを入力する必要があります。

はちみつぶろぐでいうところの、下記の部分にあたります。

トップページ設定

こちらではヘッダー下の設定を行います。

トップページの見栄えとなる部分ですが、

高画質の写真などで設定すると、サイトが重くなるため注意です。

トップページの設定には、3種類あります。

ヘッダーアイキャッチの設定

スライダー設定

ピックアップコンテンツ設定

記事一覧レイアウト設定

ここでは、記事一覧の表示設定をすることができます。

記事一覧レイアウトを変更する場合は、

・シンプル

・カード型

・ビッグ

の3種類から選択してみてください。

ちなみにはちみつぶろぐでは、[PC]のレイアウトは「シンプル」、[SP]スマホのレイアウトは「カード型」です。

投稿・固定ページ設定

こちらは今のところ、

デフォルトのままで問題ないです。

記事作成が進み、記事内のレイアウト変更が必要の場合、再度設定してみましょう。

SNSボタン設定

SNSボタン設定とは、Twittterやfacebookなどへ誘導できるボタン表示のことです。

こちら表示したい場合は、表示する(投稿&固定ページ)を選択しておきましょう。

アクセス解析コード・headタグ

こちらはブログ解析をするための項目です。

後に

「All In One SEO Pack」

で設定するため、

デフォルトのままで問題ありません。

広告用ショートコードの登録

こちらは、アドセンスコードなどをショートコード化し、記事内に簡単に入れられるという項目です。

後に、「外観」→「テーマエディタ」の中にある

「function.php」

ファイルで設定するため、

デフォルトのままで問題ありません。

その他の設定

その他の設定では、アイコンや、絵文字読み込みなどの設定ができます。

こちらは全て

デフォルトのままで問題ありません。

背景画像

ブログ全体の背景に画像をつけることができます。

しかし、サイトが重くなることから、こちらの設定はおすすめできません。

空白のままで問題ありません。

メニュー

こちらでは、ヘッダー、フッターに表示するメニューの設定ができます。

ヘッダーメニューの位置はここの上部赤枠を指します。

 

さらに、フッターメニューの位置はこちらの下部赤枠です。

自身のブログジャンルを決めている場合は、このようにメニュー追加をしてみてください。

メニュー(ヘッダー・スマホ用ヘッダー・フッター)の設定

ウィジェット

ウィジェットは、例えばPCのサイドバー部分や、スマホの場合は下部を指します。

はちみつぶろぐの場合、例えば「検索バー」、「プロフィール」、「カテゴリー」などを表示しています。

ここに情報を記載することで、読者の方がさらに調べたり、カテゴリーの他の記事への誘導に役立て、SEO対策にもつながります。

Widget(ウィジェット)の設定

ホームページ設定

ホームページ設定は、ブログのトップページをどのようなレイアウトにするかを決めることができます。

具体的な方法としては、

・最新の投稿

・固定ページ

このどちらかを選択します。

最新の投稿の場合は、先ほど選んだカード型やシンプルなどのレイアウトに応じて、記事一覧が表示されます。

固定ページは、ある特定のページが表示されます。(はちみつぶろぐはこちらです!)

ちなみに、投稿ページと固定ページは異なります。

記事を書くという意味では同じだが、設定でホームページ表示をさせる場合などは、固定ページ記事一覧から選択します。

追加CSS

こちらは、ブログのレイアウトをコードを用いて設定することができます。

ここでもできますが、「外観」→「テーマエディタ」の中にある「style.css」を編集した方が、後々楽な気がします。

レイアウトをコードで編集することはまだまだ先の話なので、

空欄のままで問題ありません。

最後に

以上でstork19の設定は全て完了です!

項目が多かったですが、お疲れ様でした!

レイアウトがおおよそ決まってきましたか?

初めはざっくりとした設定で問題なしです!

むしろここまでの設定で上出来です!

設定した内容でホームページを再度チェックし、今日から記事作成を進めていきましょう!

最後まで見て頂きありがとうございます!

SNS(twitterinstagram)でも、情報をお届けしております!

ご意見ご感想等ありましたら、お問い合わせフォームよりお待ちしております。