スキップしてメイン コンテンツに移動

些細な日常

ラベル(HTML)が付いた投稿を表示しています すべて表示

BloggerのテーマデザイナーのVariableタグのマークアップ

イメージ

Bloggerのテンプレートは管理画面の「テーマ」のカスタマイズのテーマデザイナーからヘッダー画像を追加したり、コンテンツの文字の大きさや色を変更したり、デザインのCSSをを追加したりすることができる。 Bloggerのテーマデザイナーは利用者がブログのデザインのCSSを簡単に操作できるようにするためのツールなんだけれどもこれは最初から決められたものではなく、どの領域のどの要素を操作できるようにするかを管理画面の「テーマ」のカスタマイズのHTML編集からカスタマイズすることができる。 目次 Variableタグがテーマデザイナーを指定する Bloggerの七種類のVariableタグ Variableタグの基本的なマークアップの仕方 Variableタグのマークアップの必須事項 Variableタグとテーマデザイナーの対応関係 半透明の色を設定するときの注意点 旧ヴァージョンで使用可能なvariableタ…

サイトのテキストをクリップボードへコピーするJavaScriptプログラム

イメージ

サイトのテキストを指定してデバイスのクリップボードにコピーして他の場所へペーストして使えるようにするJavaScriptプログラムを考える。 Clipboard APIによるグローバル変数からコピー クリップボードの書き込み by 結城永人 JavaScriptのクリップボードへのコピーはClipboard APIで行える。 クリップボード API は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。 クリップボード API| MDN |Mozilla Navigatorインターフェイスが返すClipboardオブジェクト、グローバル変数の window.navigator.clipboard を通じてクリップボードを操作できる。 ClipboardオブジェクトのwriteText()メソッドの使い方 サイトの…

親要素を起点として子要素を固定表示するCSS

イメージ

HTMLの要素を固定して表示するCSSというと position:fixed を使うのが便利だけれども配置するための起点が画面全体(ビューポート)になってしまって親要素を起点として子要素を固定することができないんだ。 例えば スクロールボックス 内にボタンを固定して表示したい場合にどうするか。 考えると二つの方法がCSSで可能で、 親要素と子要素の一組をさらに別の要素に入れてボックス化した場合 とそうではなくて 親要素と子要素の一組だけの場合 が可能なので、それぞれのマークアップを紹介する。 親要素と子要素をボックス化した場合のCSS 親要素と子要素の一組をさらにdiv要素などで囲ってボックス化して親要素と一体化したボックスの祖先要素(親の親)を起点として子要素を固定表示すると。画面上、親要素の中に固定表示するのと同じ結果になる。 position:relativeとabsoluteの固定表示のマークアップ サンプ…

サイトのコンテンツの位置を変更するJavaScriptプログラム

イメージ

サイトの動画の縦横比を切り替えるスイッチのJavaScriptプログラム

イメージ

Bloggerの投稿画像の遅延読み込みの設定の利点と欠点

イメージ

Bloggerに非常に素晴らしい機能が追加された。投稿画像の遅延読み込みが管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定| Blogger 僕は自分のプログラムで、以前から 投稿画像の遅延読み込みの自動化 を行っていた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると少し欠点があることが分かって取り替えることは止めた。酷くて必ず避けなくてはならないようなものではないけれども使う場合は気に留めた方が良いと思う。 関連ページ Bloggerの投稿のWebP画像の提供の設定の利点と欠点 Bloggerの画像の遅延読み込みの設定 Bloggerの管理画面の設定の投稿に「画像の遅延読み込み」のスイッチが付いている。 ユーザーがページを下にスクロールするタイミングに合わせて、画像を個々に読み込みます 設定|Blogger 記事…

Bloggerブログに目次の自動生成のJavaScriptプログラムを実装する

イメージ

一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-javascript-program-t…

JavaScriptでコンテンツの目次を自動生成して表示するプログラム

イメージ

Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付けてさらにサイトのナビゲーションを示すn…

Search Consoleのモバイルユーザビリティのエラーを引き起こす画像について

イメージ

Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策(検索エンジン最適化) で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ|Search Console| Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…

アドセンスの自動広告のズレを微調整するマークアップ

イメージ

アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正できるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的に止めて欲しいと思うし、そのせいで、アドセンスの自動広告を最初の頃は使わないでいた。 目次 自動広告の微妙なズレが悩ましい CSSで微調整を行うことができる 自動広告の微調整に役立つ二つのCSS要素 自動広告の微調整のためのCSSの指定先 自動広告の微妙なズレが悩ましい 今は相当に改善されているけれどもブログで又出たのが一つ見付かった。 ページャーに寄ってこれでは誤クリックを誘発し兼ねないほどの不味い位置にある。 自動広告にとってデザインのバランスが取り難い場所があるのか、他は大丈夫なのにズレ…

Bloggerのmetaタグのrobotsによる検索避けのマークアップ

イメージ

BloggerでGoogleやYahoo!などの検索エンジンにブログを表示させなくする検索避けの方法としてHTML編集でのmetaタグのrobotsのマークアップについて紹介する。 目次 検索避けにmetaタグのrobotsを使う利点 Bloggerで使われるページの種類 metaタグのrobotsのマークアップの仕方 ブログのテンプレートの記載場所 検索避けを行うページの振り分け 検索避けにmetaタグのrobotsを使う利点 Robot by Janson_G / Pixabay Bloggerの検索避けの方法はmetaタグのrobotsの他にもう一つあって カスタムロボットヘッダータグ を使うことができる。これは管理画面の設定や編集画面の投稿の設定からスイッチを入れるだけだから簡単だけれども不利な点が一つだけあって別々の種類のページが幾つか混ざってしまっている。なのでページの種類を細かく分けて検索避けを…

HTML Living Standardでのfigure要素やblockquote要素などの付帯情報のマークアップ

イメージ

HTMLの標準仕様が2021年1月29日にW3CのHTML5からWHATWGのHTML Living Standardに変更された。 HTML Living StandardとHTMLの歴史 その流れで、結構、大きな違いというか、個人的にやっていたfigureタグやblockquoteタグへのfooterタグのマークアップが通用しなくなったので、どうすれば良いかを纏めておきたい。 ブラウザがHTML5からHTML Living Standardへ完全に移行するわけではないから従来のままのマークアップでもサイトの表示や構成に直ちに不都合が生じるわけではない。 HTMLの標準仕様がWHATWGのHTML Living Standardになったからこれからは合わせてやって行くべきだけど、しかし以前の対応しないマークアップもなるべくならば合わせてやり直した方が良い。 HTML Living Standar…

HTMLのemとstrongとiとbの使い分けについて

イメージ

サイト作成でHTMLのemとstrongはHTML5/Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em/強調タグとは何か strong/重要性タグとは何か i/斜体タグとは何か b/太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em/強調タグとは何か HTMLのemタグのemはemphasis/強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不可欠な部位を形成する。強調が使用される正…