スクロールしてもついてくるサイドバーのメモ

2カラムビューの状況（おおむねタブレット端末以上）で、スクロールしたときに付いてきて固定されるサイドバーを設定してみました。



続きを読む 🔽まず大前提として、スクロールしても追従させたい要素にはCSSでpositionをstickyに設定します。
position:sticky;
当サイトは骨組みとなる部分はグリッドレイアウトというCSS3の手法でレイアウトされているのですが、このグリッドレイアウトとstickyはなかなか食い合わせが悪かったようで一筋縄ではいかず苦労しました。

【参考】：CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法 | コリス

グリッドレイアウトとstickyの共存には一工夫必要なようです。

ただ、私の場合それ以前の所で引っ掛かっていたようで、親要素に高さ指定がされていなかったことと、topの位置を指定していなかったことがstickyが効かない原因でした。

【参考】：【CSS】position:stickyが効かない時の原因と解決方法 - ジャングルオーシャン

最終的に以下のようなコードにすることで無事に追従するサイドバーが完成。
.myaside（親要素）{
    height:100%;
    display:block; //サイドバー自体はグリッド上に配置する必要があるが、サイドバーの中はグリッドレイアウトでなくても良いのでblock要素に変更しました
       --以下略--
}
.mysticky（追従させたい要素）{
    position:sticky;
    top:50px;
    display:block;
       --以下略--
}
ちなみにサイドバーのうち追従するウィジェットと追従しないウィジェットはそれぞれ別のウィジェットエリアとして設定しています。
テーマのソース（sidebar.php）で、下記のように追従させたい方のウィジェットエリアにのみ.mystickyというクラスを付与しています。





主に目次を追従させたくて追従サイドバーエリアを作ったのですが、ついでに広告バナーも追従させています。
（とはいえ、よっぽど長い記事でなければ追従開始する前に記事の方が先に終わります。）

広告バナーはなるべく上品なものを選んでいるつもりですが、邪魔になっていたらすみません。
気になる方は各自アドブロ等で対応してください。

【追記】
ついでにここのMemoのサイドバーも追従にしてみました。（おおむねタブレット端末以上のみ）
ここにはいろいろ書き散らかしているので、検索性が上がって便利になったと思います。

#自作テーマ #wordpress #備忘録

【1万字over】WordPress用自作テーマ制作の全記録【創作サイト】



主に参考にした書籍やサイトのまとめメモと備忘録です。
ほんとにただの記録なので、この記事を読めば自作テーマが作れるようになるという趣旨ではありません。

目次から気になる部分だけつまみ読みするのもおすすめです。
→Wordpressからてがろぐへの移行により目次はなくなりました。気合で探してください。

続きを読む 🔽はじめに
このサイトは2022年6月の開設当初からWordpressで作られました。

当初はSketchというAutomatic社製の公式テーマをカスタマイズしながら使用していましたが、デザインや使い勝手の面でもっと自分にフィットするものが欲しくなり、白紙の状態から自作テーマを作ることにしました。

私自身のスキルは、趣味でWordpressサイトをいくつか作ったことがある程度で、HTML&CSSの知識はわからない都度調べるツギハギスタイルで体系的に学んだことはなし、HTML手打ちで1からサイトを作った経験なし、PHPとJavascriptは完全にわからないので必要な時はコピペして雰囲気でカスタムという感じです。

あんまり謙遜しすぎて本当に初心者の人のハードルを上げるのも本意ではないので、趣味でやってるレベルとしては一応中級者くらいになるのかなと思います。

自作テーマの制作自体は当初予想していたよりも簡単にできましたが、自分の理想の形にまで仕上げるのはやっぱり時間もかかるし大変でした…！（現時点でも完成度としては95%くらいです；）
とはいえ自分自身こういう作業が好きなので苦戦したことも含めて終始楽しくやれました。

WordPressの良いところは利用者が多くググれば疑問やトラブルはだいたいすぐ解決するところです。
都度調べてトライ＆エラーをするのが苦ではないタイプの方なら、自作テーマづくりが初めてでもきっと楽しく作れると思いますので興味のある方はぜひ挑戦してみてください。

この記事の中にも、Wordpressで自作テーマを作ってみたい方やカスタマイズしてみたい方の参考になる部分が少しでもあれば幸いです。

自作テーマを作ろうと思った理由
人のコードいじる方が大変
1にも2にもこれ。何かやろうとすると意図しないところが崩れる
また既存のテーマやテンプレートを使う場合、私は元のCSSソースを直接書き換えることに抵抗があるので、後ろにどんどん追記していく形をとっていくのですが、それでソースコードがどんどん膨れ上がったり、競合したりしてぐちゃぐちゃになっていくのも落ち着かなくて嫌でした。

サイト全体に統一感を出したい
特に、今私が超激推ししている「てがろぐ」という外部サービスのマイクロブログCGIを、あたかもWordpressで作ったサイトのコンテンツの一部に見えるよう自然に溶け込ませたいと思っていました。
そのためには、既存のテーマを流用するより一から作った方が結果的に楽そうと判断。

お手軽マイクロブログCGI「てがろぐ」：スキン式で複数ユーザ対応 – にししふぁくとりー (nishishi.com)

