ガジェット中で使うイメージファイル

Bloggerにはイメージなどの共有ファイルをアップする機能が無い。
投稿中にイメージを含めることは出来ますが、ガジェット中でイメージファイルを使おうとすると、そのイメージファイルは別の所から参照するしか無いらしい。

う～ん、別のところからって結構面倒くさい。私自身、イメージは多用しないタイプですが、多用しないので、少ないイメージファイルを別の所で管理する事がかえって煩わしい。
仕方ないので、時々しか使わないイメージはBase64で埋め込む事にしました。ページ中で使い回す時はJavaScriptで埋め込んで使い回す事にしました。

１．使い回す場合の例

<img id="img1" width="200" height="200">  

<img id="img2" width="200" height="200">  

<script>

var data = "data:image/jpeg;base64,/9j/4AAQS...";

(function setBase64(){

  document.getElementById("img1").src = data;

  document.getElementById("img2").src = data;

});

</script>

２．HTMLに直接埋め込む場合

<img src="data:image/png;base64,iVBORw0KGgoA・・・" />

３．CSSで背景として埋め込む場合

div {

  background: url("data:image/png;base64,iVBORw0KGgoA・・・");

}

松たか子 - 幸せな結末 (BGV/MIX : 大瀧詠一)

YouTube埋め込みテスト

Blogerの気に入った所、あれれな所

Bloggerに引っ越して来ようと思い、色々とお試し中の感想です。
まあ、良くも悪くもBloggerは無骨でした。
第一印象はなんじゃこりゃ
　└→Firefoxでアクセスしたのが敗因だった
第二印象がねじ伏せたくなる
　└→テーマデザインが少なくカスタマイズはご自由にという感じ
第三印象は不具合っぽいのが不具合っぽくなくなる暗示に掛る
　└→触っているうちに慣れてしまう不思議な環境
第四印象はカレンダー設置で苦しまられ可愛くなる
　└→HTML/JavaScriptガジェットに嵌まるかも

ということで、弄くり回すのが好きな人にお勧めします。
テーマが充実していて、直ぐに記事がかけるのが良い人には向きません。

■気に入ったところ
・投稿入力が気にいりました。これはHTMLタグに慣れた私の感想です。
・Webプログラミング好きとしてはねじ伏せたくなるじゃじゃ馬。
・歓迎しない広告が入り込まない。
・慣れると気にならなくなる鈍くさい機能群。

■あれれな所
・設定機能がFirefoxのJavaScriptエンジンには荷が重い。
・投稿入力がリッチテキスト入力としては中途半端なので、初心者には辛い。
・HTML知識が無いとデザインの自由度が低い。
・カテゴリー＋タグが無くラベルだけで書庫的にも使いたい場合は不向き。
　　└→カテゴリが無くても分野ごとに別ブログ(100個/ID)を立てれば問題なし
・公式なカレンダー機能が無い。
・モバイル対応が旧世代（レスポンシブじゃない）。
・ちょっと古臭い感じは否めない。

■使いこなす上での課題
・自由にカスタマイズしたくなるとBloggerのxml仕様が読めないと駄目



※多少はHTMLの知識が無いと難しいかもしれません。
※詳しい人にデザインを整えてもらってから使うならありです。

 ※この投稿は書きかけ

カレンダーを設置する

Bloggerには公式なカレンダーガジェットが有りませんでした。
日本的なのかもしれませんがカレンダーが欲しい。 そこでググって見つかった２つのカレンダーを試してみました。

１．JavaScript型
これ良いです。祭日の考慮もされています。

HTMLとJavaScriptの知識があれば、HTML/JavaScriptのガジェットとして、お気軽に設置できます。

https://github.com/p--q/Calendar5_Blogger/blob/develop/Calendar5_Blogger/WebContent/Calendar5_Blogger.js
https://p--q.blogspot.com/2017/03/blogger12calendar5blogger.html

フィードを拾って投稿リンクを拾っていますので下記の連動がされています。
 ・カレンダーの下に、選択した投稿日の投稿リンクが表示される。
 ・アーカイブ一覧から投稿文書を開くと、それにも連動している。

設置を試すために、下記の４箇所を変更してお試し中です。
 ・トップドメインに関係なく日本語化（日本語以外は書かないので）
 ・前月/翌月へのリンクを左右逆に変更（好みの問題です）
 ・投稿リストのタイトル内のHTMLタグを有効化（createTxt→insertAdjacentHTML）
 ・月が変わった時のファイル名重複による不具合回避(下記の通り)
----------------------------------------------------------------------------------
ファイル名だけの比較をフルパスでの比較に変更してみました
a. 225行目 フルパスのままで問題になるスラッシュをエスケープ
_reF: /\w+\.html/,  // htmlファイル名を抽出する正規表現パターン。
　　　　↓
_reF: function(s) {   // htmlフルパスファイル名を抽出。
return s.replace(/\//g, '\\/');
},
b. 281行目 _reFの変更に合わせて変更
pt._html = pt._reF.exec(thisUrl);  // URLからhtmlファイル名を取得。
　　　　↓
pt._html = pt._reF(thisUrl);  // URLからhtmlフルパスファイル名を取得。
c. 292行目 _reFの変更に合わせて変更
if (pt._html[0] == pt._reF.exec(posts[j])[0]) {  // 投稿のhtmlファイル名が一致するとき。フィードは.comで返ってきてTDLが異なるのでURL直接は比較できない。
　　　　↓
if (pt._html == pt._reF(posts[j][0])) {  投稿のhtmlフルパスファイル名が一致するとき。フィードは.comで返ってきてTDLが異なるのでURL直接は比較できない。

----------------------------------------------------------------------------------

※追記
投稿年月を後から変更した投稿文書が有る時に正しく動作しませんでした。
・問題となる操作：投稿年月を変更した投稿を開いた時
・現象：カレンダー表示が投稿変更前の年月になる
・原因：投稿年月日と変更しても、投稿文書のURLパスが変更されない為
対処を自力でなんとかしようと思いついたのはall()で何とかする事でした。
例えばカレンダ表示年月が変わった時に、その年月をcookieで保持して、all()の中でそのcookieから年月を得る。
まだ、これで上手くゆくかは試していませんが、取り急ぎ、ご報告いたします。

２．CGI型
まず、ユーザー登録してblogIDを通知することで、カレンダーHTMLを返してくれるCGI型です。
http://www.tim.jp/BloggerCalendar/howtouse.html
設置は簡単です。備わっている機能に満足できればお薦めです。
気になったのは、設置を試した時点でSSL対応がなかったことですが、お問い合わせから質問したら、速攻で改善されました。

さて、どちらにするかは、カスタマイズしたければ１．を、簡易なものでメンテナンスフリーなら２．だと思います。
私は１．の方を、自分なりの仕様にカスタマイズしながら使わせてもう事にします。