公開日：7/03/2018
シェア：Tweet
前回。メインになるページが作成できました。今回は、コンテンツの作成から少し離れて、ホームページのデザインを調整していきたいと思います。
テンプレートのままでも良いのですが、ブログっぽさが残っていますので、これをホームページっぽくしていきます。
ホームページのデザインも時代の流れと共にずいぶん変わってきました。画面の右側にメニューがあって、クリックするとページが移動するものや、点滅や動いたりするテキストに、アクセスカウンターなど懐かしく思う人もいるかと思います。
凝ったものを作ろうとすると、技術も費用を必要になってしまうので、シンプルで汎用性のあるレイアウトですすめていきます。
そもそも、ホームページを作る上で大切なのは「見やすさ」と「わかりやすさ」です。どこを押せば必要な情報が出てくるかわからないようなレイアウトでは訪問者が迷子になってしまいます。
そこで、わかりやすさ優先で、上からヘッダー→メニュー→コンテンツ→フッターと並べて、右側にアクセスなどの基本情報が入るレイアウトにします。
こんな感じです。では、これに合わせてレイアウトを調整していきましょう。
ここからいろいろなテンプレートを選ぶことができます。この中から使いやすそうなものを選びたいので「シンプル」の中から白基調のテーマを選びましょう。
クリックするとプレビューが表示されるので「ブログに適用」をクリックしてテーマを読み込みます。
「現在非表示のガジェットが表示されるようになる可能性があります」のメッセージがでますが、ガジェットはこの後に調整をするので、無視してOKを推しましょう。
これでテーマが適応されました。テーマページ一番上のプレビューも変わったと思います。では続いて、カスタマイズをクリックしましょう。
実はこのテーマ、レイアウの種類も豊富なんです。画面左側の「レイアウト」をクリックするといろいろなレイアウトを確認できます。これだけあると迷ってしまいますが、まずは「ホームページを完成させる」のが目標なので、最初のデザイン案に一番近いレイアウトを選びます。
選択をしたら画面右上の「ブログに適用」をクリックして更新したら「Bloggerに戻る」を押して、次はガジェット（パーツ）のレイアウトを変えていきましょう。
その中から「ページ」を探して右側の「＋」をクリックします。
「ページリストを設定」画面が出てくるので、ここでは何も変更せずに「実行」をクリックします。この時点では「ホーム」しかボタンがありませんが、大丈夫です！
fotter-1
変更なし
ここでは記事末の著作権情報を編集します。「編集」をクリックすると「帰属を設定」画面が出るので、著作権の欄に
Copyright (C) 2018 会社や店名 All Rights Reserved.<br>
と入力をして「保存」をします。この時、一万最後に<br>を付けるのを忘れないようにしましょう。
<br>は改行の意味があって、入れないと標準で入る「「シンプル」テーマ. Powered by Blogger.」が同じ行に入ってしまい読みにくくなってしまいます。
ここまで設定ができたら「変更を保存」をクリックして設定を保存してレイアウト設定は完了です！
まだまだシンプルですがここから充実させていきます
シェア：Tweet
Bloggerでオリジナルホームページを作ろう#03：デザインを変更する
前回。メインになるページが作成できました。今回は、コンテンツの作成から少し離れて、ホームページのデザインを調整していきたいと思います。
テンプレートのままでも良いのですが、ブログっぽさが残っていますので、これをホームページっぽくしていきます。
ページのデザインを考える
なにを作るにしても「設計図」は必要です。コンテンツを早々に作ってしまってはいますが、ここでデザインを決めたいとおもいます。ホームページのデザインも時代の流れと共にずいぶん変わってきました。画面の右側にメニューがあって、クリックするとページが移動するものや、点滅や動いたりするテキストに、アクセスカウンターなど懐かしく思う人もいるかと思います。
凝ったものを作ろうとすると、技術も費用を必要になってしまうので、シンプルで汎用性のあるレイアウトですすめていきます。
そもそも、ホームページを作る上で大切なのは「見やすさ」と「わかりやすさ」です。どこを押せば必要な情報が出てくるかわからないようなレイアウトでは訪問者が迷子になってしまいます。
そこで、わかりやすさ優先で、上からヘッダー→メニュー→コンテンツ→フッターと並べて、右側にアクセスなどの基本情報が入るレイアウトにします。
こんな感じです。では、これに合わせてレイアウトを調整していきましょう。
Bloggerのテーマを変更する
Bloggerのレイアウトは管理画面の「レイアウト」からおこないますが、その前に「テーマ」である程度の型を決めましょう。ここからいろいろなテンプレートを選ぶことができます。この中から使いやすそうなものを選びたいので「シンプル」の中から白基調のテーマを選びましょう。
クリックするとプレビューが表示されるので「ブログに適用」をクリックしてテーマを読み込みます。
「現在非表示のガジェットが表示されるようになる可能性があります」のメッセージがでますが、ガジェットはこの後に調整をするので、無視してOKを推しましょう。
これでテーマが適応されました。テーマページ一番上のプレビューも変わったと思います。では続いて、カスタマイズをクリックしましょう。
実はこのテーマ、レイアウの種類も豊富なんです。画面左側の「レイアウト」をクリックするといろいろなレイアウトを確認できます。これだけあると迷ってしまいますが、まずは「ホームページを完成させる」のが目標なので、最初のデザイン案に一番近いレイアウトを選びます。
選択をしたら画面右上の「ブログに適用」をクリックして更新したら「Bloggerに戻る」を押して、次はガジェット（パーツ）のレイアウトを変えていきましょう。
Bloggerのレイアウトを変更する
Bloggerのレイアウトは管理画面の「レイアウト」をクリックしましょう。パーツを編集する画面が表示されるので、上から順に編集をしていきます。Navbar
Navbar
これは必要がないのでオフにします。編集→オフ→保存の順にクリックをしましょう。ヘッダー
〇〇（Header）
これはそのまま残しておいて、後で編集をしましょうCross-Column
ここにメニューをれましょう。「ガジェットを追加」をクリックしてガジェット一覧を表示します。その中から「ページ」を探して右側の「＋」をクリックします。
「ページリストを設定」画面が出てくるので、ここでは何も変更せずに「実行」をクリックします。この時点では「ホーム」しかボタンがありませんが、大丈夫です！
Cross-Column2
変更なしメイン
ブログの投稿を除いてすべて削除します（編集→削除）sideber-riget-1
すべて削除しましょうfotter-1
変更なし
フッター
Attribution
ここでは記事末の著作権情報を編集します。「編集」をクリックすると「帰属を設定」画面が出るので、著作権の欄に
Copyright (C) 2018 会社や店名 All Rights Reserved.<br>
と入力をして「保存」をします。この時、一万最後に<br>を付けるのを忘れないようにしましょう。
<br>は改行の意味があって、入れないと標準で入る「「シンプル」テーマ. Powered by Blogger.」が同じ行に入ってしまい読みにくくなってしまいます。
ここまで設定ができたら「変更を保存」をクリックして設定を保存してレイアウト設定は完了です！
まだまだシンプルですがここから充実させていきます