主なカスタマイズは以下のとおり。
・文字サイズを変更
・画像に枠をつける
・ 閲覧済みページヘのリンク色を標準的な紫色に変更
・Google検索結果に表示されるページタイトルを変更
CSS記述により見た目を変更
このブログには、Bloggerの標準的なテンプレートを使っています。ブログ作成時に選べるテンプレートのサンプルから、一番しっくり来た青色ベースのテンプレートを選びました。ネット上に数多くあるテンプレートからお気に入りのデザインを探して使うのは、時間がかかるし面倒です。また、野良のテンプレートなどを拾って使うと、不具合の原因になるかもしれません。
そういった理由から、Blogger公式のテンプレートから選んだのですが、導入した際に2ヶ所ほど気になる部分がありました。
記事ごとに文字サイズや色を変えることもできますが、すべての記事が同じデザインになるようにくり返し作業するのは見落としがありそうですし面倒です。
そこで、テンプレート側を書き換えて、過去と未来すべての記事のデザインをまとめて変えることにします。
幸いにもBloggerはCSSによるテンプレートの部分改造が可能だったため、ブログのデザインを手軽に変更することができます。
「CSSを追加」の開き方
Bloggerでブログの管理ページに入り、左側のリストの下の方にあるテンプレートからページを開きます。「ブログで使用中」テンプレート下のカスタマイズをクリックすると「Blogger テンプレート デザイナー」が開きます。
上級者向けの項目を下へドラッグしていくと１番下にCSSを追加があります。ここに、デザインの変更をCSSで書きこみ、「ブログへ適応」ボタンを押せば、すべてのブログ記事の見た目が変化します。
(スクリーンショットは、わかりやすいよう一部加工してあります)
CSS追加までの大まかな手順
・見た目を変えたい部分を指定できる タグ/class/id を特定する。・変えたい部分とどのように変えるかを、CSSとして書く。
・Bloggerの「Blogger テンプレートデザイナー」に、自分の書いたCSSを追加する。
デザインを変えたい部分の タグ/class/id を特定するためには、公開orプレビューしているブログ記事のhtmlソースを読む必要があります。
htmlソースを見るためには、Webブラウザで記事のページを見ながらCtrl+Uを押します。
出てきたhtmlソースの中で検索(Ctrl+F)を行えば、デザインを変えたい部分を効率よく探せます。
今回の設定は、最低限の作業で見やすくなるように文字サイズを変更しただけですが、CSSを追記すれば、文字色の変更や、文字枠・下線・影の追加による装飾も可能です。
HTMLの読み方・CSSの書き方については、google検索すればいくらでもサイトが出てくるので、それらを参考にすると良いと思います。
実際に追加したCSS
H2{font-size: x-large;
}
.date-header{
font-size: small;
}
img{
padding: 10px;
border: 5px;
border-style: groove;
color: #66ccff;
}
a:visited {
color:#551A8B;
}
・変更点1： 見出しのサイズが小さすぎた。
記事の区切りがわかりやすくなるよう、見出しの文字を大きく表示することにしました。見出しはH2要素(タグ)なので、文字サイズをx-largeへ変更。
・変更点2： 日時が大きく表示されていた。
重要性が低い部分なので、あまり目立たないように小さく表示することにしました。(例：「2013年5月23日木曜日」などの日付が、タイトルと同じくらいのサイズで表示されていた)
日時はdate-headerクラスなので、文字サイズをsmallへ変更。
変更点3:記事内の画像に枠がついていない
白の多い画像を白い背景で表示すると、どこまでが画像なのかわかりません。
かといって、すべての画像に手作業で枠をつけるのは大変なので、CSSで一括設定することにします。
img{
padding: 10px;
border: 5px;
border-style: groove;
color: #66ccff;
}
変更点4:閲覧済みページヘのリンク色を標準的な紫色に変える
リンク色が青色なのは、テーマに合っていますし、標準的なリンク色も青系なので良いのですが。閲覧済みページヘのリンクが薄い青になるのは、白背景のテンプレートでは読みづらいので、いただけないデザインだと思います。
a:visited {
color:#551A8B;
}
検索で出てくるブログタイトルを変更
検索結果に表示されるブログタイトルの変更方法は以下のリンクに書かれていますが、書かれた通りの方法と少し違っていて、書き換える箇所が"data:blog.pagetitle"に変わっています。Bloggerって、Google検索で出てくるブログタイトルを記事名にする方法といい、それなりにカスタマイズの余地が残っている気がします。(ブログタイトルは、最近では検索エンジンが勝手にタイトルを付け直す場合もあるそうですが。)
Bloggerの英文URLについてのTIPS
記事の本題とまったく無関係ですが。Bloggerは日本語記事名で投稿すると、記事URLに反映されません。
わたしは、記事URLが英文になるようにしています。Analyticsが見やすくなるので。
方法としては、投稿時に英語のタイトルをつけて、投稿後に編集して記事名を日本語に変えています。
日本語記事名は記事を書いている途中に考えているので、末尾に付与しています。
記事名の例：
「-gimp28 starry sky allocation purpose- GIMP2.8で星空を描く」
といった感じです。
URLは「http://blog.michinari-nukazawa.com/2013/08/gimp28-starry-sky-allocation-purpose.html」になりました。
"_"を入れるとどうなるか実験したのですが、アンダーバーはURLになる際に詰められてしまうようです。
0 件のコメント:
コメントを投稿