kamenokoki.com

【24日目】サイト公開直前！最後の微調整を実施

Posted:　 Last Update:

サイトを作成し始めて24日目です。進捗をロードマップで見ると、いよいよ公開となっているのですが…。

ロードマップ

ロードマップで進み具合を見ると、今日サイト公開のはず…！

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
    • 大枠の作成
    • ヘッダの作成
    • フッタの作成
    • メイン部分の構成を作成
    • リンクを開いた時の動きを作成
    • ナビゲーションバーの作成
    • メインコンテンツの作成
    • 公開　←　今ここ
  • 収益化に最適なサイトにアップグレードする
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

公開の前にサイトの全体像を整えたい、の前に！

いよいよ公開、のはずなのですが…。一昨日サイトの見栄えをいろいろ弄ったのですが、やっぱりいまいち綺麗ではないので公開前に修正したいです。しかし！その前に！昨日サイトのリンクをいじっている中で、いろいろと気づいてしまったんですよね…。いろいろ、と言っても2点なのですが。

  1. 投稿の日付を入れるPHP変数は必要ないかもしれない
  2. 次の記事へのリンクを見に行く限度は今日の日付でいいのでは？

　というわけで、サイトの全体像をいじる前に、まず修正をしていきたいと思います。

修正1.ブログの日付を入れる変数は必要か

まずは「1.投稿の日付を入れるPHP変数は必要ないかもしれない」です。少し前に、ブログの本文を打ち出す画面に「投稿日」を引っ張ってくるために$articledateという変数を作りました。この変数をブログの記事ごとに設定しているのですが、ファイル名とかぶっている。ブログを書くたびに毎日書き込んでいるので、打ち間違いもあるかもしれない。凡ミスで妙な日付の日記になるのは嫌です。もし、ファイル名から投稿日を引っ張ってくることができるのなら、$articledate自体が必要ありません。凡ミスもそもそも起こりません。こういう一括の変更って面倒だけど、今の私にはVisual Studio Codeという心強い味方がいます！特定の文言が含まれているか、フォルダ内のすべてのファイルを検索してくれる「Find in Files」という心強い味方がいるのです！

さっそくフォルダ内を検索してみると、ブログ投稿の他に使っているのはブログ本文を呼び出しているblogcontents.phpだけでした。内容をじっくりと読み返し、blogcontents.phpの$articledateは$filenum（ファイル名につけている日付）で置き換えられることが判明。早速書き換えました。

たとえば、投稿日を呼び出しているPHPは以下のように書き換えています。

投稿日: <time <?php echo date(strtotime($articledate));?>><?php echo date("Y年m月d日", strtotime($articledate));?></time>　　
↓
投稿日: <time <?php echo date(strtotime($filenum));?>><?php echo date("Y年m月d日", strtotime($filenum));?></time>　　

思いのほか簡単に終った！

修正2.次の投稿へのリンクを探すのは今日の日付まででいい

次に「2.次の記事へのリンクを見に行く限度は今日の日付でいいのでは？」ですね。これはブログ本文の下にある「前の記事」「次の記事」のリンクの話です。数日前に設定したときには、「どこまで見に行けばいいのか」と随分悩んだ案件です。次の投稿は最後の投稿の1000日先まで見に行っているのですが、冷静に考えたらそんな必要はないですよね。今日を過ぎたらもう見に行かなくてもいいだけ。とっても簡単なことでした。早速書き換えます。

以前のコードがこんな感じです。

