kamenokoki.com

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

Posted:  Last Update:

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

ここまでの成果

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

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

  1. フォームのデザインを整えた
  2. ページ左側のMenuからサイトを選ぶと、真ん中に記事一覧ページを表示させられるようになった
  3. 記事のクリックで編集ページに遷移できるようになった
  4. 編集ページに記事の一部を表示できるようになった

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

ここまでの成果

ここからの予定を少し立てる

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

まずはヘッダー部分

  • 項目をもう少し目立たせたい
  • 画像はファイル名だけでなく、イメージも表示させたい
  • 「記事入力」のヘッダーを「記事本文」に変更する

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

  • 記事のパラグラフを読み込むPHPを作成
  • 見出しh2~4までを読み込むPHP
  • 記事内画像を読み込むPHP
  • 記事内のコードを読み込むPHP
  • 記事内のコードを読み込むPHP

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

記事編集ページ上部の項目をもう少し目立たせる

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

ここまでの成果

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

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

記事編集ページ上部の項目をもう少し目立たせる

画像のイメージを表示させる

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

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

画像のイメージを表示させる

今日はここまで

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

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

  • 記事のパラグラフを読み込むPHPを作成
  • 見出しh2~4までを読み込むPHP
  • 記事内画像を読み込むPHP
  • 記事内のコードを読み込むPHP
  • 記事内のコードを読み込むPHP
記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告