公開日: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.」が同じ行に入ってしまい読みにくくなってしまいます。
ここまで設定ができたら「変更を保存」をクリックして設定を保存してレイアウト設定は完了です!
まだまだシンプルですがここから充実させていきます
よく読まれている記事
-
このサイトで過去に「Googleサイトを使ったWEBサイト」の作り方を紹介したことがありました。 GoogleSiteでホームページをつくろう#01:GoogleSiteで簡単にホームページが作れる GoogleSiteでホームページをつくろう#02:GoogleSit...
-
SDGsと騒がれながら、なぜパソコンはどんどん買い替えを迫られるのか?そんなことを日々考えています。挙句の果てにはWin11に対応するため、ちょっと古いパソコンは強制買い替えを迫られ「Windows10が最後っていったじゃん!」という叫びの記事もあります。 ゴニョゴニョして無理や...
-
GAS(GooleAppsScript)でスプレッドシートのデータを表示できました。次に新しいデータを入れられるようにしたいところですが、まずは「リンク」でページの移動をできるようにしましょう。 最初の画面の「追加」ボタンをおすと取引を追加する画面に移動するイメージです。 使うの...
-
GoogleBlogger(ブロガー)でオリジナルホームページを作ろう ------- 再構成した記事もあります: https://mono-kuro-palette.blogspot.com/2020/04/blogger01.html ------- Wor...
-
続いて、カルーセルを設置しましょう。カルーセルとは複数枚の画像を切り替えられるアイテムです。 絶対必要ではありませんが、ホームページのかっこよくするうえではすごく効果があるので、さっそく設置していきましょう! 画像カルーセル
-
最初に基本のアイテムを設置していきます。 Googleサイトにはたくさんのアイテムがありますので、好きなアイテムを設置していいのですが、ここでは基本的なものを紹介していきます。 下準備
-
このページで以前に「Bloggerでオリジナルのホームページを作ろう」という記事を書きましたが、なんとGoogleが無料でホームページを作れるサービスまでやっていました。 あまりメジャーではありませんが(僕は最近まで知らなかった・・・)直感的に構築ができるので、初心者でも簡...
-
サイトの公開ができましたが、どうにもアドレスが気に入らない!もっと短くしてくれないとかっこ悪い! そんな方にはダイナミックDNS(DDNS)に登録してアドレスを貰って、設定をすることで短いアドレスでホームページを開くことができます。 では、実際の操作方法を見ていきまし...
-
今日は、久々のテクニカルなことをやって見ようとおもいます。そう。Instagramにちょいちょい入っている、広告をプレゼンソフトの定番「パワーポイント」で作ってみるというものです。 もちろん、個人的に広告で出すようなものもなければ、外注さんに頼めるほどの仕事もないので「っぽい」と...
-
「 GASでWEBサイトを作れる?実はいろいろできるみたいです 」でGoogleAppsScript(GAS)でWEBサイトが作れることを紹介しました。 せっかくGASを使うのであればデータベースなどにつないでシステムぽいものを作りたくなりますが、見た目がかっこよくないとテン...