Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / CC0 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SVGのgタグとsymbolタグの違い インラ…
アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。 ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少しずれて何なのかと調べてみて自動広告を外したら直ったので、原因はこれしかないと分かった。 Googleでアドセンスの自動広告の出し方が変更されれば今までにないことが起きる可能性は十分にあるし、または自分のサイトのテンプレートの変更も影響しないとはかぎらないから注意しなくてはならない。 アドセンスの自動広告がどういうふうに表示されるかは良く分からないし、たとえ分かっても広告コードを非公式に変更するとペナルティーを食らう恐れが全くないわけではないから厄介だ。 個人的にアドセンスの自動広…
サイトのコンテンツをサイト全体とは別に子要素として上下左右に移動して表示できるスクロールボックスをデザインのCSSを使ってパソコンやタブレットやスマホなどの様々なデバイスの画面幅に合わせられるレスポンシブな作り方を纏めた。 目次 スクロールボックスに必要なCSS 縦スクロールボックスの作り方 縦スクロールボックスのサンプル サンプルのソースコード 横スクロールボックスの作り方 min()を使った横幅一杯の指定 縦スクロールボックスのサンプル サンプルのソースコード スクロールボックスに必要なCSS 紫陽花の大きな写真が縦横のスクロールで表示される。 画像や文章などのコンテンツを入れるボックスの大きさとスクロールの指定がなくてはならない。 その他に横スクロールで文章のコンテンツは行毎の折り返しを解除するための指定も必要になる。 縦と横のスクロールボックスの作り方は基本的に同じだけれども横の方が文章の折り返しや表示領…
サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。 画像や動画が周りの要素とずれる原因 サイトの画像や動画が周りの要素とずれる原因はHTMLの画像を表示するimgタグや動画を表示するiframeタグの扱いが影響している。 imgとiframeは改行なしの要素で、縦位置がベースラインとなり、次の列の要素との間に僅かな空間が取られる。 日本語にはないけれども例えば英語では「g」と「j」と「p」と「q」と「y」の文字が本体よりも下に伸びるところがベースラインの下になる。 HTMLでそうしたベースラインの下が画像のimgタグや動画のiframeの下の隙間に相…
BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout：管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。 …
ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しかし何とか考え通りの表示を果たしたので、覚え書きというか、どうすれば上手く行ったかの対処法を纏めておきたい。 目次 フレックスボックスと画像を分けて捉える 画像を親ボックスに入れて文章と揃える方法 画像の親ボックスと文章の四対六の横並びの例 画像をそのままで文章と揃える方法 画像自体と文章の四対六の横並びの例 フレックスボックスと画像を分けて捉える 失敗の原因として気付いたのは画像を親ボックスに入れて画像の大きさだけを指定して文章と合わせようとした。するとフレックスボックスに対しては画像の親…
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, pe…
JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford on Unsplash 一般的にメニューをスライドしたり、ボタンをフェードしたりするなどの コンテンツのアニメーションを介した表示と非表示の切り替え に役立つ。 transitionendイベントでtransitionを捕捉する 何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。 transformとaddEventListen…
スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。 スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。 リンクの光の色を変更する方法 CSSにスマホのハイライトカラーを変更するマークアップがある。 -webkit-tap-highlight-color スマホのリンクのハイライトカラー 通常のcolor／色やbackground-color／背景色のように色名や色コードの値を指定してデザインを付けられる…
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"…