カテゴリ「サイト運営メモ」［119件］（4ページ目）
Gallery +1、#絵日記 - おいしいものスケッチ 新設
自分の日常で気に入った食べ物の絵をわりとよく描くことに気づき、個別にまとめたくなったので、ギャラリーに「絵日記 - おいしいものスケッチ」のセクションを作りました。
イラストを時系列で表示するという役割は、（てがろぐ設置日以降の分だけになりますが）サイトマップでも案内している「Memo-お絵描き-ギャラリーモードで表示」が十分果たしていますので、単独のギャラリーページに求められる役割は作品の性質ごとに分類・整理がきちんとされていることなのかなと。
実在商品のレポっぽい絵とかは他の作品と混ぜるとやや浮いてしまいますしね；
今後ほかの切り口でも絵日記を描いてまとめてみたいな。買い物とかおでかけとか。
ギャラリーがおそらく重すぎるのは理解しているのでいずれ抜本的な見直しをしないとな、とは思っています。
#お知らせ
自分の日常で気に入った食べ物の絵をわりとよく描くことに気づき、個別にまとめたくなったので、ギャラリーに「絵日記 - おいしいものスケッチ」のセクションを作りました。
イラストを時系列で表示するという役割は、（てがろぐ設置日以降の分だけになりますが）サイトマップでも案内している「Memo-お絵描き-ギャラリーモードで表示」が十分果たしていますので、単独のギャラリーページに求められる役割は作品の性質ごとに分類・整理がきちんとされていることなのかなと。
実在商品のレポっぽい絵とかは他の作品と混ぜるとやや浮いてしまいますしね；
今後ほかの切り口でも絵日記を描いてまとめてみたいな。買い物とかおでかけとか。
ギャラリーがおそらく重すぎるのは理解しているのでいずれ抜本的な見直しをしないとな、とは思っています。
#お知らせ
ツールチップが楽しすぎて何か所か仕込んできた…！
といってもマウスホバーするたびにそこかしこからいちいち説明が浮かんで来たら鬱陶しそうなので最低限にしましたが…。
ぱっと見はシンプルの方が好きなのに、いちいちだらだらと説明したがる癖がある自分にはツールチップ機能ぶっ刺さってしまいました。
javascriptを使ってないようには見えない。凄すぎ。
title属性がタイムラグなく即表示されてくれるならそれでも十分だったんですけどね。
液晶の小さい端末（PC以外を想定）では非表示にしてます。
#手打ちサイト #カスタマイズ #備忘録
といってもマウスホバーするたびにそこかしこからいちいち説明が浮かんで来たら鬱陶しそうなので最低限にしましたが…。
ぱっと見はシンプルの方が好きなのに、いちいちだらだらと説明したがる癖がある自分にはツールチップ機能ぶっ刺さってしまいました。
参考：HTML＆CSSだけ！ツールチップを表示するサンプルコード３選 ｜ 向壁虚造
javascriptを使ってないようには見えない。凄すぎ。
title属性がタイムラグなく即表示されてくれるならそれでも十分だったんですけどね。
液晶の小さい端末（PC以外を想定）では非表示にしてます。
#手打ちサイト #カスタマイズ #備忘録
Aboutページをプチ修正、リンクのポリシー変更など
折り畳みを活用してすっきりした見た目にしました。
クイックツアー
サイトマップと言うほどでもない、いいかげんなサイト地図をつくりました。
基本的にこのサイトはアクティブな更新箇所がてがろぐ一か所にほぼ集約されているので、不慣れな方が少しでも見たい情報にスムーズにたどり着ければいいなと思いまして。
ついで情報ですが、てがろぐのカテゴリ分けやタグ付けなどは割とこまめにやっていますので、てがろぐを使い慣れている方はURLのパラメータ付与などで遊んでみてもよいです。笑
たとえば「カテゴリ：お絵描き」だけを「ギャラリーモード」で「古い順に」表示するなんてこともできますよ。
余談、サイト名が旧の「Down to Earth」のままだったら、「ちきゅーの歩き方」とかそんな見出しにしたかもしれません。
サイト情報
基本何も変わってないですが、リンクについてのポリシーを少し変えました。
完全にリンクフリーとしていたものを、非営利の個人サイトに限りリンクフリーとしました。
キュレーションメディアの金儲けや、SNSなどでインスタントに消費されたくない意思を明確にしておきたいという趣旨です。
独自の創造的なメインコンテンツ（二次創作や日記なども当然それに含みます）に付随して少しアフィリエイトなどを貼ってるくらいなら気にしません。
こんな僻地の泡沫サイトなのでまず心配するような事態は起きないと思いますが、一億総ネット民となった今の世の中何があるかわからないので、思いつく範囲のことにはできるだけ備えておきたいという思いからの変更です。
ウェブ上に公開しているものはどれだけ露出を抑えていようが基本的にはリンクフリーかつ引用可能であるという根本は理解しているので、あくまでお願い程度の拘束力ではあります。
#お知らせ #カスタマイズ #手打ちサイト #めんどい思考 #てがろぐ
- 項目「クイックツアー」新設
- 項目「サイト情報」修正
折り畳みを活用してすっきりした見た目にしました。
クイックツアー
サイトマップと言うほどでもない、いいかげんなサイト地図をつくりました。
基本的にこのサイトはアクティブな更新箇所がてがろぐ一か所にほぼ集約されているので、不慣れな方が少しでも見たい情報にスムーズにたどり着ければいいなと思いまして。
ついで情報ですが、てがろぐのカテゴリ分けやタグ付けなどは割とこまめにやっていますので、てがろぐを使い慣れている方はURLのパラメータ付与などで遊んでみてもよいです。笑
たとえば「カテゴリ：お絵描き」だけを「ギャラリーモード」で「古い順に」表示するなんてこともできますよ。
余談、サイト名が旧の「Down to Earth」のままだったら、「ちきゅーの歩き方」とかそんな見出しにしたかもしれません。
サイト情報
基本何も変わってないですが、リンクについてのポリシーを少し変えました。
完全にリンクフリーとしていたものを、非営利の個人サイトに限りリンクフリーとしました。
キュレーションメディアの金儲けや、SNSなどでインスタントに消費されたくない意思を明確にしておきたいという趣旨です。
独自の創造的なメインコンテンツ（二次創作や日記なども当然それに含みます）に付随して少しアフィリエイトなどを貼ってるくらいなら気にしません。
こんな僻地の泡沫サイトなのでまず心配するような事態は起きないと思いますが、一億総ネット民となった今の世の中何があるかわからないので、思いつく範囲のことにはできるだけ備えておきたいという思いからの変更です。
ウェブ上に公開しているものはどれだけ露出を抑えていようが基本的にはリンクフリーかつ引用可能であるという根本は理解しているので、あくまでお願い程度の拘束力ではあります。
#お知らせ #カスタマイズ #手打ちサイト #めんどい思考 #てがろぐ
Aboutページより、旧バナーをお持ち帰りでお使いいただけるようにしました。（サイト名も旧のままです;;）
ただポップアップするモーダルウィンドウを使ってみたかったというだけなのですが…笑
参考：HTMLとCSSのコピペでできるモーダルウィンドウのデザイン3種 | DUB DESiGN
リニューアルしてから、ページ構成をかなりシンプルにしたので、良くも悪くもコンテンツの拡張性が乏しくなってしまいました。
今後もモーダルウィンドウを使って追加要素をいろいろ表示させてみたら面白いかもしれないですね。
【追記】戻る時の挙動がおかしい（というか多分仕様）のを確認。修正するかは未定です。
#お知らせ #備忘録 #手打ちサイト #カスタマイズ
ただポップアップするモーダルウィンドウを使ってみたかったというだけなのですが…笑
参考：HTMLとCSSのコピペでできるモーダルウィンドウのデザイン3種 | DUB DESiGN
リニューアルしてから、ページ構成をかなりシンプルにしたので、良くも悪くもコンテンツの拡張性が乏しくなってしまいました。
今後もモーダルウィンドウを使って追加要素をいろいろ表示させてみたら面白いかもしれないですね。
【追記】戻る時の挙動がおかしい（というか多分仕様）のを確認。修正するかは未定です。
#お知らせ #備忘録 #手打ちサイト #カスタマイズ
もともと10年ひと区切りまで続けたくてサイトを始めましたが、本当に約10年間ほぼ毎日日記を書いている現役バリバリの日記サイトを見つけてしまって日記を書くモチベに火が付きました。（私は絵を描け…）
一見些細なことでも、10年も続けていると宝になるという私の予測の証明になっていましたね。
もうそこまでいくと、内容如何よりも続けてくれてること自体が価値や魅力になるんだなぁと。
凄いものを見ました。私がぼんやり思い描いて目指していた場所は本当にあったんだなぁ。
数の正義、継続の正義みたいなものは確実にあります。
何も継続してこれなかった人間が言うんだから間違いない。
ちなみに誕生してから10年後に消えているサイトは全体の9割以上で、ウェブページの平均寿命は約3年のようです。。
#モチベーション #インターネット
一見些細なことでも、10年も続けていると宝になるという私の予測の証明になっていましたね。
もうそこまでいくと、内容如何よりも続けてくれてること自体が価値や魅力になるんだなぁと。
凄いものを見ました。私がぼんやり思い描いて目指していた場所は本当にあったんだなぁ。
数の正義、継続の正義みたいなものは確実にあります。
何も継続してこれなかった人間が言うんだから間違いない。
ちなみに誕生してから10年後に消えているサイトは全体の9割以上で、ウェブページの平均寿命は約3年のようです。。
ウェブページの寿命: 2001 年に存在した 1000 万ページを対象にした調査（PDF）
#モチベーション #インターネット
てがろぐでPHPのincludeっぽいことができるのを知ったのでさっそくヘッダーとフッターを共通パーツ化してみました。
最初はどうにかPHPが使えないか試行錯誤してたんですが、ダメっぽかったのでこれに落ち着きました。（よくわかってないです。）
メイン用、長文記事一覧用、ギャラリーモード用に3つのてがろぐスキンを使っているので、パーツの共通化ができて管理が本当にラクになりました。
特にCache BustingのためにCSSの読み込みファイル名にクエリパラメータを付与するのを手作業で3スキン分やるのはかなり骨が折れてた上に、各スキンの構成ファイルは同じファイル名なのでフォルダを間違って誤上書きアップロードしてしまわないかヒヤヒヤしていました。
（PHPが使えればクエリパラメータを自動付与できるので、てがろぐ以外のページはそうしています。）
今後はてがろぐも共通ヘッダーを1回更新するだけで良いので、その手間と心配がなくなったのは本当に良かったです。
→PHPを使わなくてもjavascriptでクエリパラメータの自動付与ができたので、CSS更新程度なら一切タッチ不要にできました。
参考：ユーザーのブラウザで最新のCSS/JavaScriptを反映させる方法 | PEblo.gs
今度時間作っててがろぐのマニュアル熟読する日を設けよう。まだまだできること山ほどありそう。
#てがろぐ #カスタマイズ #備忘録
【参考】
てがろぐ カスタマイズ方法 - 【ファイル合成】 - にししふぁくとりー
最初はどうにかPHPが使えないか試行錯誤してたんですが、ダメっぽかったのでこれに落ち着きました。（よくわかってないです。）
メイン用、長文記事一覧用、ギャラリーモード用に3つのてがろぐスキンを使っているので、パーツの共通化ができて管理が本当にラクになりました。
特にCache BustingのためにCSSの読み込みファイル名にクエリパラメータを付与するのを手作業で3スキン分やるのはかなり骨が折れてた上に、各スキンの構成ファイルは同じファイル名なのでフォルダを間違って誤上書きアップロードしてしまわないかヒヤヒヤしていました。
（PHPが使えればクエリパラメータを自動付与できるので、てがろぐ以外のページはそうしています。）
→PHPを使わなくてもjavascriptでクエリパラメータの自動付与ができたので、CSS更新程度なら一切タッチ不要にできました。
参考：ユーザーのブラウザで最新のCSS/JavaScriptを反映させる方法 | PEblo.gs
今度時間作っててがろぐのマニュアル熟読する日を設けよう。まだまだできること山ほどありそう。
#てがろぐ #カスタマイズ #備忘録
Memo（てがろぐ）にお楽しみボタンを設置しました
左から、長文記事一覧モード、ギャラリーモード、ランダム1件表示です。
モバイル端末表示ではサイドバーがないので最下部に追いやられています。😹
ギャラリーモード
ギャラリーモードはちょっとイン●タ風のスクエアサムネイルにしてみました。
てがろぐにアップしてきた画像はあまり軽量化を意識していなかったので結構重いかもしれません。
サムネイルをクリックしたら拡大ではなく本文に飛ぶ仕様にしたいのですが、調べてもやり方がわかりませんでした。（多分現状は無理だと思う）
ギャラリーモードではネタバレやセンシティブ配慮などは皆無ですのでご注意ください。
てがろぐの機能的には対応できるので、気が向いたら対応します。
【追記】：一応対応させてみました。
スマホ実機でスクエアサムネにならない不具合を確認しました。
PCからだと再現できない…。多分修正諦めます。
ランダムで1件表示モード
ランダム表示モードは1回押せばその後はボタンをポチポチしなくても、F5やスワイプなどで画面のリロードをするだけで延々とランダムに表示されつづけます。黒歴史から逃げるな。
#お知らせ #てがろぐ #カスタマイズ
左から、長文記事一覧モード、ギャラリーモード、ランダム1件表示です。
モバイル端末表示ではサイドバーがないので最下部に追いやられています。😹
ギャラリーモード
ギャラリーモードはちょっとイン●タ風のスクエアサムネイルにしてみました。
てがろぐにアップしてきた画像はあまり軽量化を意識していなかったので結構重いかもしれません。
サムネイルをクリックしたら拡大ではなく本文に飛ぶ仕様にしたいのですが、調べてもやり方がわかりませんでした。（多分現状は無理だと思う）
てがろぐの機能的には対応できるので、気が向いたら対応します。
【追記】：一応対応させてみました。
スマホ実機でスクエアサムネにならない不具合を確認しました。
PCからだと再現できない…。多分修正諦めます。
ランダムで1件表示モード
ランダム表示モードは1回押せばその後はボタンをポチポチしなくても、F5やスワイプなどで画面のリロードをするだけで延々とランダムに表示されつづけます。黒歴史から逃げるな。
#お知らせ #てがろぐ #カスタマイズ
フォントまわりのふぉんとに細かい話
Webフォント（GoogleFonts）の使用により、フォント表示時のチラつきとサイト全体の重さが気になっていたので対策した話。
欧文フォントだけ使っている時はさほど気になりませんでしたが、日本語フォントをどうしても使いたかったので頑張りました。
Googleフォントの外部読み込みをやめて自サーバーから呼び出すようにした
GoogleFontsからフォントをダウンロード→woff2に変換→自サーバーにアップロードしてCSSの@font-faceで読み込む。
これにより初回アクセス時の読み込みは（たぶん）重くなってしまいましたが、以降のページ遷移はサクサクになったはず。
特にキャッシュを拒否していない環境であれば一度読み込んだフォントは1年間キャッシュされます。
外部からの読み込みだとページ遷移するたびに、端末標準の代替フォントから指定したフォントに切り替わる瞬間の画面のチラつきがありましたがそれもなくなりました。
ローカルにフォントがインストールされていれば読み込むようにした
当サイトでは日本語フォントにKosugi Maruを指定していますが、閲覧者の端末にKosugi Maruがインストールされている場合はそちらを優先して読み込む設定にしました。その場合は問答無用で超サクサクです。
おそらくこのサイトへのアクセスの99%は自分だと思うので、とりあえず自分のPCからKosugiMaruで爆速＆チラつき無しで表示できるようになり大満足。
なおヒラギノ角ゴがインストールされている端末ではそちらが優先されます。
これは私がiPadで自サイトを見る時に、KosugiMaruがなんかしっくりこなかったからです；
タイトルロゴがちらつかないようにした
トップページの筆記体風のロゴもWebフォントなのですが、読み込み完了するまで代替フォントとして端末標準のクソデカゴシック体が一瞬チラつくのが気になっていました。
@font-face {
…中略…
font-display:auto;
}
ロゴに使用しているフォントではfont-displayを上記のように設定することで、代替フォントを表示せず、指定フォントで読み込み完了するまでは何も表示しないように変更。
あとはフォントとは関係のない本当に細かい余談ですけど、トップ絵とバナーサンプル画像は文字列変換して読み込み時の一瞬のガク付きが出ないようにしました。
【参考】
#高速化 #手打ちサイト #カスタマイズ
Webフォント（GoogleFonts）の使用により、フォント表示時のチラつきとサイト全体の重さが気になっていたので対策した話。
欧文フォントだけ使っている時はさほど気になりませんでしたが、日本語フォントをどうしても使いたかったので頑張りました。
Googleフォントの外部読み込みをやめて自サーバーから呼び出すようにした
GoogleFontsからフォントをダウンロード→woff2に変換→自サーバーにアップロードしてCSSの@font-faceで読み込む。
これにより初回アクセス時の読み込みは（たぶん）重くなってしまいましたが、以降のページ遷移はサクサクになったはず。
特にキャッシュを拒否していない環境であれば一度読み込んだフォントは1年間キャッシュされます。
外部からの読み込みだとページ遷移するたびに、端末標準の代替フォントから指定したフォントに切り替わる瞬間の画面のチラつきがありましたがそれもなくなりました。
ローカルにフォントがインストールされていれば読み込むようにした
当サイトでは日本語フォントにKosugi Maruを指定していますが、閲覧者の端末にKosugi Maruがインストールされている場合はそちらを優先して読み込む設定にしました。その場合は問答無用で超サクサクです。
おそらくこのサイトへのアクセスの99%は自分だと思うので、とりあえず自分のPCからKosugiMaruで爆速＆チラつき無しで表示できるようになり大満足。
これは私がiPadで自サイトを見る時に、KosugiMaruがなんかしっくりこなかったからです；
タイトルロゴがちらつかないようにした
トップページの筆記体風のロゴもWebフォントなのですが、読み込み完了するまで代替フォントとして端末標準のクソデカゴシック体が一瞬チラつくのが気になっていました。
@font-face {
…中略…
font-display:auto;
}
ロゴに使用しているフォントではfont-displayを上記のように設定することで、代替フォントを表示せず、指定フォントで読み込み完了するまでは何も表示しないように変更。
あとはフォントとは関係のない本当に細かい余談ですけど、トップ絵とバナーサンプル画像は文字列変換して読み込み時の一瞬のガク付きが出ないようにしました。
【参考】
- Webフォントを高速に表示するための3つのポイント – エンジニアブログ – デザイン会社アジケが運営するUXエンジニアのためのブログ
- Webフォントの表示を最適化するテクニック | コリス
- （ちょっとメモ）@font-face で Webフォントを使おう - ほんっとにはじめてのHTML5とCSS3
- Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス
- 画像をBase64でHTMLファイルに直接埋め込む方法 | design Edge
#高速化 #手打ちサイト #カスタマイズ
404が出ないに越したことはないですが、Wordpress時代の記事はリダイレクト設定とかをしてないので結構な死にURLが発生しているはずです；
それとは別に、先日からちょっとした隠しコンテンツを作ってサイト内に仕込んでます。興味のある人は探してみてね。
…黙っていようと思ったけど黙っていられなかった😹
#お知らせ #手打ちサイト #カスタマイズ