Memo

タグ「てがろぐ」[29件]
>>416 イラストギャラリーのてがろぐ化、できた。

上部のお気に入り6枚と、Log2024、Log2023はてがろぐ埋め込み、それ以外はずぼろぐ継続で現状維持。

✅ 現状のようにギャラリーとMemoに二重投稿する必要がなくなる
✅ FTPを介さなくて良くなるから更新作業がiPadだけでも楽にできる
❌ 現状のギャラリーは1ページに大量に画像がありすぎて初訪問時に重すぎる問題が解決する

という感じ。
見た目はほぼ全く変わってないので完全に自己満足。
今後はMemoに載せたイラストが自動でGalleryにも載るので、二重投稿しなくてよくなったの本当に気持ちいい!

#てがろぐ #カスタマイズ #手打ちサイト
今回ハンドメイドのギャラリーをてがろぐで作ってみて、イラストギャラリーの方もてがろぐにできそうだなと思ったけど、大量の過去絵があるから無理そう。

画像1枚あたり=1投稿ごとにカテゴリを付けたものを呼び出すことでセクションの出し分けをしているから、今と同じ感じの表示をしたいなら大量の画像を時系列順にカテゴリ分けしながら1枚ずつ1投稿しなくてはならない。

ギャラリーモードじゃなくて画像一覧モードを使えば記事の投稿を伴わずに画像だけを一気にまとめて表示もできるけど、その場合はちゃんと時系列順になるのかなぁ。

やるとしたら、過去絵は現状維持で完全に倉庫化して別ページに放り込む。
てがろぐ利用開始以後のイラストだけを新ギャラリーとして切り分けするとか。

できない理由を書いてるつもりだったけど、書いてるうちにできそうな気もしてきた。

イラストギャラリーをてがろぐ化するメリットは結構ある。
・現状のようにギャラリーとMemoに二重投稿する必要がなくなる
・FTPを介さなくて良くなるから更新作業がiPadだけでも楽にできる
・現状のギャラリーは1ページに大量に画像がありすぎて初訪問時に重すぎる問題が解決する

#てがろぐ #カスタマイズ #手打ちサイト
サイトリニューアルしました【Ver.5】

なんだかんだで通算5回目のリニューアルになりました。

今までピンクや紫基調のデザインが多かったですが、今回はイエロー主体でやさしめポップな印象にしてみました。
黄色が(ピンクの次に)好きというのもあるし、黄色ってどんな色とも相性がいい気がするので、どんなテイストの作品を載せても調和するかなぁ、と思いまして。

全体的に薄いのでちょっと視認性は悪いかも?
でもまぁ本文と画像のメインコンテンツが見やすければいいだろう精神です。

さらにPC・タブレットでは全体的にミニマルな感じにまとめています。ちょっと見づらいかもですが、いかにも”個人サイト然”としてて可愛くなったのではないでしょうか。

色合いや全体のシンプル感など、Ver2くらいに回帰した感じですね。

line

【トップ絵のこと】
今回のトップ絵はタイトルをつけるなら「手癖リース」とでもいう感じでしょうか。
なんとなく好きな感じのものを詰め込みました。何も決めずにいきあたりばったりで。
電話しながら落書きしてるときみたいな、何が出てくるのかわからない感じを楽しむ感じで。

この辺もゆるく楽しく描くという原点回帰な感じです。最近ちょっと頑張りすぎな絵が多かったので;;

こういう力の抜けた絵が映えるようなデザインにしたので、シールを貼り替えるくらいの気分でこまめに新しいものを描けたらいいなと思っています。

そして、トップ絵にするために絵を描いたのはこれが初めてでした。
今までは描いたもので気に入ったものを流用してたので。

line

もうひとつのコンセプトは「忘れた頃の自分でも手に負えるシンプルデザイン」です。
前回のVerで、自分で&BingAI(GPT-4)を使って作ったパーツやスクリプトはほぼそのまま流用したので、今回新たに書いたコードはほんの少しで済みました。

