些細な日常

サイトにインラインsvgで描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。svg画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている。 butt（切り出し／真っ直ぐ） stroke-linecap="butt" 初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。 round（丸い） stroke-linecap="round" 線の両端は線自体よりも少し伸びて丸くなる。 square（平ら） stroke-linecap="square" 線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。 インラインsvgで描画された…

pathは座標からどんな線でも数多く描けるインラインsvgで最も自由度の高いタグだ。 しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240"> <path d="M50 110 L160 20, 270 110 h-220 M80 110 v110 h160 v-110 M240 140 h-50 v80 M95 125 h65 v40 h-65 v-40" stroke-width="4" stroke="#4682b4"…

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

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

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像（og:image）が記事の抜粋の画像の掲載数に一致している。OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではイン…

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。目次グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねるグリッドデザインで画像に文字を重ねるソースコード画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置するcssのdisplayのgr…

Bloggerはウェブのテーマのカスタマイズ／Bloggerテーマデザイナーの「背景」からヘッダー画像を設定できる。デフォルトで用意された中から画像を選んで取り付けるとブログの最下段のフッターには「テーマ画像の作成者」と本人の名前のオリジナル画像のページへのリンクも表示される。自分で写真や絵をアップロードしてヘッダー 画像を取り付けるとブログのフッターには何も出ない。僕はブログのヘッダー画像に写真を使っているけれども自分で撮影するとか作成したわけではない。幸せの良さとして素晴らしく気に入ったクリスティン・フォークトの写真を使っている。ライセンスがパブリックドメインと変わらないクリエイティブコモンズのCC0だから出典を示さず、誰でも勝手に使って良いんだけれども気前良く提供してくれた本人への感謝を込めて少しでも紹介しておきたいと思う。ソースコードで「テーマ画像の作成者」は表示できるBlogg…

Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン（縦横を均等に表示する／タイル張り）を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。サイト作成でcssのGrid Layout：displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。目次Bloggerの投稿画像の横並びやグリッドデザインの前提条件個別の記事にcssのGrid Layoutを取り入れる記述についてBloggerの投稿画像にdisplayのgridを的確に反映させる新テーマでのソースコードの修正点旧テーマでのソースコードの修…

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

サイトのデザインでcssのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。何とかならないかと考えながら対処法が見付かったので、纏めておきたい。floatで背景や枠線が付かなければoverflowのhiddenも使おう一文目
二文目
三文目
四文目 サンプルのソースコードhtml<div class="fbox"> <p>一文目<br>二文目<br>三文目<br>四文目</p> <img src="画像URL"> </div>css.fbox {border:2px #00008b soli…

サイトで無料で使える写真などのフリー素材のWebサービスは海外に多いけれども日本にもぱくたそ（PAKUTASO）を見付けて良いと思った。ダイヤル式電話機の使い方がわからずスマホから電話する平成生まれ by すしぱく via ぱくたそユニークな写真が貰えるというか、外国人からは得難いはずの日本人ならではの小綺麗に纏まったようなセンスと数多く出会えるのが日本のWebサービスとして流石に有り難い。ぱくたそは画質も優れていて高品位な写真を提供していて素晴らしいと心から拍手を送るダウンロードはＳのサムネサイズとＭのブログサイズとＬの高解像度版の三つ――ウェブで切り出ってトリミングの機能も付いている――から選べる。最高のＬの高解像度版だと1MBを越えるような非常に大きなサイズになる。サイトで使うには一般的にＭのブログサイズがスマホからパソコンまでの閲覧に適していて容量も軽くて必要十分だと思うけれども…

十月下旬で今年も後二ヵ月しかない。辛いのはブログのアクセスが予定通りに伸びるかどうか。年内に一日数百人を達成したい。Black and white woman by felixheidrich91 [CC0], via Pixabay今月に入ってからやっと訪問者が一日百人を越え続けている。Googleでの表示回数が千回を確実に越えていてクリック数が百回を偶に越えているという状況だ。ブログを開設して十ヵ月で一日百人のアクセスだから平均すれば一ヵ月に十人ずつ増えているわけで、サイト広告で生活費を稼ぐには一日何千何万のアクセスが必要なのに何年もかかるのでは伸び率が悪過ぎて死んでしまうんだ――。人気ブロガーのイケダハヤトやまなしばにはなれないのか。あちこち宣伝して回りながら人々の注目を集めるのは大変で、やっても上手く行くかどうかは本当に難しいし、結局は検索エンジンの検索結果で頭角を表すのが先決な…

サイトの表示速度を考えると画像が最も容量が大きくて支障を来し兼ねない。一枚で他の全てを平気で上回ったりもする。影響が非常に大きいので、載せるならば予め軽量化しておくには越さない。大きさを小さくリサイズしたり、データを高く圧縮したりする方法があってそうしたアプリやWebサービスを使うと良いと思う。ただし難しいのは画質だ。写真でも何でも画像は小さくリサイズしたり、高く圧縮したりすればするほどに画質を落とし易くてサイトのデザインが崩れて来てしまう。嘆かざるを得なくなるんだ。目次画像を最大限に軽量化するためにリサイズと圧縮の二つの方法の組み合わせる一回目の編集：アプリのPhotoshop Expressでリサイズする二回目の編集：WebサービスのTinyJPGで圧縮するホームページやブログで画像を載せる際には画質と容量の鬩ぎ合いが避けられなくて絶えず、最高のバランスを模索するように画像を望み通り…