バナーをつくりました


地味に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 #高速化

爆速サイトへの道②

【やったこと】
・ギャラリーに使用していたプラグインを変更
・ギャラリーページを静的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が読み込まれてたりして表示がおかしくなってる人はお手数ですがキャッシュクリアしてみてくださいね。


△あれ、スコアちょっと落ちてる…

#カスタマイズ #Wordpress #高速化

爆速サイトへの道

サイトがスマホやタブレットから見ると激重だったため高速化を試みてみました。

【やったこと】
・GoogleFontsの非同期読み込み（参考）と読み込むfont-weightを1つだけにする
・FontAwesomeのファイルDL（参考）と非同期読み込み（参考）
・画像をWebPにする（変換ツール）
・キャッシュの有効期間を長くする
・ぐちゃぐちゃだった追加CSSの整頓
・てがろぐに載せていた画像の多いエントリ（#過去ログなど）を一覧外に下げる（タグや検索などで呼び出した時のみ表示する）

特に赤字の3つは影響が大きかったようでかなりの改善が見られました。

続きを読む 🔽【Google fonts】
Webフォントを使わないという選択肢もありましたが、メニューやタイトル部などにどうしてもこのかわいいフォントを使うのを諦められなかったので頑張りました…。（使ってるフォントはKiwi Maruです）
非同期の効果はとても大きいですが、それ以前に欲張って太さの違う同じフォントを3種類も読み込んでいたのがかなり大きな要因でした。日本語フォント３つも読み込んだら重くなるに決まってる…。一つに絞ったら劇的にサクサクに。

【FontAwesome】
矢印やカレンダーやハートなどの小さなアイコンに使っています。
これもいいスパイスになっているのであきらめたくなく以下同文。

【WebP画像形式】
画像をWebPにしたことで表示速度がちゃんと改善されたことには驚きました。
もともと、jpgの状態でも500kb以下くらいには抑えていたのでそんなに変わらないだろうと思っていたのに実際は目に見えて変わりました。
上からジジジ…と表示されることがほとんどなくなりましたね。
創作サイトは画像が命だからね…。ここに関しては手間を惜しまず過去分も可能な限りWebPに置き換えていきます。
（Wordpressの方は画像アップ時に自動で変換してくれるプラグインもありますが、ギャラリーに使用しているプラグインの方が自動変換に対応していないので結局手動で順次差し替えていきます…。）

そのかわり、てがろぐではWebPの縦横サイズの指定ができないと言われてしまい、画像の読み込みが追い付かない時にガクガクっとなる地味な不具合（仕様）がでるようになりました。
読み込みが早い方が大事なのでここは妥協できる範囲かと思います。

【Google先生の評価やいかに】

△本館はもうちょっと頑張らないとだけど


△てがろぐはもう大丈夫そう

【次にやること】
・画像をWebP形式に順次差し替え　完了
・Wordpressテーマを軽くてサポートが継続されているものに変更する（デザインは大きく変えずに現状維持）
　→SketchはAutomattic社製の公式テーマだったのでとりあえず継続利用してても心配無用そう。

#カスタマイズ #Wordpress #高速化

本館サイトの方に、てがろぐ記事の抜粋ページを作ってみました。
個人的に、とっても”個人サイト感”が出たと思うのですがどうでしょうか(笑)

この数か月サイトを運用してみてわかったのは、最初からWordpressのギャラリーを埋めるために絵を描いたりするより、まずはこのてがろぐに軽い気持ちでポンポンと投げてみる方が格段にやりやすいということです。
文章も同じですね。いきなり長文コラムを書こうとするより、なんとなく書き始めたら結果的に長くなったから「コラム」として扱う…というような。

続きを読む 🔽はじめから大業を成し遂げようとせず、スモールスタートの精神が合っているようです。

てがろぐはWebでの表現ツールとして優れていますし非常に自分に合っているのですが、見てほしいエントリーとわりとどうでもいい（流してほしい）エントリーの区別は得意でないと思ったので、今回まとめのページを作るに至った次第です。

まとめページを作っておくと、”投稿日”があまり情報として価値を持たなくなるのがいいなと思いました。

－

記事リンクをまとめるにあたり、てがろぐのサイトマップスキンを使って一定のカテゴリのタイトル名のみ抽出する案もあったのですが、

・そのカテゴリーのすべてを抽出したいとは限らない（今はよくても将来ノイズ記事が混ざる可能性がある）
・記事タイトルを手動で変えたい場合がある
・てがろぐの公式スキンの大型アップデートが来たら調整がつらい

などの理由により、素直にWordpressの固定ページに手動でリンクを貼る運用にしました。
記事への補足コメントを書いたりするにも、その方が簡単で柔軟に対応できそうだったからです。

なおこのまとめページはベータ版、お試し運用中ですので予告なく消える場合があります。

#てがろぐ #Wordpress #モチベーション

ひととおりてがろぐのカスタマイズ完了しました。もう崩れないはず。
doさんのmodernというテンプレートをベースに少し手を加えた上で、てがろぐに最適化しました。
往年の個人サイトっぽいミニマル感がちゃんとありつつも、様々なデバイスで閲覧されることを前提とした視認性の良いデザインで本当に素敵です。

サイト全体のカスタムがひと段落したところで、せっかくなのでお世話になったテンプレートなどをまとめておきます。
特にてがろぐがなかったら間違いなくこんなに頻繁に更新してなかったので、てがろぐ本体と関連プログラムの作者さん達には本当に感謝の気持ちでいっぱいですね。

Sketch テーマ — WordPress.com
　┗本館サイトのWordpressテーマ

お手軽マイクロブログCGI「てがろぐ」：スキン式で複数ユーザ対応 - にししふぁくとりー
　┗ブログに使用しているCGI

modern | do - 創作・同人サイト制作支援サイト
　┗上記のてがろぐに適用しているベースとなるテンプレート。

skin-minimal | do - 創作・同人サイト制作支援サイト
　┗HTMLテンプレートをてがろぐに適用するためのてがろぐ用スキン

【プログラム配布】サムネイルをクリックすると画像がフワッと出てくる「fuwaimg」 | do - 創作・同人サイト制作支援サイト

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選｜サルワカ

【CSSだけ】トップに戻るボタンの作り方【コピペでOK】| マンガでわかるホームページ作成
ついでにソースコードの編集に使ったEmEditorにも触れておきます。
ソースコード内のカラーコードを、カラーサークルを使って視覚的に変更できるのが本当に便利でした！

時間を忘れてHTMLとCSSをいじくって試行錯誤を繰り返して…久々に、昔初めてサイトを作ったばかりのころの楽しさがよみがえりました。
最近はWordpressでテーマを探して、プラグインとほんのすこしCSS追加するくらいでしたので。（それもすごくありがたいことなんですけどね。）

雑な例えですが、レストランで食べた方が実際おいしいってわかっててもキャンプ飯のが美味く感じるみたいなのあるじゃないですか。
個人の趣味サイトのカスタムの世界ってそれに似てると思います。

以前”不便益（不便であることのメリット）”に関する本を読んで面白かったのですが、それにちょっと通じるものがあるかもしれません。

#カスタマイズ #てがろぐ #不便益