WordPressテーマ「Odamaki」作成進捗
目次
やること
linear-gradientの勉強- SVGアニメーション
- 投稿ページのヘッダーの背景画像がアイキャッチ画像になるようにする
- コード周りのリファクタリング
リセットCSSを乗り換えた
ブラウザに元々適用されている User Agent Stylesheet を打ち消してくれる、リセットCSSという存在がありますが、かつては normalize.css というものを使っていました。
この normalize.css は一言でいえば、見出しや段落の余白をそのまま残してくれる一方で、<body>要素に入る無駄な margin を打ち消してくれたり、まさに最低限のマークアップ要素が残してあるようなCSSです。
しかしながら、たとえばリスト要素の margin / padding を0にしたりするという作業が日に日に増えていき、メンテナンスがとても煩雑になってしまいました。なにか良いCSSがないか、他を調べまわりました。
そこで、乗り換えた先のリセットCSSが ress.css です。
この ress.css は normalize.css に加えて、<ul> や元々インデントが加えられている要素に対してもこれが打ち消されるように設定されています。煩わしかった宣言も、最初の方に minify した本CSSをインサートするだけで数十行ほどを削減することができました。とてもおすすめです。
ページ全体のレイアウトをCSS Gridで組み直した
この改修を通じて、Flexbox と CSS Grid の使い分けができるようになりました。でかいレイアウトの段組みには CSS Grid を、横並びの部品や小さなブロック要素には Flexbox を使ってあげるのが、それぞれの最適解のようです。
事実、ヘッダー上のナビゲーションメニューについては Flexbox を使用していますが、フッターの並び、それから投稿ページのレイアウト、トップページの三段組みレイアウトに関しては、CSS Grid を利用しています。
最初はとても難しく感じましたが、かなり抽象的な書き方ができたのがとても印象深く、Flexbox 同様、グリッドの中にグリッドを組み込むということもできます。慣れてしまえば自由自在にレイアウトを組むことができます。
テーブルのレイアウトを修正
線の存在感や縦幅の大きさのせいで何となく不格好に見えていたようです。
色々試行錯誤を繰り返してみたんですが、ちょっとデザイン面で分かったことを言語化してみました。
- レイアウトに実線を使うときはあまり濃い色にしてはいけない
- 見出しのデザインを作っているときはとても意識をしてしまうが、実はユーザー目線に立ってみれば見出しのデザインなどは些細なものである
スマホ版Chromeのヘッダーの色
を変えました。以下のようなコードを<meta>タグ内に挿入し、ページのヘッダーと同じ色に設定しました。
<meta name="theme-color" content="#2d4059">
Todo
- いろいろシンプル化に努めたらめちゃくちゃ投稿一覧ページがしょぼくなってしまったのでデザインを段組みにしようか検討中
- 指定ブロック内の要素にすべてをスタイルを適用しようとソースがまた汚くなってきたので修正 (※)
- コメント機能実装しようか迷ってる
自分でもこれはかなり久しぶりの日記だなと思っていて、半ば更新内容も忘れかけているので注意。
そろそろテーマ作成だけでなく、ページも色々充実させないといけないのに色々立て込んでいてなかなか作業ができない。プライバシーポリシーとかどうやって書けばいい？
Easy Table of Contentsを導入した
目次を表示してくれるプラグインとして今まではTOC+を使用していたのですが、この数年間アップデートがなく将来性を見込んで導入することにしました。デザインを変更予定。
またInkscapeに詳しくなった
バグかな？と思ったら
上のように複数オブジェクトを同時に分割したり、差分を取ったりして変形する場合、同じグループのものを一旦統合しないと挙動がおかしくなるみたいです。
結局こんな習作を作りました。
CSS Grid Layoutの学習
最近、Flexboxなるものを知ってこのWebサイトでもみだりに使用してきたのですが、このCSS Grid Layout というものは全く存じていませんでした。
この仕組みについては、全くの初心者でしたので、以下のサイトで学習してみることにしました。
このWebサイト上では、投稿一覧のレイアウトにこの技術を使いました。使ってみるとちょっと難しい。実は挙動が怪しいところがあるので、まだレイアウトの調整が必要かもしれません。
なぜこれがやりたいのか
WordPressにはビジュアルエディタ機能があり、これを利用して記事を書こうとすると素のHTMLタグが出力される。この仕様があるため、もしクラスにのみ適用されるようなCSSを書くと各見出しごとに手動クラス名を指定する必要があり大変煩雑だから。
でも書いてる途中にこれって自動化できそうだなって思っちゃった。見出しタグ要素を見つけたら自動で置換してくれるみたいなプログラムを function.php に書けばできそう。
近況
細かいレイアウト調整をぼちぼち行っています。変な所見つける→直すの繰り返し。
それでもそろそろ飽きてきたし気分転換にDTMもやろうかと思ったけど長らく作ってなかったから作り方忘れたし、ボイチャで無意味に時間を過ごしているのが実に人間味のない感じだ
というか曲を聴く分にはいいけど他人のDiscordサーバー入ってそこでボイチャに入っているといろいろ精神終わってくる。いつまでも温かい感情を持ち続けたいな
参照予定
一番上の固定ナビゲーションメニューのせいでTOCのジャンプ場所が若干ずれるように見えてしまうのを修正するやつ
Margin Collapsing（マージンの相殺）
昨日見出しのスタイルの挙動がちょっと変なことに気づきました。というのも隣接する2つの margin の範囲がかぶっているのがどうもおかしいと思ったんですね。
このボヤキを見ていた@sharuくんがなんと答えを教えてくれたのですが、これはいわゆる「マージンの相殺」というものが起こっているようです。
上のページより、
- 垂直方向にそれぞれのボックスが margin-bottom, margin-top を持った状態で並んでいるとき、どちらかのボックスの margin が大きい方が優先されて、小さいほうのボックスの margin はそれに吸収されてしまう
- これは双方のサイズが等しい場合でも起こる
ということらしいです。
この「マージンの相殺」については以上の要因以外でも発生するようで、今後このようなことが起こったらまず「マージンの相殺」を疑ってみようと思います。
どうもありがとう！
2021/02/13: 投稿ページのレイアウトを固定ページと統一
だって右側誰も見ない
2021/02/13: アフィブロっぽいやつ
ラインマーカーみたいな下線は簡単に仕組みが理解できたのでよかった
注意
なんだよオイオイオイ
ポイント
なんだよコレコレコレ
2021/02/12: ヘッダーを固定した
position プロパティーの練習。とてもいい感じにできたと思います。あとはJavaScriptで特定要素を通り過ぎたら透明になるとかやってみたいですね。まだ遠い未来の予感がするけれど…。
2021/02/12: トップへ戻るボタン
これはCSSだけで実装しました。簡単な仕組みになっているので良ければソースを覗いてみてください。しかしながら、scroll-behaviorという新しいプロパティーを使ったので、ブラウザ(Safariとか)によっては滑らかに動かないこともあるみたいです。これもJavaScriptかあ…。
box-shadowをborder代わりに使う
このボタンを作る途中で、border を使うとサイズが変わってしまうのがあまり好ましくないと感じたので、すこしインターネットを徘徊していたら「box-shadowをborder代わりに使う」という面白い手法を見つけたので、このボタンに使ってみました。
テーマが動かなかったら必須のテンプレート関数を確認する
この3日間地獄のような日々を送ってきました。
まず、全ては wp_head をいつかのタイミングで外してしまったことが原因なのですが、それに気づかず WordPressの管理メニューはコンテンツに被るし、プラグインは正常に動作しないなど、地獄を見ました。
そこで、原因調査のためにCSSを全部取っ払ったり、プロパティを一個ずつ消したりしてソースコードを精査しましたが、当然無駄に終わりました。
最終的には、新しい白紙のテンプレートを作って、中身を素っ裸にしたところ、ようやく問題点に気づいたんですよね。
wp_head(); が無いということに。
これに気づいたときは本当に宇宙猫になったし、人類を超越した気がした。
ま、まあCSSはきれいになったので別に良い…良いよね？（プロパティが素麵みたいになってて良くなかった）（素麵への多大なる風評被害）
<?php タグについて
このタグを ?> で閉じる際はファイルの末尾にそれが来ないかどうかを確認して置くのが良いみたいですね。?> の後に余分な改行が入るとコードが誤作動することがあるらしいです。
インラインで PHPコードを参照する場合は全く気にしなくてよかった懸念事項なのですが、むしろこういう場合は置くべきでないということに気付けて良かったです。
<section class="grid-33">
<?php get_template_part('/template-parts/content/content', 'widget_front'); ?>
<?php get_sidebar(); ?>
</section>
</div>
</main>
</div>
<?php get_footer(); [EOF] ← こんな感じに
CSSで3分割
今まで、私は width: 33.33%; を指定して3分割をしていたのですが、なんと width: calc(100% / 3);のように入力すれば自動で 1/3 の値を計算してくれるのでより正確な分割になります。分子について言えば、 100% = 1 なのでこのようにすればきっかり 1/3 になるわけですね。
2/3 のサイズにしたいときは、 width: calc(200% / 3); と指定すれば良いです。
カードレイアウト
あまり前のデザインが好きでなかったのでおしゃれにしました。このカードのためにわざわざショートコードまで作っていたのですが、この際、ボツになりました。
代わりに、配列を元に表示してくれるスクリプトを組んで優勝しました。
フッターをいじった
あのピンク色のヘッダーは正直自分でも不調和だな、と思っていたので、 purge されてウィジェットを置くエリアになりました。ヘッダーと同じ色になって落ち着きが増したと思います。
それに続いて伸びるCSSの行数は、すでにこの記事を執筆している時点で20,152桁 / 1,004行を超えました。助けて。
今後の目標
- OS付属のフォントでどれだけきれいに日本語を表示できるか挑戦する。
- バグってる表示を直す
日記
こんなものを日記と呼ばせるな
2021/2/7
さよならフレームワーク
Font Awesome と Bootstrap 5 にお別れを告げました。
特にFont Awesome についてはページを読み込む時点ですべてのフォントを読み込みに行くのでリソースは食いつぶすし、Bootstrap についていえばこれのせいで原因不明のレイアウトの制約を受けざるを得ませんでした。
というのも、昨日スクロール可能な表を作ろうと苦心していたのですが、どういうわけか 576px以下のデバイスで見たときにはみ出すんですよね。うっとうしかったので自分で@mediaクエリを付けてデバイス判定するようにしました。慣れない作業でした。
それから、Iconset というソフトを使い始めました。簡単に言えば、使いたいアイコンを選択用にダウンロードして、使いたいアイコンを選択したらあとはコードに張り付けられるみたいなソフトです。
細かいところ
- カテゴリ名、タグを記事内に移動した
- SNSリンクをリニューアル
- 見出しのデザインを変えた (が、ぱっとしない)
Ctrl+Shift+Iで開発者ツール開けたりCtrl+Shift+Rで強制リロードできるのマジで便利ね
2021/2/5
- タイトル部分の
line-heightを広げた - 記事一覧ページのページ分けを実装できた
- YouTubeは手動で
<div>の中に入れることにします - EWWW Image Optimizer を導入した
2021/2/4
画像回りの処理
<figure>内の画像のスタイルを変更した。ブロックエディタ / Tiny MCE で生成した画像にはそれぞれ勝手にクラス名が割り振られるのですが、その時点で勝手にスタイルを割り振るのでたちが悪い…。
記述の周りを囲む<div>を用意して、その中の画像はすべてwidth: 100% !important;になるよう設定しました。ついでに言えばキャプションの挙動もおかしいので無理やりです。ほんと皆どうやってここ処理してるんだ？？？？？
ショートコード
勝手にショートコードに<p>タグくっついたりして迷惑を被っていたのでコードを拝借した（生成されたタグを角括弧に置換するらしい）
その他
- Simple Blog Card のスタイルをいじった
- ページタイトルを
header.php内に統合してそれぞれのページタイトルで表示し分けるプログラム書いた normalize.css導入
2021/2/2
- Simple Blog Card を導入した
- サイドバーとかいろいろやった
screenshot.pngを撮った- Bogo（多言語対応プラグイン）を入れた
- 404ページを作った（後々ユーモアのあるものに作り替えたい）
ショートコードはここでひな形を生成できるのでとても便利でした
2021/2/1
Webサイトのローディングを軽くするためにCSSをページ別で切り替えるように書いた。結局あんまり変わらなかったけど
if文をこんな風に switch文みたいに書いちゃうのって大丈夫なんですかねえ
ともかくこういう風にすると1ファイル当たりの行数も減るし管理が楽になった気がする
<!-- CSS --> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php if ( is_front_page() ): ?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/files/css/front-page.css"> <?php endif; ?> <?php if ( is_home() ): ?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/files/css/home.css"> <?php endif; ?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/files/css/customize.css">
2021/1/31
ヘッダー画像を作り直した。GIMPとAviUtlのコンボ技です。
2021/1/30
- WordPressのテーマに移植開始
2021/1/29
- Faviconを作った。もちろんInkscape
2021/1/28
- card 部分作った
WindowsのWebブラウザのフォントレンダリングみんなカスだと思う
2021/1/26
- デザイン完了
- コーディング開始
- Notepad++いいね（早速NppFTPを導入しました）
元々使っていたWindowsにプリインストールされている Consolas というフォントを使うように設定ますが、そうでない環境のために代替の Inconsolata をWebフォントで読み込むようにしてます。
2021/1/24
Inkscapeでデザイン開始。1.0.2にバージョンを上げたらルーラーの座標が左上になってた。ちょうどそんなことができないかな、と思っていたところの神アプデでした。みんなも落とそう（落とせ）
