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

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

ここまでの成果

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

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

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

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

今日やりたいこと

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

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

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

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

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

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

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

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

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

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

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

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

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

時間切れ

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

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

記事をシェアする

亀の子に連絡

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