kamenokoki.com

【153日目】自作ブログ投稿フォーム:ブログ編集ページの一部を固定して操作性を上げてみた

Posted:  Last Update:

「記事の投稿ページを作成する」プロジェクト。昨日はブログの基本情報部分のデザインを整えました。今日からは、ブログの本文部分の読み込みに挑戦していきたいと思います!

ここまでの成果

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

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

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

編集したい記事を読み込んだページがスクショの感じです。なかなかいいのではないでしょうか?

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

今日やりたいこと

さて、今日の作業について。昨日はブログの基本情報を読み込めるようになったので、今日からは本文部分です。

昨日、やることを洗い出していました。リストにした項目は次の通り。上から順番にやっていきましょうか。

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

記事のパラグラフを読み込むPHPを作成する

最初の作業は<p></p>で囲まれている部分の読み込みです。PHPを書く前に、スタイルシートをいじって、箱の大きさなどを設定していきます。

スタイルシートを弄って、こんな感じにしました。

記事のパラグラフを読み込むPHPを作成する

悪くないんだけど、ページの上の方がいなくなっちゃいましたね…。将来的に横のメニューから項目を増やしたいのに、いなくなられたら困る…。ヘッダーとメニューを固定しましょうか。

予定変更、画面の一部を固定する

急遽予定変更です。スタイルシートを弄って、画面のヘッダーと横のメニューを固定したいと思います!

できるかな…?確か「position absolute」みたいなのを使うんでした。検索してみよう。

検索して、結局一番簡単な方法にしました。記事本文の部分にoverflow時の設定をしています。これだけ「height: calc( 100vh - 150px );」

画面はこんな感じでスクロールできるようになりました。

予定変更、画面の一部を固定する

一部を固定した分、全体のバランスがおかしいですね…。もうちょっとデザイン変えないと…。

時間切れ

今日はここで時間が来てしまいました!結局スタイルシートしか弄っていません!PHP書く予定だったのにな~。

もう少しデザインをいじりたい気もしますが、それは後回しにして、明日はPHPを書きたいと思います。それでは、また明日!

記事をシェアする

亀の子に連絡

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

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

広告