メインコンテンツが増えたり、HTMLをいじるのが久々な時でも、簡単にトップページのメニューリンクを貼れることを第一に考えました。

今回の特に大きな変更点は、「Doll/Craft」のページが復活したことです。
これまでハンドメイド系コンテンツは切り離したりMemoに統合したりと、長いこと扱いに手をこまねいてきましたが、最近またドール服などを作るようになって作品数が増えそうだったので、再び単独のコンテンツとして切り離すことにしました。

【ハンドメイド用ギャラリーの仕様を考える】
イラストギャラリーと違って、ハンドメイドのギャラリーはサムネ画像をクリックした時に画像を拡大するのではなく、個別のページに飛ぶ仕様にしたいと考えました。
制作過程や補足コメントなんかの文字情報(長文)や追加の写真情報を作品画像と並列で見せたいからです。

Wordpressだったらそういう仕様にするのは簡単なので、WordPress時代には実際そうしてたのですが、HTML手打ちサイトだとちょっと大変そうです。

前回リニューアル時にサイトのHTML化に踏み切った際に、ちょうどハンドメイドに飽きてたということもあり、そのようなギャラリーを実装することなくMemoに統合してアーカイブした経緯があります。
そこを今回のリニューアルで改めて着手した…という感じです。

”サムネ画像クリックで個別ページに飛ぶ仕様のギャラリー”を作るにあたって、更新のたびに自分でサムネ画像とHTMLページを作って…というのは考えただけでしんどかったので、ここでもてがろぐを活用させてもらいました。

【てがろぐの有償ライセンスを買う】
このタイミングでてがろぐの有償ライセンスを購入しました。

Doll/Craftのページは複数のてがろぐを埋め込んでいる都合、クレジット表記も1ページ内に複数表示されることになるのが個人的にあまり美しくないと感じたので、有償ライセンスを購入することでクレジット表記を非表示にさせてもらいました。

それでなくても、なんらかの形で応援させていただきたいなと以前から思っていましたし、このサイトはてがろぐなしではもう成り立たないので。

【それにしても散らかりすぎ】
冒頭で「忘れた頃の自分でも手に負えるシンプルデザイン」と言いましたが、確かに1つ1つのページのデザイン自体はシンプルなので記憶喪失にでもならない限りメンテできると思います。

ただ、いろんなところに散らばったファイルを埋め込んだり呼び出したりしていて、構造的な意味ではグッチャグッチャです。
一回時間が空いて忘れてしまったら多分もう手に負えないので、記憶がHOTなうちに何かマップみたいなものを書いてメモしておかないとなぁ。。と思ってます。
見ている人には全く関係ないですね;;


#カスタマイズ #手打ちサイト #備忘録 #てがろぐ
そういえば前のスマホではギャラリーモードでサムネ画像が正方形にトリミングされないという不具合が出てたのですが、新しいスマホではちゃんとトリミングされてますね。

古いスマホだとCSSのaspect-raitoプロパティが効かないとかあったのかな。
でもブラウザのバージョンは同じなんじゃないの…???よくわからん!

他にもいろんなところで意図しない表示崩れ起きてるんだろうなぁ。

#カスタマイズ #備忘録 #てがろぐ
久々にちょびっとサイト(てがろぐ)いじりました。

  • 「続きを読む」ボタンのデザイン調整 →小さいボタンだったものを幅広のボタンに
  • 「続きを読む」ボタンで展開した文章をふわっと表示する
  • カスタム絵文字機能を使って罫線を表示 →「---」などと記号で表記していたものを画像素材に置換


line

↑の罫線の画像素材はFREE LINE DESIGN様からお借りしました。

近年は画像素材を使わないでCSSで装飾するサイトがトレンドのようでしたが、世の中全体の端末の性能もネット回線速度もぐっと底上げされていることですし、一周回ってまたこういう風に画像素材でサイトをデコレーションするのも良いかもしれないですね。


やっぱりサイトいじりは楽しい…!!!

#てがろぐ #カスタマイズ #備忘録 #手打ちサイト
サイトを「今何してる?」から解放してみた

