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

【106日目】記事内のカテゴリーリンクの位置決定！

Posted:2020.12.14　 Last Update:2020.12.15

カテゴリーへのリンクを記事に埋め込む作業を初めて数日。PHPでページ番号から該当するカテゴリーを呼び出し、リンクも完成しました。昨日はリンクの位置を決定するのに時間を費やしたのですが、結局決まらず…。

昨日までの作業振り返り

昨日までの作業で下記のようなPHPを作成しました！記事番号「$filenum」が、カテゴリー「$scategoryarticle[$thecatebory]」に入っているかを確認して、入っていれば回答するカテゴリーを日本語で書き出す作業をしています。

<?php
echo "<br>カテゴリー";
$value = $filenum;
require("$mypath/top/category.txt");
foreach($scategory as $thecatebory){
    $keycats = in_array($value, $scategoryarticle[$thecatebory]);
    if ($keycats == "true"){
        echo ': <a href="'.$myurl.'/article/welcome/'.$thecatebory.'">'.$scategoryname[$thecatebory].'</a>';
    }
}
?>

このPHPを使って記事にリンクを入れたのですが…

スマホ画面で見ると悲惨な状態に…。

で、どこにリンクを入れるか決まらないまま、昨日は時間切れになってしまいました。

リンクの位置を決める！

リンクの位置は少し寝かせて、今日は別のことをやってもいいと思っていましたが、せっかく作ったので早めに入れたい！

というわけで作業開始です。昨日作業が終わってから少し考えていたデザインがあるので、早速試してみました。

スマホで表示するとこんな感じになります。

うん、悪くないんじゃないかな？これで決定にしましょう。

ページ下部にもリンク挿入

ページの下の方にも、記事を読み終わったときにカテゴリーに戻れるようにリンクを入れました。なかなか良さげです。

これで完成！設定をオンにして、完了です！

次にやりたいこと

さて、次は何を仕様かな？やりたいことリストも残り2つになりました！

人気投稿の準備として、アクセス解析をするPHPを作成する
記事にカテゴリーを入れ込む ←完了
Google Lighthouseに指摘された内容に対応する

アクセス解析をするPHPも気になっているのですが、その前に、ブロガーの皆さんが使っていると言う「Rank Tracker」も気になっているんですよね。導入してみようかな？

早速ダウンロードをし始めたのですが、けっこう大きいですね。時間がかかりそうなので、設定は明日！今日は「Google Lighthouseに指摘された内容に対応」を残りの時間でやりましょう！

Google Lighthouseの指摘

Google LighthouseというのはGoogle Chromeの拡張機能です。自分のサイトを表示して、Google Lighthouseに分析してもらうと、サイトの閲覧のしやすさやアクセスのしやすさなどを分析してくれます。

今現在の成績がこんな感じ。問題点はほぼほぼGoogle Adxenceなどのスクリプトの重さなのですが、他にも問題がないか確認してみます。

Pearformance: 69
Accesibility: 85
Best Practice: 71
SEO:98

Google Lighthouseの指摘に対応

上から順番につらつらと見ていきます。とりあえず上の方はGoogleのスクリプトに関する指摘だけ…。

改善できそうな物がありました。「<html> element does not have a [lang] attribute」。

メタタグのことかと思いましたが、良く解説を読むと<html>自体に言語を設定しておくみたいです。次のように<html>を変更しました。

今日はここまで

時間が来たので今日はここまで。明日は「Rank Tracker」の設定をしてみたいと思います！では、また明日！

おまけのロードマップ

サイト作成がどのくらい進んでいるかロードマップで進捗を確認すると、ここまで進んでいます。

準備 - サイトの全体像を決める
使用するプログラミング言語を決めて環境を整える
サイトの基本構造を作って公開する
収益化に最適なサイトにアップグレードする
GoogleアドセンスとAmazonアソシエイトの申し込みをする　←完了！
ローカルで簡単に入力ができるようにフォームを作る
フォローアップ - より収益化に向いたサイト構造に変更する