Inquiring mind -2nd phase-

「Web制作」に関する記事

雑記

体調の悪さよ。
Meltykissをかじりながら体調を戻していく。


一段落
http://toiblog.unison.jp/200314/sample.html
珍しく崩れていない ( ´ω`)ヨキヨキ

テーマver2.0案

もう一段落
http://toiblog.unison.jp/200314_2/sample.html

明日には水色本が終わりそう。

雑記

早めに寝て朝活しようとしたけど結局眠いという。
休日は12時間作業しても平日のような眠気を感じないので、やはり平日はストレスがよく溜まるのだろう。
何だかんだで今期は病欠していないので、体力が無い訳ではないと思うんだよな・・・( ´ω`)
(行動体力、防衛体力ともにそれなりにある気がしている)

とりあえず寝足りないので寝てきます。



青本より水色本の方がグリッドの説明が分かりやすい。



今日はここまで。

memo
スマホでのアクセス時はリスト(カテゴリー)を上部に出すようにする。

雑記

ファンティの効果が切れてしまった・・・( ´ω`)
日々の業務がメタルマックス2のドラム缶を押す仕事に匹敵するほどに虚無感溢れるものなので、そこで無駄にエネルギーを使ってる気がする。



Chromeで確認すると@mediaの設定が反映されないんだけど、


Firefoxで確認すると反映される。
(※幅を狭くしたときにメニューをギチギチにする設定)

Chromeでも通常の閲覧時だと反映されて、デベロッパーツール上では反映されない。うーむ。


Firefox「脱字ありますよ」
お狐様ありがてぇ ( ´ω`)人

エビスコムさんの設定反映後にミスってるのを確認させてから該当箇所を直す流れ 好きよ

雑記


今日の夜食

見た目がぶっ壊れてるのを直すのは2周目でやる。水色本を進める。


余計な閉じタグ </aside> のようなものが混ざっていてもDreamWeaver上ではエラーにならない。
ミスを見つけづらいのがややしんどい。

ミスする理由
・かなり長い時間取り組んでるので疲弊している
・キーボードが死ぬほどしょぼくて打ちづらい(静音性を優先してるので、変更はできない)
・書籍内の説明通りに進めるとミスを誘発しやすい
(どこに追記するのかが分かりにくい & 一度記入した内容を頻繁に書き換える流れになっている)

書籍のサンプル記事の中に英単語のスペルミスがあったりすると、少し勇気を貰える (とても性格が悪い)

水色本は解説ページが少なくて手を動かすセクションが多いので、1日やそこらで終わる感じではない。
cssのfrの語源は(fraction : 割合)らしい。
個人的に語源が分からない状態で読み進めるのは効率が悪いと思っているので、都度調べている。

進捗状況

ファンティの効き方がぱない。これ本当に合法か? ( ´ω`)
一時期流行ったキューピーコーワヒーリングとは比べ物にならない。
仮にこれがプラセボだったとしたらユンケルスターでも同じような効果を実感できるはずだけど、明らかにユンケルスターと比べても効き方が違う。
ファンティは動物性生薬が多いらしいので、動物たちが俺に力を貸してくれてるのでしょう。

雑記

青本を読み進めている。
メモ多め。明日には1周できそう。


memo
・ヘッダー(<header>~</header>)を入れ忘れただけでグリッドが出なくなった。
1個抜けただけで上手く機能しなくなるのか。
・セレクタ(疑似要素)というのが難解。何故HTML側に記述しないのかが不明。
・PC版レイアウトで8列に設定する辺りで、脳みそがギブアップ気味になった。
・昨日テストサイトのレイアウトがぶっ壊れたのは@mediaの書き方に問題があったからかもしれん。半角スペースを入れると直るかも。
→気のせいだった。
最後の最後で物凄い崩れ方をして終了。明日直す。



このページだけややマシだった。

index → body classが入ってなかったので修正

雑記

3/5に購入した緑色の本を読み進めている。
明日辺りには表示確認用サイトに反映できそう(サイドバーにリンクを張りました)

以前職場で俺が部下に「このサイト、PCで閲覧した時の表示がイケてないですね」と話していた時に、別の人から「TOIさん、これはレスポンシブというやつなんですよ。ご存知、ないのですか?」と言う感じで軽く煽られたことがあったけど、本を読み進めていて改めてそのサイトは全然レスポンシブ対応出来ていなかったことが分かったので、マウントを取られてたんだなぁとしみじみ感じている。
そういった人を引き寄せるフェロモンが俺から出てるのかなぁ ( ´ω`)




