「Web制作」に関する記事

雑記

2020-03-05 23:00 Web制作コメント

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

Chromeすげぇ　(　´ω｀)

雑記

2020-03-03 22:55 Web制作コメント

作り途中の月別アーカイブを反映してみた。
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のノリで更新をかけまくってるので設定を反映しても煩雑になりそう。というわけで一旦反映は見送り。
前回の更新以降、ヘッダーに糞デカレッサーパンダが出続けてる疑惑。可愛いからそのままでいいや　(　´ω｀)

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

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

雑記

2020-03-02 23:05 Web制作コメント

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

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

雑記

2020-03-01 10:41 Web制作コメント

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

・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つのブロックが横並びに表示された。
何が起きているかを視認できるのはありがたい。

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

雑記

2020-02-29 02:03 Web制作コメント

もう少し初歩的なところから復習中。
htmlとcssのみの勉強であれば、ローカルのフォルダにファイルを入れてchromeで開けば良いだけなので色々捗る。

起床。体調悪め。隣人は五月蠅め。
隣人が出した音をアンプで増幅させて指向性スピーカーでそのまま隣人の元にお届けしたい。

cssが重要なんだなぁ。

ブログの勉強にユンケルは欠かせない。

雑記

2020-02-27 21:34 Web制作コメント

無限に本を買っていく。
座った瞬間に眠くなってきたけどやるぞ。

WordPress テーマの概要
閉じタグを別のphpファイルに書いて良いらしい。説明が素晴らしくて感謝料を振り込みたくなる。

次の休みにこれをCSSで整えていきたい。
流石に連日ハッスルし過ぎたようで、仕事に影響が出そうな状態になってきたので寝ます。

雑記

2020-02-26 22:58 Web制作コメント

立ち読みした感じ、今の俺にはこれが一番効きそうだったので購入。
他の本は「よし、変数は覚えたね。じゃあデータベースいってみようか。」みたいなノリになってて、
もし世の初心者がこれについていけてるとしたら、俺は自分の生き方を見直さないといけないかもしれん・・・(　´ω｀)
やりますぞ。

※眠気が半端じゃないので恐らく日本語が壊れます。

・「.」は文字列演算子の結合
・複数の引数を指定するには「,」で区切る
見た目はほぼ変わらないのに用途がまるで違う。

インタプリタ　(IT用語辞典）
コンパイラもセットで覚えておく

ふりがなが振ってあるのは想像以上にわかりやすい。
プログラムの解説書にふりがなを振るのを法律で義務化しよう。

・PHPでは値を代入する前に事前に変数を宣言する必要がない。
VBAと違うんですね。

・キーが設定された配列を「連想配列」と呼ぶ。
よく出てくる「=>」はこれが関係している。

テンプレートタグ（公式）
テンプレートタグ入門の冒頭の文章が面白い。

WordPress のテンプレートタグ
 のテンプレートとテンプレート階層について
凄く丁寧。ありがたや。
このサイトで書かれていた「公式テンプレートの中身を覗く」は有りだと思った。パクってなんぼ。
コロン(:)を使った構文という説明があったので、これで漸く各記号の意味を調べ終えた感がある。
（まだ見ぬ記号がたくさん存在する可能性はあるけど、今調べているものについてはここまでの知識で理解できるはず）

概観図
こういうやつよ。
ちょうだいちょうだい　こういうのちょうだい　もっと

今日はここまで

■独り言
とりあえず本は一旦全部読んだ。
プログラムについての説明が多かったので、すぐには活用できなそう。

「html」、「css」、「php」、「wordpress独自要素」
これらをそれなりに理解しないと、何をどうすればどうなるのかが理解できない・・・(　´ω｀)
それぞれの関係が全然見えない。

Web 制作リファレンス（＋α）というサイト（上で貼ったサイト）がめちゃくちゃ格好いい。これは憧れますわ。

雑記

2020-02-25 22:32 Web制作コメント

世の中には情報がたくさん溢れているけど、その情報を扱えるかどうかは自分の状態によって変わってくる。
今の自分にとって必要な情報に早く辿り着くことが重要になってくる。
（追記）検索、検証、取捨選択、活用

という訳で今日もやりますぞ。

■基本
・ファイルの拡張子を.phpにする
・プログラムの最初と最後を「<？php」と「？>」で囲む
（半角で入力するとタグと見なされるようなので、一旦全角で）
・各行の最後に「;」を加える
・printファンクション（関数）のパラメータには、表示する文字列を指定する。
文字列を「’」または「”」で囲む
・変数につける名前を「変数名」といい、PHPでは必ず「$」から始める必要がある。
空白は含まれてはいけない、先頭に数字は使えない。命名規則については別の本で調べておく。
・array　配列を作成する関数

テンプレートタグ/wp get archives
ここを見ながらsidebar.phpをこしらえてみた。

多分昨日よりかは正しい方向に進んでいるけど、見た目がダサい。
これは誰もが通る道らしく、ググってみたら解決法が色々出てきた。

WordPress カテゴリー投稿数を表示する
こちらの方の「displayプロパティをinline-blockに変更する」を採用

でけた　(　´ω｀)
昨日の終わりに貼った画像と見た目はほぼ変わってないけど前進はしている。

今日はここまで。

【独り言欄】
数年前に購入した本がここにきてバリバリ役に立っている。
試験的に普段OneNoteでやっていたことをブログでやっています。（モチベーション維持のため）
Progateがオサレですね。行き詰ったらやってみます。

雑記

2020-02-24 13:33 Web制作コメント

いつぶりかの休みなので、ちょっとブログの勉強を進める。

■改善したい箇所
・アーカイブ周りがダサい
・月から月への移動（1月末→2月頭など）ができない
・関連記事リンク、サイト内引用ができていない
・テーブルの表現がダサい
・記録した動画、画像は一覧できるようにしたい
・safariからアクセスした際に諸々レイアウトがおかしいらしい

■課題
・wordpress開発環境を構築できていない（いつも本番でテストしているので、たまに編集ミスによりアクセスできなくなる）
・知識が乏しくて自由にカスタマイズできない

というわけで、とりあえず開発環境の構築から始める。
以下、随時更新

1.Local by Flywheelのインストール
超簡単にローカル環境が構築できるLocalbyFlywheelの使い方　を参考に進める。

2.本番サイトのデータのコピーはAll-in-One WP Migrationを使うのが良さげ
→インポートファイルサイズ制限に引っかかったので断念。
→アナログなやり方でファイルをDLする必要がある模様。
※上記プラグインを使った時のメモ　雑記/1895/
→恐ろしく重要なメールが2019/01/12に届いているから大事にすること
自分はAdobe Dreamweaverを所有しているので、これを使ってファイルをDLする。無い場合の対処法は謎・・・
wordpressの最小構成を把握しないと無駄な時間を過ごすことになる・・・（DL時間が死ぬほど長い）

無事死亡

↓

ツール＞エクスポート＞すべてのコンテンツ　エクスポートファイルをダウンロード＞Local側でインポート＞テーマが持ってこれて無いので手動でDL
wp-content/themes/内の移行したいテーマのファイルを全てDL＞フォルダに入れてzip化＞外観　テーマ　テーマのアップロード　ファイルを選択　今すぐインストール

↓

っぽい感じにはなった。