軽くしたい
既存のテーマやテンプレートはオシャレ＆高機能すぎて、何に使ってんだかよくわからないスクリプトなどがモリモリ組み込まれてて重いことが多いです。
デフォルトでシェアボタンがついてたり、Twitterカードを出力したりする機能をいちいち取り除いていくのも大変で、最初から自分に必要なものだけ組み込んでおきたいと思いました。

ただでさえ創作サイトという性質上大量の画像を置いているし、プラグインも（厳選はしているものの）たくさん入ってるので、テーマ本体くらいは身軽にしたかったのです。
何よりもサイトで使っているものはなるべくすべて自分で理解しておきたい。

一応創作サイトだし自分だけのデザインにしたい
サイトを運営しているうちにサイト自体も創作物の一部みたいな気分になってきたのと、自分にとっての使い勝手の良さを求めたり、作風とサイトデザイン全体の調和を取りたくなったため。（全部自作すれば勝手に作風合うだろ理論）


↑PC以外で閲覧している方向けに、完成したサイトの現在のトップページのファーストビューのスクショを貼っておきます。

参考にしたデザイン
とにかくPCビューでは左固定カラムにして、さらにトップページさえ見ればサイトの主要なコンテンツ（絵、ブログ、サイト概要、メールフォーム）すべてを見渡せるデザインにしたいという構想でした。

その上でスマホやタブレットでは左メニューがコンパクトな感じで上部に来るようにレスポンシブ対応もしたい。

左固定カラムはあまり流行っていないのか、なかなか参考になるデザインを見つけるのに苦労しました。

後から知りましたが、こういうデザインを『疑似フレーム』というらしいです。
この名称を知ってれば参考になるコードを掲載しているサイトを見つけられたと思うのでもう少し楽にコーディングできたかも…。

疑似フレーム＋レスポンシブ対応以外の部分はとりあえず作りながら考えていくことに。

参考① COASTLINE
Coastline – Portfolio Theme for WordPress (cssigniter.com)

左固定カラム＆ファーストビューでタイル状にみっちり埋まったギャラリーを見せるということがやりたいイメージにぴったりでした。

非公式のWordpress用有料テーマで、買い切りだし長く使うならそこまで高くないので買ってしまってもよかったのだけど、そもそもテーマ変更の動機が「人の作ったコードをいじるのが難しい」だったので見送り。
非公式テーマを使うのも、アプデが止まったりした場合を考えるとちょっと抵抗がありました。海外製なのでサポートを頼るのも難しそう。

参考② Hyperspace
Hyperspace | HTML5 UP

左固定カラム＆トップページだけで全部の情報をざっと見せることができて、「もっと見たい人だけリンクボタン押して個別ページに飛んでね」という構造が良いなと思いました。

こちらはクレジット表記さえすればフリーで使えるHTML＋CSSだったので、これをベースにWordpress用のテーマに改造してもよかったのだけど、そもそもテーマ変更の動機が（以下同文）

実は最初こそ、このHyperspaceのHTML+CSSをベースにテーマ制作を進めていたけど、てがろぐとドッキングする段階で表示に不具合が起きて自力では直せなかったために頓挫しました。

参考③ Cocoon
Cocoon | WordPress無料テーマ (wp-cocoon.com)

主にブログの一覧ページ、記事単独ページのデザインの参考。
閲覧者目線でも、Cocoonを使っているブログサイトが見やすいと思うことが多かったので参考にさせてもらいました。

参考④ Easel
EASEL – 創作・同人サイトに特化した、シンプルで多機能なWordPressテーマ (gt-gt.org)

更新履歴にカスタム投稿タイプを使うなど、管理機能面での使い勝手の良さを主に参考にさせてもらいました。



いずれもデザイン等の参考に留め、テーマ用のソースコードは後述する書籍のコードをひな形に自分で手打ちして制作しました。

参考（配色）：3色だけでセンスのいい色

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色 (見てわかる、迷わず決まるシリーズ)
このサイトでは3色以上使っていますが、主にこの本から気に入った色をピックアップして採用しています。

【時系列順】制作ログ
制作前の参考サイト
当初は自作テーマを作りたい気持ちはぼんやりあったものの、なんとなく自分には無理だろうなぁという気でいました。
そんな折、主にこれらの記事を読んで「あれ、案外自分でも作れそうでは？」という気になる。

WordPressの自作テーマに挑戦してみよう！ 初めてでも意外と簡単？｜ワプ活 (conoha.jp)

WordPressのテーマを自作する方法解説！必要なファイルとそれぞれでよく使う内容例ご紹介 | ガリレオ アンド ヴィーナス合同会社 (galileo-venus.com)

参考図書に沿ってテーマのひな形を作る
前項の記事を読むだけでも自作テーマを作ることはできてしまうのですが、やっぱり根本を理解できないと応用が利かない＝理想のテーマは作れないと感じたので、体系的に学べそうな本を読んでみることにしました。

前項の記事を読むだけでも自作テーマを作ることはできてしまうのですが、やっぱり根本を理解できないと応用が利かない＝理想のテーマは作れないと感じたので、体系的に学べそうな本を読んでみることにしました。

グーテンベルク時代のWordPressノート テーマの作り方（入門編） (EP NOTE SERIES)
まずは上記の本に従って自作テーマのひな形を作りました。