とりあえず緑本を読み終えたけど、全然レスポンシブになってなくて泣いた。 
説明通りにやったはずなんだけどな。
明日もう一度見直して、すぐに対応できなそうな場合は青色本に移行しようと思う。

memo
・画像ファイルの拡張子が大文字の場合は、それに合わせて参照先を大文字にしておかないと画像が出ない模様。
・公式からサンプルを落としてきて修正してみたけど、レスポンシブにならない。
Firefoxで幅を狭くした時だけそこそこ良い感じに表示される。
これを本気で対応するとなると、主要ブラウザを全部揃えて表示を確認しないといけないのでは・・・( ´ω`)
これは大変だ・・・

雑記



本屋で立ち読みしてたら「フロートレイアウトはレガシー。今はフレキシブルボックスの時代。」って書かれてて「え?そうなん? ( ´ω`)」ってなってそのまま購入。
数日前に一生懸命勉強してた内容は時代遅れとのことなので、諸々バージョンアップしていこうと思います。




Chromeすげぇ ( ´ω`)

雑記

作り途中の月別アーカイブを反映してみた。
Chromeだとそれなりに動いてるけど、safariだと酷いことになっている・・・( ´ω`)
世のweb屋さんは凄いんだなぁ。

見に来てくれてる方の30%がsafariを使用しているようなので、引き続き頑張ります。


気分転換に次の課題をやる。
・月から月への移動(1月末→2月頭など)ができない
→少し調べてみたけど、完全にプログラム寄りの話なので後回し。

他の課題も難度が高そうなので、とりあえず最終更新日の表示に挑戦してみる。

関数リファレンス/get post time
関数リファレンス/get post modified time



情報を1つ表示させるだけでも大変。

本日は有休なので、まったり勉強する。
体調が悪いのであまり無理はしない。



テンプレートタグ/get the date でパラメータを’Y-m-d␣H:i’にしたら普通に表示された。
日付と時刻の書式
表示は問題ないんだけど、表示されているものを良い感じに並べるというのが難しい。



徐々に「こうすりゃいけんじゃね?」の精度が上がってきた。
spanタグで括ってたカテゴリとコメントの部分にdisplay:blockを適用した後にfloatで右に寄せた。
というかChromeのデベロッパーツールが便利すぎる。
昔Chromeを毛嫌いしていた時期があったけど、今は腹見せ柴犬状態ですわ。

よくよく考えると、普段書いてる日記はtwitterのノリで更新をかけまくってるので設定を反映しても煩雑になりそう。というわけで一旦反映は見送り。
前回の更新以降、ヘッダーに糞デカレッサーパンダが出続けてる疑惑。可愛いからそのままでいいや ( ´ω`)

課題が無くなってきたので整理(&ブログのお題についても整理)
・以前引用の見た目を整えたけどタグ打ちが面倒になって手抜きになっている件
・テーブルの見た目を整える(但しこれはサイト全体の見た目を整えるのを併行してやる必要がある)
・ウィジェットを見直す
・正直コメント機能はもういらないかもしれん・・・( ´ω`) 振り返ってみると、拍手は意外と機能していたのでちょっと調べてみる。

・情報は情報として整理したい(これを自分なりに突き詰めていくと、「自分如きが出せる情報なんて無くね?」みたいになって段々元気がなくなる)
・マニュアル作成の練習(上のお題と少し関係性がある。)
・日々アホみたいな業務が発生しなければ、ブログの更新自体は可能
何かに取り組んでいる間はそれについての日記を書けるので、書くことに困ることは無いはず
・どうにか頑張って仮想マシンを導入してシャンダラーをプレイしたい