日記の大まかな時系列は大事だけど、”今”何してる?程のライブ感を持った時間情報はどうでもいい…というかむしろ足かせになってるという思いが日に日に強くなってきました。

もともと投稿時間は非表示にしていましたが、日付すらもいらないのでは?何年の何月くらいかわかるだけで十分かも。
トップページの更新履歴に主要なエントリーの更新日が出ていればそれでもう十分な気もする。

…と思ったので早速お試しでそうしてみました。3日間Newマークは出るし、ほんとにこれでいいかも。

最近、サイトの更新頻度は高くなってますが、サイトに流れる時間まで早くしたかったわけではなかったので、「サイト内を流れる時間のゆっくり感」と「自分の裁量で好きな時に好きなだけ更新する(orしない)自由さ」を取り急ぎ両立できた形になったのではないでしょうか。
いつ書いたエントリーなのか自分で知りたければ管理画面から確認できますしね。

さらにさらに、てがろぐの過去ログページを作ってみました。
古い順に並んだ月別ログで、その中のエントリも昇順表示なので古い方から順に表示されます。
(てがろぐ側で日付リストのリンク先を古い順で出力する設定項目はなさそうだったので、またしてもBingAIの力を借りました。)

月別リンクが並んだこの感じ、HTML手打ち製の個人サイトっぽくてすごくやりたいなぁと思ってたのです。
これまで過去の記事を回遊する手段が乏しくてランダム表示くらいしかなかったので、古い順にさかのぼれる機能を付けたいとは前々から思っていました。
先述の「行き過ぎたライブ感はどうでもいい」と併せて、「●年の●月ごろ何してたっけな」と懐かしみたいだけのほぼ自分用機能です。満足。

line

そもそも話。
私の場合、ここ(Memo/てがろぐ)を「一人用Twitter」とか「”リアル”の進化版」(たぶん一部世代にしか通じないネタ?)ではなく、EvernoteとかGoogleKeepのようなクラウドメモの公開版みたいなものだと捉えてるみたいです。

それぞれのエントリーが時系列になることもまぁ大事だけど、1つ1つのエントリーは「その話題について書くための場所を作った」という認識なので、後から加筆修正することにあまり抵抗がない…というか本当はそこにどんどん追記していきたい。(この記事なんかはそれが顕著にあらわれている良い例ですね)

それに、読み返しているうちに書きたいことが増えてきたりまとまってきたりすることもとても多いので…。

けどそれをやるとさすがに閲覧者さん側が見づらくなりすぎるから、基本的には新しいエントリーで投稿するという運用にしている感じです。
特に専門的でも実用的でもない他人の日記をふたたび読みなおすことなんてあまりないはずでしょうから。

そういう意味では究極的には静的HTMLページでテキストを書くのも合ってるのかもしれないですね。
てがろぐがなかったら、Wordpressから手打ちサイトに移行した時にそうしてたと思います。

要はまぁ、しれっと加筆修正してるけど気にしないでねって話です。
1~2か月くらい経つともう半分他人の感覚になるので、多少気になるところがあってもそのまま記録として残してますが。


#てがろぐ #文章 #カスタマイズ #AI #手打ちサイト
>>252の続き。
BingAIに助けてもらってさらに追加したサイトの機能の覚え書き
  • gifアニメーションには自動で再生ボタンを付ける(giffferを使用する)
  • リンク先が外部サイトなら別タブで開く(別ホストのリンクには自動でtarget="_blank"とrel="noopener noreferrer"を追加、※推奨設定らしい)
  • 外部リンクにはリンク文字列の末尾にアイコンフォントを自動付与する
  • てがろぐの個別投稿でリストアイコンを任意に指定した場合はてがろぐスキン側で設定されているリストアイコンを非表示にする(使っているスキンが疑似要素::beforeでリストアイコンを設定しているのでそのままでは上書きされないため)
  • img要素にwidthとheightを自動で設定する
  • てがろぐの特定のスキンでは出力するURLに自動的に&order=reverseを付与する

増えたらここに追記予定。

