連載記事

複数記事に分けて公開したものをシリーズごとに分けています。

子どもとプログラミング Googleサイトの使い方 Aiとプログラミング Aiとイラスト
    公開日:7/03/2018
    シェア:

    Bloggerでオリジナルホームページを作ろう#03:デザインを変更する

      image

    前回。メインになるページが作成できました。今回は、コンテンツの作成から少し離れて、ホームページのデザインを調整していきたいと思います。
    テンプレートのままでも良いのですが、ブログっぽさが残っていますので、これをホームページっぽくしていきます。

    ページのデザインを考える

    なにを作るにしても「設計図」は必要です。コンテンツを早々に作ってしまってはいますが、ここでデザインを決めたいとおもいます。

    ホームページのデザインも時代の流れと共にずいぶん変わってきました。画面の右側にメニューがあって、クリックするとページが移動するものや、点滅や動いたりするテキストに、アクセスカウンターなど懐かしく思う人もいるかと思います。

    凝ったものを作ろうとすると、技術も費用を必要になってしまうので、シンプルで汎用性のあるレイアウトですすめていきます。
    そもそも、ホームページを作る上で大切なのは「見やすさ」と「わかりやすさ」です。どこを押せば必要な情報が出てくるかわからないようなレイアウトでは訪問者が迷子になってしまいます。

    そこで、わかりやすさ優先で、上からヘッダー→メニュー→コンテンツ→フッターと並べて、右側にアクセスなどの基本情報が入るレイアウトにします。

    image

    こんな感じです。では、これに合わせてレイアウトを調整していきましょう。

    Bloggerのテーマを変更する

    Bloggerのレイアウトは管理画面の「レイアウト」からおこないますが、その前に「テーマ」である程度の型を決めましょう。

    image

    ここからいろいろなテンプレートを選ぶことができます。この中から使いやすそうなものを選びたいので「シンプル」の中から白基調のテーマを選びましょう。

    image

    クリックするとプレビューが表示されるので「ブログに適用」をクリックしてテーマを読み込みます。

    image

    「現在非表示のガジェットが表示されるようになる可能性があります」のメッセージがでますが、ガジェットはこの後に調整をするので、無視してOKを推しましょう。

    image

    これでテーマが適応されました。テーマページ一番上のプレビューも変わったと思います。では続いて、カスタマイズをクリックしましょう。

    image

    実はこのテーマ、レイアウの種類も豊富なんです。画面左側の「レイアウト」をクリックするといろいろなレイアウトを確認できます。これだけあると迷ってしまいますが、まずは「ホームページを完成させる」のが目標なので、最初のデザイン案に一番近いレイアウトを選びます。

    image

    選択をしたら画面右上の「ブログに適用」をクリックして更新したら「Bloggerに戻る」を押して、次はガジェット(パーツ)のレイアウトを変えていきましょう。

    image

    Bloggerのレイアウトを変更する

    Bloggerのレイアウトは管理画面の「レイアウト」をクリックしましょう。パーツを編集する画面が表示されるので、上から順に編集をしていきます。

    Navbar

    Navbar

    これは必要がないのでオフにします。編集→オフ→保存の順にクリックをしましょう。

    ヘッダー

    〇〇(Header)

    これはそのまま残しておいて、後で編集をしましょう

    Cross-Column

    ここにメニューをれましょう。「ガジェットを追加」をクリックしてガジェット一覧を表示します。

    image

    その中から「ページ」を探して右側の「+」をクリックします。

    image

    「ページリストを設定」画面が出てくるので、ここでは何も変更せずに「実行」をクリックします。この時点では「ホーム」しかボタンがありませんが、大丈夫です!

    image

    Cross-Column2

    変更なし

    メイン

    ブログの投稿を除いてすべて削除します(編集→削除)

    sideber-riget-1

    すべて削除しましょう
    fotter-1
    変更なし

    フッター

    Attribution

    image

    ここでは記事末の著作権情報を編集します。「編集」をクリックすると「帰属を設定」画面が出るので、著作権の欄に
    Copyright (C) 2018 会社や店名 All Rights Reserved.<br>
    と入力をして「保存」をします。この時、一万最後に<br>を付けるのを忘れないようにしましょう。
    <br>は改行の意味があって、入れないと標準で入る「「シンプル」テーマ. Powered by Blogger.」が同じ行に入ってしまい読みにくくなってしまいます。

    ここまで設定ができたら「変更を保存」をクリックして設定を保存してレイアウト設定は完了です!

    image

    まだまだシンプルですがここから充実させていきます
     

よく読まれている記事