些細な日常

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

BloggerのContempoテーマの記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて表示速度を下げてしまう恐れも否定できないので、消すべきではないかと感じ始めた。 記事タイトルはメインのコンテンツを訪問者に最も印象付けるブログの生命線だから右端まで伸ばしてきっちり表示しておくのがアクセスアップに大事かも知れない。Flower latte art by Kevin Menajang [CC0], via Pexels もう既に繁栄していて皆から気軽に広めて貰える状況でもないかぎりは共有ボタンではなくて記事タイトルこそ見立たせるのがブロガーとして得策だ。 目次記事タイトルの右横の共有ボタンを消す方法Contempoの記事タイトルの右横の共有ボタンのソースコード記事下の共有ボタンを単独で表示する方法Co…

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

ブログのテンプレートをContempoに変えたらトップページの先頭に注目の投稿ガジェットが付いていた。調べると公式テーマに同時に追加されたSohoとEmporioとNotableも同じなんだけれども注目の投稿ガジェットをトップページに使うとアドセンスのサイト広告の出方が変わってしまうんだ。 レイアウトのブログの投稿から記事下だけではなくトップページを含めてインデックスページの複数の記事の抜粋にどのくらい間隔を開けて表示するかを決められるのが一つずれる。 修正して注目の投稿ガジェットの次にアドセンスのサイト広告か出るようにしたA woman thinking in grassland by cuncon [CC0], via Pixabay テーマのhtml編集かバックアップ／復元からカスタマイズを行う。 Blogのtypeのwidget内のmainのidのincludable内にアドセ…

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…

構造化データにkeywordsを追加してSEO（検索エンジン最適化）対策に効果的かどうかは定かではない。 かつてmetaタグのkeywordsにサイト内容と無関係なキーワードを記載したサイトによって検索結果が混乱したという経緯からGoogleなどの主要な検索エンジンはサイトのmetaタグのkeywordsを完全に読み込まなくなってしまっているんだ。 SEO対策でサイト内容の他にキーワードを検索エンジンに伝えるように取り計らっても仕様がないかも知れないけれども何かの役に立たないともかぎらないから構造化データのkeywordsを使ってみたいと感じる。 metaタグのkeywordsは間違いなく無理だし、使ってもSEO効果は皆無にせよ、構造化データのkeywordsは同じではない。ひょっとしたらGoogleなどの主要な検索エンジンがサイト内容に読み込むか、またはサイト評価に多少とも加味する可…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableは記事毎にJSON-LDの構造化データが付いていてGoogleなどの検索エンジンがサイト内容を通常よりも認識し易くなっている。 ブログのテンプレートのソースコードからマークアップを確認してみるとpublisher（公開主）がBloggerになっていてさらに画像なしの場合の画像にBloggerのロゴが記載されるのもちょっと気がかりなんだ。 Bloggerを使っているから間違いではないにせよ、ブログ自体には一致してないわけで、どちらもブログ自体に合わせてカスタマイズしたいと感じてしまう。A man who began doing parkour cartwheel on the grass by farioff [CC0], via Pixabay 検索エンジンからのアクセスアップのSEO（検…

ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたら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で非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機…

Dateクラスのコンストラクタ関数を使うとDateインスタンスを素早く生成できる。An Owl on a tree branch by Lepale [CC0], via Pixabay 四つの構文と使用可能なオブジェクト DateオブジェクトはUTC／協定世界時の1970年1月1日0時0分0秒（UNIXエポック）から始まるミリ秒までの時刻値を基準として持っている。new Date() 無名コンストラクタ：現在のシステム内の日付と時刻new Date(value) value：UNIX時刻（UNIXエポックからの経過秒）new Date("dateString") dateString：IETF準拠のRFC2822の日時指定とISO8601の拡張形式
ブラウザや書式によって誤差が生じ得るnew Date(year, monthIndex, day, hours, mi…

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