ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【152日目】自作ブログ投稿フォーム:記事編集ページの基本情報部分のデザインを整えてみた

Posted:2021.01.29　 Last Update:2021.01.30

「記事の投稿ページを作成する」プロジェクト。昨日は、記事編集ページに、投稿済みの記事の一部を読み込めるようになりました。今日は記事の最後まで呼び出せるようにページを編集していきます！

ここまでの成果

今手打ちでタグとかも書いている入力を、フォームで簡単にできるようにするのが目標。一大プロジェクト「記事の投稿ページを作成する」！

ここまでの作業で完了したことは大きく次の4つです。

実際に編集ページに記事の一部を表示しているのがこちら。なんとなく地味で見ずらいページですね。

ここからやりたいことがいくつかあります。ちょっとリストアップしてみました。実際に記事を書きかえる部分は後回しにして、記事を読み込む部分だけを考えています。

まずはヘッダー部分

次に本文のために用意したいPHPがいくつかあります。

ここまでとりあえず記事読み込みの基礎部分は完了です。とりあえずここまで完了したら、次を考えたいと思います。では、今日の作業に取り掛かりましょう！

スクショで見ていただくと分かりますが、項目の見出しの方が項目よりも目立っています…。項目の内容をまず目立たせていきましょう！

ここの作業はスタイルシートの変更ですね。inputやtextareaの表示を少し変更しました。

だいぶ見やすくなった！ついでに「記事入力」のヘッダーを「記事本文」に変更しました。

次に、どの画像を使用しているのか、画像も表示していきたいと思います。ここは「記事一覧」の時に呼び出したことがあるので、流用するだけ。後はデザインですね…。デザイン力が欲しい…。

とりあえずこんな感じになりました。デザインについては、またゆっくり考えます…。

ここで時間が来てしまいました！今日はここまで。まぁまぁ順調でしょうか…？ヘッダー部分については作業が終わりました。

明日からは、本文部分について編集していきたいと思います！ここからがヘビーになりそうです。