もし〇〇なら自動でこうしたい…!というニーズが結構あったので、その辺がjavascriptなどを使うことでスパスパと解決していくのが気持ちいいです。
CSSも複雑なセレクタは自分では指定できないので助かります。

#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #てがろぐ
Aboutページをプチ修正、リンクのポリシー変更など

  • 項目「クイックツアー」新設
  • 項目「サイト情報」修正


line
20230501180153-admin.png
折り畳みを活用してすっきりした見た目にしました。

クイックツアー
サイトマップと言うほどでもない、いいかげんなサイト地図をつくりました。
基本的にこのサイトはアクティブな更新箇所がてがろぐ一か所にほぼ集約されているので、不慣れな方が少しでも見たい情報にスムーズにたどり着ければいいなと思いまして。

ついで情報ですが、てがろぐのカテゴリ分けやタグ付けなどは割とこまめにやっていますので、てがろぐを使い慣れている方はURLのパラメータ付与などで遊んでみてもよいです。笑
たとえば「カテゴリ:お絵描き」だけを「ギャラリーモード」で「古い順に」表示するなんてこともできますよ。

余談、サイト名が旧の「Down to Earth」のままだったら、「ちきゅーの歩き方」とかそんな見出しにしたかもしれません。

サイト情報
基本何も変わってないですが、リンクについてのポリシーを少し変えました。
完全にリンクフリーとしていたものを、非営利の個人サイトに限りリンクフリーとしました。

キュレーションメディアの金儲けや、SNSなどでインスタントに消費されたくない意思を明確にしておきたいという趣旨です。
独自の創造的なメインコンテンツ(二次創作や日記なども当然それに含みます)に付随して少しアフィリエイトなどを貼ってるくらいなら気にしません。

こんな僻地の泡沫サイトなのでまず心配するような事態は起きないと思いますが、一億総ネット民となった今の世の中何があるかわからないので、思いつく範囲のことにはできるだけ備えておきたいという思いからの変更です。

ウェブ上に公開しているものはどれだけ露出を抑えていようが基本的にはリンクフリーかつ引用可能であるという根本は理解しているので、あくまでお願い程度の拘束力ではあります。


#お知らせ #カスタマイズ #手打ちサイト #めんどい思考 #てがろぐ
この約1年で計3回のサイトリニューアルを経て、自分のやりやすいスタイルがだいぶわかってきました。

特に文章をてがろぐに一本化したのは英断でしたね。
SEOを捨てたのも大正解でした。精神的に身軽になれたので。

#てがろぐ #モチベーション
てがろぐでPHPのincludeっぽいことができるのを知ったのでさっそくヘッダーとフッターを共通パーツ化してみました。

20230419142333-admin.webp

【参考】
てがろぐ カスタマイズ方法 - 【ファイル合成】 - にししふぁくとりー


最初はどうにかPHPが使えないか試行錯誤してたんですが、ダメっぽかったのでこれに落ち着きました。(よくわかってないです。)

メイン用、長文記事一覧用、ギャラリーモード用に3つのてがろぐスキンを使っているので、パーツの共通化ができて管理が本当にラクになりました。
特にCache BustingのためにCSSの読み込みファイル名にクエリパラメータを付与するのを手作業で3スキン分やるのはかなり骨が折れてた上に、各スキンの構成ファイルは同じファイル名なのでフォルダを間違って誤上書きアップロードしてしまわないかヒヤヒヤしていました。
(PHPが使えればクエリパラメータを自動付与できるので、てがろぐ以外のページはそうしています。)
今後はてがろぐも共通ヘッダーを1回更新するだけで良いので、その手間と心配がなくなったのは本当に良かったです。

→PHPを使わなくてもjavascriptでクエリパラメータの自動付与ができたので、CSS更新程度なら一切タッチ不要にできました。
参考:ユーザーのブラウザで最新のCSS/JavaScriptを反映させる方法 | PEblo.gs

line

今度時間作っててがろぐのマニュアル熟読する日を設けよう。まだまだできること山ほどありそう。


#てがろぐ #カスタマイズ #備忘録
1 2 3