Bloggerの改造方法 : 灰色スズメの足跡

このブログの筆者が行っているBloggerの改造方法をご紹介します。筆者はBloggerを改造するために、Bloggerレイアウト用HTMLをテキストエディタで編集しています。編集後、Bloggerへ保存してからBloggerテーマデザイナーでカスタムCSSを追加しています。これらの方法についてご説明します。

Bloggerレイアウト用HTMLは、Blogger設定画面の［テーマ］の編集画面を表示して、［HTMLの編集］ボタンを押下すると表示される画面のテキストボックス内のHTMLです。

Bloggerレイアウト用HTMLを編集する前にバックアップを取っておくことを強くお勧めします。

Bloggerを改造するための前提知識

Bloggerを改造するためには下記の知識が必要です。どれも中級程度の習熟度で構いません。下記の知識は本を買って読むか、ネット上のWebページを読めば習得できます。

HTML（XHTML）: 書き方、タグ、属性の意味を一通り知っていれば十分です。名前空間についての知識もあると良いでしょう。
CSS: 書き方、属性とその値を一通り知っていれば十分です。
JavaScript: 書き方を知っていれば十分です。外部ライブラリの使い方の知識は必要ありません。
Document Object Model（DOM）: 概念と利用の仕方を知っていれば十分です。

Bloggerを改造するための道具

Bloggerを改造するために必要な道具は下記のとおりです。どれも無料で揃えられます。

Google Chrome: パソコン版のChromeです。ChromeのDevToolsを使います。 DevToolsはChromeメニューから［その他のツール］ー［デベロッパーツール Ctrl+Shift+I F12］で表示できます。詳しい説明は下記をご参照ください。
Chrome DevTools
Visual Studio Code: マイクロソフトの高機能テキストエディタです。HTML、CSS、JavaScriptの編集で使います。構文規則に従った文字列整形、色分け表示、入力補助、正規表現を使った検索置換等ができます。

Bloggerを改造するための前準備

Bloggerレイアウト用HTMLをテキストエディタで編集する前に、Bloggerテーマデザイナーで設定を最終確定してしまいます。最終確定したら、今後はBloggerテーマデザイナーは触らないようにして、Bloggerレイアウト用HTMLをテキストエディタでのみ編集するようにします。

なぜ、Bloggerテーマデザイナーを触らないようにするのか説明します。 Bloggerテーマデザイナーで設定したブログの色とフォントの設定内容はBloggerレイアウト用HTMLに書き込まれてしまいます。 Bloggerテーマデザイナーで設定を最終確定して今後は触らないようにすることで、BloggerテーマデザイナーとテキストエディタのどちらからBloggerレイアウト用HTMLを変更したのか混乱してしまうことを避けます。

BloggerテーマデザイナーはBlogger設定画面で、

［テーマ］の編集画面を表示
［カスタマイズ］ボタンを押下
Blogger テーマデザイナーを表示
［上級者向け］を表示して、［CSSを追加］以外の項目の設定を最終確定する

Bloggerテーマデザイナーで色を設定するときは次の４種類の色を決めておくと追加するカスタムCSSの設定に流用できて便利です。 Bloggerテーマデザイナーでは色を透明にもできますので、必要のない背景色や枠線の色は透明にしておきます。

背景色
前景色
リンクの色
カーソルを合わせたときの色

Bloggerレイアウト用HTMLをVisual Studio Codeで編集する

Bloggerレイアウト用HTMLをVisual Studio Codeで編集します。

BloggerからBloggerレイアウト用HTMLをコピーする

Blogger設定画面で、

［テーマ］の編集画面を表示
［HTMLの編集］ボタンを押下
テキストボックス中のHTML（Bloggerレイアウト用HTML）をすべて選択してコピーして、Visual Studio Codeにペーストする

Visual Studio Codeで編集する

Bloggerレイアウト用HTMLをVisual Studio Codeにペーストしたら、右下の［プレーンテキスト］をクリックします。

言語モードを選択できるので「HTML」と入力して言語モードをHTMLにします。

言語モードをHTMLにするとHTMLの構文規則に応じて色分け表示されます。さらに、右クリックで表示されるコンテキストメニューから［ドキュメントのフォーマット Alt+Shift+F］を選択して、文字列をHTMLの構文規則に従って整形します。

ここで注意したいのは「data:△post」（△＝半角空白）と整形されてしまい、このままBloggerに保存するとエラーになってしまう点です。エラーを避けるために検索置換で「data:△post」を「data:post」と修正しておきます。

上記の作業が終わったら、拡張子をhtmlにして保存します。

ここで、以降の編集作業の前に、保存したBloggerレイアウト用HTMLのバックアップを取っておきます。

Bloggerレイアウト用HTMLの編集作業

ここからは、Bloggerレイアウト用HTMLの編集作業について説明します。

Bloggerレイアウト用HTMLの全体像

Bloggerレイアウト用HTMLは下記のような構成になっています。

<html>
<head>
    ［Bloggerの変数定義］
    ［BloggerのCSS］
    ［カスタムCSS（Blogger利用者が追加したCSS）］
    ［BloggerのCSS］
</head>

<body>
    ［ガジェットごとのHTML（モバイル版とPC版）］
    <script>
    </script>
</body>

［Bloggerのマクロ］
［ガジェットごとのHTML］

</html>

