【45日目】記事本文ページを読みやすくしたかった

サイトを作成し始めて45日。昨日はファビコンを作成して、サイトを開いてくれた方のブラウザタブにアイコンを表示させることに成功しました。サイトがだんだんとブログっぽくなってきた気がします。今日は記事本文の見栄えを整えていきたいです。

ロードマップ

ロードマップで進捗を見ると下記の通りです。

• 準備 - サイトの全体像を決める
• 使用するプログラミング言語を決めて環境を整える
• サイトの基本構造を作って公開する
• 収益化に最適なサイトにアップグレードする
• コンテンツを充実させる（他の作業と同時進行）
• サイトを見てもらえるようにサーチエンジンに登録する
• sitemap.xmlとRSSを作成する
• コンテンツに合わせてサイトを修正、スマホにも対応する　←今ここ
• お問い合わせページを作る
• 検索ボックスを作る
• サイトマップページを作る
• 個人情報に関するページを作る
• SEOとセキュリティについて調べ、対応する
• GoogleアドセンスとAmazonアソシエイトの申し込みをする
• ローカルで簡単に入力ができるようにフォームを作る
• フォローアップ - より収益化に向いたサイト構造に変更する

サイトリニューアルの弊害

今日の作業を始める前に、お話したいことがあります。姉妹サイトのデザインも、こちらの進捗に合わせてリニューアルしたことを昨日ご報告していました。テストのときは問題のなかったデザインが、本番環境に上げて、PC以外で閲覧するとデザイン崩れが発生していたことが発覚！ローカルでは大丈夫だったし、本番環境にあげた後もPCでの表示は問題ありませんでした。そのせいで、すっかり油断していて、気付いたのがだいぶ後になってからでした。タブレットとスマホでも一応見ておこうかな、と軽い気持ちで見に行ったら、「画像がでかい！」「前のデザインのまま新しい内容だけ表示されてる！」と大慌て。

あげたファイルがおかしかったのかと確認してみましたが、問題なし。ない頭をひねって、ひねって、やっと「ブラウザのキャッシュが悪さをしている」という可能性に辿り着きました。HTMLのデザインを決めるスタイルシートを書き換えたのですが、以前のスタイルシートをブラウザが記憶していて、新しいものを使ってくれていなかったんです。解決方法をネット検索しましたが、「ブラウザのキャッシュをクリアする方法」という、ユーザー側にアクションをとってもらう方法ばかり出てくる…。ものすごく時間を使って、「しかたない、英語で検索するか」と。で、辿り着きました！この記事。やることは単純で、スタイルシートにバージョンを与えてやればいいらしいです。

バージョンがあるだけで、ブラウザは新しいスタイルシートを読みに行ってくれるそうです。次にデザイン変更をするときも、「v=1.1」の部分を「v=1.2」とかに変えれば、新しいスタイルシートを読み込んでくれます。早速やってみると、タブレットでも携帯でも、新しいデザインでページが表示されました！問題解決です。バージョン情報、なんて便利なんでしょう。

Google アナリティクスに登録してみた

今日の作業をはじめる前に、もう一つご報告です。サイト作成に関して検索している中で頻繁に出会った「Google アナリティクス」なるもの。やっと重い腰をあげて登録してみました。サーバーをお借りしているロリポップにも解析データがあって、こちらを使えばいいと最初は思ってたんですね。でも、実際にロリポップのデータを先日出してみて、「どの程度サーバーに負荷をかけているか」という点に重点が置かれている印象を受けました。トラフィック（サイト訪問者がどういうリンクを踏んでサイトを訪問してくれたかなどのデータ）はロリポップの解析では充分にカバーできないかな、と。そこで役立つのが「Google アナリティクス」。まだ使っていないので、おそらく役に立つんだろう、という程度ですが。でもでも、だって、「Google アナリティクス」の存在意義ってトラフィックの分析ですもんね？

