スキップしてメイン コンテンツに移動

投稿

ラベル(ファイル)が付いた投稿を表示しています

インライン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:JavaScriptstylesheet:cssfont:フォントimage:画像fetch crossorigin:XHR/fetchworker:Worker/SharedWorkerem…

サイトの表示速度を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について via ニコラス・ギャラガー(訳出)開発者の一人がニコラス・ギャラガーという。昨年からモバイルで使い易くなったウェブアプリのTwitter Liteの制作にも参加したらしい。世界有数のソーシャルメディアのTwitterに関与するとは相当な経歴…

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

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

サイトのファビコンとウェブクリップアイコンの汎用的な設定とBloggerでの導入手順

イメージ
サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ/タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。ファビコンの汎用的な設定についてサーバーに専用の画像をアップロードサイトのhead内にlinkタグで画像URLを記載ファビコンのサイズ縦横16~64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。ファイル形式はpngが小さめの画像の画質には崩れ難くて適しているけれどもWindows…

Bloggerはサイト広告のGoogleアドセンスのads.txtをサブドメインでも設定できる

昨年からサイト広告のGoogleアドセンスがads.txtに対応した。サイトのサーバーにads.txtのファイルをアップロードしておくとサイト広告の配信が適正なサイトで行われていると判断されるようになる。広告主が気に入ったサイトにサイト広告を入札できる仕組みを作り出すのが主な目的みたいで、ads.txtに対応してないサイトはサイト広告が十分に出なくなるかも知れないともいわれている。サイトの管理人にとっては適正なサイトと不適正なサイト(本人が誤ったか、他の誰かが勝手にやったか)が区別されるからサイト広告の収益のトラブルが減らせる利点もあるんだ。Googleアドセンスではads.txtを使わなくても構わないけれども推奨されているからなるべくならば使いたいと考える。ads.txt の使用は必須ではありませんが、Google は使用を推奨します。ads.txt ファイルを設置すれば、購入者が偽物…

Google FontsのEarly accessはcssのfont-faceで軽量化して使える

ホームページでGoogle FontsのEarly accessから日本語フォントのNoto Sans Japaneseを無料で使っている。とても気に入っていてAndroidのスマホでマシュマロから搭載されているのも嬉しいかぎりだ。しかしWebフォントとしてホームページにcssへlinkのstylesheetや@importで取り込んで表示するのは非常に厳しくて表示速度を著しく低下させる。日本語は漢字が多くて英語などと比べるとデータサイズを大幅に増やしてしまうせいだ。3MBくらいだからちょっとした画像を300KBとして換算しても、百枚、載せているのと変わらない。追記:Google Fonts launches Japanese support(Googleフォントは日本語のサポートを開始)によるとフォントスライシングシステムによって、八割程、日本語のファイルサイズを削減できたようだ。世の…

サイトへのAMPのとても簡単な導入手順

イメージ
普段、Google検索を使っていてAMPの実装サイトはブラウザで瞬時に開いたりして表示速度が圧倒的に速い。というのもGoogleにサイト内容がキャッシュされていてサイトへ行かずに出て来るためだ。AMPサイトならばGoogle検索でのサイト評価が上がるとも聞かれるし、訪問者の利便性を高めると共に検索エンジンからのアクセスアップにも繋がるはずだ。羨ましくて自分でもやってみたいと思うけれども既存のサイトを専用のコードで書き換えなくてはならないか、またはオリジナルとは別のAMPサイトを作成しなくてはならないのが大変だから無理だと何もせずにいた。ところが好奇心からサイトへのAMPの導入手順を調べていたら意外とできそうな感じがし来て実際にやってみたら最初はエラーを連発して相当に苦しんだにしても色々と細かく学びながら成功するや否やとても簡単だったと振り返ってしまった。有効なAMPページです via A…

BloggerでサイトマップのxmlファイルやRSS/Atomフィードを送信する

