Blogger Labo：BloggerのHTML/JavaScriptガジェットの解説と活用方法

コメントでBloggerのHTML/JavaScriptガジェットに関する質問をいただいたので、今回はHTML/JavaScriptガジェットの解説と活用方法を紹介したいと思います。


概要


HTML/JavaScriptガジェットとは？


HTML/JavaScriptガジェットとは、Bloggerの純正ガジェットでHTML・CSS・JavaScriptを扱うことができます。それぞれの基本的な記述方法は以下の通りです。

・HTML： HTMLタグで記述できます（<div>や<p>など）
　→ <div>タグでidやclassを設定すると、CSSで部分的に設定できます
・CSS： <style>タグ内に記述できます
　→ CSSはテンプレートで設定してもOKです
・JavaScript： <script>タグ内に記述できます
　→ jQueryなどのライブラリも使えますが、別途CDNの設定が必要です

なお、CSSやJavaScriptは設定によってはサイト全体に影響する設定を加えることもできます。

ガジェットで設定できる範囲


Blogger Labo：BloggerのHTML/JavaScriptガジェットの解説と活用方法

HTML/JavaScriptガジェットで設定できる範囲は上の画像の通りです。

影響しているCSSについて


HTML/JavaScriptガジェットには、通常はテンプレートでCSSを当てていることは無いと思います。少なくとも、当サイトのテンプレートにはそのような設定はありません。

ただし、メイン、サイドバー、フッターなんかにHTML/JavaScriptガジェットを設定すると、その部位に設定されているCSSの影響を受けます。通常はサイドバー、フッターにガジェット全般のCSSが設定されているかと思われますので その設定で表示されるハズです。

特に設定の無い場合は、<body>タグや<html>タグの設定が適用されているものと思われます。具体的に言えば、フォントサイズやフォントの種類なんかは、ガジェットの挿入部位に設定がなければ<body>タグなど全体の設定が適用されていることでしょう。

具体例


HTML/JavaScriptガジェットに個別の設定を加えた記述例


Blogger Labo：BloggerのHTML/JavaScriptガジェットの解説と活用方法

上の画像のようにするには、以下のように設定します。

タイトル

プロフィール

コンテンツ

<div class="prof">
  <img
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8nkSvisUriPbFMtogB1Z0jOFhSMp8xl-gMW9IlHrX7jM1-u4XTqvE_iyXS8mczJtu7UWhybP-RLH3ttp6sbhx8fkORvCLeLt2V78x5uUGUzDFMXQbZRPBxbhg4dViOZ1v7CRlvoadQthT/s1600/gen_egg.png"
    alt="ふでたまご" />
  <h4>ふでたまご</h4>
  <p>
    プログラミング素人です。自作テンプレートやJavaScriptで自作のWEBツールを公開できるようプログラミングの勉強に励んでいます。ブログは備忘録というスタンスでやっているので、内容の粗さについてはご容赦願います。
  </p>
</div>
<style>
  /* プロフィール画像 */
  .prof img {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 10px auto;
  }
  /* 著者名 */
  .prof h4 {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: blue;
    padding: 5px 0;
  }
  /* 自己紹介文 */
  .prof p {
    font-size: 13px;
    margin: 20px 10px;
  }
</style>

今回はプロフィールをHTML/JavaScriptガジェットで自作する想定でコードを書きました。

コンテンツ全体を<div>タグで囲み、「prof」というクラス名を当てることで、コンテンツ部分に個別設定を施すことができています。もちろん、上記のCSSをテンプレート内で設定して、同名のクラスに同様のCSSを当てるということもできます。

具体例の詳細な解説


HTML/JavaScriptガジェットには、おそらくテンプレートで全体的な設定を加えることはできないと思われます。が、その反面、コンテンツ内で自由にidやclassを振ることができるので、なんでも設定ができるとも言えます。

具体例では、divタグに「prof」というクラス名を振っていますが、ここを「about」にすれば、「about」というクラス名でCSSを設定することができます。また、コンテンツ内に複数のクラス名を付けることもできます。

そのようなやり方をすれば、コンテンツ内を自由に操作・修飾することができるわけです。なお、コンテンツ内に全体を修飾するためのCSSやJavaScriptを設定したりすることもできます。

備考


テキストガジェットについて


Bloggerには、HTML/JavaScriptガジェットの劣化版とも言えるテキストガジェットというものがあります。結論から言えば、これを使う価値は全くありません。これを使うくらいなら断然HTML/JavaScriptガジェットを使ったほうが良いです。

理由は、テキストガジェットは「テキストしか設定できない」からです。「HTMLの編集」という項目がありますが、これを選択した上でHTMLタグを書き込んだとしても、全てテキストとして表示されてしまいます。

また、テキストガジェットにはデフォルトでfont-familyがstyleで設定されています。styleで設定されているものは、CSSで設定するよりも優先度が高いので基本的にはCSSで上書きすることはできません。!importantでCSS設定を強制することができるかもしれませんが、CSSでは!importantの設定は非推奨なので、望ましくない設定をしなければならないことになります。

このテキストガジェットの機能は、HTML/JavaScriptガジェットで全て賄えるので、テキストガジェットの利用価値は皆無というわけです。