Memo

いままでグーテンベルク君を「質実剛健だったクラシックエディタを過去のものへと追いやってしまったシャレオツで大げさな扱いづらい奴」と思ってたけど、ちゃんと書籍とかで1から仕様を学んで理解しはじめると、そのポテンシャルの高さに驚きました。

Wordpressのテーマ側では最低限の構造さえ作っておけば、あとはグーテンベルクで自由に絵を描くかのようにページのデザインをするなんてこともできそう。私ができるかは別として。
もうペライチのランディングページみたいなやつを作るだけならコーディングすら殆どいらないのでは。

クラシックエディタが記事を書くのためのエディタなら、グーテンベルクはもはやその枠には収まってなくて、ページ全体を描けるエディタなのだなぁと。

言うなれば私はダメな上司みたいでしたね。
本当は有能な部下のポテンシャルを見過ごして「アイツは使えない」って昔のやり方からアップデートもせずに言ってるような。

まずちゃんと相手を理解しに行く姿勢って大事なんだなぁとこんなところでも痛感するのでした。

ーーーーー

あと、今は段組レイアウトをするならfloatではなくgridという書き方が主流になっていたことにも驚きました。
このgridレイアウトは最初こそ意味不明でびっくりするけど慣れると絵的でわかりやすいかもしれない。
少なくともレスポンシブにするのは格段にgridレイアウトの方がやりやすそうですね。

float とか clear:both とかの挙動が昔からうまく制御できなくて、レイアウト崩れが必至だったためものすごーく苦手意識があった思い出。

#Wordpress #自作テーマ
前にCSSに関数が使えたらいいのにみたいなこと言ったけど、Wordpressのfunctionで設定すれば(少なくともWPの編集画面内では)そのものズバリなことができることを知った。

テーマサポート – Japanese Team – WordPress.org 日本語

こんなふうに。
editor_theme_support('editor-color-palette')を設定してWordpressの投稿画面で任意のカラーパレットを指定した様子

line

この時はあほぅなことつぶやいちゃったなぁと後でほんのり後悔したのですが、やっぱりなんでもアウトプットしておくもんだなぁ、と思ったのでこれからはもうちょっとどうでもいいつぶやき増やしていきます。

なんかこう、青い鳥さんのSNSとかだと、どうでもいいつぶやきが強制的に人のところに流れていくのが申し訳なくていつの間にか沈黙は金的な価値観になりそれを未だに引きずっていたんですが、自サイト内設置のマイクロブログの場合は、閲覧者さんご自身のタイミングで能動的に見に来る人しかいないわけで、だったらむしろこまめに更新されている方が見た人も楽しめるんじゃないかなと思うようになってきました。(実際こまめにつぶやき更新されてるサイトは私もマメに覗きに行ってしまうし。)

line

…もうサイトいじらないと言ったな、あれはウソだ!
自サイトに過不足ないちょうどいい自作テーマをイチから作りたくて今いろいろ勉強しながらやってます。
なんでサイトいじりってこんな中毒性あるんだろう。

#wordpress #自作テーマ
本館トップのギャラリーから一部のイラストを諸々の理由でてがろぐの方に下げました。
下げたイラストは[2022年のログ]に掲載しています。
([カテゴリ『過去ログ』]やハッシュタグ『らくがき』からも見られます。)

【追記】2022/10/18~ アーカイブスギャラリーにすべてまとめました
line

最近わかってきたのは、”丁寧に頑張って書いたか”や”難しいことに挑戦したか”よりも、自分らしさをのびのび出せたかの方が、のちのち時間が経っても気に入る絵かどうかの分かれ目になりそうだというということです。
ギャラリーに載せてる過去絵は今見ると雑すぎたり拙かったりするものもありますが、「あーこれすごい私っぽいなぁ」と自分でほほえましい気持ちになってしまうのでなかなか下げられずにいます…w

