おすすめ記事ピックアップ
Bloggerは他のブログサービスより柔軟にHTMLコードを編集（追加・修正・削除）できます。自由度はかなり高いです。HTMLコードと言いましても、分類するならに言うならHTML、CSS、JavaScript（jQuery）という感じですね。
HTMLはサイトの骨格、CSSはデザイン装飾、JavaScript（jQuery）は、機能や動きのあるデザイン装飾というイメージです。詳しく知りたい人は、ググりましょう。Bloggerでそれぞれの編集方法について説明したいと思います。
「テンプレートを編集」は、通常見ているコードの画面です。「テンプレートをプレビュー」が変更したコードのプレビューを見ることができます。しかしこのプレビューは機能がイマイチです。あまり使うことはないでしょう。保存して通常の画面で確認したほうが確かです。ちなみに「テンプレートを保存」したあとでも、「Ctrl ＋Z」で編集を戻すことができます。なのでプレビューを使う必要があまりありません。
他のボタンはほとんど利用することはありません。ウィジェットがおかしくなってしまい、どうしようも無くなった時は、「ウィジェットテンプレートデホルトに戻す」をやってみましょう。どうしようも無くなったときのみ利用しましょう。たまに解決できたりします。
コード検索は、コードの画面にカーソルを合わせて、「Ctrl ＋F」を押しましょう。折りたたまれたコードまですべて検索できるようになります。ブラウザーの検索機能だと、正しくコードを検索してくれません。
またコードは▼で折りたたまれています。該当箇所を見たい時は広げましょう。コード内も・・・でコードが省略されていることがあります。こちらもクリックして広げましょう。コードを全部コピーして、エディターに貼り付け編集する方法もあります。好みの問題ですね。
Blogger HTMLの全体は、はじめにHTML宣言見たいのがあり、次にBloggerの書式が出てきます。ここにテンプレートの制作者やJavaScriptのリンクが続き、CSSコードが記述されています。CSSコードの後にウィジェットガジェットが書かれている感じです。ウィジェットガジェットはレイアウトと連動している部分が多くあります。検索方法と全体像がつかめれば、何か変更したいときに、探しだせるようになります。
私としては、「テンプレートを編集」から直接CSSを変更・追記する方法をオススメします。HTML内の最初の方にCSSが記述されています。「Ctrl ＋F」検索と「Chromeの要素の検証」を使って、直接カスタマイズしましょう。私の場合ですが、自分がカスタマイズしたCSSは、CSSの最後に記述するようにしています。あとから修正したい場合はそこを見ればわかるからです。あとはコメントアウトを利用して補足を書いておけば分かりやすいです。
jQueryなどのJavaScriptを読み込む場合は、「テンプレートを編集」から記述もしくは、読み込みを設定します。googleのjsや、bootstrapなどを設定する場合などですね。bloggerには、FTP（ファイルのアップデート）機能がありませんので、独自にコードファイルをアップして、読み込ませたい場合は、別のサーバにアップする必要があります。JavaScriptをまるまる「テンプレートを編集」でHTML内に記述しても、結構うごいたりしますので、ご自身で最適な方法を見つけるのが良いと思います。
Bloggerのカスタマイズの参考になれば幸いです。質問等がありましたらコメントください。分かる範囲で回答します。
HTMLはサイトの骨格、CSSはデザイン装飾、JavaScript（jQuery）は、機能や動きのあるデザイン装飾というイメージです。詳しく知りたい人は、ググりましょう。Bloggerでそれぞれの編集方法について説明したいと思います。
Bloggerレイアウトの説明
Bloggerは「レイアウト」という管理ページがあります。ここではヘッダーやフッター、サイドやポストエリアへのガジェットを配置したり移動したりできます。ドラックドロップで移動できるので、とても便利な機能です。BloggerのHTMLカスタマイズは、主に「レイアウト」で各種の設置や配置を行い、「HTMLの編集」でHTMLコードをカスタマイズして、「ガジェット」でTwitter等の外部ブログパーツを埋め込みして利用することが多いです。これらを自由に使えるとカスタマイズの幅が広がります。
Blogger HTMLの編集方法
Blogger HTMLの編集は、「テンプレート」→「HTMLの編集」で行うことができます。簡単にBlogger HTMLの編集画面の説明をします。「ウィジェットへの移動」は、設置したガジェットのエリアへ飛ぶことができます。「Chromeの要素の検証」で、ガジェットの「widget id」を調べると簡単に利用できます。
「テンプレートを編集」は、通常見ているコードの画面です。「テンプレートをプレビュー」が変更したコードのプレビューを見ることができます。しかしこのプレビューは機能がイマイチです。あまり使うことはないでしょう。保存して通常の画面で確認したほうが確かです。ちなみに「テンプレートを保存」したあとでも、「Ctrl ＋Z」で編集を戻すことができます。なのでプレビューを使う必要があまりありません。
他のボタンはほとんど利用することはありません。ウィジェットがおかしくなってしまい、どうしようも無くなった時は、「ウィジェットテンプレートデホルトに戻す」をやってみましょう。どうしようも無くなったときのみ利用しましょう。たまに解決できたりします。
コード検索は、コードの画面にカーソルを合わせて、「Ctrl ＋F」を押しましょう。折りたたまれたコードまですべて検索できるようになります。ブラウザーの検索機能だと、正しくコードを検索してくれません。
またコードは▼で折りたたまれています。該当箇所を見たい時は広げましょう。コード内も・・・でコードが省略されていることがあります。こちらもクリックして広げましょう。コードを全部コピーして、エディターに貼り付け編集する方法もあります。好みの問題ですね。
Blogger HTMLの全体は、はじめにHTML宣言見たいのがあり、次にBloggerの書式が出てきます。ここにテンプレートの制作者やJavaScriptのリンクが続き、CSSコードが記述されています。CSSコードの後にウィジェットガジェットが書かれている感じです。ウィジェットガジェットはレイアウトと連動している部分が多くあります。検索方法と全体像がつかめれば、何か変更したいときに、探しだせるようになります。
Blogger CSSの編集方法
CSSの追記は、「テンプレート」→「カスタマイズ」→「上級者向け」→「CSSを追加」で、追記することができます。CSSは重複していても後から書かれたものや、!importantすれば、追記したものを優先して適用されることができます。この方法で修正もできるのですが、あまりオススメではありません。なぜかうまく動かないことや、追記した情報が存在しているにも関わらず見えなくなってしまうことがあるからです。私としては、「テンプレートを編集」から直接CSSを変更・追記する方法をオススメします。HTML内の最初の方にCSSが記述されています。「Ctrl ＋F」検索と「Chromeの要素の検証」を使って、直接カスタマイズしましょう。私の場合ですが、自分がカスタマイズしたCSSは、CSSの最後に記述するようにしています。あとから修正したい場合はそこを見ればわかるからです。あとはコメントアウトを利用して補足を書いておけば分かりやすいです。
Blogger JavaScript（jQuery）の編集方法
「ガジェットの追加」で「HTML/JavaScript」を選び記述して追加する方法と、「テンプレートを編集」から直接埋め込む方法があります。外部サードパーティ（例えばTwitterなど）から、提供されるブログパーツや貼り付けコードは、「ガジェットの追加」で「HTML/JavaScript」から設置するのが良いと思います。jQueryなどのJavaScriptを読み込む場合は、「テンプレートを編集」から記述もしくは、読み込みを設定します。googleのjsや、bootstrapなどを設定する場合などですね。bloggerには、FTP（ファイルのアップデート）機能がありませんので、独自にコードファイルをアップして、読み込ませたい場合は、別のサーバにアップする必要があります。JavaScriptをまるまる「テンプレートを編集」でHTML内に記述しても、結構うごいたりしますので、ご自身で最適な方法を見つけるのが良いと思います。
Bloggerのカスタマイズの参考になれば幸いです。質問等がありましたらコメントください。分かる範囲で回答します。