雑記

見よう見まねでも、動くと嬉しくてつい動画化しちゃうんだ。


徐々にダサくなくなってきたのでは ( ´ω`)
ただ、JavaScriptは中々ハードルが高い。
尚早な感じがするけどアーカイブの部分にはどうにか導入したいところ。

雑記

昨日は午後から所用があって勉強できなかった。
体調は昨日よりはマシ。今日はやるぞ。


・2/27に購入した本に「オリジナルテーマを作成するにはHTML、CSS、PHP、WordPressの総合的な知識が必要となる」と書かれていた。
2/26の日記に書いた自分の認識が合ってたというのが少し嬉しかった。

・WordPressにおけるカテゴリーとタグの違いについて、「カテゴリーは階層構造を持ち、タグは階層構造を持たない。」とのこと。
階層構造は「ポップン > 押し方 > 指押し」みたいな感じで、タグはこういった形式にはできないということかな。
階層構造が必要になるほど情報を蓄積している訳ではないので、今はあまり深く考える必要がなさそう。
情報が蓄積されていない段階から階層構造を考え始めると、逆にそれが足枷になる気もする。(書きたいものではなく、カテゴリーに沿ったものを書こうとしてしまう等)

・htmlにおけるidとclassの違いについて、「classは複数のブロックを一度に操作するときに便利で、idは一意のブロックの操作をするときに便利」らしい。
こういった区別しにくいものに触れるだけで脳が酸化していく・・・( ´ω`)

→初心者にとってこの「区別しにくさ」がネックな気がしてきた。
解説書を読んでいると、それが固有の要素なのか、解説者が任意で設けたものなのかが分からない時がある。
「PHP独自要素」、「WordPress独自要素」、「解説者の説明のために作られた要素」、「その他」が混ざり合ってカオスになっている時がある。
自分が何かを解説する側になった時は色分けして区別するようにしたい。

1週間前は以前購入した本を読んでも「ちょっと何言ってるか分からない」となっていたけど、今は全然情報の見え方が違う。
自分の場合、分からないキーワードが出てきたら都度調べるというやり方が合っているらしい。
意味を調べて「なるほどね」ってなった後に寝るほうが記憶に残りやすいんだと思う。

・functions.phpの閉じ「?>」は記述しなくて問題ないらしい。
「省略しても良い」と言われてるものはなるべく省略しないようにしてきたけど、functions.phpにおいては
閉じタグの後に1個でもスペースが入ったりするとエラーが出るらしく、そういった不具合を避けるために省略しているらしい。
良い説明じゃないですか ( ´ω`) ←何故か少し上からになっている


俺の天敵の写真。
いや、ヤバイでしょこれ。誇張でも何でもないでしょ。

・WordPress管理画面の「外観」に「ウィジェット」が表示されない問題
解説書の通りにやっているはずなのに「ウィジェット」が表示されない。
1時間ほど格闘した結果、原因が判明。


表示されない


表示された

単純にファイル名を間違えてfunction.phpにしていたのが原因という。
ファイル名を1文字間違えるだけで大惨事。

・ページが生成された後にソースを見る


自分はsidebar.phpに<div class=”col”>を記述しただけ。
Wordpress側で割り振ってるidやらclassやらを把握しないと見た目を変えられない気がした。
関数リファレンス/register sidebarのデフォルトを確認するのも大事



functions.php側でパラメータを変えると、出力結果が変わる。
aside要素はwebページ内における補足情報セクションであることを示す際に使用するとのこと。中々ムズイ ( ´ω`)

・Chromeのデベロッパーツール


cssのfloatが全く適用されなくて口を半開きにしたまま30分ほど画面を見つめていた。
デベロッパーツールで原因を探る方法というのが紹介されていたので試してみたところ、3つのブロックを作ったつもりが1つのブロック扱いされていて、sidebar.phpをよく見てみたら<div>~<div>となっていて全く閉じれていなかった。
ちゃんと閉じたら3つのブロックが横並びに表示された。
何が起きているかを視認できるのはありがたい。

とりあえず今日はここまで。