あまり自分の絵を「これは本気絵!これはらくがき!」のように、完成度を基準に裁くようなことをしたくないんですが、トップページは”初めて見に来てくれた人にぜひ見てほしいと思っているもの”と定義して、そうでないものは敢えて探してまで見ようとしてくれた方にだけお見せする、というこの”過去ログ送りスタイル”は今のところとてもやりやすいですね。

余談ですが私は描いた時系列の情報もわりと大事にしているので、ローカルには時系列順にノートの隅のらくがきまで全部ぶっこんだ闇鍋ギャラリーを持っています。
ぐちゃぐちゃすぎるので人には見せられないですが…w

#創作全般
自分のサイトがWordpressを利用していることや、画像のサイズが大きいせいで、はたまたサーバーの安いプランを使っているなどが原因で重かったのだと思い込んでたけど、実際は自宅のネット回線速度がゴミだったことが原因でした…。

何が原因かわかりませんが、いつのまにか5Mbpsとかしか出てなかった。
格安SIMの4G回線より遅いってどういうことよ…。
ルーター再起動したら50Mbps近くまで回復。

他のサイトを見てても特に画像が多いサイトは爆重で、「今Wordpress使ってる人も多いし仕方ないよなぁ、管理人さんはキャッシュが残ってるから読み込み遅くても気づいてないのかな」くらいに思ってましたがそれもあっさり解決。

今になってみればほとんどすべてのサイトが重かったんだからまず自分の環境疑えって話でしかない…。
PCもそれなりのスペックで新調したばかりだったこともあり全く疑ってませんでした…。
Youtubeとかもだましだまし見れちゃってたし…。

でもサイト高速化のためにあれこれやったのは楽しかったので別にヨシです。
いろいろ勉強になったしね。
5Mbpsの回線速度でもそこそこサクサクなふじむら咲のサイトを今後ともよろしくお願いいたします。

何かおかしい時は1にも2にもまず再起動!これ鉄則!

#高速化
『オホーツクおねえさん』

北の大地発のご当地アイドル。
地元のホタテ貝をアピールすべく日々活動中。
水産高校出身。営業先には地元の同級生が応援に駆け付ける。

ホタテをモチーフにした衣装をまとうご当地アイドルの女の子のゆるいイラスト ゆるいおねえさん図鑑

line

今日のInktoberお題は「ホタテ貝」でした。
ポーマニのToday'sPoseがアイドル風だったので、シンプルにホタテ貝×アイドルな感じに。
(なおモデルは男性素体だった模様。)

ところで、この絵の胸元、手袋、スカートのように布の切り方がモクモクと雲のようになっているデザインを「スカラップ」といいますが、これはホタテ貝(scallop)が由来なんですよ。どうでもいい豆知識でした。

今更ですがインクトーバーって日替わりのお題が設定されてたんですね。知らなかった。
まぁ私がやってるのは「ゆるインクトーバー」なのでその辺適当でいいでしょう。
今後もお題には従ったり従わなかったり、ゆるっとやります。

#ゆるInktober #ゆるいおねえさん図鑑 #ポーマニ #イラスト
『セイントおねえさん』

ホーリーでセイントな力を推しのピックアップガチャに全振りしているが、あまり効果はないようだ。
『推しが神より尊いんだが😇』が口癖の今どきの若い子を地で行く見習いシスター。
今日もiTunesカードを買いに走る。

ソシャゲーのガチャに勤しむシスターの女の子のゆるいイラスト ゆるいおねえさん図鑑

line

ポーマニのToday'sPoseの祈りポーズと迫真の表情が面白かったのでそこからインスピレーションを受けて描きました。
9月はサイトのガワばっかり構ってたので、10月は中身拡充期間ということで、ちょっとだけ絵の更新頻度上げるチャレンジです。
ちょうど10月だしInktoberもどきということで。色塗らない日もふつーにある感じで。
あらかじめエクスキューズしておくと毎日更新は絶対無理なので最初からやりませんと言っておきます。

