連載記事

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

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

    Bloggerでオリジナルホームページを作ろう#07：デザイン（色）をカスタマイズする

    　 コンテンツが出来上がったら、次はホームページのデザインをカスタマイズしていきます。まだ大きなカスタマイズはしていないので
    image
    こんな感じのシンプルなデザインになっていると思います。白基調でわかりやすいんですが、今ひとつインパクトに欠けますね。そこで、全体的にもう少し色を足していきたいと思います。
    ただ今回は「Bloggerで簡単に作るホームページ」を目指しているので、クリック+少しのキーボード操作で実現できる範囲にしたいと思います。


    Bloggerのデザインはここでカスタマイズ

    Bloggerは管理画面の「テーマ」→「カスタマイズ」から設定することができます。
    image

    「Bloggerテーマデザイナー」が開きます、ここから色やテーマそのものを変更できるようになっています。早速背景の色を変えてみましょう。

    「背景」をクリックすると背景画像を変えたり背景色を変えられるようになります。下にはプレビューも表示されるので、直感的に操作ができると思います。
    「背景画像」をクリックすると背景に画像を入れることもできます
    image

    メインのカラーテーマでは、背景色や文字の色のセットが用意されているので、これを活用すると「不自然な配色」を回避することができます。もし「自分の美的センスで選びたい！」というときにはこの後に説明する「上級者向け」を使います。
    image

    上級者モードでBloggerのデザインを設定する

    上級者向けを選択すると、Bloggerの各パーツの色やフォントなどを一つずつ決めていくことができます。各項目をクリックすると変更できる箇所がマークされるので、色を変えているうちにおかしな箇所まで変更される・・・ということは少ないと思います、
    image

    色の設定が終わったら、何かのトラブルで作業内容が消えないように「ブログに適用」を押しておきましょう。記事を書くとき。操作をするときはこまめに保存をするように心がけましょう。
    image

    超・上級者！CSSを追加する

    ここからは、超上級者といっても過言ではない「CSSの追加」をしてみましょう。CSS（スタイルシート）はWEBページのパーツにどのような装飾をするのかを一括して管理できる便利な機能です。

    例えば、100ページ分の見出しの大きさを変えるときに、一つずつ変更していたら大変で。それを1箇所で定義（決まりをつくっておく）することで、管理がしやすくなります。CSS（スタイルシート）にはいろいろな機能があるのですが、今回は簡単な「見出しの装飾」をしたいとおもいます。

    Bloggerテーマデザイナーの「上級者向け→「CSSの追加」をクリックしてからエディタに次のコードを入れましょう。
    image

    h2 {
         border-left: 5px solid #191970;
         padding-left: 10px;
    }

    （入力するコード）
    入力が終わるとプレビュー画面の「見出し」の部分が変わると思います。
    image

    では、ここで少しコードの解説をしたいと思います。

    h2 {
    見出しはh●で書きます、Bloggerではブログタイトルがh1。記事の大見出しがh2という割り振りになっているようです。
    border-left: 5px solid #191970;・・・見出しの左端（left）に線(boder)を5pxの実線（solid）、色は青（＃191970）で入れますよ、という意味になります。5pxや＃191970を変更すると太さや色が変わります。色の指定はHTMLのカラーコードを使うので、こちらは機会があったら改めて紹介したいと思います。最後の「;」の入力が忘れやすいので注意です。
    padding-left: 10px;
    文字を左端からどれくらい空けるかを指定しています。なくても良いのですが、文字がラインとくっついてしまうので、入れるのがおすすめです。
    }
    h2に対する装飾はここまでですよ。

    このCSS（スタイルシート）はBloggerでなくても流用が効くので、余裕があればぜひ勉強してみると良いかもしれません。


    では、応用編で「小見出し」も装飾してみましょう。小見出しはh3になります。また、左ラインに加えて下ラインをいれて、色は「赤」先の太さも細くします。それを踏まえてコードを書くと
    h3 {
         border-left: 5px solid #ff0000;
         border-bottom: 1px solid #ff0000;
         padding-left: 10px;
         margin: 15px 0 0 0;
    }
    こんな感じになります。新しいコードが2つ出てきました。

    border-bottom: 1px solid #ff0000；
    これは見出しの下線を指定しています。bottomは「下」という意味ですね。
    margin: 15px 0 0 0;
    この部分で周囲のアイテムとの間隔を指定しています。これがないと上下がぴったりくっついて見にくくなるので、上に15pxの余白を設けています。そのあとに0が続いていますが、それぞれ右側0、下側0、左側0の余白にするよ。という意味があります。

    これをh2のコードの下に設置します（下に完成例を入れました）
    h2 {
         border-left: 10px solid #000000;
         padding-left: 10px;
    }
    h3 {
         border-left: 5px solid #ff0000;
         border-bottom: 1px solid #ff0000;
         padding-left: 10px;
         margin: 15px 0 0 0;
    }

    では、これで保存するとどうなるでしょうか？
    「ブログに適応」してからページを見てみましょう。適用後に管理画面に戻るには「Bloggerに戻る」をクリックします。
    image

    見出し部分が装飾されました、ラインが入るだけでもイメージが変わってきますので、少し大変でもぜひ実装してみてください。
    image

    では、次回も引き続きBloggerテーマデザイナーでカスタマイズしていきましょう    　

