Bloggerをカスタマイズ

「Blogger®」を紹介します。動機は仕事の関係で商品の問い合わせに対応しますが、電話のみでの説明では不十分と感じてホームページかブログ作成を検討しました。色々なホームページを参考に負担がないこの「Blogger®」を選択しましたが、【https://《your-blog》 .blogspot.com】の 部分の文字数が多くなり、Domainを取得しました。出費が発生したので「GoogleのAdSense®」に申込み「サイトの審査には最大で 3 日間かかります....」中です。
このブログの「Bloggerテンプレート」は「BlogZinレスポンシブなBloggerテンプレート」からチョイスしましたが、案内に「このテンプレートからクレジットを削除する必要がある場合は、このテンプレートのライセンスを取得する必要があります」と表示があり、メニューバーから「Download Standard 」が削除ができません。リンク切れにしたくないので、約1年足らずの経験ですが、「Bloggerをカスタマイズ 」をテーマに私が難しいと感じたところを紹介します。
「Official Blogger Blog」に「独自のスタイルを新しいBloggerテーマと共有する」が掲載されていますので、これを「カスタマイズ」していきたいと思います。
ブログの色合いは完全にカスタマイズ可能です。背景の写真イメージは提供されている中から選定する又は「なし」、オリジナルの写真イメージはアップロードが可能ですが、「HTML」で直接修正も可能必要です。また、表(テーブル)等の配置は「CSS」の追加が必要で、凝った作りしたい場合は「JQuery」の埋め込みが必要なようです。
第一歩は「ブログの色合い」です(Google プロダクトのスクリーンショットやデータを使用する場合に準じて43ショットの掲載)。

Googleのアカウントについて

Bloggerのサービスに申し込むには「Googleのアカウント」が必要です。将来、「GoogleのAdSense®」とお考えの場合は同一のアカウントを利用した方が良いでしょう(新たに取得する場合その点の考慮が必要ですが取得方法は割愛します)。

ブログを作成します

左のスクリーンショットが「ダッシュボード」となります。新規の「Googleのアカウント」の場合は「プロフィール」の入力を促され、「Bloggerに移動」します。左メニュー上部に{ようこそ}とあり、「新しいブログ」をクリックします。スクリーンショットを見ると作成済みのブログも表示しています。現行のブログの更新または新規・削除等はこの「ダッシュボード」が起点となります。

テーマを選定します


タイトルは自由です。興味を引くタイトルにしましょう。
アドレスは「https:// 《your-blog》 .blogspot.com」の「your-blog名」のみを入力すると「blogspot.com」が付加された文字列が表示します。「Blogger®」内で重複がなければ、「このブログアドレスは使用できます」とレ点が表示されます。テーマは後から変更できますので{ブログを作成}をクリックします。

作成したブログの確認


左メニュー欄に「ブログのタイトル」が表示されましたか。

左メニュー欄の「テーマ」をクリックします。新規登録したテーマがそのまま表示されます。
ここで、テーマの変更が可能です。テーマの変更または修正しても、投稿及びページの内容は一切変わりません。テーマ自体を修正した場合はバックアップファイルで戻すほかありませんので、こまめにバックアップします。

テーマの変更


使用するテーマの選定は「表題」・「背景の写真イメージの表示」・「サイドメニュー」・「メインメニュー」等で、例えば、「サイドメニュー」が右か左または両方かな、両方に配置すると本文(投稿・ページ欄)が狭くなります。こんな点を大まかに考慮しながら作成するブログに合っているかで判断します(ガジェットを追加・削除の操作でブログのデザインは変化します)。
ガジェットとはブログにブログラベルの一覧やプロフィールなどのアーカイブを表示させる便利な機能のこと(Google アカウントで利用できるサードパーティ製のあります)
上部左側に表示されているのが使用中のテーマです。すぐ横のテーマを選択(クリック)すると下部に選択されたテーマが表示されます。背景の写真イメージは変更が可能ですので、使いたい画像イメージを膨らしながら選びます。背景の写真イメージは自身のオリジナルのものか、著作権フリーの写真等を使います。
インターネットで「フリー画像」とググるとヒットしますが、「フリー画像」の中には著作権を放棄していないものもあります。使う場合は画像個々の著作権をよく読んで利用することをお勧めします。

