スキップしてメイン コンテンツに移動
ラベル(ファイル)が付いた投稿を表示しています すべて表示

Bloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ

イメージ

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で利用可能なSVGアイコンの独自タグによるマークアップ

イメージ

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のフォールバックサブドメインについて

イメージ

Bloggerの管理画面が更新されて「設定」の「公開しています」に新しく追加された項目にフォールバックサブドメインがある。 フォールバックサブドメインとは何か 設定|Blogger カスタムドメインの登録と関連してメインとなるドメインの他に(共通する独自ドメインから)一つだけ同じようにブログのサーバーに接続することができるようにする。 フォールバックサブドメインは通常のサブドメインを読み込む間のサーバーの障害への予防策として追加されるサブドメインです。ドメインに一つ以上の使用できるサブドメインがある場合にはドメインの登録済みのサーバーにサブドメインを設定するとメインとなるドメインはフォールバック――無視できるものの微細な低速度状態の閲覧を得られるようになります。 原文 A Fallback subdomain is a subdomain added as a precursive measure …

Juno Downloadで楽曲を購入する方法

イメージ

Juno Download は音楽データの購入サイトで、イギリスでエレクトロを中心にドラムンベースやソウルやヒップホップやハウスやポップなどを取り扱っている。 日本からでもクレジット/デビットカードやオンライン決済サービスの決済で使えるので、楽曲を購入する方法を纏めておくけど、現状は日本語版がないから些か注意を要する。 Juno Downloadでの楽曲購入の流れ 商品ページ|Juno Download 海外のサイトで日本からの購入では商品価格に当時の為替相場が反映する。料金表示がイギリスの£になっているけれども日本の円に変えることができて画面の最上段の右上の人型のドロップメニューの最下段の「My currency」(私の通貨)を使う。最初は「GBP」(イギリスポンド)だけれども押すと他の通貨を幾つか選択できて「JPY」(日本円)がある。選択するとサイトの商品価格が変更される。 商品を選択する フォー…

JavaScriptのFetchで取得したデータをDocumentへ適合できるDOMParserの使い方

イメージ

JavaScriptのプログラミングでサーバーを介したデータの受け渡し:Ajax通信を行う仕組みの一つに Fetch API がある。オブジェクトに最初からウェブの送受信の時間差の難点を克服する Promise を想定して使えるのが特徴で、旧来の XMLHttpRequest API と比べて便利に刷新された機能を有する。 しかし取得するデータが Document インターフェースに属さないのがちょっと使い辛い。 例えばfetch()メソッドでhtmlファイルのデータをtextで受け取ってもそこからHTMLを操作するのはUSVStringだから合わなくて全く不可能なのが厄介みたいな場合が出て来る。 Fetch APIはデータに特化して読み書きに純粋に注力するべく考案されているのか、少なくともhtmlファイルなどを一つのDOMツリーとして種々と操作するには却って旧来のXMLHttpRequestこそまだ…

インラインSVGで線や丸や四角や三角や弧を描いて色を塗るマークアップ

イメージ

HTMLのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 SVGはScalable Vect Graphics(スケーラブルベクターグラフィックス)の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の 一般的なjpgやpngやgifの画像 のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにSVGファイルの画像を表示するにはimgタグで <img src="画像URL"> とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。SV…

JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード

イメージ

ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。 二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイル audio:音楽 video:動画 track:字幕 script:JavaScript stylesheet:CSS font:フォント image:画像 fetch crossorigin:XHR/fetch worker:Worker/SharedWorker em…

サイトの表示速度をlinkタグの「rel="preconnect"」で上げる/WebPagetestで事前接続を調べる

イメージ

HTMLの リソースヒント ( 日本語訳 )に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。 Luminescence of cars running on a dark road by Mateusz Dach [ CC0 ], via Pexels 目次 リソースヒントのpreconnectの仕組み linkタグの「rel="preconnect"」の記述法 サイトの表示速度を上げ易くする条件 WebPagetestで事前接続を調べる方法 WebPagetestの通常の入力画面の日本語訳 事前接…

normalize.cssを最新バージョンで使おう

イメージ

Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのソースコードの冒頭付近に normalize.css が付いている。 normalize.cssはCSSの標準化を意味していてブラウザ毎のサイトのHTMLのデフォルトのデザインの互換性を保つためのCSSの独自のソースコードなんだ。 normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。 原文 Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, …

Search Consoleのrobots.txtテスターでサイトのrobots.txtをしっかり確認しておく

イメージ

サイトのrobots.txtは検索エンジンがサイト内容を把握する検索ロボットのクローラーをブロックするために主に使われるファイルだ。 robots.txtで除外されたページは検索エンジンに読み込まれないので、検索結果に出ない場合が多い。検索避けとは少し違ってどこかにリンクがあるとURLだけでもクローラーに読み取られて検索結果に出る場合もないわけではないので、完全な検索避けとは混同しないように注意して使わなくてはならない。 一般的にログインページなどの検索結果に出すべきではないURLを対象にして設定される。 しかしサイトの検索エンジンからのアクセスアップのSEO(検索エンジン最適化)対策にも役立つ。 というのは検索エンジンのクローラーはサイトにやって来ていつも全てのページを巡回するわけではないし、ページ毎に一度でコンテンツを隅々まで把握するわけでもないらしくて検索結果に不要なページを予め除外してお…