<?php
require("$mypath/$category/$filenum.txt");
$date = new datetime($articledate);
$date->add(new DateInterval('P0Y0M1D'));
$postdate = $date->format('Ymd');
$latest = new datetime($articledate);
$latest->add(new DateInterval('P0Y0M100　　0D'));
$i = 1;
do { 　
if ($date == $latest){ 　
break;
　}
　$filename = "$mypath/$category/$postdate.txt";
　　　if (file_exists($filename)) {
　　　　　require("$mypath/$category/$postdate.txt");
　　　　　echo '<a id="mainpostlink" href=', "$myurl/$category/$postdate", '>次の記事→</br><span id="mainprepostlinkdate">', $date->format('Y.m.d') ,'</span> ',$articletitle, '</a>';
　　　　　$i = $i+1;
　　　}
　$date->add(new DateInterval('P0Y0M1D'));
　$postdate = $date->format('Ymd');
} while ($i < 2 );
?>

書き換えた後のコードがこんな感じ。$todayで今日の日付を設定して、doの中のifで今日以降のデータは見に行かないようにしています。ついでにまとめられるところをまとめました。

<?php
require("$mypath/$category/$filenum.txt");
$date = new datetime($filenum);
$today = date("Ymd");
$i = 1;
do {
　$date->add(new DateInterval('P0Y0M1D'));
　$postdate = $date->format('Ymd');
　if ($postdate>$today){
　break;
　}
　$filename = "$mypath/$category/$postdate.txt";
　　　if (file_exists($filename)) {
　　　　　require("$mypath/$category/$postdate.txt");
　　　　　echo '<a id="mainpostlink" href=', "$myurl/$category/$postdate", '>次の記事→</br><span id="mainprepostlinkdate">', $date->format('Y.m.d') ,'</span> ',$articletitle, '</a>';
　　　　　$i = $i+1;
　　　}
} while ($i < 2 );
?>

少しだけですが、コードがすっきりしました。

いよいよ本題のサイトの全体像改善に取り組む

まずは今現在のサイトの様子を…。
220.09.23 今現在のサイトの様子

画像で見るとそこまででもないかもしれませんが、実際に開くと目が痛いほど緑色です。ちょっとは違うかと思って、あれからこっそり小見出しをオレンジにしたりしましたが、色が増えて悪化しただけでした。改善案を練るために、また色々なサイトを巡回して、見やすいサイトの特徴を拾ってみます。15分ほど検索しまくって、私のサイトとの差分を以下のように分析。これをもとに改善していきたいと思います。

  1. ヘッダ部分は目立たせる必要はないが、明確に独立している
  2. タイトルは中央ぞろえにすることで独立性が増す
  3. 色よりも、日本語(メイン情報)と英語(付加情報)の使い分けで、付加情報が無視しやすくなっている

分析結果をサイトに反映　1.ヘッダ部分

「1.ヘッダ部分は目立たせる必要はないが、明確に独立している」から取り掛かります。いろいろとサイトをみて、色で区切ったり、はっきりとした線で区切るよりも、ぼんやりとした線で区切るくらいが適切かと思いました。あと、今ある修飾は邪魔かもしれないことも。あと、やっぱり亀欲しいよね。少し時間がかかりましたが、HTMLとスタイルシートを書き直しました。

HTML。現在リンクがないものは公開前に削除します。

<header id="headershadow">
<div id="headerwidth" class="clearfix">
<span id="title"><img src="/parts/kame48.jpeg" alt="アイコン"> kamenokoki</span>

<navigation>
<ul class="headerlinklist">
<li><a id="headerlink" href="/index.php" target="">ホーム</a></li>
<li><a id="headerlink" href="" target="">記事一覧</a></li>
<li><a id="headerlink" href="" target="">日記</a></li>
<li><a id="headerlink" href="" target="">お問い合わせ</a></li>
</ul>
</navigation>

</div>
</header>

少し長いですが、スタイルシート

