雑記

DOMはDocument Object Modelの略　wiki
Download Only Memberではない。

・DOMという言葉を調べた理由
「ChromeデベロッパーツールのElementsパネルにDOMが表示されています。」という文章を見て、「DOMて何」となったから。

・デベロッパーツールがヤバイ話

cssの定義元をクリックする。

ファイルが開く

編集できる

(　´ω｀)ｺﾞｲｽｰ
デベロッパーツールの勉強をした方が効率が良さそうなので、一旦座学に切り替えます。

Chrome DevTools（公式）
アップデート情報
ソース（理解できる日が来るかは謎）

雑記

本日のドリル（8年前の本）

作業時間　1時間10分くらい

・模写準備
サイト上で右クリック ＞ ページのソースを表示 ＞ cssの置き場が分かる
地味に気にしたことがなかったけど、cssも落とせるのね。
ネットがドリル置き場に見えてきたゾ。

※一般のサイトを模写したものをそのまま公開したり画像をアップしたりはしない。
画像を載せるにしてもアレンジしたものを載せるようにする。
※ちなみに練習でよく使用している写真は母が撮ったものです。レッサーパンダも同様です。
（前にも書きましたが念のため説明）

地味に気にしたことがなかったけど、cssも落とせるのね。

「名前をつけて保存」で全素材が落とせるという。20年間気にしたことが無かった。

・模写中

素人目で見てもこんなにマトリョーシカさせる必要は無い気がする。
構造を把握したらgridレイアウトで再構築してみようと思う。

全部入力していったら800行を超えた・・・　(　´ω｀)

構造はこんな感じ。

まずheaderを組み立ててみる。

線を引く。

なんだこのブサイクなものは・・・(；´ω｀)

カンニングしようとしても元ファイルの設計が凄いことになっていてパクれない感じになっているので、自力で頑張るしかない。
こういうのをちゃんと模写できるようになったらJavaScriptに手を出しても良いかなと思う。

力技のオンパレード
いや、けど組み立てはそこそこ出来てませんかね。

雑記

■プランとか優先度とか

・合法的に自習できるようにする（優先度：高）
職場で全力で働きすぎて帰宅後に体力が空になることが多いので、職場で自習できるようにする。
これだけだとただのサボリおっさんなんだけど、例えば業務マニュアルをhtmlで作ったり、自分の作業をvbaで楽にしてみたりといった感じで自分の自習に業務を絡めるようにするといったものを想定している。
これをやりたいがためにblog改修を始めたといっても過言ではない。

・オシャンなサイトづくり（優先度：中）
オシャンなサイトを作るにあたってjQueryを覚える必要がある模様。
現在情報収集中。

・web模写（優先度：中）
手頃な課題が無い時に手を動かすにはどうすれば良いかを考えた時に、ドリルをこなすかの如く模写するのが良いと思った。
手に覚えさせると自習がより捗る。

・記事づくり（優先度：高）
これは言わば山籠もりのようなもので、本当に孤独な作業となる。
2021年冬完成を目標に頑張るレベル。

・DTP勉強（優先度：低）
中身が出来ていないうちに見た目を頑張ってもしょうがない。

・動画編集（優先度：中）
これはあまり身構えず、やれる範囲で頑張る。
普段ブログに書いてることを動画で表現できると良い。

・ピアノ（優先度：中）
何かを色々諦めないと着手できない状況。自習できるようになったら考える。

とりあえず7年前の本を引っ張りだして手を動かして寝る。ほとばしるダサさ。
本の指定通りの色にすると更にヤバくなるので、流石に色は変えた。

雑記

■更新履歴（1.3.8）
・コメント欄がギャグになっているのはtext-alignがjustifyになっているからっぽい。次回で直す。
→text-alignをleftに変更

・あとメニューの改修によってscriptが壊れたようなので見直す。
→クラス名をmenuから別のものに変更

・画面幅を狭めた時のサイドメニューの表示がイケてなかったので修正。
→直ってはいるけど、いまいち理屈が分かっていない・・・

■次の課題
・月から月への移動（1月末→2月頭など）ができない
これに再挑戦してみる。
これが終わったら一旦別のジャンルの勉強に入るかもしれない。
（コンテンツ不足過ぎるので、html、cssだけ頑張ってもバランスが悪い）

これはラスボス感があるな・・・
とりあえず片っ端から情報を集めてみる。

関数リファレンス/the posts pagination
関数リファレンス/get adjacent post

