Memo

タグ「手打ちサイト」[23件]
>>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なうちに何かマップみたいなものを書いてメモしておかないとなぁ。。と思ってます。
見ている人には全く関係ないですね;;


#カスタマイズ #手打ちサイト #備忘録 #てがろぐ
ちょっぴりサイトメンテ

  • Memoの日付表示の復活
  • ギャラリー少し整理
  • いいねボタンお試し実装
  • その他書くほどでもない細かい調整


サイト改装しようと思ってたけど、今のデザインがやっぱりしっくりくるのでしばらくこれでいこうかなと思います。
デザイン性以外の部分で、改装時に直そうと思ってたところなどを手入れしました。

line

Memoの日付表示の復活
「こいつサイト更新しすぎだろ」と思われるのがなんか恥ずかしくて、Memoの各エントリーの日付を非表示にするというだいぶこじらせたことをしてましたが、やっぱり自分で過去記事読みなおす時とかに不便…というか風情の無さが気になったので、普通に日付表示をすることにしました。
自分のサイトを頻繁に更新するってなにも悪いことじゃないし、頻度も一つの生きた情報かなと。

ギャラリー少し整理
基本的には「サイトは自分データベース」という方針なので描いたものはすべてギャラリーにアーカイブしておくつもりだったんですが、ちょっと心境の変化があったのでそれに即した感じに整理しました。

今後も特に予告なくギャラリーは整理していくかもしれません。

一応すぐ戻せるようにはしてあるので、気が変わったら戻すかも。

ただ、アーカイブ性も担保したいという理由から、Memoには基本的にありのまますべて残します。
したがって、ギャラリー整理の対象はサイト作成以降のもののみで、古い絵はそのままです。古いものまで整理したら何も残らなさそうだったので…。

この方針にしたことで、Memoにはより実験的な絵も気楽に載せていけるようになったらいいなと踏んでます。

いいねボタンお試し実装
いいねボタン・改を実装してみました。

今のところ、お礼イラストもメッセージも何もありません。。
その代わりちょっとだけ可愛いことが起きます。
押下可能回数の上限を高めに設定したので、(人間だったら)実質ほぼ無限に押すことができます。

以前から何度か書いてると思うのですが私は「いいね」という概念が苦手なので、自分の中では「来たよ」ボタンとか「了解」ボタンくらいのつもりなのですが、サイトデザインに馴染ませる都合、ハートマークじゃないと何のボタンかわからなさすぎるのでとりあえずハートになりました。

諸事情であまりこまめに確認できないので、こちらからのリアクションとかも何もないと思いますが、押したいなと思った時に自由に押してくれたら嬉しいです。

エラーが出てしまうときや、押しても何も反応がない時はお手数ですがキャッシュクリアをしてみてください。

あくまでお試し設置なので、予告なく撤去する可能性があります。

その他書くほどでもない細かい調整
・持ち帰り用の旧バナーを撤去(既に使用中の場合はそのまま使っていただいて大丈夫です)
・スマホビューの時もMemoの上部に各種便利ボタンを表示(タブレットなどでは消えるor表示崩れの可能性あり)
・ほか、忘れるくらい細かいとこなど


#カスタマイズ #手打ちサイト #備忘録
サイトをリニューアルするたびに、この「サイト運営メモ」に自分で助けられています。
書いてる時は備忘録というより達成感(&説明したい病)で記録してる部分の方が大きいし、「こんな細かいこといちいち書いても誰も読まないだろう」と思ってしまうんですが、半年とか経ってから見ると、どういう意図でそのカスタマイズをやったのかも含めて書いてあるので当時の記憶も蘇って凄く助かるということがわかりました。

細かすぎることは非公開のメモに付けてますけど、そっちはあまり見返すことがないんですよね;
サイトの方が、一応人に向けて書いてるので、半分他人である未来の自分にとっても読みやすいし分かりやすいことが多いです。

#カスタマイズ #手打ちサイト
サイトのリニューアル、9割方完成。
あとはほぼ細かい調整だけの予定だけど、唯一残る大きいタスクはトップ絵を描くこと。。
今までトップ専用に描いたことはなかったけど、今回はそれありきのデザインにしたので。。

今回、基本はテンプレートの着せ替えだけで大きな構造改革まではしてないですが、ちょっとだけ新機能を付ける予定です。お楽しみに!

ひと段落したらポケモンDLC、ブライスハロウィン服作りなど、やるぞ。

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

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


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 #備忘録 #てがろぐ
>>250の続き。

BingAIの力を借りて、Galleryのサイドバーでカテゴリ名をクリックすると、その場所までスクロールしつつ、同時に折り畳みをオープンする仕様にしてみました。例によってPCのみ。
20230512012558-admin.gif
▲gif動きます。ちょっとわかりづらいかも。

今までは折りたたみのオープンは手動だったので、閉じた状態ではサイドバーは完全に無意味なものだったんですが、これでかなり直感的になったと思います。
先のまとめて開閉ボタンとあわせてポチポチ押すだけでたのしい。

BingAIとの会話のコツもだいぶわかってきて、小回りが利くようになってきました。

なんかもうちゃんとjavascript覚えてブラウザゲームとかWebアプリケーションとか作りたくなってきました。

続き>>254

#AI #手打ちサイト #カスタマイズ #javascript #備忘録 #やりたいこと
1 2 3