元サラリーマンブロガーなつのプロフィール

当ブログおすすめのテーマ!


\\//

✔徹底的に表示速度にこだわった完璧なSEO対策のテーマ!

高機能なのに初めてブログを作る人でもカスタマイズがしやすいテーマ。
ブログ作成の欲しい機能がギュッと詰まった今一番人気のテンプレートです。
今なら5大特典「たった30記事で15万円稼いだ方法」やオリジナルデザインマニュアルその他豪華特典付き!
 
詳しい内容は下記のボタンでご確認ください!

STORK(ストーク)のトップページの作り方を丁寧に解説!ヘッダー画像の設定の仕方も!

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

ワードプレスのテーマSTORK(ストーク)はTOPページが印象的です。ヘッダー画像の上に特定のURLに誘導するボタンや後追いで出てくるテキストなど初めて訪問した人へのインパクトがあります。

そこで、STORK(ストーク)のTOPページの作り方をどこよりも丁寧に解説していきます。

 

【STORK(ストーク)テーマのカスタマイズ方法 1】インストール

ワードプレステーマのSTORK(ストーク)を購入し、ファイルをダウンロードしたらワードプレスにインストールします。

STORKのインストール方法はコチラの記事が参考になります。
⇒ STORK(ストーク)のインストール方法!初心者にも簡単にできるように解説!

 

まずは、TOPページのデモ画像をご覧ください。

(STORKでアレンジしたサイトに飛びます)
 

 

【STORK(ストーク)テーマのカスタマイズ 2】TOPページ全体像

ワードプレステーマSTORK(ストーク)をインストールしたらまずはタイトルを設定していきます。

完成図

このようなTOPページを作っていきます。

全体像は、最初の黄色ボタンのDEMOページからご覧ください。

 

変更していく箇所

  • サイト基本情報
  • サイトカラー設定
  • サイトロゴ・アイコン
  • グローバル設定
  • トップページ設定
  • メニュー
  • 背景画像

 

コントロールパネル できること
サイト基本情報
  • サイトタイトル設定
  • キャッチフレーズ
  • サイトアイコン設定
サイトカラー設定
  • サイトの色設定
サイトロゴ・アイコン
  • サイトのロゴ設定
グローバル設定
  • ヘッダー下お知らせリンク
  • テキストURL設定
  • 色設定
トップページ設定
  • ヘッダー上タイトル
  • ヘッダー画像
メニュー
  • グローバルナビ設定
背景画像
  • 背景画像設定

 

↓ 複数使用可能で、着せ替え付き、さらに完璧なSEO対策が特徴のTHE THOR(ザ・トール)。こちらのブログで購入くださると今ならすごくお得です!

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!

今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

ガーリー

シンプル
オーガニック


※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。

⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

//今なら、なつ特製オリジナルデザインマニュアル付き!\\

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

コントロールパネルへのアクセス

▼「ダッシュボード」⇒「外観」⇒「カスタマイズ」

カスタマイズまで行くとコントロールパネルが左に出てきます。ここから全て操作していきます。

 

大人気のワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

【STORK(ストーク)テーマのカスタマイズ方法 3】サイト基本情報

サイト基本情報はTOPページとは直接関係ありませんが、ページを作る上で設定しておかなければいけない基本の設定です。

  1. サイトのタイトル
  2. キャッチフレーズ
  3. サイトアイコン

 

【STORK(ストーク)テーマのカスタマイズ方法 4】サイトカラー設定

サイトカラー設定では、TOPページの上部の色やリンク色などの変更ができます。

自分の好きな色の組み合わせを試して設定してください。

なつのワンポイント!

ネットで検索すれば色の組み合わせやネットの色コードなどを調べるサイトがありますので参考にしてみてください。

 

 

WEB色見本原色大辞典
canva

 

着せ替え機能付きのワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

【STORK(ストーク)テーマのカスタマイズ方法 5】サイト・ロゴアイコン設定

この部分を設定するとトップページの一番上にロゴ画像が設定されます。設定をしなければサイト基本情報で設定したタイトルが表示されます。

サイトロゴアイコンの画像を選択します。メディアライブラリーが出てきますのでロゴにしたい画像を選びます。

PNG画像(透過型の画像)を設定するとトップページの上部にロゴが表示されます。

なつのワンポイント!

PNG画像と言っても初心者の方はピンとこないと思います。おさまりの良い透過型のアイコンがダウンロードできるサイトをご紹介しておきます。

 