#ゆるInktober #ゆるいおねえさん図鑑 #ポーマニ #イラスト
爆速サイトへの道③

・ロゴ画像をテキストデータ化
 →お遊びでやってみたら意外と効果が大きくて驚く

・ロゴ画像を背景として表示する
 →高速化にはおそらく関係ないけど、webフォントの読み込み完了時にロゴ画像の位置がずれてガタつくのが気になったので、上記のついでに修正。

もう切り上げると言ったのに吸い込まれるようにサイトをいじってしまう…。
ギャラリーページと、Youtubeの埋め込みのあるページ以外はもうモバイルでも99点とか出せるようになりました。
もうほんとにいじるのやめます。夢の中でまでサイトいじってることあってちょっとヤバいなってなりました。

20221002115209-admin.webp

ちょっと完ぺき主義気味な傾向があるので、数字で出されるものを気にしだすとほんとキリがなくなってしまうので。

#カスタマイズ #高速化
バナーをつくりました

20230419152241-admin.png
地味にRetinaディスプレイ対応です。
(↑ここに貼ってあるものはてがろぐ本文でHTMLタグを使えないためRetina非対応です。
Retina搭載端末からご覧の方で表示のされ方の違いに興味がありましたら、Aboutページで表示されているものと比べてみてくださいね。)

【追記】2022.10.18~ サイト改装時に通常の200*40バナーのみに統一しました。

ひと手間かかってしまいますが、もしRetina対応版を使いたい方がいましたら banner_retina.pngを直リンク(または持ち帰り)していただければ400*80のバナーになりますので、それをHTMLタグやCSSなどでwidth200px height40pxで表示させて使ってやってください。

もちろん、そんなこと一切気にせず通常版のバナーを普通に貼ってもらって全く問題ありません。
高画質版はあくまでただのオプションです。

——

以下は私のサイトだけに関係のある話で、リンクバナーを貼りたいだけの人はあまり気にしなくていいこぼれ話。(読まなくて大丈夫です)

Aboutページにアクセスした端末がRetinaディスプレイであれば高画質版を表示し、そうでなければ通常のバナーが表示されるようになっています。
もし高画質版のバナーだけを表示してしまうと、(高画質版は実のところ”画質”が良いのではなく単に実画像サイズが2倍のものを縮小表示しているだけなので)バナーリンクを貼る作業をする際に必ずリサイズしてもらう手間を取らせてしまうことになり、そのような事態は避けたかったので、閲覧者の環境により表示するバナーを出し分けるという対応にしました。

※Retinaディスプレイは1ドットに4pxを表示できるため小さいサイズのバナーを原寸で表示するとぼやけてしまう。それを避けるには実際に表示したいサイズよりも大きな画像を用意してCSSなどで縮小して表示する必要がある(細かい説明は間違ってるかもなので雰囲気だけ伝わってください;)

今回の作業によりsrcsetというパラメータを初めて知りました。いろいろ進化してんだなぁほんと…。
なおsrcsetは私のサイトでバナー配布するにあたり2サイズのバナーを自動で出し分けしたいという事情のために必要だったものなので、単にリンクバナーを貼っていただく方には関係のない設定です、お気になさらず。

参考:Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法 | ワードプレステーマTCD

これによりアバウトページからiPhoneなどのRetinaディスプレイ搭載端末でバナーを保存すると2倍の大きさのバナーが保存されてしまう(=iPhoneや iPadから保存した人にはバナーのリサイズを強制することになる)という地味な問題があるかと思いますが、バナーリンクを貼る作業をする人は大体PCからやると思うので、見栄えの方を重視することにしました。

そもそもRetina対応しなきゃいいじゃんというツッコミはなしでお願いします。自分がiPad Lover なので自サイトでぼやけたバナーが表示されるのが落ち着かないというのがそもそもの動機でしたので。Retina対応は本当に単なる自己満足です。

———-

その他やったこといろいろメモ。

