【悲報】Bloggerテンプレート壊したから初期化したよ! と思ったら壊れてなかた…orz

Bloggerのカスタマイズを~~遊んでいる~~頑張っているつきよみです。

先日、SyntaxHighlighterを導入しようと思ってJavaSciprtのコードを直接BloggerのHTMLの編集画面で書いていたら、なんだか文字化けのような状況に遭遇したんです。カスタマイズのコードにダブルクォート(“)があったんですね。で、保存してコードを見直してみたらなんとエスケープされて”"”になってるじゃありませんか!

えええっ、HTMLテンプレート、壊しちゃった?!?! (((( ；゜o゜)))) ガクブル

やばい、早く直さないと。バックアップどこだっけ。あっ、とりかたあとで調べよっとか思ってまだとってなかったな。うわ、どうしよ。HTMLテンプレートの初期化ってどうやるんだっけ? うわ、初期化したのにまだ”"”残ってる… どうしよどうしよ。

そうです。バックアップ取ってない、戻し方知らないで、大パニック!! (´；ω；｀) ブワッ

テスト用のブログを作って調べてみたところ、なんと、BloggerのHTMLの編集画面ではダブルクォートはエスケープされてて”"”になってるものなんですね。今まで自分が必要なところしかみてなかったから、全然気づきませんでした。壊したと思ったテンプレート、壊れてなかった…さすがGoogle…

というわけで。いっその事テンプレートも変更して、またきれいな画面になるまでの経緯を書いてみよう、というのが今回の記事です。修復過程の記事を生でアップデートしていきたいと思います。

どうしたいかな?

前回までのカスタマイズ内容を新しいテンプレートに対して実施していきたいと思います。なお、ちょくちょく設定値等は変えてみようと思います。

やってみよう

テンプレートを選ぶ

青基調なのは変わりませんが、今回は緑が多いものを選んでみました。前よりいい感じです。

[時刻: 21:15]

[検討] 全体的なレイアウト

わりと技術系的なサイトにしたいので、Qiitaなどを参考に決めていきたいと思います。いいなと思った特徴は下記の通り。

ヘッダ部分が小さく、すぐに記事にたどりつける
記事タイトルが大きい
投稿者、カテゴリ、投稿日がはっきりわかる。
記事本文の横幅がひろい。またフォントや行間が洗練されていて読みやすい
目次ウィジェットがかっこいい
記事本文のフォントがきれい

ほんと、いいですね、Qiita。おんなじとは言わないまでも、読みやすさは確保できるように頑張っていきましよう。

[時刻: 21:35] - ご休憩 - [時刻: 21:40]

テンプレートの初期状態と比べてみると、どこをカスタマイズしたいか見えてきます。

タイトルが大きいのでもっと小さく。また余白を小さくする
説明文も大きく場所を取るので、プロフィールの近くなど、右サイドバーに移動
記事タイトルが小さいのでもっと目立つように
投稿日時、ラベルをタイトル付近に

ではぐぐりながらやっていきます。

[実践] タイトルの大きさ

タイトルのフォントの大きさは、「テンプレート」→「上級者向け」→【ブログのタイトル」で変更できます。36pxから24pxに変更します。位置の変更は…っと、ここでバックアップをとっておくのを忘れていました! 今のうちに一度バックアップをとっておきましょう。

[時刻: 21:50]

[絶対!] HTMLテンプレートのバックアップ

管理画面の右上にある「バックアップと復元」ボタンを押し、「テンプレートのダウンロード」ボタンを押します。すると”template-(数字の羅列).xml”というファイルがダウンロードできます。このままだとどのファイルがなんのためのバックアップかわからなくなるので、今回は”template-(数字の羅列)-InisialBackup.xml”という名前に変更して、バックアップを保管しておくフォルダに入れておきます。ふー、危うくバックアップ忘れるところだった…

[時刻: 21:58]

[実践] タイトルの位置の変更

タイトルの位置の変更といっても、他のパーツとの位置関係はそのままです。もっと上に寄せたい感じです。位置を決める要素をChromeで調べたところ、下記が関係しているみたいです。「上級者向け」→「CSSを追加」で以下のCSSを追加します。

クラス content-outer の margin-top
ID header-inner 配下のクラス titlewrapper の padding-top

/* User Customize
----------------------------------------------- */
/* Title position
----------------------------------------------- */
.content-outer {
 margin-top: 0px;
}
#header-inner > .titlewrapper {
 padding-top: 0px;
}

思った通りのいい感じになってきました。

[時刻: 22:30]

[実施] 説明の大きさと位置

説明の大きさはクラス description 配下の span タグにスタイル指定することでできそうです。下記CSSを追加します。

/* Description
----------------------------------------------- */
.description > span {
 font-size: 14px;
}

しかし、位置はBloggerの標準の設定機能で右サイドバーに移動することは難しそうです。なので一時的に表示しないようにしてみます。この部分はタグ div のクラス descriptionwrapper なので下記CSSを追記します。

/* Undisplay Description
----------------------------------------------- */
.descriptionwrapper {
 display: none;
}

ちゃんと説明が消えて、スッキリしたヘッダーになってきました。

[時刻: 22:50]

これなら説明文の配置はブログタイトル右側にあってもよさそうです。右寄せで置くことができれば一番ですね。さっきの説明文を非表示にする記述を消して、以下をCSSに追記します。

/* Description
----------------------------------------------- */
.description > span {
 font-size: 14px;
}
.titlewrapper {
 float: left;
}
.descriptionwrapper {
 width: 70%;
 margin-left: auto;
 margin-bottom: 5px !important;
}
.description {
 text-align: right;
 margin-bottom: 0px !important;
}

