些細な日常

Bloggerブログのスマホのインデックスページの記事下のアドセンスはサイズが大き過ぎるので、html編集のカスタマイズでページを振り分けてサイズを小さくしてモバイルバナーの320×100で表示するように変更したんだ。Contempoなどの新テーマは記事下のアドセンスがスマホのインデックスページでも表示される。記事の抜粋のスニペットに挿入される。それ以前のシンプルなどの旧テーマではウェブバージョンのパソコンやタブレットだけで、モバイルバージョンのスマホでは無理だったので、明らかに改善されていると感心する。 新テーマの記事下のアドセンスはブログの投稿ガジェットから設定するとテンプレートのBlogのwidget内のinlineAdのincludableタグで出力されるけれどもソースコードはdefaultAdUnitのincludableタグで定義付けられていて個々に共通したデザインを保ちな…

Contempoなどの2017年の公式テーマからソースコードに追加されていたBloggerの独自タグの一つ、defaultmarkupとは何かを考える。Contempoテーマ via Blogger head内に幾つも記載されていて中身はincludableタグばかりなんだ。翻ってbody内には同一のidと内容を持つincludableタグが記載されていて完全に重複している。ソースコードに二つのマークアップがまるでコピーされたように含まれているのはサイト作成で謎としかいいようがない。 概して一つしか要らないはずだし、body内のincludableタグでブログは成り立つと思う。defaultmarkupタグがなぜhead内に幾つも記載されているのか。Bloggerのテンプレートでの役目、そして使い方も分からない。 defaultmarkupタグはウィジェット毎の初期設定を示す 調べるとB…

サイトにインラインsvgで描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。svg画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている。 butt（切り出し／真っ直ぐ） stroke-linecap="butt" 初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。 round（丸い） stroke-linecap="round" 線の両端は線自体よりも少し伸びて丸くなる。 square（平ら） stroke-linecap="square" 線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。 インラインsvgで描画された…

pathは座標からどんな線でも数多く描けるインラインsvgで最も自由度の高いタグだ。 しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240"> <path d="M50 110 L160 20, 270 110 h-220 M80 110 v110 h160 v-110 M240 140 h-50 v80 M95 125 h65 v40 h-65 v-40" stroke-width="4" stroke="#4682b4"…

htmlのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 svgはScalable Vect Graphics（スケーラブルベクターグラフィックス）の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の一般的なjpgやpngやgifの画像のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにsvgファイルの画像を表示するにはimgタグで<img src="画像URL">とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。sv…

ブログの記事／追加ページの本文の右下にフローティングの戻るボタンを付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事／追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてcssのpositionのstickyを使って試したら上手く行った。Pineapple floating in water by Pineapple Supply Co. [CC0], via Pexels stickyは画面のスクロールに応じてコンテンツを固定できる cssのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。 stickyはfixed…

ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイルaudio：音楽video：動画track：字幕script：JavaScriptstylesheet：cssfont：フォントimage：画像fetch crossorigin：XHR／fetchworker：Worker／SharedWorkerem…

サイトのボタンはhtmlのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてhtmlのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はhtmlの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにcssを付けて作成できるだろう。 htmlとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード html<img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の…

htmlのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるにはinnerHTMLが良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティのinnerTextやtextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（htmlタグなどのマークアップ言語を含まない）を設定取得できる。双方にはcssで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機…

Bloggerの投稿の日付の時刻のフォーマットはデフォルトで七種類が用意されているけれどもhtml編集のカスタマイズで年月日と曜日を並び替えて他のスタイルでも表示できる。Powdery snowfield by cocoparisienne [CC0], via Pixabay目次公開日の年月日と曜日を並び替えるソースコードタイムゾーンなしの公開日の時刻のフォーマット更新日の年月日と曜日を並び替えるソースコード旧テーマの更新日のJavaScriptでのカスタマイズタイムゾーンなしの更新日の時刻のフォーマット新テーマのテンプレートへの記載の仕方公開日の時刻のフォーマットの場合更新日の時刻のフォーマットの場合旧テーマのテンプレートへの記載の仕方公開日の時刻のフォーマットの場合更新日の時刻のフォーマットの場合公開日の年月日と曜日を並び替えるソースコード<data:post.date.ye…

Microformatsはホームページやブログのサイト内容を機械向けに表現する構造化データの一つで、検索エンジンも認識するからサイト作成に取り入れるとキーワードの検索結果からアクセスアップを齎すかも知れないSEO対策のマークアップに含まれているんだ。近年はバージョンアップされてMicroformats2が出て来ているけど、ところがSEO対策ではGoogleなどの主要な検索エンジンに認識されないために有効性は低いと考えられる。Microformats2は構造化データとして後方互換性がないわけではないので、もしも検索エンジンからのアクセスアップを目論んでSEO対策に使うならば以前のバージョンのMicroformatsのままのマークアップに止めておくべきかも知れない。Microformatsの構造化データのマークアップはclass属性を中心に必要ならば幾つかのrel属性も使いながら機械向けの語…

GoogleのWebサービスの一つ、Firebaseを使うとアプリ開発やサイト作成をプロジェクトとして立ち上げてコンテンツを配信できる。料金は無料のSparkプランで1GBの容量が得られる。他にも機能が幾つもあって例えばデータベースやストレージたと1GBや5GBずつ得られるようになっている（無料で開始）。ホスティング以外に機能を追加して使うならば一つのアカウントで実際に提供されるサーバー容量はもっと大きい。転送量も機能毎に制限されていてホスティングでは10GBだけれどもアクセスが増えれば有料版へ移行してサーバー容量も含めて許容範囲を広げられる。定額制のFlameプランと従量制のBlazeプランに分かれていてアプリやサイトの稼働状況に合わせて選べる仕組みだ。今まではアプリ開発とサイト作成はおよそ別々だったけれども一つに明らかに統合したのがFirebaseで、とても面白いWebサービスだと知…