kamenokoki.com

【196日目】自作ブログ投稿フォーム:ブログ編集ページのデザインを改めて調整

Posted:  Last Update:

前回から9日も間が空いてしまいました。ちょっと空き過ぎでしたね。反省。ここまで何をやってきたのかもう忘れています…。まずはこれまでの見直しからしてみよう。

ここまでの成果

一大プロジェクトに取り掛かっていました。「WordPressのようなブログ投稿画面を自作する」というものです!志だけは高いですね~。

で、紆余曲折ありまして、今できているのがこんな感じですね。

  1. 専用のサーバーを立ち上げた
  2. 入力フォームのページを作った
  3. 入力フォーム左側のメニューから記事を選択できるようになった(一部)
  4. 入力ページが途中までできている

今現在このような画面になっています。右側の編集ページ、最初はフォームを使おうと思っていましたが、Javascriptで簡単にできるらしいことを知ってデザインを変更していました。

ページをPHPで呼び出す

今日は改めてデザインを修正したい!

さて、前回はフォームからJavascriptように画面を変えたのでした。で、画面を変えた結果、またデザインがぐちゃぐちゃになっているんですよね。

というわけで、本日は改めてデザインを修正したいと思います。

なるべく本番環境のデザインに近い形で表示した方が編集はしやすいと思うので、デザインを近づけながら修正していこう。

がしがし変更していく!

目標は本番環境に近い状態に変えていくことです。まずは、編集画面中央にDIVを適用。この部分を本番に近いスタイルシート(色違い)に変えていきましょう

まずは、記事タイトル(h1)を下に持ってきました。そして、各小見出しのスタイルシートを変更。パラグラフも間隔をあけたり…。

で、こんな感じになりました!上のスクリーンショットと比べると違いが分かると思います。

がしがし変更していく!

今日はこの辺りで

最近ちょっとさぼり気味なのですが、体調もイマイチなので、様子をみながらさぎょうしていきたいと思います。

次は、いよいよ内容を編集できるように「Content Editable」を適用するところから始めたいですね。では、また、明日!(できれば)

記事をシェアする

亀の子に連絡

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

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

広告