WordPress5.X時代の本なのでほんの少し古くなってしまってる情報もありますが、ブロックエディタ登場以降のWordPressそのものの基本的な構造～最新のHTML5＋CSS3での基本的なサイト作りのためのコードまで網羅的に学べるのでかなり良かったです。

しかも、KindleUnlimited本なのでUnlimited会員なら無料で読めます。

ただ、HTML＋CSSについては懇切丁寧な説明があるわけではないので、それらが全くわからないという人は別の本やサイトなどでさらっと雰囲気を覚えてから取り掛かる方が良いと思います。

この時点でできたテーマがこんな感じ。↓
本の通りに進めるだけで勝手にレスポンシブ対応のブログサイトのひな形が完成します。


↑仮のPC版トップページがすでに完成。画像の敷き詰めはFoogallery（あとで紹介します）というプラグインで行っています。


↑ブログ機能＆モバイル対応も既にできている

左固定カラムを作る
ここは前項で紹介した本で学んだグリッドレイアウトというCSS3の手法を応用してゴリ押しで作りました。（ので、参考サイトがありません；）



PC版ではヘッダーとフッターを同じ場所に重ねて表示して、1本のバーに見えるようにしています。（これがコーディングのセオリー的に正しいのかは知りません）

なおスマホやタブレットなど小さい端末では左メニューは邪魔になるため、ヘッダーは上部固定、フッターは下部にそれぞれ表示されるようにCSSの@mediaで振り分けしています。


↑gif動きます

トップページをグーテンベルクで作成する
前項で紹介した本には続刊があります。

第2巻では、第1巻で作ったテーマのひな形を流用して、グーテンベルク（ブロックエディタ）の機能でランディングページ（1ページに主要な情報が網羅されているページのこと。商業サイトなどでよく使われる）を作るという内容になっています。

グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編） (EP NOTE SERIES)
この本で学んだグーテンベルクの使い方を応用して、トップページにブログ新着記事、サイト概要、メールフォーム、パララックス効果のある背景などを設置していきました。

ブログ新着記事


パララックス効果のある背景画像

↑gif動きます

こんな表現もグーテンベルクなら標準機能だけでごく簡単に実現できます。画像の差し替えも非常に簡単です。（私のサイトではパララックス効果背景はPCのみ表示するよう設定しています）

グーテンベルクのエディターを使うことで、コーディングをしなくても視覚的な画面操作のみでリッチなデザインのページを作ることができます。
この手法では固定ページに直接コンテンツを記述していくので、home.phpなどのテンプレート用のソースコードをいじらずに済みます。
そのためテーマ用の骨組みとなっているphpファイルのコード内にコンテンツ内容の記述があるという（個人的に）気持ち悪い状態にならないのもメリットでした。
トップページの内容に変更がある際も、phpファイルをいじることなく管理画面から固定ページを編集するのみでOKです。

この本を読むまではグーテンベルクアレルギーかってくらいブロックエディタに苦手意識があったのですが、グーテンベルクでできることの幅広さを知ることができて、それだけでも読んだ価値がありました。

もうクラシックエディタには戻れない！

てがろぐの埋め込み
サイトの骨組みが完成したら、「てがろぐ」というマイクロブログを作成表示管理する外部システムを、サイト内のいちコンテンツとして自然に馴染むよう、作成済みのテーマに埋め込んでいく作業をします。

てがろぐの実装作業は後述のプラグイン追加やらソースの調整やらがすべて終わってから一番最後に行いましたが、説明の流れの都合上ここで紹介します。

本サイトではMemoのページで、単独のブログ記事にするほどでもない雑多な文章や、らくがきや試作品を気楽に投下したり、作品に簡単なコメントを付けて紹介する場として「てがろぐ」をとても楽しく利用しています。

自分にとってはここが一番更新頻度も閲覧頻度も高いので、実装にも気合の入るポイントです。


↑「てがろぐ」を実装したMemoページが完成した様子。
右下のクイック投稿フォームは自分だけに見えているので一般の閲覧者には表示されません。

といってもやったことはシンプルです。
WordPressで作成したテーマのブログページ用のテンプレートを丸ごと流用したskin-cover.htmlという名前のHTMLファイルを作り、PHPで書かれている部分をHTMLに書き直すだけ。

そしてメインコンテンツやサイトバーの中身などを、てがろぐ独自のタグに置き換えるだけ。
公式サイトにとてつもなく親切なドキュメントがあります。
たとえばWordpressの記事本文だった部分を　[[TEGALOG]]　という独自タグに置き換えただけでも本体のコアとなる部分はちゃんと機能します。すごい。

この方法なら、HTMLでマークアップした構造＋CSSのデザインなどをほぼそのまま引き継ぐので、この時点でほとんどデザインがWordpressサイトと統一された状態で完成します。レスポンシブ対応などもWordpressテーマ作成時に設定した状態が既に適用されています。

本サイトの場合は、Memoページはちょっとだけ裏コンテンツ風にしたかったのと、Wordpressの長文ブログとは別のコンテンツであることを視覚的に差別化したかったので、色合いをWordpress製のサイト本体部分とは少し変えています。

気楽につぶやけてしまうツールなので、あんまり余計なことを口走らないようにCHILLった感じの配色にしました。

また、クイック投稿フォーム部分のCSSは「do」さんで配布されているてがろぐ用スキン（skin-minimal）のソースコードを一部拝借して自分好みに整えました。