・画像の直リンク拒否
今までやってなかったというわけでもないですが、狙った挙動をしていなかったことに気づいたので修正しました。
もし画像表示まわりに不具合があったらメールフォームからお知らせいただけるととても助かります。
なおバナーは直リンクOKです。


・その他
・Wordpressテーマの子テーマを作って親テーマと分離しました。
・dnsプリフェッチというサイト高速化の方法を試してみました。
・タブレット端末以下の画面サイズではハンバーガーメニューを復活させました。
・複数ファイルに分かれていたCSSを1ファイルに統合しました。


本当はタイトルロゴとかも作ってみたかったんですがいったん断念。
次にサイトデザインをがらっと変えることがあればまた検討します。

9月はサイト自体の強化月間になりましたがそろそろ切り上げて、10月からは中身の拡充の方に注力します。


#カスタマイズ #Wordpress #高速化
ゲームのUIからサイトデザインのトレンドの変遷に想いを馳せるやつ

ゲームクリエイターの桜井政博さん(カービィやスマブラの生みの親)のチャンネルより。



ゲームのUIデザインの話でしたが、サイトデザインの話にも通じるものがあるなぁと思いました。

UIにおいてわかりやすさとオシャレさは大抵トレードオフの関係で、オシャレにすればわかりにくくなる。
かといって、わかりにくいからといって必ずしも悪いわけではない、というお話でした。

動画ではその具体例としてペルソナシリーズが挙げられてます。
私はペルソナシリーズはやったことないですが、動画で見る限りは世界観づくりのためにあえてわかりにくくゴチャっとさせいるんだなと一目でわかる感じでしたね。さすがプロが作ったものだなと思います。

私がやったことのあるゲームだと『シルバー事件(シルバー2425)』とかがまさしくその例です。
雰囲気づくりのためにわかりやすさを完全に切り捨てているけどそれが良い方向に働いているゲームの好例かと。

line

デザイナーでもウェブ業界の者でもなんでもない単なるいちユーザーの感想としては、最近のウェブサイトのトレンドはわかりやすさに特化してる印象です。
ゲームとは違って、わかりくさは完全に悪!なぜならGoogle先生が評価してくれないから、といったところでしょうか。なんだかちょっとGoogleの独裁国家みたいですね。

ウェブサイトの場合は、凝った作りで一見わかりにくいサイトには探検する楽しみみたいなのもあると同時に、(決して少なくない数の人が)本来のコンテンツを見てくれる前に離脱するリスクもはらんでいるよなぁと思います。

ゲームはそもそも最初から、よーしやるぞ!という主体的な気持ちで取り組むことが多いですが、サイトにわざわざよーし見るぞ!という気持ちで訪れる人は少数派かと。
昔ならともかく、今はなんとなくググって流れ着いたとか、受動的なスタンスで来る人の方がが多いことと思うので、そういうお客さんをできるだけ帰したくないという作り手側の都合でシンプル化に拍車がかかっていったんでしょうか。

それと、いまは本当の意味で個人が作ったサイトが少ないからかなと予想します。
私も含め、Wordpressでテンプレートを使う人も多いでしょうし、露出度が高くて見慣れている企業サイトとか、SEO対策バッチリのトレンド情報ブログとかのUIに個人サイト側も否応なく引っ張られてしまう部分もあるのかなと。

あとはコンテンツの中身重視主義にだいぶ傾倒していて、作った人自身の好みや世界観なんてどうでもいいから有益な情報の発信に徹してろよオラ、的な風潮も手伝ってたり。
今の時代に個人サイトをやっている人にはそのような風潮に屈せずどんどん世界観出してほしいな…と個人的には思っています。

昔は読めないくらい豆文字&うっすい文字色だったり、大きな画像を内部的には細切れのメニューリンクにして1枚の大きな絵のように見せるサイトデザインがあったりと、雰囲気作りに特化してるサイトもたくさんありましたね。
(そういうサイトはもちろん今もありますが、もう”たくさん”はありません。)
いい悪いの話ではなく、本当に時代ががらりと変わったんだなぁと感じるしかありません。諸行無常です。

