Bloggerの投稿画像の種類とサイズ/容量と画像URLについて Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画...
インラインSVGの画像のリンクと題名と説明文とランドマークとラベルの付け方 サイトに 自由に描画できるインラインSVG は便利で、しかも画質に優れるからサイト作成ではとても役立つと感じる。 インラインSVGをホームページやブログのデザインに取り入れる際には通常のHTMLとは扱いが異なる部分があるので、混乱しないように幾つか取り上げてどのようなマー...
Search ConsoleでURL検査のライブテストのスクリーンショットが途中で切れる Search Console が去年から大きく改変されて少しずつ機能を引き継ぎながら一年かがりで漸く以前のバージョンと遜色がないくらいまで辿り着いたところだけれどもとても気がかりな部分が一つある。ブログのURL検査のライブテストのスクリーンショットが途中で切れるから Googl...
無限スクロールを作成する|JavaScriptのIntersection ObserverにFetchを組み込んだプログラム サイトの無限スクロールのプログラムのアイデアは大きく二つの部分に分けられる。一つは要素判定で、今のページが画面のどこまで来たら次のページを表示するように動作するかを決める。もう一つは生成処理で、次のページをAjax通信でサーバーから読み込んで今のページに実際に追加する。JavaS...
Bloggerの投稿の投稿の設定:ラベルとスケジュール/公開とパーマリンクと検索向け説明と場所とオプションについて Bloggerの投稿の入力画面の右側に投稿の設定のオプションがあって色んな項目が並んでいる。何れも特殊な機能で、ちょっと分かり難いと感じる。基本的な使い方とどのように動くかの気付いた点を纏めておきたい。 投稿の投稿の設定 via Blogger 目次 ラベル ス...
JavaScriptのFetchで取得したデータをDocumentへ適合できるDOMParserの使い方 JavaScriptのプログラミングでサーバーを介したデータの受け渡し:Ajax通信を行う仕組みの一つに Fetch API がある。オブジェクトに最初からウェブの送受信の時間差の難点を克服する Promise を想定して使えるのが特徴で、旧来の XMLHttpRequest ...
Bloggerの投稿のHTMLモードの使い方 Bloggerのウェブの記事/追加ページの投稿(編集)のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language(ハイパーテキストマークアップランゲージ:超越文書記述言語)の頭文字四つで、ブログなどのウェブサイトをブラウザに...
iframeタグのコンテンツの画像比をCSSのcalc()でレスポンシブに整える HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。 YouTube や ドライブ など、Webサービスの埋め...
JavaScriptで開いたメニューの外側を暗くして範囲外のクリックでも閉じる方法 サイトに 開閉ボタン でメニューを出した際のエフェクトとして外側を暗くすると見易い。そして開閉ボタンだけではなくて開いたメニューの範囲外、または新しく表示された領域外のクリックでも同じように閉じられると使い易い。どう作成するべきか、JavaScriptで実行するプログラムを考え...
JavaScriptのonclickとclassListとsetTimeoutを使ったアニメーション付きの開閉ボタンのプログラム サイトのハンバーガーメニュー(≡)などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するHTMLの要...