Knowledge Base

お知らせや身辺のことを綴っています。

WordPressテーマ「Odamaki」作成進捗

やること

リセットCSSを乗り換えた

ブラウザに元々適用されている User Agent Stylesheet を打ち消してくれる、リセットCSSという存在がありますが、かつては normalize.css というものを使っていました。

https://necolas.github.io/normalize.css/

この normalize.css は一言でいえば、見出しや段落の余白をそのまま残してくれる一方で、<body>要素に入る無駄な margin を打ち消してくれたり、まさに最低限のマークアップ要素が残してあるようなCSSです。

しかしながら、たとえばリスト要素の margin / padding を0にしたりするという作業が日に日に増えていき、メンテナンスがとても煩雑になってしまいました。なにか良いCSSがないか、他を調べまわりました。

そこで、乗り換えた先のリセットCSSが ress.css です。

https://ress-css.surge.sh/

この ress.css は normalize.css に加えて、<ul> や元々インデントが加えられている要素に対してもこれが打ち消されるように設定されています。煩わしかった宣言も、最初の方に minify した本CSSをインサートするだけで数十行ほどを削減することができました。とてもおすすめです。

ページ全体のレイアウトをCSS Gridで組み直した

この改修を通じて、Flexbox と CSS Grid の使い分けができるようになりました。でかいレイアウトの段組みには CSS Grid を、横並びの部品や小さなブロック要素には Flexbox を使ってあげるのが、それぞれの最適解のようです。

各セクションの役割によって FlexboxとCSS Grid の2つを使い分けています

事実、ヘッダー上のナビゲーションメニューについては Flexbox を使用していますが、フッターの並び、それから投稿ページのレイアウト、トップページの三段組みレイアウトに関しては、CSS Grid を利用しています。

最初はとても難しく感じましたが、かなり抽象的な書き方ができたのがとても印象深く、Flexbox 同様、グリッドの中にグリッドを組み込むということもできます。慣れてしまえば自由自在にレイアウトを組むことができます。

テーブルのレイアウトを修正

線の存在感や縦幅の大きさのせいで何となく不格好に見えていたようです。

色々試行錯誤を繰り返してみたんですが、ちょっとデザイン面で分かったことを言語化してみました。

スマホ版Chromeのヘッダーの色

を変えました。以下のようなコードを<meta>タグ内に挿入し、ページのヘッダーと同じ色に設定しました。

<meta name="theme-color" content="#2d4059">

https://webllica.com/set-theme-color-for-chrome/

Todo

自分でもこれはかなり久しぶりの日記だなと思っていて、半ば更新内容も忘れかけているので注意。

そろそろテーマ作成だけでなく、ページも色々充実させないといけないのに色々立て込んでいてなかなか作業ができない。プライバシーポリシーとかどうやって書けばいい？

Easy Table of Contentsを導入した

目次を表示してくれるプラグインとして今まではTOC+を使用していたのですが、この数年間アップデートがなく将来性を見込んで導入することにしました。デザインを変更予定。

CSS Grid Layoutの学習

最近、Flexboxなるものを知ってこのWebサイトでもみだりに使用してきたのですが、このCSS Grid Layout というものは全く存じていませんでした。

この仕組みについては、全くの初心者でしたので、以下のサイトで学習してみることにしました。

https://cssgridgarden.com/#ja

このWebサイト上では、投稿一覧のレイアウトにこの技術を使いました。使ってみるとちょっと難しい。実は挙動が怪しいところがあるので、まだレイアウトの調整が必要かもしれません。

なぜこれがやりたいのか

WordPressにはビジュアルエディタ機能があり、これを利用して記事を書こうとすると素のHTMLタグが出力される。この仕様があるため、もしクラスにのみ適用されるようなCSSを書くと各見出しごとに手動クラス名を指定する必要があり大変煩雑だから。

でも書いてる途中にこれって自動化できそうだなって思っちゃった。見出しタグ要素を見つけたら自動で置換してくれるみたいなプログラムを function.php に書けばできそう。

近況

細かいレイアウト調整をぼちぼち行っています。変な所見つける→直すの繰り返し。

それでもそろそろ飽きてきたし気分転換にDTMもやろうかと思ったけど長らく作ってなかったから作り方忘れたし、ボイチャで無意味に時間を過ごしているのが実に人間味のない感じだ

というか曲を聴く分にはいいけど他人のDiscordサーバー入ってそこでボイチャに入っているといろいろ精神終わってくる。いつまでも温かい感情を持ち続けたいな

参照予定

一番上の固定ナビゲーションメニューのせいでTOCのジャンプ場所が若干ずれるように見えてしまうのを修正するやつ

https://senoweb.jp/note/fixheader-anchorlink/

Margin Collapsing（マージンの相殺）

昨日見出しのスタイルの挙動がちょっと変なことに気づきました。というのも隣接する2つの margin の範囲がかぶっているのがどうもおかしいと思ったんですね。

