kamenokoki.com

【35日目】記事のトップページを作りたい!

Posted:  Last Update:

サイトを作成し始めて35日目になりました。ここ数日取り組んでいた「sitemap.xmlとRSSをPHPで自動作成し、ブログランキングサイトにpingを送信する」という課題を昨日完了しました。今日からは「コンテンツに合わせてサイトを修正、スマホにも対応する」に取り掛かります。

ロードマップ

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

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

今日の作業について

昨日の最後に、「コンテンツに合わせてサイトを修正、スマホにも対応する」にとりかかるにあたっての計画を立てました。

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

まずは「ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する」です。図解しようかと思ったのですが、項目が多くてお絵描きがめんどくさくなっちゃった!やることを簡単に説明すると、今あるファイルの階層構造を、現実のサイト構造に近いものにします。先日、画面のパーツを最上位階層に置いたのですが、後悔しています…。無駄にフォルダが多くなりました。これから、お問い合わせページやサイトマップなども作るので、どこに何があるのかもう少しすっきりさせたい。無駄に出しゃばっているフォルダを、まとめる作業になります。

コンテンツの充実について

今日やる作業がとっても地味な上に、解説しても面白くない…。そこで、同時並行で進めているコンテンツの充実について少しお話をさせてください。

先日公開したことをご報告していた姉妹サイト「亀のチャレンジ」ですが、英語30日チャレンジが一週間続いています。いつもなら勉強はさぼっている時間の方が長いのですが(笑)、記事を書かなければいけないので自分でもびっくりするくらい真面目に取り組んでます!あちらのサイトについても、先日ランキングサイトに登録しました。sitemapやRSSの設定も昨日移植し、こちらのサイトとほぼ同様の運用ができるようになっています。

このサイトのコンテンツに関しては、昨日書いた記事を今日完成させられそうです。「ロリポップ!でPHPのSESSION/POSTが動かないときの対処法」。昨日学んだことをさっそく記事にしました!他の記事も書きたいのですが、本当に動作しているのか、とかの確認が面倒くさくてなかなか進んでいません。ちゃんと時間をとってやらないといけないですね。

moto g8 激短レビュー

今日やる作業がとっても地味な上に、書けることも大してないので、もう一件ご報告です。

以前に、携帯が壊れてしまって、moto g8に乗り換えたことを日記に書いていました。そろそろ3週間経つのですが、とっても快適です。何がびっくりするって、電池のもちがめちゃくちゃいい。携帯ゲームもやらないし、パソコンの前に座って仕事をしているので、もともとスマホはあまり使わないのですが、それにしても電池のもちがいい。まる2日は余裕で持っていると思います。というか、最後に充電したのがいつか思い出せない(笑)

写真も綺麗だし、通信も安定しているし、アプリもさくさく動きます(プラットフォームがAndroid10なので、まだ対応していないアプリもあるみたいです)。ガジェット好きではないので、他の機種とは比べられないのですが、moto g8にして良かったです。なにより安かった!サイズが大きいのだけが少し不満ですが、値段とバーターなのかな、とも思います。

大きいスマホの何が困るか。それは、カバーをつけるとさらに大きくなることです。今手帳型のカバーをつけているのですが、まさに手帳サイズ!ガラスフィルムとカバーに乗り換えようかな…。

ブログと記事のトップページを作る

そんなことを書いている間に、フォルダの入れ替えとPHPの書き換えも完了しました。思ったよりも簡単に終りました。自分で思っていたよりも、ファイルが整理されてた!

次に、「ブログと記事の、それぞれのトップページを作る」に進みたいと思います。今回、ブログと記事のトップページのデザインを統一することにしました。PHPの変数を使って、接続したページに応じた中身を拾って来るようにしたいです。準備するものをまず考えました。

  1. ブログと記事それぞれに、タイトル、説明文を準備して変数に格納
  2. 1を呼び出せるPHPを作成
  3. 2に最新記事を呼び出す箱のデザインを作る、Flexboxでスマホにも対応
  4. 公開

テスト環境の、さらにテスト環境を作って、今のページに影響しないように進めた方がよさそうです。変更したファイルを忘れないようにしないと…。

ブログと記事のタイトル、説明文を変数に格納

半分は使いまわしなので、ちゃきちゃき進めていきましょう。最初に、ブログと日記それぞけに、「welcome」というファイルを作りました。ここに、タイトルや説明文の変数を格納していきます。こんな感じです(途中の文章が長いので省略しています)。

<?php
$articletitle = "【亀の子記】ど素人がブログを作成してお小遣い稼ぎを目指す日記";
$articledescription = "WordPressなし、HTMLは20年前に少し触っただけ、PHPもネット検索のみ...";
$wtitle = "亀の子記(開発日記)";
$wdescription = "ど素人がブログを作成してお小遣い稼ぎを目指す日記。<br>
WordPressなし、HTMLは20年前に少し触っただけ、PHPもネット検索のみで自力学習。...
"; ?>

前半は、index.phpから呼び出す、ブラウザのタブに表示される内容や、検索された時に表示される内容です。もう少し、サイトの紹介文を練らなければ行けない気がしますが…。煽り文句はゆっくり考えます。

変数を呼び出すPHPを作成

次に、上の変数を呼び出すPHPと、スタイルシートを作ってみました。「$filefolder」とかは、パーマリンクに入った文字を拾ってきて、どのファイルを探すか指定している変数です。先ほど作ったwelcomeを今は拾っています。H1は既にサイト全体に定義されています。

HTML
<?php $filefolder=$category."s"; $urlfolder=$category; ?>
<?php require("$mypath/$filefolder/$filenum.txt"); ?>
<h1><?php echo $wtitle;?></h1>
<div id="welcomeintro"><?php echo $wdescription;?></div>
スタイルシート
#welcomeintro{
line-height: 1.7em;
text-align: center;
margin: 1em 0 1em 0;
}

ここまでの画面がこんな感じ
2020.10.04 コンテンツのWelcomeページ、現在のイメージ

今までと何が違うか…。何も違わない!(笑)これからもう少し素敵になる予定です。

時間切れ

今日は時間が来てしまいました。今の所順調なので、記事のトップページも明日には公開したい!今、記事へのリンクが横のナビゲーションバーにしかないので、見つけてもらいにくいと思っています。早くページを完成させて、目立つ場所にリンクを置きたいです!

では、また明日

記事をシェアする

亀の子に連絡

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

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

広告