/* ヘッダの陰*/
#headershadow{
box-shadow: 0 5px 12px 0 #008000;
}
/* ヘッダの横幅管理*/
#headerwidth{
max-width: 1200px;/* 横幅の最大値指定 */
margin: 0 auto 2em auto;
padding: 1.5em 0 1.5em 0;
display: flex;
align-items: center;
flex-flow: row;
}
/* サイトのタイトルの装飾 */
#title {
color:#000000;
font-size:1.5em;
font-family:"arial black";/* フォントファミリー */
margin: 0em auto 0em 0em; /* マージンの変更 上 左 下 右*/
white-space: nowrap;　/* 文字列の折り返しを禁止する */
}
#title img{
width:1em;
height:1em;
vertical-align: middle;
}
/* ヘッダー部分のリンクリスト */
ul.headerlinklist{
margin: auto 0em 0em auto; /* マージンの変更 上 左 下 右*/
text-align: right; /* 行が増えたときは右寄せ*/
}
ul.headerlinklist li{
display: inline-block;　/* リンクを横並びにする */
margin: 0em 0em 0em 0em; /* マージンの変更 上 左 下 右*/
padding: 0em 1em 0em 1em; /* 間を広く */
font-weight:bolder; /* 文字を太くする */
}

完成画像
2020.09.23 ヘッダ部分の変更後

おっ、なかなかいいじゃないですか。

分析結果をサイトに反映　2と3.ブログタイトルを目立たせる

「2.タイトルは中央ぞろえにすることで独立性が増す」と「3.色よりも、日本語(メイン情報)と英語(付加情報)の使い分けで、付加情報が無視しやすくなっている」を同時にやってしまいましょう。まずはタイトルを目立たせるために、中央ぞろえにしました。今あるh1のスタイルシートをちょこちょこ弄ります。検索していたら、fontをまとめて設定する方法も学んで得した気分です。

スタイルシート

h1{
color: #000000;
text-align: center;
font: bold 2em 'メイリオ','Meiryo';
margin: 0;
padding: 0.5em 2em 0 2em;
}

次に、投稿日を編集します。英語に変えて、今は右寄せにしているのを中央に並べて表示したいです。HTMLで日本語から英語に変えて、スタイルシートで並べ方を変えます。

HTML
<?php
<p id="maindates">
Posted: <time <?php echo date(strtotime($filenum));?>><?php echo date("Y.m.d", strtotime($filenum));?></time>　　
Last Update: <time <?php $articlemodified = filemtime("$mypath/$category/$filenum.txt"); echo date($articlemodified);?>><?php echo date("Y.m.d", $articlemodified);?></time>
</p>
?>
スタイルシート
#maindates{
    text-align: center;
    font-size: 0.85em;
    margin: 0em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
    padding: 0em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
    color: grey;
}

出来上がった画僧がこちら
2020.09.23 ブログタイトル部分の変更

だいぶ読みやすくなりましたね！言葉の途中で改行が来ているのが気になりますが、検索しても簡単に修正できる方法がなかったので、ちょっと寝かせます。ここまで変えていれば、悪くはないと思う。

ここ数日でこっそり変えていたもの

ついでに、ここ数日でこっそり変えていたものもあります。それが、ブログの途中に挟む小見出しなどの設定。h2、h3と、先ほどオレンジにしたと言ったh4です。すでに上の画像に反映されているのですが(笑)つい2日前に、色はもう増やさないぞ！と言っていたのですが、h2の背景色を増やしてしまいました…。後でよく考えて変えるかもしれませんが、今は気に入っています。h2まブログの小見出しとして、H3はそれ以外の場所の小見出しとして、h4は主にサイドバーの小見出しとして使う予定です。

スタイルシート
h2{
    font: bold 1.5em 'メイリオ','Meiryo';
    margin: 1.5em 0 1.5em 0;
    padding: 0.5em 0 0.5em 0.5em;
    color: #000000;
    border-left: 3px solid #008000;
    background-color: #E6FFE9;
}

h3{
    font: bold 1.2em 'メイリオ','Meiryo';
    margin: 0.5em 0 0.5em 0;
    padding: 0 0 0 0;
    color: #000000;
}

h4{
    font: bold 1em 'メイリオ','Meiryo';
    margin: 0.5em 0 0.5em 0;
    padding: 0 0 0 0;
    color: #FF570D;
}   

