サーバー契約とドメイン所得、ワードプレスのインストールが完了したら、いよいよブログを作っていきます。
ここでは初心者にもやさしい【THE THOR(ザ・トール)】を教材に基本的なブログの構造を学んでいきます。
この記事はトールで用意されたデモサイトを選ぶ前に、サイトを動かしている人たちが当たり前のように話している各部位の名称などから説明していきます。この記事を読むことで、トールが用意している9種類のデモサイトの違いがスムーズに分かるようになればいいんですが…。
頑張ります。
※分かりにくいようなときはコメントでお伝えください(お手間かと思いますが、よろしくお願いします)。
まずはサイトの基本から
【THE THOR(ザ・トール)】のデモサイトの紹介は様々なブログで掲載されています。
デザインに関しては個人の好き嫌いがありますから、いろんな人の意見を聞くことがいいかもしれませんね。
ただ、正直な話…、私がはじめてブログを作ったときはデザインうんぬんよりもその構造や意味、言語さえもさっぱり分かりませんでした。デザインは好きなのではじめは「これいいな~」「これは好みじゃないかな?」という感じで選んでましたが、実際に作るようになってから「この機能はこっちかぁ」ということがありました。
これも実力がついてくると自分で改善することができるんですが、はじめの頃はわからず何度かデモサイトを入れ替えるということをしました。それはそれで自ら体験して学ぶ機会になったので有難いことなんですが、時間はかなり使うことになりました。
ですので、ここではまずデモサイトの紹介よりもサイトの各部分の名称や役割、その効果を説明していきます。
はっきりいってトールのデザインは優秀です。
ですがこれらは「写真ありき」なので自分のイメージしていることをデモサイトがすべて叶えてくれるわけではありません。
基本的な機能や役割を知り、そこに好きなデモサイトのイメージを付加する流れが、
もっとも時短で自分好みにできると思いますよ。
※別のテーマからお引越しの方は読み飛ばしていただいても結構です
サイトの全体像を把握する
サイト内にはまず「トップページ」があり、その他「カテゴリページ」などあります。
この「40代からはじめるWEBマーケティング」を題材としてみてみましょう(以下「40WEB」)。
※新しいタブでもう一つ「40WEB」を開きながら確認すると分かりやすいですよ。

この「40WEB」のトップページは世界地図の画像の上に髭のおじさまのロゴマークが配置されています。
これはザ・トールカスタマイズの「TOPページ設定」から、メインビジュアル設定とカルーセルスライダー設定を調整することで自分好みに変更できます。※こういった具体的な調整内容はまた別途記事にしていきますね。
※髭のおじさまのところがメインビジュアル、カルーセルスライダーは左に流れている小窓です。
ですが、「これがトップページです」というわけではありません。
この辺りは表示内容は設定でどうにでもなるからです。
トップページはブログの顔
トップページでの最初の分岐は、「固定ページ」にするか「最新の投稿」にするかに分かれます。
40WEBであれば、先のメインビジュアルとカルーセルスライダーをそのままに「固定ページ」を表示するか、「最新の投稿」にするかということです。現在はメインビジュアル、カルーセルスライダーがあり「最新の投稿」で設定されています。
ですので、メインビジュアルとカルーセルスライダーを非表示にすると、カテゴリーの下に「最新の投稿」から表示されます。これを例えば固定ページの「このブログについて」を表示させることも可能です。
トップページに必ず挨拶文を入れたいという方は、固定ページをいれるといいでしょう。
ただ、これらが決まりきった役割やルールかといいうとそうでもありません。結構好きに改造できます、
デモサイトを開くと最初に表示されるトップページですが、
それはトップページがブログやサイトの顔になるページであることから、デザインが売りのデモサイトではすべてにメインビジュアルやカルーセルスライダーなどの機能が表示されていると思われます。
印象的な画像や動画、格好よく美しいロゴマーク、そういったイメージを提示してブランド力を高めるページということです。ただ、人によっては「リピーターが多いし、毎日記事投稿しているから最新記事が出てればいいや」いう感じで装飾をせずいきなり投稿を表示する人もいます。
ここは設定で「メインビジュアルを表示するかの選択」から表示か非表示かを選ぶだけで変えられます。
「THE THOR」トップページでできること
トップページはブログやサイトの顔、もしくは名刺のようなものです。
このトップページを自分らしく表現することができれば、全体的なイメージも固まっていくでしょう。
THE THORのトップページでは次の6項目から表示・非表示を選べばすぐに形になります。
メインビジュアル設定
メインビジュアルについては先に説明したのでここでは割愛させてもらいます。
メインビジュアル下お知らせ

カルーセルスライダー設定

ピックアップ3記事設定

記事ランキング設定
カテゴリ最新記事設定

ブログの構造について説明する予定でしたが、トップページでできることを説明しているうちに「トップページ設定」の説明になってしまいました。
トールではこういったデザインが「表示・非表示」で簡単に設定できるので有難いです。
固定ページについて
固定ページはこのブログでいうところの「このブログについて」や「プライバシーポリシー」「お問い合わせ」といったページになります。ブログはこの固定ページと投稿ページで構成されています。
固定ページもグローバルメニューに加えることができます。
情けないはなしですが、始めたころの私はこの固定ページと投稿の違いすらいまいち分かっていませんでした。
なので「取り合えず記事を書くか~」と固定ページに記事を書いたりしてましたね(やばいです)。
固定ページはカテゴリーとの紐付けやトップページとの連動がない独立したページを作る機能です。
投稿について
これ以外でページのように見えるのはカテゴリーでしょう。
カテゴリーページは記事数がある程度あり、カテゴリー名を設定して、そこからメニューなどを調整すると形になります。

実はこの投稿とカテゴリーページ、またトップページなどは連動しており、SEOの観点からとても大切です。
これらはまた記事でゆっくり扱いたいと思います(準備中です)。
カラムとは
トールのデモサイトを見るときに必ず話題になるのが「カラム」です。
これはページが分割されているかどうかということです。
「1カラム」は分割されず記事を集中してみられる作りになります。
「2カラム」は左右のどちらかにサイドバーという表示があり、そこには様々な表示が載せられます。
このサイドバーには広告も表示できるので、収益をあげたい方は基本的にサイドバーを活用されています。
※収益の得かたによりまったく広告がない方もいます(情報ビジネスで後々…)。
ですが、先に述べたようにサイドバーがあることで記事に注目されないとか、広告が多すぎて嫌になるなど、読み手の心理をどうとらえるかが運営者のセンスですね。こうすればいいというセオリーはありません。
まとめ
トールのデモサイトを見る前にこれだけは最低抑えておきたいブログの基本構造をご紹介しました。
デモサイトの綺麗さに引っ張られず、見ているデモサイトがどうやってできているかを理解していきましょう。
トップページをみたら「メインビジュアルはこれ」「これはお知らせありか」「カルーセルスライダーはこう見えるのね」などなど、どこがどういう機能かをみて、自分のサイトに必要かを確かめましょう。
またトップページに限らず投稿でも「カラムは1か2かな?」をみて、印象の違いを体験して下さいね。
駆け足で説明しているので、なかなか伝えきれない部分があったかと思います。
もしよければコメントなどいただければ参考にさせていただきます。
よろしくお願いします。