ガジェットとはBlogger設定画面の［レイアウト］の編集画面に表示される、NavbarやヘッダーやCross-ColumnのようなBloggerの構成部品です。

Bloggerレイアウト用HTML内のカスタムCSSを削除する

Bloggerレイアウト用HTMLにはBlogger利用者が追加したカスタムCSSが含まれています。 Bloggerレイアウト用HTMLに含まれるカスタムCSSはstyleタグで括られていないので、Visual Studio CodeはこのカスタムCSSをCSSとして色分け表示や入力補助をしてくれません。これではVisual Studio Codeで扱いづらいので、別途カスタムCSS用のファイルを作って、そちらでVisual Studio Codeを使って編集します。

今後の編集作業の混乱を避けるために、Bloggerレイアウト用HTML内のカスタムCSSは削除します。カスタムCSSは別ファイルで編集して、Bloggerテーマデザイナーで追加するようにします。

Bloggerレイアウト用HTMLの600行目付近からカスタムCSSが始まりますので削除します。 Bloggerレイアウト用HTMLのどこからどこまでがカスタムCSSか分からない場合は、カスタムCSSの始まりと終わりにカスタムCSSを示すコメントを書いておきBloggerテーマデザイナーで追加します。これでBloggerレイアウト用HTMLにカスタムCSSの始まりと終わりのコメントが入りますので、その間のCSSを削除します。

Bloggerレイアウト用HTMLからカスタムCSSを削除した後は、Bloggerレイアウト用HTMLをBloggerに保存したら、必ずBloggerテーマデザイナーでカスタムCSSを追加するようにします。

Bloggerレイアウト用のタグ

Bloggerレイアウト用HTMLではBlogger独自のタグが使われています。 Blogger独自のタグは「b:」で始まっていて、この独自のタグの意味が分からないとBloggerレイアウト用HTMLの内容は理解できません。 Bloggerレイアウト用HTMLのすべてを理解する必要はありませんが、手を入れる箇所の周辺の記述は理解しておいたほうが良いでしょう。 Blogger独自のタグの説明は下記をご参照ください。
レイアウト用のウィジェットタグ

編集する箇所を探す

Bloggerで改造したい箇所があればBloggerレイアウト用HTMLを編集して改造します。 Bloggerレイアウト用HTMLのどこを編集すべきかはChrome DevToolsを使って探します。

Chrome DevToolsを起動すると現在見ているWebページのソースを表示できます。ここで注意したいのはChromeの右クリックのコンテキストメニュー［ページのソースを表示 Ctrl+U］で表示できるWebページのソースと、Chrome DevToolsで表示できる現在のWebページのソースは違うということです。 Chrome DevToolsで表示できるWebページのソースにはJavaScriptなどで動的に生成されたHTMLが含まれます。

Chrome DevToolsの詳しい使い方は下記をご参照ください。
Chrome DevTools

Chrome DevToolsのElementsパネルでHTMLのタグを選択するとそれに該当するWebページの要素が反転表示されます。また、Webページで右クリックのコンテキストメニュー［検証］を選ぶと、右クリックした箇所のHTMLタグがChrome DevToolsのElementsパネルに表示されます。このように、Chrome DevToolsを使ってBloggerレイアウト用HTMLで改造したい箇所を探します。

Chrome DevTools使うとCSSの設定も探せます。 Chrome DevToolsのElementsパネルで選択したHTMLタグに適用されているCSSの設定がElementsパネルの右側のStyles領域に表示されます。また、Computed領域にはHTMLタグに適用されているCSSの設定が継承されているものも含めてすべて表示されます。

Chrome DevToolsを使って、Bloggerレイアウト用HTMLとCSSの編集個所を特定してVisual Studio Codeで改造します。

JavaScriptの追加箇所

Bloggerレイアウト用HTMLにJavaScriptを追加したい場合は、bodyタグの終了タグの直前にscriptタグで括られた箇所がありますので、そこにJavaScriptを追加するのが良いでしょう。 Bloggerレイアウト用HTML内のJavaScriptは文字列の括りにシングルクォートを使い、字下げは半角空白２文字になっていますので、それに倣うのが良いでしょう。

Bloggerへの反映作業

Bloggerレイアウト用HTMLを編集し終わったら、編集したBloggerレイアウト用HTMLをBloggerに保存します。

Blogger設定画面で、

［テーマ］の編集画面を表示
［HTMLの編集］ボタンを押下
テキストボックス内の文字列をすべて削除して、Visual Studio Codeで編集したBloggerレイアウト用HTMLをテキストボックスへコピー＆ペーストする
［テーマを保存］ボタンを押下して、Bloggerレイアウト用HTMLをBloggerに保存する

Bloggerレイアウト用HTMLをBloggerに保存したら、カスタムCSSをBloggerへ追加します。

Blogger設定画面で、

［テーマ］の編集画面を表示
［カスタマイズ］ボタンを押下
Bloggerテーマデザイナーで［上級者向け］ー［CSSを追加］を選択
テキストボックス内の文字列をすべて削除して、Visual Studio Codeで編集したカスタムCSSをテキストボックスへコピー＆ペーストする
画面右上の［ブログに適用］ボタンを押下して、カスタムCSSをBloggerに追加する

以上でBloggerの改造作業は完了です。

記事終わり

灰色スズメの足跡

2017年12月30日土曜日