画像で見るとこんな感じです。
2020.09.23 小見出しの設定

ついでにフッタも綺麗にする

上の部分が綺麗になったので、ついでに下も綺麗にしておきます。設定はほぼヘッタと同じにしました。大きな違いはbox-shadowの陰の入り方ですね。ヘッダが5px下に伸びているのに対し、フッタは3px上に伸びています。

HTML
<footer id="footershadow">
<div id="footerwidth">

<p id="copyright">Copyright (C) 2020- kamenokoki All Rights Reserved.</p>

<ul class="footerlinklist">
<li><a href="" target="">サイトポリシー</a></li>
<li><a href="" target="">個人情報</a></li>
<li><a href="" target="">お問い合わせ</a></li>
</ul>

</div>
</footer>
スタイルシート
/* フッタの陰*/
#footershadow{
box-shadow: 0 -3px 12px 0 #008000;
}
/* フッタの横幅管理*/
#footerwidth{
clear: both;
max-width: 1200px;/* 横幅の最大値指定 */
margin: 2em auto 1em auto;
padding: 1.5em 0 1.5em 0;
display: flex;
align-items: center;
flex-flow: row;
}
/* ヘッダー部分のリンクリスト */
ul.footerlinklist{
margin: auto 0em 0em auto; /* マージンの変更 上 左 下 右*/
text-align: right; /* 行が増えたときは右寄せ*/
}
ul.footerlinklist li{
border-left: 1px solid;
display: inline-block;　/* リンクを横並びにする */
margin: 0em 0em 0em 0em; /* マージンの変更 上 左 下 右*/
padding: 0em 1em 0em 1em; /* 間を広く */
font-size: 0.95em;
}
/* フッタの著作権*/
#copyright{
text align:center;
font-family:'メイリオ','Meiryo'
font-size:0.95em;/* 文字を小さくする */
margin:0.3em 0 0 0; /* マージンの変更 上 左 下 右*/
}

実際のフッタがこんな感じです。
2020.09.23 フッタも綺麗にした

余談ですが、index.phpを表示するとすぐにフッタになってしまったので、昨日は3件にした最新の投稿を5件に戻しました…。

公開の準備

いよいよ公開なのですが、まだ準備していないページへのリンクがあるので、先に削除、というか、隠しておきます。ヘッダのリンクは「ホーム」のみ、フッタに至ってはなにもなくなってしまいました(笑)

次に.htaccess。実は.htaccessに関して調べていた時に、設定を調べたんです。httpじゃなくて、httpsに繋げる方法とか。で、こんな物を準備していました。

## 全てhttpsにリライトする
#RewriteEngine on
#RewriteCond %{ HTTPS} off
#RewriteRule ^(.*)$ https://%{ HTTP_HOST}%{REQUEST_URI} [R=301,L]
#
## 全てwwwなしにリライトする
#RewriteEngine on
#RewriteCond %{HTTP_HOST} ^www\.kamenokoki\.com$
#RewriteRule ^(.*)$ https://kamenokoki.com/$1 [R=301,L]
#
## indexに来たものは全てhttps://kamenokoki.com/にリダイレクトする
#RewriteEngine on
#RewriteCond %{THE_REQUEST} ^.*/index.php
#RewriteRule ^(.*)index.php$ https://kamenokoki.com/$1 [R=301,L]

これの行頭にある「#」を全て削除してオンにしてファイルを転送すれば、いよいよサイト公開なのですが…。ちょうどいいところでアラームが鳴った！

公開は明日！

今、無手で上げようとしていましたが、やっぱりサイトを公開する前に設定がちゃんとできているかとか確認したいので、公開は明日にします。今日は、過去の投稿をまた2件(9月4日と5日)の形を整えて、終りたいと思います。なにしろ今日は「東大王」の3時間スペシャルがあります。サイト公開した結果がどうなったんだろうって視聴中にそわそわしたくない！

記事をシェアする

亀の子に連絡

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

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

広告