些細な日常
アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正できるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的に止めて欲しいと思うし、そのせいで、アドセンスの自動広告を最初の頃は使わないでいた。 目次 自動広告の微妙なズレが悩ましい CSSで微調整を行うことができる 自動広告の微調整に役立つ二つのCSS要素 自動広告の微調整のためのCSSの指定先 自動広告の微妙なズレが悩ましい 今は相当に改善されているけれどもブログで又出たのが一つ見付かった。 ページャーに寄ってこれでは誤クリックを誘発し兼ねないほどの不味い位置にある。 自動広告にとってデザインのバランスが取り難い場所があるのか、他は大丈夫なのにズレ…
display:gridでセルの配置を決めるgrid-template-columns（列）やgrid-template-rows（行）の値のfrと%はどちらもグリッドレイアウトの全体の中の割合（占有率）を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。 グリッドレイアウトのfrの単位の特徴 トラックを分け合って隙間を全体に収める。 二つのトラックを半文字分の隙間で均等に分ける セル（横幅：トラック合わせ） セル（横幅：トラック合わせ） HTML <div class="grid-layout"> <div class="cell pink">セル（横幅：トラック合わせ）</div> <div class="cell cyan"&g…
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, pe…
JavaScriptで時間を数えてスタートとストップとリセットの三つのボタンで操作できるストップウォッチのプログラムを組む。 目次 ストップウォッチの計測時間の表示 ストップウォッチのソースコード 時間を数えて表示するプログラムの概要 時間を数えて表示するプログラムの説明 ストップウォッチの計測時間の表示 00:00.00.00 スタート ストップ リセット ストップウォッチのソースコード HTML <figure class="time"> <p class="counter">00:00.00.00</p> <button class="start" type="button">スタート</button> <button class="stop"…
HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、CSS関数の calc() を使ってifra…
サイトに インラインSVG で描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。SVG画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている。 butt（切り出し／真っ直ぐ） stroke-linecap="butt" 初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。 round（丸い） stroke-linecap="round" 線の両端は線自体よりも少し伸びて丸くなる。 square（平ら） stroke-linecap="square" 線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。 インラインSVGで描画された線の両端の形状がstrok…
Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン（縦横を均等に表示する／タイル張り）を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。 サイト作成で CSS のGrid Layout：displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。 目次 Bloggerの投稿画像の横並びやグリッドデザインについて CSSのGrid Layoutの画像向けの一般的な使い方 横並びの2×0のサンプル グリッドデザインの2×2のサンプル グリッドデザインの2×1のサンプル グリッドデザインの縦横に細分化したサンプル 縦横比…
ブロガーの大半はサイト広告を使ってもしっかり稼げない。世の中の七割のブログは一日のアクセスが五十人以下みたいに聞く。そして一割が千人以上なので、月収一万円は固くて調子が良ければ十万円くらいまで稼げるかも知れない。 当面、十人に一人のブロガーというと簡単そうに受け取るにせよ、アクセスならば正しく厳しくて一日千人以上を目指さなくては生活費を稼げるかどうかは怪しい、アフィリエイトでプロとして存分に儲けるスタートラインにも立てないまま、終わるしかない。 面白いというか、数字の捉え方が特徴的だ。十人に一人のブロガーが一日千人以上のアクセスを得ているとは何だろう。アフィリエイトは易しいのか、難しいのか、どっちなんだと笑う。 誰にでもできる物事の中身が崖っ淵みたいな感じで、翻って崖っ淵では誰にもできない物事なのに見かけは反対になっているのがアフィリエイトの世界と呼ぶ他はなくなる。 なぜかはアフィリエイトはブロ…
昨日、競馬の天皇賞（春）をテレビで久し振りに観た。 キタサンブラック が一番人気で、僅差で二番人気の サトノダイヤモンド と二強対決の様相を呈していた。 昨年末の有馬記念でサトノダイヤモンドがクビ差でキタサンブラックを負かしていたらしくて物語性も強かった。キタサンブラックは雪辱を果たせるか、サトノダイヤモンドはやはり寄せ付けないのかと否が応にも興奮が高まった。 キタサンブラックとサトノダイヤモンドの二強対決の天皇賞（春） 2017年 天皇賞（春）（GⅠ） | キタサンブラック | JRA公式｜JRA公式チャンネル 馬齢が一つ違っていて有馬記念ではサトノダイヤモンドの斤量（馬に課される重り）が若くて少なかったけれども今回の天皇賞（春）ではキタサンブラックと同じなったからレースを予想するのには注目だった。サトノダイヤモンドが競走馬として十分に成長してないとすると厳しくなるし、キタサンブラックが老いて力を落と…
色々、いっては来たにせよ、誰かと出会って明らかに優しいと感じることは実際には少なかったらしい。僕には 透き通った心の持ち主 がいたから比べても仕方がないけど、または他には一回もなかったみたいに特別に思わされるような経験が得られた。 ある人を見ていて感じて思った、優しいと。気にかけてくれるだけを嬉しがる僕だったとしたら紡ぎ出す言葉に恵まれないかも知れない。大海では鯨の群れが尾を振って海面を否激しく叩くばかりだ。 何が違うのか。他の人とある人は同じように僕を気にかけてくれるかぎり、それだけの差というと殿様気分に浸らされたいみたいで居心地が悪くなる。庶民でしかなかったと身分的には悟る。 女のある人で人の噂では四十歳前後だったらしい。噂の主は関西出の女性で彼女とは同級生だったみたいだけど、手に刺青の青い線がちらちら見えた。本物なのかと日を置いて風呂で洗い落とされたり、シールならば剥がされたりするだろうと黙…