skin-minimal | do – 創作・同人サイト制作支援サイト (gt-gt.org)

私はてがろぐ部分も2カラムにしたかったのと、Wordpress製のページと瓜二つのデザインにしたかったので、てがろぐスキンまで自作しましたが、ぶっちゃけこのskin-minimalを適用して背景色・文字色・フォントなどを母艦サイトと揃えるだけでも十分違和感なくサイトに馴染ませることができると思います。

また、てがろぐ内の画像表示には同じく「do」さんで配布されているfuwaimgという画像表示モーダルウィンドウを使用しています。（WordPressで作成した部分の画像表示ではFoobox※後述　を使用しています。）

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

【参考サイト】細かい部分
ここまでで既にサイトの大枠は完成したのであとは細かいデザイン調整や、ちょっとした機能の追加や設定などを施していくだけです。

主要プラグインのほか、主にやりたいことを実現する方法がわからず外部サイトなどからコードなどを参照したものを備忘録がてら紹介します。

なお可能な限りJavascriptとプラグインを使用しない方針で制作しています。

【プラグイン】
FooGallery
本サイトの屋台骨となっているギャラリー表示プラグイン。

トップページでは「JUSTIFIED GALLERY」を、アーカイブスギャラリーページでは「RESPONSIVE GALLERY」をそれぞれ適用して使っています。

他にもいろいろな表示方法が選べるので公式サイトのデモを見てみるとよいかと思います。

デザインも細かい調整がきくので幅広いサイトデザインに溶け込ませやすそうです。

FooBox
画像をクリック（タップ）するとその場でふわっと拡大表示し、矢印キーやスワイプで次々に画像を切り替え表示できる機能です。

前項のFooGalleryとセットで使うと設定など連携してくれるので使いやすい。

Lightbox系にありがちなモッサリ感がなく、キビキビと画像が表示されることと、余計なボタンや機能がなくシンプルなこと、小さな×ボタンを押さなくても画像以外の部分をクリックすることで元のページ表示に戻れること、モバイルでもPCでも操作感が良い点などが気に入っています。

FileBird
メディアライブラリにある画像をフォルダ分けして管理することができます。
創作サイトなど画像の多いサイトには便利です。

ただ、前述のFooGalleryとは連携していないようで、FooGalleryに画像を追加する際はデフォルトのメディアライブラリから画像を選択することになります。

Enable Media Replace
アップロード済みの画像を差し替えできるプラグイン。

画像がメインコンテンツのサイトでは必須級の便利さ。

Spectra
グーテンベルク（ブロックエディタ）の機能を大幅強化してくれるプラグイン。

私は今のところ、トップページの「ブログ新着記事一覧」の部分にのみ使用しています。
【追記】現在はSpectraは使用しておらず、デフォルトブロックの最新記事一覧を使用しています。（最新記事一覧のデザイン変更メモ）

【HTML＆CSS】
スクロールバーのデザイン変更
CSSでスクロールバーをカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント | コリス (coliss.com)

PCのみですが、スクロールバーのデザインをリッチにしています。

フェードインアニメーション
CSS だけで Web ページのフェードイン表示を実装する方法 | q-Az

ページ遷移したときにふわっと表示される効果。
苦手な人も少なくないかもしれないですが、私はページ遷移に余韻がある感じが好きなので採用しました。

フェードインアニメはJavascriptを使用した情報が多いですが、CSSだけで実現する方法を掲載しているのは私が見つけられた範囲ではこちらのサイトだけです。

ハンバーガーメニュー
JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 : ビジネスとIT活用に役立つ情報 (asobou.co.jp)

Javascriptを使わず、CSSだけで実現するハンバーガーメニューの解説記事。

ハンバーガーメニューは、【三】のようなアイコンをタップするとメニューが出てくるあれです。
当サイトではスマホ程度の画面サイズの端末で閲覧時にのみ表示されるように設定しています。

本当にコピペだけで立派なハンバーガーメニューができてえらく感動しました。

見出しデザイン
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 (saruwakakun.com)

ふにゃふにゃのふきだし
CSSだけでウネウネ動く円を作る | q-Az

PC版トップページやモバイル版フッターの各所に設置している「おにがしまさんの一言」で採用しているフキダシです。
CSSのみでここまでぬるぬるとアニメーションできることに感動。

新着アイコン
NEW/UPをCSSのみで追加する (cman.jp)

アーカイブスギャラリーの最新アイテムに新着アイコンが付くようにしました – ちきゅーのうらがわ down to earthのブログ (fujimurasaki.art)

【機能追加（functions.php）】
カスタム投稿タイプを追加
functions.phpでカスタム投稿とカスタムタクソノミーを作成する方法｜WordPress特化型メディアサイト【WPWeb】 (and-ha.com)

カスタム投稿タイプは当サイトでは「更新履歴」と「おにがしまさんの一言」の部分で使用しています。
これらは通常のブログ記事とは完全に取り扱いを分ける必要があるため、カスタム投稿タイプの利用が不可欠でした。

任意のカスタム投稿タイプをリストで吐き出すショートコードを設定する
WordPressで任意のカスタム投稿タイプの投稿リストを実装するショートコードを作る | かちびと.net (kachibito.net)

こちらを参考にショートコード化したカスタム投稿タイプの記事一覧を表示したい場所に設置しました。


