2019年1月30日水曜日

Bloggerのテーマのカスタマイズ =テキスト設定=


Bloggerのテーマのカスタマイズ


Bloggerのテーマをロディアのブロックメモ風にカスタマイズするための手順について、今回はテキストの各種指定の方法を紹介します。ただし、htmlやcssについてはほぼ初心者で、内容はWeb上にある指南記事の寄せ集めなので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あるかと思いますが、そのあたりはどうかご容赦ください。


1. 記事テキストのフォントの色・種類・サイズの変更


管理画面の左のメニューから、テーマ ⇒ カスタマイズ ⇒ Bloggerテーマデザイナー ⇒ 上級者向け ⇒ ページのテキストと選択することでテキストのフォント種類・フォントサイズ・テキストカラーを指定できるようになります。変更の結果は画面下にプレビューされるので、確認しながら選択すると良いでしょう。


フォントの変更


上の画像で見られるように初期設定では『字が小さすぎて読めない!(渡辺謙)』状態だったのでフォントサイズを16pxと少し大きくしました。

フォントの変更


2. テーマデザイナーにないフォントの使用


記事テキストでテーマデザイナーにないフォントを使用したり、フォントサイズを細かく指定するにはhtmlを書き換える必要があります。管理画面左のメニューからテーマ ⇒ HTMLの編集を選ぶとhtml編集画面が表示されるので、最近流行りの游ゴシックやメイリオを使用する場合には、20行目あたりにあるvalue=の後ろにフォント名を書き加えます。同時に同じところでフォントサイズも指定できます。
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px '游ゴシック',メイリオ,Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
プレビューで指定通りにフォントが変更されているのを確認した後、更新で保存します。(※注)保存後、'游ゴシック'と入力したものは自動的に&#39;游ゴシック&#39;に書き換えられます。


3. 記事テキストの行間の指定


Bloggerの初期設定の行間は日本語表記には詰まりすぎているように思います。個人的好みで言えば、行間を指定するline-heightの値は1.6から1.8くらいが読みやすいのではないかと思います。400行目前後のline-heightの値を書き換えることで、記事テキストの行間を変更できます。
  font-size: 110%;
  /* 行間変更 */
   line-height: 1.75;
  position: relative;
}

4. 見出しのデザイン


Bloggerの記事作成画面で指定できるのは見出し・小見出し・準見出しの3種類で、それぞれ<h2>、<h3>、<h4>に対応しています。このうち小見出しは記事タイトルにも使われています。

見出しのデザイン


初期設定のままでは、テキストのサイズが大きくなって、太字になるだけなので視認性的にもイマイチなので少しデザインを変えてみましょう。見出しのデザインは「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」が参考になると思います。

まず、上のサイトにあるデザインの中の「下線」と「左線」を組み合わせて、下のようなコードを作成します。次に、管理画面左のメニューからテーマ ⇒ HTMLの編集を選ぶとhtml編集画面が表示されるので、240行目あたり、コンテンツの最後の部分に書き加えます。
h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 15px #7db4e6;/*左線*/
  border-bottom: solid 3px #7db4e6;/*線の種類(実線)*/
}

h4 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 10px #7db4e6;/*左線*/
  border-bottom: solid 3px #7db4e6;/*線の種類(実線)*/
}
結果は下のようになります。

見出しのデザイン


5. 変更の確認と保存


「テーマをプレビュー」でテキストが指定したとおりに表示されているのを確認した後、「テーマを保存」する。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認する。

6. テーマのバックアップ


ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ/復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。

テーマのバックアップ



Bloggerのテーマのカスタマイズ =コンテンツ編集=


Bloggerのテーマのカスタマイズ


Bloggerのテーマをロディアのブロックメモ風にカスタマイズするための手順について、今回はコンテンツ領域の背景画像の設定の方法を紹介します。ただし、htmlやcssについてはほぼ初心者で、内容はWeb上にある指南記事の寄せ集めなので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あるかと思いますが、そのあたりはどうかご容赦ください。


1. 背景画像のアップロード


Bloggerには他のブログにあるような画像アップロードの機能がありません。そのため、背景に使用する画像を記事中にアップロードし、そのURLを取得する必要があります。