テーマの確認


「bloggerテーマデザイナー」は上段(操作部)と下段(表示部)の2段構成になっています。仕切り線にカーソルを当てると「黄色」へ変化します。クリックすると全面表示となります。逆の操作は仕切り線が画面の上になりますので、カーソルを当ててクリックします。

背景をカスタマイズ

背景画像にカーソルを当てる

クリックすると提供されている「背景画像」が表示します。
「垂直スクロールバー」の上にあるアイコンをクリックすると一覧されます。
逆の操作は「垂直スクロールバー」が非表示となりましたが上にあるアイコンをクリックすると画面が戻ります。

オリジナル画像のアップロード

【画像のアップロード】をクリックします。

{ファイルを選択}をクリックします。
この画面はパソコン上のフォルダを選択した状態です。あなたがアップロードしたい画像(ファイル)の保存先を指定してください。パソコンの環境設定にもよりますが、カーソルを当てるとファイルのプロパティが表示されます。表示しない方はファルダ内の表示は右クリックして「プロパティ」の表示>>アイコン表示の{○アイコン}を選択しておくと便利です。(詳細の場合は画像表示ではなくアイコンですので、ファイル名を覚えておきます)該当ファイルを選択し{開く}をクリックします(ファイルの大きさは300KBまで、フリー画像を使う場合は予めデスクトップ等にダウンロードしておきます)。
背景画像にしたいファイルを選択(クリック)して、{開く}をクリックするとアップロードが始まります。

アップした背景画像がイメージと合わない場合は、この操作を繰り返します。なお、背景画像は切り替わりますがアップした画像はサーバーに残ります。
{配置}をクリックすると表示する箇所が変わります。

ブログの色合いをカスタマイズ(背景画像は変えました)

使用する背景画像が決まったら、いよいよブログの色合いのカスタマイズです。
お勧めのテーマの色を選択して、メインのカラーテーマをクリックします。
ウィンドウが開き、色の補正が調整できます。

背景画像の下部(メインカラー)の色彩がクリックにより修正されます。

テキスト(前景色)のカスタマイズ

【上級者向け】のページのテキストをクリックします。

色調補正は{メインカラー}の修正と同じ操作です。

背景画像の高さ(占める割合)を調整

背景の高さ(480ピクセル)→最大(640ピクセル)へ変更しました。

背景のぼかしを調整

背景のぼかし(0ピクセル)→ちょっぴり(15ピクセル)へ変更しました。

本文の背景色を調整

{本文の背景色}のパレットをクリックします。

投稿の背景色を調整

{投稿の背景色}のパレットをクリックします。

リンクの色調整

リンク先のタグ文を設定したときの色調整です。{リンクの色}ブルーが多いです・{表示済みリンクの色}赤みのかかったブルーが多いです・{Link Hover color}カーソルが乗ったときの色変化ですが、最近は全体のイメージが崩れないように同色を使っているようです。

リンク先が設定している{プロフィールにアクセス}の色を淡いグリーンを選択する。

ブログタイトルの色調整

{ブログタイトル}をクリックします。{色}パレットの色を好みで選択(クリック)します。

背景のアイコンの色調整

{ブログタイトル}をクリックします。{背景のアイコンの色}パレットの色を好みで選択(クリック)します。ブログタイトルの右上、白色の「アイコン:虫めがね」が赤色に変化しました。

投稿のテキストの色

左メニュー{投稿}をクリックします。{投稿のテキストの色}を変化させましたが、このメニューで「各フォント」の設定が可能です。

投稿者のプロフィール


ラベル


attribution


著作権法における帰属の表示です。配色により目立たなくすることもできますか

その他の左メニュー画面

投稿の量が増えて、気になるようになったら色合いを調整しましょう。
{検索}
{共有}
{サイドバー}
{閲覧が多い投稿}
{投稿のナビゲーション}

コメント

このブログの人気の投稿

ひかり電話対応ルーター<ホームゲートウェイ>の設定

OG400X下部のルータでIPv6を利用する

事業所向けIP電話の装置