上図は更新履歴の例。ショートコード化したことで管理画面（固定ページの編集画面）がだいぶスッキリとしているのがお分かりいただけるかと思います。

特に更新履歴にカスタム投稿タイプを使う場合、ベタ打ちするのと違い日付が自動入力になる点も気に入っています。
これは実際に表示されているのはたった1行程度の文ですが、内部処理的には1つ1つがれっきとしたブログ記事のような扱いになっているためです。



プラグインなしで目次を表示
WordPress プラグインなしで記事の見出しから目次を作成 – Xakuro

【追記】私の環境では↑のコードが上手く動作しなかったので下記の記事で紹介されているコードに変更しました。

WordPressで投稿ページにプラグインなしで目次を作る方法 – I’M SUJEE (leesujee.com)

プラグインなしでブログカードを表示
ブログカードとは↑このように外部サイトへのリンクをなんかいい感じのカード状に表示してくれる機能のことです。
たくさん使うと重くなるので、ここぞという場面で使っています。

記事ごとに検索除けできるようにする
(ワードプレス) noindexを個別ページ毎に設定する方法【SEO】 | hara-chan.com

「この記事だけ検索エンジンに掛かってほしくない」という時に、記事の投稿画面から個別に設定できるようになる。
（ただし絶対に検索に引っ掛からなくなるわけではないです。とはいえ、Googleはnoindex設定をかなり尊重してくれている印象です。）

特定の条件に当てはまるページを検索除け
サイト内検索画面は検索エンジンに対してnoindexにすること – はるかのひとりごと (harukas.org)

本サイトでは記事で紹介されているサイト内検索結果ページのほか、ブログのカテゴリ一覧などのアーカイブページなども検索除けされるように設定しています。

条件分岐の書き方の参考：便利なWordPressの条件分岐16パターン：カスタマイズで活躍するものを厳選！ (saruwakakun.com)

ウィジェットエリアでショートコードを利用可能にする
ウィジェットでショートコードを利用する方法 | WordPressテーマ【 Dolce & Vivace 】 (dolcevivace.com)

bodyタグのclass属性にページスラッグ名を追加して吐き出す
[[WP]WordPress でbody_class() にスラッグを追加表示する方法｜WordPress｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」 (webantena.net)]https://www.webantena.net/wordpress/page...

CSSでページごとにデザインを細かく調整することがやりやすくなります。

メールフォームにひらがなを含まない場合は送信できないようにする（スパム対策）
Contact Form 7　スパムメール対策「ひらがなを含まないと送れません」 | Web Design Sally　｜　WEBサイト制作・ホームページ作成　静岡県沼津市 (design-sally.com)

【機能追加（テーマのソースコードに記載）】
前後の記事ページャーにサムネイル画像を付ける
ページャーにもサムネイルをつけたい | よもやまチョモランマ (naganokanako.com)

パンくずリスト
【WordPress】パンくずリストの作り方【テーマ開発】 | SIMPLE (simple-wp-theme.com)

サイト内検索の実装
WordPress標準の検索フォームを自分の好きなデザインに変更する | Plusers

検索結果テンプレート -search.php- : WordPress – FindxFine

【完全版】WordPressの検索結果から固定ページを除外する方法 – Offise Kondo (takayakondo.com)

本サイトでは固定ページのほか、更新履歴などのカスタム投稿タイプで作成した記事もサイト内検索の対象から除外しています。

FontAwesomeをダウンロードして使う（高速化）
Font Awesomeの使い方【ダウンロードして低速を爆速に】 | うちガジェ (wynn-blog.com)

FontAwesomeのCSSを非同期読み込みする（高速化）
Font Awesome の CSS を非同期読み込みにするようにした :: プログラマになりたい人生 — プログラマになりたいおじさんの日記 (takuchalle.dev)

Webフォントは非同期読み込みすることで、フォントの読み込みの完了を待たずにページを表示できるためサイトの高速化になります。

Google Fontを非同期読み込みする（高速化）
Google Fontsを非同期で読み込む | NullNull

同上。GoogleFontsはかなり重たいので本サイトでは欧文フォント1つだけにとどめています。（😿）

Webサイト高速化については以下の書籍がおすすめです。KindleUnlimited対応。

重いサイトを軽くする、Webページ表示速度の高速化10の基本: 初歩からのPageSpeed Insights (にししふぁくとりー叢書)
トップに戻るボタン（デザイン）
【CSSだけ】トップに戻るボタンの作り方【コピペでOK】 (csshtml.work)

トップに戻る・下端に進むボタン（コード）
ページ上端に戻るボタンや、下端に進むボタンの簡単な作り方 – Sakura scope (nishishi.com)

スクロール追従
スクロールしてもついてくるサイドバーのメモ – ちきゅーのうらがわ down to earthのブログ (fujimurasaki.art)

CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法 | コリス (coliss.com)

【CSS】position:stickyが効かない時の原因と解決方法 – ジャングルオーシャン (jungleocean.com)

検索除け
【目的別】検索避けのやり方！創作・同人サイトのトラブル対策の強い味方【無断転載対策】 | do (gt-gt.org)

noimageindexを設定しておくだけでもフリー素材扱いされるリスクをぐっと減らせるかと思います。

Pinterestにピンされるのを拒否する
自分のサイトのコンテンツがピンされるのを防ぐ方法 | ビジネス向け Pinterest ヘルプ