まず、管理画面から新しい投稿で記事作成画面に移り、画像の追加 ⇒ アップロードで背景画像をアップロードします。次に、もう一度画像の追加を選び、「このブログから」で表示される画像の中から先程アップロードした背景画像を右クリックするといくつかの選択肢が表示されるので、その中から画像アドレスをコピーを選択します。コピーしたアドレスは一旦メモ帳などに保存しておきます。管理画面に戻り、記事を削除するのですが、記事を削除しても記事中にアップロードした画像までは削除されないので大丈夫です。

背景画像のアップロード


2. htmlの編集


管理画面からブログ画面下の「htmlの編集」を選び、html編集画面に移行する。htmlの170行目あたりにある
/* Content
----------------------------------------------- */
の最後の部分に背景画像の設定コードを下のように書き加えます。
background-color: $(content.background.color); 
/* コンテンツに背景画像を設定 */ 
 background-image: url("ここに背景画像のURL"); 
}

3. 変更の確認と保存


「テーマをプレビュー」でコンテンツ部分に背景画像が表示されているのを確認した後、「テーマを保存」する。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認します。

4. テーマのバックアップ


ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ/復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。

テーマのバックアップ




Bloggerのテーマのカスタマイズ = ヘッダー編集 =


Bloggerのテーマのカスタマイズ


このブログの見た目をロディアのブロックメモ風にカスタマイズすることに挑戦してみました。ただし、htmlやcssについての知識はほとんどないので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あると思いますが、そのあたりはどうかご容赦ください。


1. 初期画面


テーマは「SIMPLE」を選択します。いくつかのダミー記事とプロフィールを登録しただけの初期画面はこんな感じになります。

初期画面


2. ヘッダーの背景色の設定


まず、ヘッダー部分の背景色をBloggerテーマデザイナーを使ってロディアカラーであるオレンジに変更します。このBloggerテーマデザイナーというのは基本テーマの背景、レイアウト、色、フォントなどを視覚的にカスタマイズできる便利なツールです。

管理画面の左のメニューから、テーマ ⇒ カスタマイズ ⇒ Bloggerテーマデザイナー ⇒ 上級者向け ⇒ 背景 ⇒ ヘッダーの背景と選択して、背景色を設定します。下の画面で背景色を確認した後、右上の「Bloggerに戻る」で管理画面に戻ります。

ヘッダーの背景色の設定


3. タイトルを画像に変更


次に、ブログのタイトルを事前にドローイングソフトなどで作成した画像に変更します。管理画面からレイアウトを選択するとブログのガジェットの追加、削除、編集を行うことができる編集画面が表示されるので、ヘッダーの右下の編集をクリックします。

ヘッダーの編集ウィンドウが開くので、イメージの「コンピュータからファイルの選択」で予め作成しておいた画像を指定します。表示される画像を確認した後、「説明を画像の後ろに表示する」を選び、左下の保存で設定終了です。

タイトル画像のアップロード


レイアウト画面右上の「配置を保存」をクリックし、管理画面に戻った後、左のメニューの上にある「ブログを表示」で変更を確認します。

タイトルを画像に変更


4. タイトルと説明の中央揃え


タイトルの中央揃えはBloggerテーマデザイナーではできません。従って、直接htmlを書き換える必要があります。管理画面のテーマからブログ画面の下の「カスタマイズ」の右にある「htmlの編集」をクリックするとhtml編集画面が表示されるので、htmlに以下の赤色部分のコードを書き加えます。ついでにタイトル画像の上が詰まっていてバランスが良くないのを解消するために上に余白も挿入しました。

html編集画面


350行目あたり
.header-outer { 
 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; 
/* Header画像の上に余白を挿入 */
 padding-top: 20px; 

/* Header画像を中央揃え */ 
.Header img{ 
 margin:auto; 
}   
370行目あたり
.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
/* Header説明を中央揃え */
  text-align: center;
}


5. 変更の確認と保存


「テーマをプレビュー」でタイトル画像と説明が中央揃えになっているのを確認した後、「テーマを保存」します。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認して完了です。

タイトル画像の中央揃え


6. テーマのバックアップ


ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ/復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。

テーマのバックアップ