Googleサイトの編集では、コンテンツエリアの背景色はセクション毎に設定できますが、3つのスタイルカラーが基本です。テーマで設定したカラー以外を利用したいケースがちょくちょくありました。そこで、ここで、背景画像と区切り線をダウンロードして利用していただけるようの用意いたしました。
利用方法は、画像を右クリックメニューから「名前を付けて画像を保存」などで取り込んで利用してください。
Microsoft Officeで図形色の選択肢として用意されているカラーからグリーン系・ブルー・イエロー系・レッド系・グレー系を各5色をアップしています。
それぞれのRGBの値を説明に加えましたので、ダウンロード(コピペ)以外にも手元で作成する場合の参考にしてください。なお、サイズはフルHDに近い1980×1020(1080がフル)で作成しています。
グリーン系 R=226,G=239,B=218
グリーン系 R=198,G=224,B=180
グリーン系 R=169,G=208,B=142
ブルー系 R=221,G=235,R=247
ブルー系 R=189,G=215,R=238
ブルー系 R=155,G=194,R=230
イエロー系 R=255,G=242,R=204
イエロー系 R=255,G=230,R=153
イエロー系 R=255,G=217,R=102
レッド系 R=252,G=228,R=214
レッド系 R=248,G=203,R=173
レッド系 R=244,G=176,R=132
グレー系 R=242,G=242,R=242
グレー系 R=217,G=217,R=217
グレー系 R=191,G=191,R=19
イエロー系R=255,G=255,B=153
イエロー系R=255,G=246,B=127
ブラウン系R=203,G=211,B=175
ブラウン系R=197,G=172,B=107
グリーン系R=250,G=255,B=236
グリーン系R=204,G=204,B=102
ブルーR=0,G=117,B=194
グリーンR=0,G=167,B=96
イエローR=255,G=220,B=0
レッドR=232,G=56,B=90
ブラウンR=143,G=100,B=70
グレーR=125,G=125,B=125
グラデーション
ブロック模様
ブラインド模様
テーマ編集の「コンポーネント」でスタイル(セクション)毎に色と太さが5段階に設定できます。
このサイトで設定している3のスタイル(セクション)での区切り線が下図です。
なお、区切り線は独立したセクションのように見えますが、区切り線の上のセクションに属しています。
セクションの色スタイル1の設定、太さは1です。
セクションの色スタイル2の設定、太さは5です。
セクションの色スタイル3の設定、太さは2です。
もう少し太い線もあってはと、区切り線用の画像を作成してみました。幅は背景同様に全て1,200pxで作成しています。幅を10px~50pxの5種類を作ってみました。
下の5つは挿入メニューで「画像」を入れたその状態です。
10px
20px
30px
40px
50px
10pxを12ブロック枠一杯に拡大したものが下図です。ドラッグの拡大縮小の機能でも幅をこれ以上小さくできません。小さくする方法はこの状態で「アンクロップ」です。アンクロップしたものがその下です。
10pxを12ブロック枠一杯に拡大したものが下図です。ドラッグの拡大縮小の機能でも幅をこれ以上小さくできません。小さくする方法はこの状態で「アンクロップ」です。アンクロップしたものがその下です。
同様に50pxを12ブロック枠一杯に拡大したものが下図です。作成サイズにする場合は「アンクロップ」ですが、太くする(拡大)はドラッグで可能です。