Search Consoleでホームページやブログのサイトマップを送信するとGoogle検索にURLが知られ易くなり、クローラーの平均巡回数を上げながらサイト内容が多めに把握されて高品質なコンテンツならば検索結果で有利に紹介されるかも知れない。BingやYandexなど、他にも一部のロボット型の検索エンジンでウェブマスターツールに登録するとサイトマップを送信することができるようになっている。検索エンジンからのアクセスアップの常套手段の一つで、SEO(検索エンジン最適化)対策として基本中の基本といって良いと思う。検索エンジンに送信するサイトマップはxmlファイルで作成する(サイトマップを作成、送信する)。一般的に自分で行うか、サイトマップを作成などのツールを使う。そしてサイトのサーバーにアップロードして検索エンジンの管理ページで設定すると完了するんだ。無料サービスのホームページやブログだと…

アイコンの蜜蜂のファイル形式がjpegだったと気付いてpngに置き換えることにした

イメージ
一般的にイラストや小さな画像はjpegよりもpngのファイル形式が劣化が少ないからアイコンには向いていた。
僕が蜜蜂を作成して自分のために使うようになったのは数年前からだけれども画像のファイル形式をまだ大して気にかけてなかったらしい。まさかのjpegだったので、思い立って直ぐにpngで保存し直してアップロードしてみたら幾分か画質が良くなった感じがする。
Tumblrのアバターもファイル形式がjpegからpngに置き換えられるや綺麗さが増しながら発色も上がったのではないかと嬉しさが込み上げている。
ブログのヘッダーに背景の公園の森の写真と共にアイコンの蜜蜂を戻してしまった。
アクセスが伸び切れないし、訪問者の直帰率や滞在時間も良くならないので、先日、「記事が何よりも目立つようにヘッダーも添え物でしかないふうに」といったばかりだけれどもブログ自体の魅力こそ表すべきかも知れなかった。
ホームページから来…

画像データのjpegとpngの画質の違いとファイルの使い分けについて

イメージ
ホームページやブログに画像をアップロードして載せる際に小さくリサイズすると画質が落ちてしまうので、なるべく避けようとするとファイル形式のjpeg(jpg)とpngの使い分けが重要だと考える。
一般的に写真はjpegファイルで、イラストやスクリーンショットはpngファイルを使うことが多い。
調べてみるとどちらも画質は同じくらいで、特徴としては前者は色の微妙の変化を出し易くて写真に向いていて後者は色の明確な変化を出し易くてイラストやスクリーンショットに向いているといわれる。
画質が同じくらいならば面倒臭いから全てpngで良いはずだけど、ところがjpegよりも圧縮率が低くて写真なんかだと容量に可成の差が付く。pngだとファイルサイズが嵩んでしまってデバイスのストレージを圧迫したり、サイトによってはアップロードできなかったりするから不便なんだ。写真については高画質ならば容量は総じて大きめなので、データ…

二段階方式の動画作成

スマホで動画を作成するアプリが気に入ったのが一つもなくて非常に困っている。どれも帯に短し襷に長しという感じで、中々、納得するわけには行かないんだ。
パソコンでやるしかないとも思ったけれどもどれか一つに決めなくても良いのではないかと目の前の霧が晴れた。笑。
動画に音楽を付ける際にwavファイル(データ圧縮なし)を使いたくて常用のアプリは可能ながらも音質が劣化したので、駄目だったんだ。
しかしwavファイルを上手く扱えるアプリが手に入って考え出した。片方で画像だけ作っておいてもう片方で音楽を付ける。それぞれの力を合わせれば望み通りの結果を得られた。スマホでもはや動画の作成も十分にやれる。

雨はしとしと降りつつもバックアップ

今後、スマホを格安SIMにしたらauのEメールのアプリが動かなくなるかも知れないから危ない。Eメールのバックアップを取った。
しかしvmgという拡張子のファイルでスマホの手持ちの他のアプリでは開けなかった。パソコンのWindowsVistaのメモ帳で何とか開けたので、良かったよ。
昔、パソコンをMacintoshからWindowsに変えて作品のファイルが開けなくなったり、Windowsのままでもフロッピーディスクに長く入れていたデータが壊れたらしくて表示されなくなったり、本当に大変だったので、ファイルの移動や保存は慎重にやらなくてはならない。
外ではしとしと降り続く雨と共にバックアップの大切さを考え直させられた。