Bloggerは容量無制限

（2024年2月28日, 初版2021年8月20日）

Bloggerに写真を沢山貼り付けても，Googleドライブの容量は消費しない（食わない），つまり容量無制限のようです。容量を気にせずブログを書けて有難いです。

メインページに表示される記事の数

しかし，記事に写真を沢山貼り付けると，メインページ（1画面）に表示される記事の数が少なくなる気がします。あまり沢山写真を貼り付けさせない事が目的の仕様なのか？気になってます。

その答えはこの記事にありました。読み込みを早くするために写真の数を制限しているとのことです。解決策は

最初の写真のより前に（ツールバーにある）「追記を挿入」を入れる。

これ以降は写真をカウントしないそうです。各記事の概要として表示されるのは，追記までなので，追記の位置は，最初の写真のより前，概要の終わりまでとなります。

2021年6月から，それまでGoogleドライブの容量にカウントされなかった，Googleフォトの高画質写真，スプレッドシート，ドキュメント，スライドが容量にカウントされるようになった事を考えると，いずれはブロガーもカウントされるんだろうなとは思っています。

MathJax

BloggerでLaTeX形式で書かれた数式を表示してくれるJavascriptライブラリMathJaxを使うには，以下のコードを記事ソースコードの最上部に貼り付けます。(2024.2.28 BloggerでMathJaxを使用するより）

<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>    
  MathJax.Hub.Config({
    displayAlign: 'left',
    displayIndent: '2em',
    HTML: ["input/TeX","output/HTML-CSS"],
    TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], 
           equationNumbers: { autoNumber: "AMS" } },
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
               displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
               processEscapes: true },
    "HTML-CSS": { availableFonts: ["TeX"],
                  linebreaks: { automatic: true } }
  });
</script>

BloggerでMathJaxを使ったページの例

テンプレート：Earth-Pro

Blogger付属のテンプレートの中で，Dynamic Views slidebarが気に入ったのですが，（画像をクリックすると，画像一覧が画面に下にサムネール表示されて，全画像を見ることのできる）ライトボックスが動かないので，Blogger Templatesで片っ端からテンプレートを適用して，今使っているEarth-Proを探し出しました。一日かかりました。。。

なお，Earth-Proでは，[テーマ] > [モバイルテーマを選択]で[デスクトップ]を選択しておかないと，モバイルでライトボックスが動きません。[デスクトップ]を選択しても，画面右のサイドバーが表示されなくなったり，ちゃんとモバイル対応はしているようです。

imgとolの修正

Earth-Proで少し不満な点を解消するために，htmlをすこし編集しました：

写真を並べるとくっついてしまう。imgタグのcssにmargin:0.25em;を付加，ついでに影をつけて，角を丸めました。
番号付きリストを太字から標準へ。olタグのcssのfont-weightをコメントアウト

   /*--------------------------------------------------------------
   Elements
   --------------------------------------------------------------*/
   hr {background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em;}
   ul, ol {margin: 0 0 2em 3em;}
   ul {list-style: disc;}
   ol {list-style: decimal;/*font-weight:600; by H.F.*/}
   ol ol {list-style:upper-alpha;/*font-weight:400; by H.F.*/}
   ol ol ol {list-style:lower-roman;/*font-weight:200; by H.F.*/}
   .content-areapbt li {margin-bottom: 10px;margin-top: 10px;}
   li > ul, li > ol {margin-bottom: 0;margin-left: 2em;}
   dt {font-weight: bold;}
   dd {margin: 0 1.5em 1.5em;}
   img {height: auto; max-width: 100%; 
   margin:0.25em; 
   box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8); 
   border-radius: 10px;/*added by H.F.*/} 
   figure {margin: 0;}
   table {margin: 0 0 1.5em;width: 100%;}
   th {font-weight: bold;}

一方，記事一覧に表示される画像にはくどいので影がつかないようにしておきます。

.pbtthumbimg {
  float:left;
  margin:0px 10px 5px 0px;
  padding:4px;
  border:0px solid #eee;
  background:none;
  width:220px;
  height:auto;
  box-shadow:none; /* added by H.F. */
}

表・リスト

Earth-Proは，PCとタブレットでは右にサイドバーがあります。横に長い表やリストは，

<div style="overflow:auto; white-space: nowrap;">
表やリスト
<div>

で囲んで，行内の自動改行を禁止して，全体をスクロールできるようにして，右のサイドバーと重ならないようにします。なお，そもそも自動改行しない整形済みテキスト(pre)などは，overflow:auto;だけ

<div style="overflow:auto;">
整形済みテキスト
<div>

で囲みます。

デフォルトテンプレート：Contempo Light

Earth-Proで，一生懸命Bloggerをカスタマイズして使っていたのですが，右側にあまり使わない，ラベルやアーカイブが常に表示されていて邪魔な気がして，結局，デフォルトの現代的なデザイン，Contempo Lightに戻しました（2021.12.23）。

終わりに

Bloggerを便利に使わせて頂いています。サービスが変更されない，少なくとも，終了しないことを祈ってます。

このブログを検索