月別アーカイブのurl
https://toipiano.stars.ne.jp/date/2006/10/
https://toipiano.stars.ne.jp/date/2006/11/
月別の場合だと次の月へのリンクが出ない。

【旧blog記事】紙とは

【旧blog記事】高難度譜面

個別投稿ページだと出る。
というかURLをそのまま貼り付けたら何かおしゃんてぃな感じになった。（意図していない）

条件分岐タグ

↓　解決

ループ内にis archiveという関数を入れるだけだった。
恥ずかしながら自力で解決した嬉しさで少し涙が出た。
音ゲーで長期間停滞した後に成果が出た時に似ている。
という訳で反映しました。（1.4.0）

失敗小僧さんがまた良いことを言ってた。

自分が情報を発信した以上、言論としての批判は受け入れるべきである。
それ以上の批判を受け入れる義務はない。

念頭に置いておきます。
絵面のインパクトが凄いけど俺は貼るよ　(　´ω｀)

雑記

■課題（直近）
・記事内の画像がグリッドに合わせて縮小されていないので調べる
→ 記事内の画像に対してmax-width（幅の最大値）を指定していなかった。max-width:100%; を入れたらそれっぽくなったので一旦解決。

・テーブルの変形に取り掛かる（取り掛かりはするものの、ググ履歴は別の場所で管理したい気持ちが出てきている）
→テーブルの全要素にdisplay: blockを適用（とても雑な対応）
モバイルとテーブルの相性は最悪で、皆匙を投げてる感がある。

これら2つは先ほど反映。画面右上のメニューの改修も反映（1.3.7)

死ぬほど雑な対応を施したところ、先生からお墨付きをもらった。(　´ω｀)ﾍﾍ…ｱｼﾞｬｰｽ

■次回反映分
・コメント欄がギャグになっているのはtext-alignがjustifyになっているからっぽい。次回で直す。
・あとメニューの改修によってscriptが壊れたようなので見直す。
→WordPress側の処理によって自動で追加されるclass名と自分が元々つけてたclass名が被っててバグってたっぽい。
・モバイルフレンドリーテストを通過したので、一旦雑に弄ったところを元に戻す。

■課題（中長期）
・今流行りのオシャンなサイトを1個作ってみる
表示確認用のサーバーにWordPressをインストールした方が早い気がしている。
コンテンツが無い状況でオシャンなサイトを一生懸命作るのはモチベ的に結構大変なので、
取り掛かるのは少し先になる気がしている。

雑記

ダイジェスト

手を加える前はメニューが有効化されていない。

functions.php　にメニューを登録すると有効化される。
（参考）ナビゲーションメニュー

物凄くアナログなやり方でリスト化していた個所を

3行に修正

外観＞メニューから表示させたい項目を追加すれば

ちゃんと表示される

あれ？結構分かってる感が出てるのでは　(　´ω｀)ﾄﾞﾔﾊｰ
（すぐに天狗になっちゃうオッサン）

雑記

■更新履歴 (1.3.2)
・カスタムヘッダーに引数「’flex-width’ => true,」、「’flex-height’ => true,」を追記。
これで一応デカレッサー問題は解消されるはず。　→　されなかった・・・開発環境と挙動が違う・・・
・Googleの教えに従い、viewportタグにinitial-scale=1を追記
・テーブルのレイアウトを暫定的に設定

↓　さらに更新(1.3.5)
grid-template-columnsのminmaxの最小値をautoにしてたのが原因だった模様。
一応想定していた感じの動きにはなった。疲れた。
モバイルで確認したらテーブルがとてもよくない動きをしていた。
果てしないな、これは。やるけども。

↓　次回反映分
（済み）暫定的に引用の見た目を変更（引用だということが分かりにくかったため）
（済み）記事名の見た目を変更（見た目がhr罫線と被っていたため）

■memo
その日にググったワード、参考になったサイトのURLをメモることにする。

（例）

参考になるサイトがある　→　（自分にとっての）記録として役立つ
参考になるサイトがない　→　自力で解決できた時に需要が生まれる

WordPressのテーマが削除できない問題に遭遇。
原因はテーマフォルダ名に「_（アンダースコア）」が入っているかららしい。 「.（ドット）」が犯人でした。
これ不便じゃないすかね・・・　(　´ω｀)
RFC952やらRFC1034やらが関連しているそうな。
これの原因をズバっと説明できる日は来るのだろうか・・・(　´ω｀)

雑記