よく読まれている記事

  • Googleサイトを使って真面目にWEBサイトを作ってみた
    このサイトで過去に「Googleサイトを使ったWEBサイト」の作り方を紹介したことがありました。 GoogleSiteでホームページをつくろう#01：GoogleSiteで簡単にホームページが作れる GoogleSiteでホームページをつくろう#02：GoogleSit...
  • 【古いPC復活】Q4OS 4.12 Trinity (32bit)：懐かしさと軽快さを兼ね備えたLinuxディストリビューション
    SDGsと騒がれながら、なぜパソコンはどんどん買い替えを迫られるのか？そんなことを日々考えています。挙句の果てにはWin11に対応するため、ちょっと古いパソコンは強制買い替えを迫られ「Windows10が最後っていったじゃん！」という叫びの記事もあります。 ゴニョゴニョして無理や...
  • GASで作ったサイトにリンクを入れて移動できるようにする
    GAS（GooleAppsScript）でスプレッドシートのデータを表示できました。次に新しいデータを入れられるようにしたいところですが、まずは「リンク」でページの移動をできるようにしましょう。 最初の画面の「追加」ボタンをおすと取引を追加する画面に移動するイメージです。 使うの...
  • Bloggerでオリジナルホームページを作ろう#01：Bloggerに登録する
    GoogleBlogger（ブロガー）でオリジナルホームページを作ろう ------- 再構成した記事もあります： https://mono-kuro-palette.blogspot.com/2020/04/blogger01.html ------- Wor...
  • (Googleサイト)02.カルーセルを設置する
    続いて、カルーセルを設置しましょう。カルーセルとは複数枚の画像を切り替えられるアイテムです。 絶対必要ではありませんが、ホームページのかっこよくするうえではすごく効果があるので、さっそく設置していきましょう！ 画像カルーセル
  • (Googleサイト)01.下準備とサイト名を設置
    最初に基本のアイテムを設置していきます。 Googleサイトにはたくさんのアイテムがありますので、好きなアイテムを設置していいのですが、ここでは基本的なものを紹介していきます。 下準備
  • インスタによくある広告をパワーポイントで作ってみる
    今日は、久々のテクニカルなことをやって見ようとおもいます。そう。Instagramにちょいちょい入っている、広告をプレゼンソフトの定番「パワーポイント」で作ってみるというものです。 もちろん、個人的に広告で出すようなものもなければ、外注さんに頼めるほどの仕事もないので「っぽい」と...
  • (Googleサイト)11-オリジナルのアドレスで公開する
    サイトの公開ができましたが、どうにもアドレスが気に入らない！もっと短くしてくれないとかっこ悪い！ そんな方にはダイナミックDNS（DDNS）に登録してアドレスを貰って、設定をすることで短いアドレスでホームページを開くことができます。 では、実際の操作方法を見ていきまし...
  • GoogleSiteでホームページをつくろう#01：GoogleSiteで簡単にホームページが作れる
    このページで以前に「Bloggerでオリジナルのホームページを作ろう」という記事を書きましたが、なんとGoogleが無料でホームページを作れるサービスまでやっていました。 あまりメジャーではありませんが（僕は最近まで知らなかった・・・）直感的に構築ができるので、初心者でも簡...
  • (Googleサイト)09-フッターにコピーライトを入れてプレビューで確認
    ホームページづくりも最終段階。最後はフッターにコピーライトを入れてあげます。 コピーライトというのは「写真とかテキストの著作権は私が持っている」ことを証しするもので、書き方や意味などたくさんのサイトで取り上げられています。 ただ、読んでも三者三様だったりしてちょっと...