【ブログ作成】ブログ基本構造とヘッダーなどエリア解説

ブログを作っていく中で、「テーマ」や「プラグイン」などのお話がよく出てきます。

これはブログの基本構造を理解しておくと簡単に理解することが出来ます。

また、「ヘッダー」や「フッター」などエリアに関するお話もよく出てきます。

そういったブログを作っていく中で必要となる知識について、今日はご紹介していきます。

ブログの基本構造解説

ブログの基本構造とは「どんな風にブログが出来上がっているのか?」というお話です。

まずは全体の話から入って、テーマやプラグインなど個々の要素について解説します。

全体イメージ

ブログの基本構造はお店の店舗などをイメージすると分かりやすいです。

まず、新しく店舗を建てるとします。

その場合、土地を不動産屋から借りたり買ったりして、その上に建物を建てていきますよね。

ブログの場合も同じで、インターネット上が世界中の土地。

サーバ会社が土地を管理する不動産屋。

ブログが店舗の建物と言ったイメージになります。

そういったイメージをまとめると下記の通りになります。

自分のブログと言えるのはドメインから先になります。

(ドメインって何?という方はこちら。)

そして、ワードプレスは建物の基礎と言えるでしょう。

(ワードプレスって何?という方はこちら。)

そんなブログに投稿する記事は、店舗でいうと商品になります。

テーマって何?

テーマはブログの外観&内観や各種設定機能一式というイメージです。

店舗でいうと、壁や床といった骨組みとなる大まかなデザインという感じですね。

そして、デザイン以外の様々な設定が出来る機能も持ち合わせています。

ワードプレスを入れ終わったら、そんなテーマを導入していきます。

なお、無料と有料のものがあります。

プラグインって何?

プラグインはブログの外観&内観や各種設定の部品的なイメージです。

特定の便利な機能を持ったソフトといってもいいですね。

店舗でいうと、ドアや窓と言った装飾部分。

もしくは、家電とか防犯ブザーなどの設備面のイメージと言える気がします。

テーマを入れ終わったら、そんなプラグインを導入していきます。

なお、無料と有料のものがあります。

CSS(スタイルシート)って何?

CSS(スタイルシート)はブログの外観&内観を自分の好みにカスタマイズするもののイメージです。

店舗でいうと、ドアノブの色や形を変えるみたいなイメージです。

ブログでこういった自分好みのカスタマイズをする場合、

下記のようなコードと呼ばれる文章をCSS(スタイルシート)に書きます。

そうすると、書いた内容通りの装飾をしてくれます。

.heading-primary{
display:none;
}

※カスタマイズとして記事のタイトルを非表示にする際のCSS(スタイルシート)記入例

テーマやプラグインは1つの製品です。

非常に便利で、バリエーションも豊富です。

ただ、機能として実装されている範囲内でしかカスタマイズできません。

一方、CSS(スタイルシート)は書き方さえ分かれば無限にカスタマイズできます。

でも、初心者にはかなり難しいですし、問題も発生しやすいです。

最悪、元に戻せなくなってブログ自体を作り直しになる可能性もあります。

そのため、私はCSS(スタイルシート)に頼らないブログ作成を推奨しています。

(慣れてくるといろいろ出来るので、いじるのが楽しくなるんですけどね。)

なお、CSSの読み方は「シー・エス・エス」。

正式名称「Cascading Style Sheets」(カスケーディング・スタイルシート)の略語です。

ただ、単純に「スタイルシート」と呼ぶことが多いと思っています。

ちなみに、CSS(スタイルシート)は正確に言うと、ブログが開かれた時に読み込まれるファイルの1つです。

そのため、「CSS(スタイルシート)に書き込む」とは、

「CSS(スタイルシート)のファイルにコード(文章)を入力する」と同じ意味になります。

ヘッダーなどのエリア解説

ブログやサイトで表示される画面はいくつかのエリアに分けられます。

それぞれのエリアがどこなのか知っておくと、ブログの設定で色々いじる際に迷わなくなります。

そして、基本的には下記のエリアを知っておけば十分です。

  • ヘッダー
  • メニュー
  • メインカラム
  • サイドバー
  • フッター

画像でいうと下記の通りですね。

「ヘッダー」はサイトの一番上のエリアで、サイトタイトルなどが表示されます。

「メニュー」はその下で、グローバルメニューといったりもします。

「メインカラム」は投稿したブログ記事が表示されるエリアですね。

トップページだと、基本的に投稿したブログ記事へのリンクが作られていきます。

そして、ブログ記事のページだと記事本文などが表示されるエリアとなります。

「サイドバー」はメインカラムの横に表示されるエリアです。

「フッター」が一番下のエリアとなります。

なお、それぞれのエリアは表示/非表示などが設定で変更できます。

そのため、基本形としてそれぞれのエリアの呼び方を理解してもらえればOKです。