【19日目】メインコンテンツの作成を終わらせたかった…
Posted: Last Update:
サイトを作成し始めて19日目になりました。今日はお出かけをしていてあまり作業時間が取れませんが、できる範囲で進めたいと思います。
ロードマップ
まずは進み具合をロードマップで確認しましょう。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 大枠の作成
- ヘッダの作成
- フッタの作成
- メイン部分の構成を作成
- リンクを開いた時の動きを作成
- ナビゲーションバーの作成
- メインコンテンツの作成 ← 今ここ
- 関連情報エリアの作成
- 公開
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
今日は盛りだくさん
昨日はブログの内容をindex.phpにそれなりな形で読み込むことに成功して、下記のやりたいことの1番と2番はそれなりに達成できたのではないかと思います。
- 掲題を目立たせつつもシンプルに読みやすくする
- 投稿日と最終更新日を薄い字にして「読みたかったらちゃんと見えるけれど、主張しない」デザインにする
- 箇条書き部分の装飾を作る
- PHPやHTMLのコードを書いている部分をきちんと表示できるようにする
- 掲題をページのタイトルとして反映できるようにする
昨日PCを閉じてから、3の箇条書きについていろいろ考えました。出た結論は、結論「このままでいい！」。というのも、いろいろなブラウザで見え方が異なる可能性があるからです。全てのブラウザに対応できるように設定する自信がありません！デフォルトの設定がきっと一番安全。
それから、昨日はすっかり失念していたことがありました。画像を挟んでいる所があるので、その呼び出しも何とかしなければいけません。以上を踏まえて今日の目標は以下の通り。
- PHPやHTMLのコードを書いている部分をきちんと表示できるようにする
- 画像を美しく表示できるようにする
- 掲題をページのタイトルとして反映できるようにする
ブログで紹介しているHTML/PHPをどう表記するか
時間もないので早速取り掛かりましょう。コードの表示について検索してみました。「HTMLタグのpreとcodeでコードを囲む」という回答が一番多い気がします。言われた通りに実装して見ましたが、コードは表示されない…。PHPが表示できなかったり、HTMLのタグとして読み込んでしまったり。なんででしょうね…。英語のサイトに行きついて、「そういう目的のために作られたタグじゃないからね！」（意訳）と書かれているのを発見。そうなのね…。さらに検索してたどり着いた結論は、「けっきょく特殊タグで書くのが確実！」ということでした。たとえば、「<」は特殊文字で「<」と書くことで、画面には「<」と表示されます。HTMLタグを特殊文字に変換してくれるサイトも多数あるので、とりあえずはそれに頼ることにしました。
日記を書き換えないと行けませんが、ついでに「ここはコードですよ」と目立たせたい。HTMLタグのdivで囲って、背景に色をつけて、マージンとパディングを設定、さらに文字も少しだけ小さくしました。コードを書く部分のdivに対するスタイルシートの設定は以下の通り。
}
画面で見るとこんな感じです。
いちおうそれっぽくなりましたね。テキストの色をコードに合わせて変えれば、もっとそれっぽいのでしょうけれど、今はそこまで技術が追いつきません！
画像の表示を調整
では、次の「画像を美しく表示できるようにしたい」に移りましょう。これにはまず画像サイズを圧縮するところから始めないといけない、と思っていました。しかし、確認するとPNGでも100KB前後。サイズを画面に合わせるだけでよさそうです。横幅を完全に文章と合わせてしまうと大きい気がするので、文章の50%くらいで表記してみようかな。そして、文章を回り込ませたい。これにはfloatを使えばいいと思う！ブログの製作を始めたばかりの頃に、サイトのヘッダ部分を作るのに悪戦苦闘して、さんざん検索したfloat。その知識がこんなところで役に立つとは思いませんでした。失敗は成功のもとってこういうことかしら？
実際に設定をしてみると…。予想以上に小さいな！下の画像の真ん中から右下辺りが画像です。
画像の適度な大きさが分からないし、画像がおかしい…
float使えるぞ！とかはしゃいでいる場合じゃなかった。仕方がないので100%で表示して、floatの使用もやめます。設定はとても単純、これだけです。これで、mainの画像は全て文章の幅ぴったりになります。
}
いま気付いたのですが、画面にIMEの切り替え（英数字と日本語の切り替えの時に出る、Aとかあとか）が写り込んでしまっている…。
とっても悲しい…。
…見られる画面にはなったので、まあ、いいでしょう！今更過去の画像を作り直せないので、いいことにします！
今日はここまで
「掲題をページのタイトルとして反映できるようにする」に進みたいところですが、時間が来てしまいました。明日は、掲題をページのタイトルに反映させつつ、ブログ全体の構成を見直したいと思います。素人が作った感満載のブログから、この人プロかも？と思われるようなブログに進化させる！（させられるといいなぁ…。）
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
