些細な日常
僕が提供する Blogger用テンプレートのImaginary への質問で、デザインが壊れて何とかして欲しいというのがあって原因の一つにブラウザがある。サイト作成のHTMLやCSSやJavaScriptのコードの一部に未対応だったり、場合によってアップデートでバグが起きて急に反映しなくなったりもする。 ブラウザの問題はいつか対応して来ると期待されるかぎり、待つしかないけれども、その間、テンプレートが壊れているのはどうにも耐えられないとなるとコードを変えるか多少の違和感ならばブラウザを除外してやり過ごせる。 今回、JavaScriptで訪問者のブラウザをOSと共にデバイス毎に判別して一部のコードを除外する方法を調べたので、纏めておきたい。 JavaScriptでブラウザとOSを判別する JavaScriptでブラウザが何かを取得する方法としてユーザーエージェント…
テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 position｜ MDN ｜Mozilla 通常、position:fixedのコンテンツは固定位置指定として親…
BloggerでGoogleやYahoo!などの検索エンジンにブログを表示させなくする検索避けの方法としてHTML編集でのmetaタグのrobotsのマークアップについて紹介する。 目次 検索避けにmetaタグのrobotsを使う利点 Bloggerで使われるページの種類 metaタグのrobotsのマークアップの仕方 ブログのテンプレートの記載場所 検索避けを行うページの振り分け 検索避けにmetaタグのrobotsを使う利点 Robot by Janson_G / Pixabay Bloggerの検索避けの方法はmetaタグのrobotsの他にもう一つあって カスタムロボットヘッダータグ を使うことができる。これは管理画面の設定や編集画面の投稿の設定からスイッチを入れるだけだから簡単だけれども不利な点が一つだけあって別々の種類のページが幾つか混ざってしまっている。な…
Bloggerブログのテンプレートは振り分けを使ってページ毎にコンテンツを表示できる。使い方は条件分岐の独自タグのifの開始タグと終了タグでコンテンツを囲むだけだから非常に簡単だ。Bloggerのブログのカスタマイズにとても便利なので、どんなページにコンテンツを振り分けて表示できるかを一覧に纏めておきたいと思う。 目次 ページ振り分けの二種類のifタグ data:view型の振り分けタグ data:blog型の振り分けタグ ページ振り分けのifタグの使い方 入れ子のタグで条件を絞り込む 条件や条件の判定を切り替える 複数の振り分け条件を盛り込む ページ振り分けの二種類のifタグ data:view型の振り分けタグ ifに振り分け条件のcondを個別に付ける。 公式テーマのContempoとSohoとEmporioとNotableから追加された。しかし以前のテーマでも同じよ…