サイトからブラウザ拡張機能などで直接ピンされるのを拒否するだけなので、保存された上でアップロードされてしまうことは防げません。（まぁそれはPinterestに関係なくただの悪質な無断転載なのですが）

【管理機能、データベースの変更など】
リビジョンの無効化
【WordPress】リビジョンを削除・無効化してサイトを軽くする方法 | メープルの国のアリス (yuhostyles.com)

リビジョンを無効化することで、データベースの肥大化とパーマリンクに「-2」などの数字が増殖していくストレスから解放されます。

ロリポップのレンタルサーバーでconfigファイルの書き換えに失敗する場合：【ロリポップFTP】権限の設定を変更してconfigファイルを編集可能にする方法【１分でできる】 | AmaDemo

既に作られてしまったリビジョンを消す
【WordPress】プラグイン無しでリビジョンをデータベースから削除、保存数を変更する方法！ | 知りたいねっと (shiritai.net)

リビジョンが食ってる容量は結構バカにならないので、小規模の趣味サイトならまず不要なのではないかと思います。

【.htaccessの設定】
テーマからは少しそれますがついでにメモ。

画像直リンク拒否
画像直リンクの禁止 / サーバー・プログラム / マニュアル – ロリポップ！レンタルサーバー (lolipop.jp)

[怪しい国のIPからの訪問を拒否する]
【.htaccess】特定の国のIPアドレスでアクセスを拒否（ブロック）する | パソコン修理のエヌシステムBLOG (pc-pier.com)

【その他】
画像をWebP形式に変換
PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱 (saruwakakun.com)

画像をWebP形式に変換することで容量を大幅に削減することができます。

一部ブラウザではWebPの表示に対応していないようですが、モダンブラウザではほとんどが既に対応済であることに加え、私はサイトが軽くてサクサク表示される方が好きなので、当サイトではほとんどの画像をWebPに変換しています。

EWWW Image Optimizerというプラグインで自動変換もできますが、FooGalleryとの連携がないためギャラリー用の画像はこちらの変換サイトで手動で変換しています。

WebPは取り扱いがちょっと面倒なので無断転載対策にもなりそうかなぁなんて思ったり。

セキュリティ関連
ブログ(WordPress)へのxmlrpc攻撃が酷すぎたので無効化してみた | Fukuro Press (fukuro-press.com)

以上です。まだ未完成な部分もあるので、随時加筆修正していくつもりです。

インターネットネイティブだけどSNSネイティブじゃない世代は個人サイト作ろうよ【創作】

自分でなんでも自由にアウトプット&発表できる場（つまりこのサイト）を作ったのってよく考えるとなかなか凄いことな気がしてきました。

もし拠点となるサイトがなくすべてが外部サービス頼りなら、私のサイトを例にとると

ひとこと　→Twitter
memo　→Twitterかnote
長文　→noteかSEO対策を施したブログ
イラスト　→pixivかTwitterかTumblr（ただしこれらのサービスは時系列順にすべて表示するので作品の出し分けみたいなことはできない）
手芸　→TwitterかInstagramか場合によってはYouTubeなど
投げ銭　→OFUSE、Fanboxなど
活動場所まとめ　→POTOFU

このようなサービスを発信したい内容によって使い分けることになるだろうけども（しかも作品のジャンルや発言の性質によってアカウント分けとかも必要）、こんなのよっぽど器用じゃないといちいち使い分けできるわきゃないんだよなぁ。

続きを読む 🔽結局、一番反応があるところに利用頻度が偏っていきそう。人は意志の力だけではドーパミンが出る刺激（ここではタイムレスに人からの反応が貰えること）に逆らえないから。
そしてそこで人権を失わないためにその場所で求められる型の作品や文章しか書けなくなっていくから、あっという間に窮屈になって、「私そもそも何がやりたかったんだっけ…？」ってなると思う。（というか実際にそうなった）

個人サイトなら純粋に今アウトプットしたいという内から湧き上がる衝動だけで取り掛かることができて、メモ（マイクロブログ）に書いてるうちに長文になってきたからブログにしようなど発表形態を変えることも柔軟にできる。

私のサイトの場合なら、作った作品について何か語りたければメモで語れるし、特になければ黙って一直線でギャラリーに放り込んでもいい。
ぜひ見てほしい絵はトップにドンと飾って、そうでもないやつはギャラリーにちまっと置いておくなんてことも簡単にできる。

これは発信側がやりやすいというだけでなく、同時に見る側のメリットにもなる。
作者の自信作だけサクサクと見たい人もいれば、作者のコメンタリーを見るのが好きな人、過去の発展途上な作品まで含めて全部見たいという人もいて、個人サイトならそのどれもを満足させる見せ方をすることができるから。

個人サイトならアカウントによって求められる人格を装って使い分ける必要もない。オタク垢では非モテ独身のフリしてハンドメイド垢ではキラキラママになって…とかそんなんできるかって。（これはたとえ話なので私の属性というわけではないですよ）

とにもかくにも「とりあえずサイトに向かう」だけで何かしらのアウトプットをする準備が整う。
仮にその時は何も発信しなくても、自分がこれまでに創ってきたものや創作意欲との意識を繋いでおけるというか。（これらは一回途切れるとモチベーション戻すのは本当に大変）