かなりいい感じになりました! タイトルと説明はこれくらいにしておきましょう。

[時刻: 23:14]

[実施] 本文、その他の横幅

これは全面的にQiitaを参考にさせていただきました。本文部分850px、右サイドバー270px、その隙間は20pxでした (2017-01-30現在)。
幅はBloggerの「テンプレート」→「幅を調整」で設定できます。ブログ全体を1180px、右側のサイドバーを270pxに設定します。Bloggerの画面を確認すると、少し本文と右サイドバーの間が広く見えます。また、画面の幅を小さくしても本文の横幅が変わらず、読みづらいです。

ここではまりました。Bloggerでは、本文幅をウィンドウサイズに合わせて自動的に変えるのってけっこう大変なんですね。 誰かがやっているだろうと思ってぐぐってもあまり良くわからなかったし、CSSでのやりかたも説明があったんですが、なかなか難解。

で、色々考えて次のようにしたいと思いました。

一番上のナビゲーションバーはウィンドウサイズに合わせて表示
ブログタイトルから下は最大幅1180pxでセンタリング表示
本文部分はウィンドウサイズに合わせて幅が自動的に変わる
右サイドバーは画面ちっちゃくなったら見えなくなる

これを実現するCSSが以下。

/* Control Page Overview
----------------------------------------------- */
body {
 min-width: 0 !important;
 width: 100%;
}
.content {
 max-width: 1180px !important;
 min-width: 0 !important;
 margin: 0 auto;
}
.content-outer {
 min-width: 0 !important;
}
.columns {
 padding-right: 0px !important;
}
.region-inner {
 max-width: 1180px !important;
 margin: 0;
}
/* Content position
----------------------------------------------- */
.main-inner {
 max-width: 850px !important;
 margin: 0;
}

うっひゃー、きっつー! これはけっこう大変でした… しかもChromeでしかちゃんと見える気しません… と思ってFirefoxで確認してみたら、なんとかちゃんと見れるようでした。

[時刻: 01:38]

[実施] 記事本文のフォントと行間

次は記事本文のフォントです。実は別のマシンのFirefoxで自分のブログを見たときに、あれ? フォント汚い? と思っていたので、ちゃんとフォントを設定してみたいと思います。Macは持っていないので未確認です。

参考サイトではダブルクォートが使われていたので、そのままBloggerの画面に張り込むと後で見ると実体参照に変換されてわかりにくくなるかもしれません。シングルクォートに変えて使わせていただきました。また游ゴシック体を削除し、メイリを使うように変更しました。

あと、フォントサイズが少し小さいので大きく、それに合わせて行間をマシマシしています。

/* Font family
----------------------------------------------- */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
body {
font-family:Avenir , 'Open Sans' , 'Helvetica Neue' , Helvetica , Arial , Verdana , Roboto , 'Meiryo UI' , 'メイリオ' , Meiryo , 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'MS PGothic' , sans-serif;
}

/* Font for articles
----------------------------------------------- */
.post-body {
 font-size: 18px;
 line-height: 1.7em;
}

[時刻: 02:12]

残作業

今日はこのくらいでかんにんしといたるぅ～! って堪忍してほしいのは、こっちの方なんだけどね…

残りの作業をメモしておこう。

記事タイトルが小さいのでもっと目立つように
投稿日時、ラベルをタイトル付近に
表をきれいに表示
前の記事、後の記事を記事タイトル付近に表示
見出しの装飾

前から残っている残作業は以下。

SyntaxHighlighter導入
数式を表示
StackEditでアップした画像をLightboxで表示

調べたり、まとめたりしながらやっていると、あっという間に時間が経ってしまいますね。楽しいんですけど^^;

[時刻: 2:26]

参考サイト

Qiita (2017-01-30)
大量技術系記事の投稿&閲覧サイト。私もよくお世話になってます。このサイト、ほんとに技術系の文章、見やすいんですよね。ただ内容が正しいかどうかは、ちゃんと自分で吟味すること。以前こんなこともあったようです。嘘を嘘と見抜けないとネットは使えない… いや、現実でもそうなんだけどね。
Bloggerのテンプレートをバックアップする方法 (2012-11-02)
「テンプレート」→「バックアップ/復元」→「テンプレートをダウンロード」。これだけ。これからはちゃんとバックアップします…
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ (2011-11-7)
説明ブロックをフロートにして配置するのに勉強させていただきました。プロの女性が執筆した、優しくてためになるCSSの実用知識。なるほど検索で上位にくるのも納得の素晴らしい記事でした。
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 (2015-10-20)
これもわかりやすいCSSを使ったページレイアウトの実装方法の説明。みんなよく知っていますね。昔は table タグ使って頑張ったものですが、CSSを使うとスマートに書けてかっこいいです。でもBloggerでどうやったらいいかはよくわかりませんでした。Bloggerの右サイドバーの位置決め方法、かなりトリッキーじゃないですか?
Bloggerユーザーですが何か？ (2016-6-2)
Bloggerって本文をウィンドウに合わせて幅可変にできないかなぁ、と思って調べていたらちゃんとできてたサイトを見つけました。それがここのサイトです。いやぁ、このデザイン、センスの塊だなぁ、とみててうらやましくなりました。文章もわかりやすいです。
何より私のように詰め込んでない (ぉぅぃ
Font−familyのベストな書き方 2015年版 (2015-6-1)
感動した! フォントってすごく難しい世界だと思っていたのですが、コピペで使えるフォント指定がありました! さすがはデザインのプロですね。ありがたく使わせていただきます。