ICOOON MONO

アイコンのダウンロードの方法は以下の記事で書いていますので参考にしてください。

SANGO(サルワカ)テンプレート口コミ【体験談】ワードプレスのカスタマイズ!

 

【STORK(ストーク)テーマのカスタマイズ方法 6】グローバル設定

グローバル設定では、ヘッダーの下のお知らせの設定をします。

例えばこのブログなら、プロフィールへの誘導をしています。ヘッダーの下になるので紛れてしまわない色が効果的。

目立たせようとすれば反対色などにすると良いでしょう。

 

サンプルサイトでも基本色がモスグリーンなので、オレンジ色を表示してみました!

同じ画面で、サイト・ロゴアイコン設定で追加した画像の位置を左にするか中央寄せにするかの指定や、ロゴをしなかった場合の文字の大きさも設定できます。

 

【STORK(ストーク)テーマのカスタマイズ方法 7】トップページ設定

トップページの一番目立つ部分の設定をここでします。

ヘッダー画像の上に後追いで出てくるテキストを設定します。大テキストは英語表示がしっくりしますが日本語でも問題なく表示されますので安心してください。

上段は英語で、下段は日本語推奨なので、なにかインパクトあるテキストで設定しても良いでしょう。

 

↓ このブログから大人気のTHE THOR(ザ・トール)を購入くださった方に特典をプレゼントしています。

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

ヘッダー背景画像

同じところでヘッダー画像の設定もできます。同時にスマホ用の画像も設定しておいてください。

ボタンとテキストの「左寄せ」

ボタンとテキストの「右寄せ」

 

カッコいいTOPページが魅力のワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

【STORK(ストーク)テーマのカスタマイズ方法 8】メニュー設定

トップページのヘッダーの下のグローバルメニューの設定はここでします。

まずはメニューの新規設定をします。名前を決めて入力し(短くてもなんでも良いです)展開していきます。

トップページのヘッダー下にグローバルメニューを設置したいときには、「グローバルナビ」にチェックを入れます。

全て設定できたら、上部の「公開」をクリックするとTOPページが設定できます。

 

TOPページ完成図

 

【STORK(ストーク)テーマのカスタマイズ方法 9】ヘッダー画像補足

ここまで、STORK(ストーク)でのTOPページの作り方をお伝えしてきましたがここで使ったヘッダー画像などをどうしたら作れるのか簡単に説明をしていきます。

私も初心者のころ、ヘッダー画像ひとつ作るのに大変な思いをしましたがやり方がわかれば簡単です。

フリー画像のサイト⇒photoAC

このサイトは登録制ですが、メールアドレスとパスワードでできます。ブログを運営していくと画像が必要となってきますので登録してみてください。

画像をダウンロードするとファイルがインストールされます。それをクリックすると画像になりますので、コピーをして自分の保存したい場所に移動させましょう。

↓ THE THOR(ザ・トール)とSTORKの比較をしています。

THE THOR(ザ・トール)とSTORKの比較!機能のシンプルさが違いの決め手!

画像ダウンロード方法

ZIPファイルでパソコンに入りますので、このファイルにカーソルを持っていき、ダブルクリック。

するとJPGファイルに変化しますのでもう一度ダブルクリック。

次に出てきた画像をコピーをして画像を保存します。

windowが入っているパソコンの場合、「ペイント」というソフトがありますから、そのペイントで画像の大きさを調整します。

 

センスの良い加工ができるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

ペイントで加工

ペイントの左上にある「ファイル」をクリックして画像を取り込みます。

ダウンロード画像は結構大きいものが多いので、サイズを調整しましょう。

今回のサイズは水平方向1000ピクセルで設定しています。

画像の大きさの調整が終われば、あとはどの部分を使いたいか見極め切り取ります。

上半分を切り取ったらこんな感じです。

これを今回のTOPページに設定してあります。

画像の解像度にもよりますが、大きさ(ピクセル)は調整しながらちょうどよく見える大きさにしてみてください。

別のブログでSTORKからTHE THOR(ザ・トール)という有料テーマに変更したのですが、とてもデザインがカッコよくできあがりました。

 

↓ STORKとは違ったアプローチの最新人気テーマTHE THOR(ザ・トール)がかなりカッコいいです。


初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

 

 

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE・THOR

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

  おススメ!WordPressテーマ

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで大人気
  • 着せ替え機能でいろんな用途に使える
  • 会員フォーラムがある

 

 

コメントを残す

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