あぁ、個人サイトってなんてやりやすいんだ。
自分自身と向き合う創作活動との相性は本当に最高だと思う。

人が来る来ないとかは二の次なのです。私は今特に使いたいサービスがないのでサイト外での発信はやらないけど（Youtubeはちょっとやりたいかも）、それらをやるにしてもあくまでサイトのお裾分けみたいなきもちでやらないとあっという間に手段と目的が逆転してしまうと思うのです。

SNSだけで自分のペースを保てている人は本人の気質によるところも大きいですが、おそらく別のところにコアとなる創作活動の基盤を持ってると思うんですよ。
商業作家だったり、紙の本やグッズなどをイベントに出すような形で活動してたり、リアル世界で同好会的なものに所属していたり。

私にはそういった基盤がないので、個人サイトを運営することがその役割を担ってくれているのだと思っています。物心ついたときからインターネットお絵描きマンだったからね。

#モチベーション #創作全般 #自分語り

【脱WordPress】ヘッドレスCMSとJamstackに興味を持ったようです

今のサイトのWordpress用自作テーマを作るのに2週間くらいかけて作りこんだんですが、それが完成してしまったことで、毎日楽しく熱中して情熱を注ぎこんでた対象がなくなってしまったために、燃え尽き症候群みたいになってしまって、まだ何かできることないかと悪あがきしてるのが今なのかなぁ、と思います。

でも自画自賛するわけじゃないですけど、今のデザインとUIは今の自分にとっては最適解みたいで、これ以上何かやろうとしても蛇足感しかないんですよね。
トップページはもう少し簡素にしてもいいかな？とも思いますが、それも蛇足になるのが直感的にわかる気がしてます。
洗練されてればいいってものではないというか。
（一応、トップページだけを流し見すれば全部の主要コンテンツと主要な更新をざっと見ることができるというコンセプトで作りました。重かったら申し訳ない。）

なんかこう、どんなジャンルのものでも「リニューアルしてオシャレにはなったけど前の方が好きだった」みたいなものってあるじゃないですか。
自分の感覚では、その”前の方”の状態にできたのが今の自作テーマなのです。
主に中の人の好みを隠しきれてない点や、いい感じにごちゃっとしている点で。（それでも一応情報の整理とレスポンシブ対応で見やすさにもこだわったつもりです。）

続きを読む 🔽多分これだけの集中力と情熱をもってサイトのガワ部分を作るのはもうしばらく無理と思うので、余計な事しない方がよさそうです。

ただ、脱Wordpressしたい流れでヘッドレスCMSとJamstackに興味を持ってしまったので裏でこそこそ勉強中です、、。
エンジニアでもないのにこんなんやって時間の無駄のような気もしてますが、なんかキーボードカタカタしてないと落ち着かないのです。
このサイトをヘッドレスCMS化するかは未定…というかするとしても1年以上は先になると思います。圧倒的にスキル不足だからです。どうみてもオーバーテクノロジーです。
ヘッドレスCMS化すれば表示速度とセキュリティ面が劇的に改善されそうですが、更新が簡単になるかというと真逆の方向に行ってる気が…。

そもそもJamstackで作ったサイトってスマホやタブレットから更新できるんでしょうか…？

プロの間ではWordpressはもう古い、時代はJamstackだ！ってなってるようですが、本当にJamstackがWordpress並みのメインストリームになるなら一般人にも扱えるようなサービスが絶対に出てくると思うので、私が今勉強してるのは本当にただの好奇心と自己満足でしかないです。
最初の話に戻るけど「次にやること」が欲しかっただけ。

ヘッドレスCMSとJamstackについて知れば知るほど『WordPressって初心者～物足りなくなった中級者～ガッツリいじれる本職までみんながそれぞれのステージで便利に使える完成度高いシステムなんだなぁ』と感心してしまいましたよ。

わからないこともググれば高確率ですぐ解決するし。

そりゃ覇権も取るわけだ。

#wordpress #自作テーマ #javascript

Gravに興味を持つ奴

Wordpressですが、私のサイトはまだコンテンツがそんなに多くないことや、高速化施策をしたり、サーバースペックも十分なので（ロリポのライトです。コスパが良すぎておかしい）よく言われている重さの部分は今やあまり気にならないのですが、とにかくデータベースを扱うのがやっかいでどうにかならないかなぁとずっと思ってました。

前にもちょっと言ったように、私の苦手な「ブラックボックス化」の最たるものという感じで。
作品保存庫になってるローカルサイトでもWordpressを使ってますが、バックアップ・リストア関連でよくやらかすので毎回冷や汗ものなのがしんどいです。。

そんな折にgravというデータベースを使用しない軽量CMSを知り、使ってみたいなぁと思いました。
さすがにこのサイトはついこの間改装完了したばかりなのでローカルで試してみようと思ってます。

続きを読む 🔽gravはデータベースを使用しないので移転やバックアップ・リストアもフォルダコピペのみでOKのようで、それだけでももう願ったりかなったりという感じです。
少し前にサイトのデザイン変更のために全部をローカルに落として作り直して上げなおすという作業をしましたが、データベースを使うWordpress部分は本当に神経使ったのに対し、フォルダコピペだけでさっと着せ替え完了できるてがろぐのありがたさをちょうど痛感したところでした。