「Google アナリティクス」の登録自体は簡単にできました。サブドメインも網羅したいので、方法を検索したらネット上に詳しく解説している人がたくさんいました。そちらの設定もけっこう簡単にできました。リアルタイムで訪問しているユーザーが分かる機能があったので、試しに自分のサイトを開いてみると、ちゃんとユーザーが「1」になりました！設定がちゃんとできていることも確認できたし、なにより面白い！ページをいろいろ探索してみました。「どのページから遷移してる」とか「ユーザーがページに滞在した時間」とか、細かく分析してくれるらしい。もっと早く登録しておけばよかった…。これからサイトを作ろうとしている方には、公開と同時に登録することを勧めてあげたいです。「Google アナリティクス」に登録したばかりなのでまだデータは出ていないので、数日後にまた見に行ってみたいと思います！

今日は記事本文のお手入れ

さて、そろそろ今日の作業を進めましょう、今日は、サイトの本文記事ページをもっと読みやすくする作業です。昨日はどんなデザインにするか迷っているうちに時間が来てしまって、「寝てる間に考えよう」と一日を終えました。気持ちよく寝てしまってなんにも考えていません（笑）。とりあえず、本番用のファイルを弄って事故を起こすといけないので、テスト環境を作ろうかな。そこでいろいろと試してみて、いいものを採用したいと思います。

テスト環境も準備できたので、とりあえず、一番上に、どんなルートの情報を読み込んているかを表示してみたいと思います。ルートを入れれば、日記を表示しているのか、記事を表示しているのかも明確になります。HTMLとPHPがこんな感じ。とにかく変数で呼び出すことで、記事にも日記にも対応できるようになっています。

画像で見ると、タイトル「kamenokoki.com」の真下に「ホーム > 亀の子記（開発日記）」が加わりました。なんか思っているのとは違う出来になった…。とりあえず、ここはパーツとして置いておきます。

記事本文に記事のイメージ画像を入れる

出来上がりのイメージがわかないまま、漫然と作業をすすめています…。次は、記事本文にイメージ画像を入れてみようかな？昨日の最後の方にちらっと言及していますが、姉妹サイトには記事に画像を入れ込んでいて、それが気に入っているんですよね。同じような感じで入れてみます。

実際に画像を入れた様子がこちら。………。

迷走中…

やばい、ゴールが全く見えない。と思ったけど、そもそもゴールを設定してませんでした！どうしようかな~。

ゴールが一向に見えないので、いろいろなブログを巡回してアイディアを拾ってきます。

15分ほど巡回して学んだこと。「みんなが画像ヘビーだなぁ！」。前にも似たようなことを書いたな、と思ったらサイト作成に取り組んで3日目に同じことを書いてました。今日は45日目。進歩してません。この亀、まったく前進できてませんでした…。

まだ全くイメージがわきませんが、とりあえず場所を入れ替えたりして、デザインを変えてみようと思います。

画像を小さくしたり、大きくしたり。画像の横に日付を入れたり、やめてみたり。…デザインが全く決まらない…。どうしよう。どうしよう。…どうすればいいのぉぉぉ！？

かなり迷走中です。いろいろ試したので見てやってください

今日はここまで

全く進まないまま、もうだいぶ時間が経っています。行き詰ったので、今日はここまでにします…。一番上にある「ホーム > 亀の子記（開発日記）」の表記は気に入ったので、今日はそれだけ入れておこう。

やることリストを作っていたのですが、あまりにも今の作業が行き詰っているので、明日は別の作業をしようかな。「ブログ/記事ページの見栄えを整える」作業は後回しにして、目次を入れたり、日記の「何日目」を自動計算させたりを先にしたほうが効率がよさそうです。作業している間にいいデザイン案が浮かぶかも知れないし。ちなみに、下記がやることリストです。では、また明日。

1. ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する　←完了
2. ブログと記事の、それぞれのトップページを作る　←完了
3. サイトのトップページを作り直す　←完了
4. ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする　←今ここ
5. 日記の「何日目」を自動で入れられるようにする
6. ファビコンを作る　←完了
7. 記事に目次を入れる

記事をシェアする

亀の子に連絡

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