見出しのマージンとその上の段落のマージンが同じ大きさになってしまっています。
見出しの margin とその上の段落の margin が同じ大きさになってしまっています。

このボヤキを見ていた@sharuくんがなんと答えを教えてくれたのですが、これはいわゆる「マージンの相殺」というものが起こっているようです。

https://www.joshwcomeau.com/css/rules-of-margin-collapse/

上のページより、

ということらしいです。

この「マージンの相殺」については以上の要因以外でも発生するようで、今後このようなことが起こったらまず「マージンの相殺」を疑ってみようと思います。

どうもありがとう！

2021/02/13: 投稿ページのレイアウトを固定ページと統一

だって右側誰も見ない

2021/02/12: ヘッダーを固定した

position プロパティーの練習。とてもいい感じにできたと思います。あとはJavaScriptで特定要素を通り過ぎたら透明になるとかやってみたいですね。まだ遠い未来の予感がするけれど…。

2021/02/12: トップへ戻るボタン

これはCSSだけで実装しました。簡単な仕組みになっているので良ければソースを覗いてみてください。しかしながら、scroll-behaviorという新しいプロパティーを使ったので、ブラウザ(Safariとか)によっては滑らかに動かないこともあるみたいです。これもJavaScriptかあ…。

box-shadowをborder代わりに使う

このボタンを作る途中で、border を使うとサイズが変わってしまうのがあまり好ましくないと感じたので、すこしインターネットを徘徊していたら「box-shadowをborder代わりに使う」という面白い手法を見つけたので、このボタンに使ってみました。

https://qiita.com/lovalotta/items/5674097c2c7ac2b8a577

テーマが動かなかったら必須のテンプレート関数を確認する

管理バーがコンテンツに干渉しています
管理バーがコンテンツに干渉しています
Table of Contents も正しく動作していません
Table of Contents も正しく動作していません

この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行を超えました。助けて。

今後の目標

日記

こんなものを日記と呼ばせるな

2021/2/7

さよならフレームワーク

Font Awesome と Bootstrap 5 にお別れを告げました。

特にFont Awesome についてはページを読み込む時点ですべてのフォントを読み込みに行くのでリソースは食いつぶすし、Bootstrap についていえばこれのせいで原因不明のレイアウトの制約を受けざるを得ませんでした。

というのも、昨日スクロール可能な表を作ろうと苦心していたのですが、どういうわけか 576px以下のデバイスで見たときにはみ出すんですよね。うっとうしかったので自分で@mediaクエリを付けてデバイス判定するようにしました。慣れない作業でした。

Iconset + Notepad++でアイコンのあるデザインを組んでいる様子
Iconset + Notepad++でアイコンのあるデザインを組んでいる様子

それから、Iconset というソフトを使い始めました。簡単に言えば、使いたいアイコンを選択用にダウンロードして、使いたいアイコンを選択したらあとはコードに張り付けられるみたいなソフトです。

https://iconset.io/

細かいところ

Ctrl+Shift+Iで開発者ツール開けたりCtrl+Shift+Rで強制リロードできるのマジで便利ね

2021/2/5

Fluid Width Video

2021/2/4

画像回りの処理

勝手にインラインでスタイルが設定されているので通常のCSSではデザインを制御できない
勝手にインラインでスタイルが設定されているので通常のCSSではデザインを制御できない

<figure>内の画像のスタイルを変更した。ブロックエディタ / Tiny MCE で生成した画像にはそれぞれ勝手にクラス名が割り振られるのですが、その時点で勝手にスタイルを割り振るのでたちが悪い…。

記述の周りを囲む<div>を用意して、その中の画像はすべてwidth: 100% !important;になるよう設定しました。ついでに言えばキャプションの挙動もおかしいので無理やりです。ほんと皆どうやってここ処理してるんだ？？？？？

ショートコード

勝手にショートコードに<p>タグくっついたりして迷惑を被っていたのでコードを拝借した（生成されたタグを角括弧に置換するらしい）

WordPressでショートコードがｐタグで囲まれたり改行されてしまうのを防ぐ方法

その他

https://necolas.github.io/normalize.css/

2021/2/2

ショートコードはここでひな形を生成できるのでとても便利でした

https://generatewp.com/shortcodes/

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

2021/1/29

2021/1/28

WindowsのWebブラウザのフォントレンダリングみんなカスだと思う

2021/1/26

元々使っていたWindowsにプリインストールされている Consolas というフォントを使うように設定ますが、そうでない環境のために代替の Inconsolata をWebフォントで読み込むようにしてます。

https://fonts.google.com/specimen/Inconsolata

2021/1/24

Inkscapeでデザイン開始。1.0.2にバージョンを上げたらルーラーの座標が左上になってた。ちょうどそんなことができないかな、と思っていたところの神アプデでした。みんなも落とそう（落とせ）

左上が原点になってた
左上が原点になってた
コメントする

* が付いている欄は必須項目です。