kamenokoki.com

【172日目】自作ブログ投稿フォーム:編集画面のデザインを整える-1

Posted:  Last Update:

「記事の投稿ページを作成する」プロジェクト。基本的なフォームの形ができ、本文も部分的に呼び出せるようになりました。既存記事の各要素も呼び出せるようになったので、今日はデザインに手を加えていきたいと思います!

ここまでの成果

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

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

昨日は既存記事を編集画面に表示させる際の画像の処理ができるようになりました。また、リスト(UL)を呼び出せるようになりました。

画像を綺麗に読み込む

リストを読み込む(OL)

最初にリストの表示をしていきたいと思います。昨日はULのリストをやったので、今日はOLのリスト。ULで書いたPHPを少し弄るだけです。

完成したのですが、OLを使っているページが見当たらない…。PHPが動いているかは後日確認したいと思います。

課題は残っているものの、呼び出さなければいけないパーツは呼び出せるようになりました!

  • 記事のパラグラフを読み込むPHPを作成 ←完成。文中のリンクや装飾など検討必要
  • 見出しh2~4までを読み込むPHP ←完成
  • 記事内画像を読み込むPHP ←完成だが、揺らぎに対応できるようになりたい
  • 記事内のコードを読み込むPHP ←作成途中、コードを色分けして読み込みたい
  • 記事内のリンクを読み込むPHP ←完成
  • 記事内のリストを読み込むPHP ←完成

編集ページのデザインを変える

最初に作成したときにはそれなりに気に入っていたデザインですが、実際に記事内容を表示させるとちょっとせせこましいですね。

今日はほんの少しですが、デザインを弄っていきたいと思います。いろいろ考えつつ、ここまでこぎつけました…。まだまだ改善の余地がありすぎます!

編集ページのデザインを変える

今日はここまで

時間が来たので、今日はここまで。明日はもう少しデザインを弄るか、その先をするか…。一晩寝かせて考えたいと思います。

ちなみに、今見えている課題はこんな感じですね。

  • コードを自動で色分けして表示させたい
  • リストはリスト形式で表示させたい
  • 画像のPHPがループしないように設定し、現在のPHPから余分を取り除きたい
  • 文章中のリンクをリンク表示させたい
  • 文章中の装飾をそのまま表示したい(太字や赤字など)

考えることがたくさんです!では、また明日。

記事をシェア / @kamenokoki
Tweet @kamenokoki

亀の子にコメント / 感想を送る
  DM

広告