【追記】なんかごちゃごちゃいろいろ考えてましたけど、単純にスマホの登場がウェブデザインの変化の大きな転換点ですよね。当たり前すぎて盲点でした。


#デザイン #youtube #平成 #インターネット
爆速サイトへの道②

【やったこと】
・ギャラリーに使用していたプラグインを変更
・ギャラリーページを静的HTMLで表示

【プラグイン変更】
VisualPortfolioからFooGallery(+foobox)に変更。

ギャラリー全体としての初回読み込みの重さはそこまでかわらないものの、
VisualPortfolioでは指定の画像枚数(8枚とか)を読み込み終わるまで待ちが生じるのに対し、
FooGalleryでは1枚ずつ読み込めた順に表示してくれるので、体感の待ち時間は激減した。
これで作品を見てもらえる確率が格段に上がったと思う。

デザイン変更の柔軟性、作品の並べ替え操作などもFooGalleryの方がやりやすいと思いました。
シンプルで大げさすぎない感じや、作品タイトルやキャプションを見るか消すか閲覧者側が自由に選べるのもよい。

VisualPortfolioにあったカテゴリフィルター機能とソート機能がオミットされたけど、フィルターに関しては基本一次創作サイトなのでなくてもあまり問題ないと思いました。古い順にみる人とかもまずいないでしょ。
(もし古い順に見たい方がいましたら、最新絵を拡大表示したあとに左矢印(←)クリックか、画像の上で左から右側にスワイプし続ければ古い順に見れます。)

あとVisualPortfolioの強みは投稿記事から画像だけ取り出してギャラリーを作れること(それもタグなどでめっちゃ細かく条件付けできる)だったけど、私には持て余す機能だったのでやはりFooGalleryのがシンプルで良い。

逆に少しくらい重くなっても構わなくて、作品のジャンルとかで細かくギャラリー分けしたい人とか、普段はブログに画像を載せててそれを半自動でギャラリー形式にまとめ直したいという人にはVisualPortfolioすごくお勧めです。


【静的HTML】
Simply Staticというプラグインで、WPで動的に生成したページをHTMLで吐き出せる。
(参考:WordPressで静的HTMLを生成する方法【便利な使い方から注意点も解説】 | DISPLAY-ディスプレイ

これを使うとWordpressをHPビルダーみたいな感覚で使えるのかも(ビルダー使ったことないから適当;)

前回試みた軽量化施策のおかげで、いまや重いのはギャラリーページのみなので、そちらのみ静的HTMLに置き換えた。
WPの固定ページを1枚作り、そこにSimply Staticで生成してDLしたHTMLファイルを呼び出して表示させている。
(参考:Wordpressでトップページを静的サイトに index.htmlを共存させる簡単なやりかた - ビジネスのIT化なら合同会社ジリキ

私の場合は参考どおりトップページをHTMLにするパターンだったのでそのままコピペでいけたけど、ファイル名とパスを変更すれば他のページでもいけそう。


静的ページ化したことで体感は早くなったと感じたものの、Google先生評価は変わらず。
体感が変わったならヨシとする。大事なのは評価よりも自分がどう思うかです。

冗談はさておいても、キャッシュ保持の関係なのか、静的HTML化すると2回目以降の閲覧では表示が非常に早くなるのでやった価値は十分ありました。


なおギャラリー以外のページはわりと頻繁に書き換えているし、既にGoogle先生評価もモバイルで98点とか叩き出せるようになったので動的生成のままとしました。

古いCSSが読み込まれてたりして表示がおかしくなってる人はお手数ですがキャッシュクリアしてみてくださいね。

20220929143414-admin.webp
△あれ、スコアちょっと落ちてる…


#カスタマイズ #Wordpress #高速化
1 2 3 40 41 42 43 44 45