新たにグリッドを引かなくても画面右側にメニューを表示できそう。
（同じエリアに記事部分とメニュー部分を表示させて、記事表示幅を80%、メニュー表示幅を20%にし、メニュー部分を右寄せする）

テーマを更新（1.3.1）
■更新履歴
・画面右上にカテゴリーを表示するようにした
・画面幅を狭めた時にfooterの位置がおかしくなるのを修正（横グリッドを1本追加）

■memo
・デカレッサーパンダの影響で、思っていたのと違う動きになっている
・自己紹介ページと言う名のやりたい放題のページを作りたい。　何か違う感じがしたので止め。

・作業の準備と進め方を変えた
作業フォルダ内を綺麗にする → Chrome動作確認用のファイルを作成 → 併せて仮想環境に反映するためのフォルダを用意 → Chromeでの動作確認である程度整ってきたら仮想環境反映用のファイルに統合 → 仮想環境で動作確認 → 見れるレベルであればそのまま公開
昔はChromeで動作確認なんかしたことが無かったので、これでも進歩しているほう。

・Font Awesomeから借りてるアイコンを自作できないか → いずれillustrator勉強日記を書く
・googleが掲げる10の事実　https://www.google.com/about/philosophy.html
頭に入れておく。
・ページ毎にcssを切り替える　→　自己紹介ページよりもこっちを先にやった方がよさそう。

・モバイルフレンドリーテスト　https://search.google.com/test/mobile-friendly?hl=ja

(；´ω｀)ﾋｨｰ

雑記

ブログのテーマを更新しました。（きりのよいところまでやらないと寝つきが悪くなるため）
劣化してる部分が多いので諸々直していきます　(；´ω｀)

■更新履歴
・floatで位置を調整していたのをgridでの調整に変更した。これに伴ってテーマ内のファイルをほぼ全部打ち直した。
（更新前のテーマは購入した本の丸写しだったけど、今回は7割方自力で頑張った。）
・文字サイズを見直した（最近視力が落ちてきて小さい文字を読むのがきついので、文字サイズを大きくした）

■memo
・文字装飾系のプロパティを一旦削除した
　→スマホで見た時に色が変わっていなかったのが一点。あとはページの背景色が白だとちょっと眩しかったりするので、そこら辺のバランスも考慮して見直したい。
・functions.phpを小綺麗にした
　→手作りアーカイブがスマホで見るとダメな感じになっていたのと、追加していたクイックタグがほぼ機能していないので削除した。
・コメントフォームがギャグみたいになってるので直す
・ヘッダー周りの調整が出来ていないので頑張る
・画面幅を狭めた時にfooterの位置がおかしくなる
・hrタグで引いた罫線と記事名の下の線の見た目が被ってるので何とかする

雑記

グリッドレイアウトが適用されるのは、グリッドコンテナの子要素（グリッドアイテム）までで、孫要素には適用されない。

<body>

<div></div>　←適用される
<p></p>　←適用される
<div>　←適用される
　　　<p></p>　←適用されない
</div>

</body>

—
body {display: grid}

この説明は2日前に欲しかったゾ・・・　(　´ω｀)
ブログタイトルの文字が動かせない理由はここにあった。

まとめてインデント（範囲選択後にTabキーを押す）を覚えた。

レッサーパンダ大好きブログになってる。

こういうことらしい。
2日前の俺は、↑の左側の大枠を作った直後にメニューを画面右側に動かそうとして「上手くいかない」を一生繰り返すおじさんとなっていた。

フィルタのチェックボックスをON/OFFすると無意味なプロパティが見えてくる。
これで大枠は整った感がある。

HEX：16進数
DEC：10進数
OCT：8進数
BIN：2進数
こういうのを説明してくれてるサイトには感謝の意を込めて50円くらい支払いたい。
これを調べた理由は、背景色にアルファチャンネルを設定する際にRGBを0~255で指定する必要があるため。
opacityプロパティはオブジェクト全体に適用されるっぽいのでrgbaで指定するようにする。

体調が悪くて今一捗らない。ファンティ投入か。

成果に飢えるあまり表示がバグったテーマを反映しそうになるけど、もう少し我慢。
→我慢できなかった　(　´ω｀)ﾃﾍﾍﾟﾛ
明日からまた頑張る。

memo

今自分がやっていること（日々記録をつけること）はHabit Chain（習慣の鎖）というらしい。
cssの書き方によってページの表示速度が変わるらしい。これ系の話はまだ気にしない。