手打ちHTMLが一番シンプルなのはわかってるのですが、私は手打ちHTMLでサイトを作ったことないのであまり馴染みがないのです。（私のサイト作成遍歴は携帯サイト　→　レンタルブログ　→　Tumblr、それ以降はずっとWPなので、”管理画面”というものが存在してそっから何かするのが当たり前という感覚です。）
手打ちHTMLでもガワを整えるだけならこれまでの経験の流用でできると思いますが、ページの管理の面で億劫になるのが目に見えてしまうのです；
あと絶対にファイルを上書き保存して取り返しのつかないことにしてしまう自信がある。

何やるにしても新しいこと覚えないといけないフェーズに来たと思うので、どれを選ぶか分かれ道って感じですね；
Wordpress続投するならデータベースへの苦手意識を何とかしないといけないし、PHPやJavascriptなんかもずっとコピペ＆雰囲気だけでやってきたのでちゃんと基本を押さえておきたいなぁと思っていたタイミングです。
（まぁJavascriptに関しては、このサイトではフォントの読み込み以外に直接自分で設置したものはないのですが。）

手打ちHTML＋PHPとかにワンチャンありそうな気もしてきました。

🐶

#Wordpress #grav #プログラミング

イチからWordpressの自作テーマを作りたくなったのは単にDIYが好きだから

例えるなら、3D素体や写真をトレス（もちろん著作権問題を一切クリアしている前提）して絵を描くより、全部自分で描いた方が楽しいのと同じ感覚から来たのだと思います。
前者の方がたぶんモノとしての完成度は明らかに高くなりますが、後者の方が楽しいからそうしてます。

続きを読む 🔽要は私が創作面においては手づくり好き・DIY好きなんだと思います。完成度よりも作ってる時のプロセス込みで楽しんでいるというか。
昔からあんまり素材とか使うのが得意じゃないというか、単に面倒くさがりだから全部自分でやろうとしてかえって面倒なことしてたり…

昔はいろいろ使いこなせるようにならなきゃと頑張ってた時期もありますが、今はいかに楽しいプロセスだけを踏んでやれるかチャレンジしてる節すらあります。横断歩道の白いところしか渡らないみたいな。
もちろん素材とか便利で面白いツールを使いたい気分の時もあるので、そういう時は使ってますよ！別に縛りプレイしてるわけじゃないので。

絵にせよサイト作りにせよ、ゼロから組み立てようがすでに土台が組みあがってるところに手を加えようが、どっちがいいとか偉いとか効率がいい悪いとかそういう話じゃなく、私は創作やサイト制作に関しては工程がシンプルで全部が自分の手に負える範疇に収まってる方法を取る方が好きなんだと思いました。
ブラックボックスになってる工程をできるだけ挟みたくないのかもしれません。

効率化するのが楽しい人の気持ちも、集合知のパワーを使ってクオリティの高いものを作りたい人の気持ちもすごくわかります。私も本来の気質的にはどちらかといえば効率化ツールとかどんどん使いたいタイプです。
実際、サイトの屋台骨は手打ちじゃなくてWordpressやてがろぐを使ってますしね。

あと、全部自分でやれば嫌でも自分のテイストに合うようになるというのもありますよね。
私の絵がオシャレなポートフォリオ用テンプレートに合うか…？って話です。
いや、そういう場所に飾っちゃえばなんか逆にそれっぽく見えちゃうんでしょうが。
でも結局こういう雑記とかラクガキみたいなものをふわ～っと上げづらくなりますよね。
むしろそっちがやりたくてサイト作ってるので、ギャラリーとかは実は私の心情的にはオマケコンテンツというか、単なる副産物的なものだったりします。ギャラリー増やそう！というモチベーションでやってないので…。

#自作テーマ #創作全般 #めんどい思考

サイト作って一番良かったのは過去の作品が持つパワーみたいなものが色あせないこと

これは私だけなのかもしれませんが、SNSのような時の流れの概念が強い場所では、常に何かを創り続けなければいけないという強迫観念的な気持ちで創作していることが多かったです。
（今サイトに載せている作品よりももっと昔の話です。もう何年も前にやめてるので）

過去作品はどんどん色あせてくるから、早く新鮮なものを作らないと…という焦燥感が常にありました。
私を忘れないで、仲間外れにしないで、皆さんの役に立ちますから…という社会動物サピエンス的な本能が嫌でも強く出てしまうというか。

SNSでマイペースを保てる人は本当に凄いと思います。
でも、ほとんど人の来ない個人サイトでひとり黙々と更新するのを楽しめるのもきっとすごいことだと思うので自分をほめてあげます。
こればっかりは生まれ持った気質の違いでしかなくどちらがいい悪いではないので、SNSで消耗している人はとにかくサイト作りましょう。
つまらなかったり、合わなかったら畳めばいいだけ、失うものは何もありません。両方やってもいいんだし。

サイトのギャラリーに過去作品がしっかり整頓されて展示してあると、どんなに拙いらくがきでも自分の世界観の地層の一部としてしっかり生きていてくれてるような感覚になります。
作品たち（＝過去の自分のパワー）がいつでも待っててくれるので、創作する気分じゃないときに休むことにも罪悪感がありません。
これはサイトを実際にやってみるまでわからなかった想定外のメリットでした。

#創作全般 #モチベーション

バナーをつくりました


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