些細な日常
Bloggerはブログとして使われるのが普通なんだけれどもテンプレートのカスタマイズによってトップページを固定表示すればホームページ（汎用的なウェブサイト）のようなデザインに作り変えることができる。 些細な日常に取り入れたので、どんな感じかは トップスページ から確認できる。 テキストウィジェットをメインカラムの先頭に挿入して記事／追加ページと同じように表示して通常のスニペットによる個々の記事のリンクを並べるデザインは止めた。 目次 Bloggerをホームページとして使う利点 ブログをメインコンテンツにしないで運営できる 検索エンジンからのアクセスアップを期待できる Bloggerのトップページのカスタマイズ テキストウィジェットを追加する ホームページのデザインを追加する 不要なスニペットを非表示にする Bloggerをホームページとして使う利点 Bloggerをホームページとして使えると利点としてブログをメイン…
以前からブログの文字サイズが大きくなってからCSSの指定通りのものになるという奇妙なことが良く起きていた。ブラウザはAndroidのChromeで、はっきり覚えてないけれども他のブラウザではなかったかも知れず、あるいはAndroidのChromeで他のサイトではなかったかも知れない。僕が 使用している自作のBlogger用テンプレートのImaginary では全て必ず文字サイズが時間差で正しく表示されることになっていて不快だった。 AndroidのChromeのバグなのかと思ってアップデートで直ることを期待しながらもはや、数年以上、経った。問題が全く起きなくなった時期もあったと思うけど、しかし最近は本当に酷くなって文字サイズが大きくなったまま、CSSの指定通りのものに変わらないことまで起こるようになって来たので、何とかしなくては行けないとついに対処法を考えることにした。 ブラウザの文字サイズ自動…
僕が提供する Blogger用テンプレートのImaginary の特徴の一つに文書方向の左右対応がある。日本語や英語などの右から左へ書いて行く言語がある一方で、アラビア語やヘブライ語などの右から左へ書いて行く言語もある。Imginaryはどちらでもブログが適切に表示されるように設計されているんだ。 サイトの文書の方向はHTMLのdir属性のltrかrtで決められてアイコンなどの向きを左右に反転させたいものがあればCSSのtransform要素のscaleX(-1)を使うとデザインを合わせられる。 この二つで全て上手く行くと思ったら大間違いともいうべき苦しみを味わわされることになったので、なぜかの原因と修正できた対処法を載せておきたい。 SVGのtext要素は反対方向の文書で適切に表示されない テンプレートに新しく翻訳ウィジェットを搭載してボタンで起動するために翻訳アイコンを追加したら元から入れ替えた…
inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CSSの二つの方法を見付けて望み通りのデザインを付けられるようになったので、紹介する。 目次 inputタグのtype-textは入力フォントで高さがコロコロ変わる inputタグのtype-textとtype-buttonの英語と日本語の高さの比較 フォームとボタンの高さを揃えるCSSの二つのマークアップ vertical-align:middleをフォームとボタンの両方にかけると良い display:flexをフォームとボタンの親ボックスにかけると良い inputタグのtype-textは…
Bloggerのテンプレートのヴァージョンは三つあり、それぞれに使い方が少し異なる。又、テンプレートのソースコードをHTML編集などから書き換える場合、Bloggerの独自タグであるウィジェットタグに互換性がないものもあるので、注意して使い分ける必要がある。 Bloggerのテンプレートヴァージョンの指定 テンプレートのhtmlタグに特定の属性を付けるか何も付けないことでヴァージョンが確定する。 ヴァージョン3 b:layoutsVersion='3' ヴァージョン2 b:version='2' ヴァージョン1 指定なし Bloggerのテンプレートのヴァージョンによって使用できるヴィジェットのヴァージョンが異なっている。 もう一つクラシックテーマ（第一世代）というのが管理画面のレイアウトのメニューから利用できるけれどもこれはテンプレートヴァージョンと無縁のもので、最初のもの…
ブログのフッターに 年度別の一件 という画像付きの スクロールボックス のリンクを作成した。 スクロールボックスを作ると片端にスクロールの方向のスクロールバーが表示されていつもは隠された領域があることが分かるから便利だと思ってそののままにしていた。しかしながら今回のスクロールボックスはボタンを付けて隠された領域があることが分かるからスクロールバーはデザインの邪魔にしかならないと消したくなった。 スクロールボックスのスクロールバーを消す スクロールボックスのスクロールバーは サイトのデザインのCSSのマークアップ で簡単に消すことができてスクロールバーの太さを指定できるscrollbar-widthを使うと良い。 scrollbar-widthのサンプルのソースコード HTML <div class="scroll-box”> スクロールボックスのコンテンツ </div> CSS .…
今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえば社会は ベーシックインカム へ移行するべきだ し、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できる ビーバーの湿地帯 のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。 昨今、僕のブログの減収は酷いもので、最大の原因は Googleの個人サイト潰し によ…
Appleから送られた迷惑メール について調べながら併せて凄いと思ったことがあった。どうもAppleにはAppleやその他の特定の企業からのメールが本物かどうかを見分ける方法が確立されている。 BIMIはメールの差出人が本物かどうかを教える BIMI（Brand Indicators for Message Identification／メッセージ識別のためのブランド指標）という技術（ Apple メールの BIMI サポートについて ）で、Appleを始めとした対応する企業からのメールの差出人のアイコンを押すと「デジタル認証済み」という本物の証明書が表示される。 2022年の最終期ぐらいから、Appleからのメールにはディジタル署名をつけて送ってくるようになりました。このディジタル署名を調べれば本当にAppleの関連組織からのメールかどうか誰でも簡単に判定できます。 はに｜ ディジタル認証でApple…
スマホを使い始めた頃からカスタマイズを考えたけれども本当に良いと思えるランチャーとアイコンパックがなくて何もしないことにして十年が過ぎた。しかし 小型デスクトップという素晴らしいランチャー が新しく見付かって、もう一度、アイコンパックも探してみたら同じくらい素晴らしいものが出て来たので、嬉々と使い始めた。 Arcticonsを気に入る理由 タブレットの場合を見る Playストア Arcticons - Line Icon Pack F-Droid Arcticons OSの要件 Android 5.0以上 提供者 Donno リリース 2021年九月13日 Arcticons（アークティコンズ）は白の線描の綺麗な無料のアイコンパックで、九千以上という種類が非常に豊富なところが便利だと感じる。 Arcticonsの色違いのタイプ 黒 Playストア F-Droid マテリアルユー Playストア F-Droid デバイスの壁際などの…
Androidのランチャーで軽量を謳った小型デスクトップ（Mini Desktop）を見付けて良いかも知れないと暫く使ってみたけれども特に問題はなくて快適だから気に入って使い続けることにした。 小型デスクトップを気に入る理由 タブレットの場合を見る Playストア 小型デスクトップ (ランチャー) OSの要件 Android 4.1以上 提供元 AtomicAdd Team リリース 2015年5月13日 小型デスクトップは無料のランチャーアプリで、使ってみたら軽量で快適という好印象を抱いた。 アプリの容量が非常に少ない アプリ情報｜設定｜ Android 小型デスクトップの容量は非常に少なくてストレージの容量を圧迫しない。 メーカーの触れ込みでは「170KB」で「Android の世界で最小のアプリのランチャー」（ AtomicAdd ）とされる。巷の軽量ランチャーが好きな人にとっては正しく見逃せないアプリといって良い。 …
HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。 開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。 popover｜ MDN Web Docs ｜Mozilla ボタンとコン…
Bloggerのテンプレートは管理画面の「テーマ」のカスタマイズのテーマデザイナーからヘッダー画像を追加したり、コンテンツの文字の大きさや色を変更したり、デザインのCSSをを追加したりすることができる。 Bloggerのテーマデザイナーは利用者がブログのデザインのCSSを簡単に操作できるようにするためのツールなんだけれどもこれは最初から決められたものではなく、どの領域のどの要素を操作できるようにするかを管理画面の「テーマ」のカスタマイズのHTML編集からカスタマイズすることができる。 目次 Variableタグがテーマデザイナーを指定する Bloggerの七種類のVariableタグ Variableタグの基本的なマークアップの仕方 Variableタグのマークアップの必須事項 Variableタグとテーマデザイナーの対応関係 半透明の色を設定するときの注意点 旧ヴァージョンで使用可能なvariableタ…
HTMLの要素を固定して表示するCSSというと position:fixed を使うのが便利だけれども配置するための起点が画面全体（ビューポート）になってしまって親要素を起点として子要素を固定することができないんだ。 例えば スクロールボックス 内にボタンを固定して表示したい場合にどうするか。 考えると二つの方法がCSSで可能で、 親要素と子要素の一組をさらに別の要素に入れてボックス化した場合 とそうではなくて 親要素と子要素の一組だけの場合 が可能なので、それぞれのマークアップを紹介する。 親要素と子要素をボックス化した場合のCSS 親要素と子要素の一組をさらにdiv要素などで囲ってボックス化して親要素と一体化したボックスの祖先要素（親の親）を起点として子要素を固定表示すると。画面上、親要素の中に固定表示するのと同じ結果になる。 position:relativeとabsoluteの固定表示のマークアップ サンプ…
Appleの創業者の一人で、パソコンとスマホを世に送り出すことに最も寄与した スティーブ・ジョブズ は本当に飛んでもなく凄い人だと思う。 僕も作家活動のために最初に購入したパソコンがAppleのMacintoshのColor Classic Ⅱで、非常に気に入ってその後は手軽なノート型のPowerBookのシリーズを愛用していた。 当時、使っていたワープロのソフトの互換性が絶たれて買い換えるのは危ないと感じて以来、パソコンにかぎらず、Appleの製品を全て遠ざけるようになってしまったけど、しかし膵臓癌で五十四歳で急逝したスティーブ・ジョブズの凄まじく優れた業績を振り返るほどに今はもうソフトの違いでファイルの扱いに大きく苦まされる時代ではないし、又使って良いとも感じる。 スティーブ・ジョブズの美的感覚を養った日本の 新版画 Steve Jobs shows off iPhone 4 at the 201…
