独学!Webサイト構築日誌

15日目:朝から手悪さMAX。

13:30

朝何やってたんだお前、という皆さん。手悪さしてました、すみません。
先日から燻製作業に励んでいるものの、ガスの自動停止機能のおかげで上手く行かず悩んでいましたが、木炭と段ボールを使ってどうにか形になりました。今朝はその段ボール燻製機の作成に勤しんでおりました。

さて、今日の目標は故知覧。
  1. ソートプログラム一部変更。
  2. お気に入りのアイコン変更。
  3. フッターのタイトル 高さ揃える。
  4. 画像一覧の表示弄り。
  5. 全体のタイトル/説明文修正。

1.ソートプログラム一部変更。

昨日得た知識で、下記の一部だけ変更。特に動きに変化はなく、見た目が簡単になるだけです。
※動作がおかしくなったので、コード削除済み。

2.お気に入りのアイコン変更。

先日ブラウザタブの画像を変更しましたが、お気に入り登録した際の画像を指定してなかったので指定しましょう。前回のとほぼ一緒で、relの中身を”shortcut icon”に変更して、head部分に追加するだけです。
            
html
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../img/icon.ico">
            
        

3.フッターのタイトル 高さ揃える。

若干ズレているので、上揃えにしましょう。
            
css
footer ul{
vertical-align:top; ←追加分
text-align: left;
width: 30%;/*メニューの大きさ*/
margin: 10px auto;
display: inline-block;
}
            
        

4.画像一覧の表示弄り。

            
js
//画像一覧
for(i=0;i<=14;i++){//全日の画像を格納
let picsURL = '../diary/day' + i + '.html';
let allpics_src = '../img/day' + i + '.jpg';
//    let allpics_title = picsURL.getElementsByTagName('h1')[0].childNodes[0].nodeValue;
document.write(
'<div class="pic_frame"><p><h2><a class="picsText" href="' + picsURL + '" target="_top">' + i + '日目</h2></p></a><p><a href="' + picsURL + '" target="_top"><img src="' + allpics_src + '" alt="day' + i + '" title="day' + i + '"></a></p></div>'
)
}


css
/*画像一覧関係--------*/
div.pic_frame {
vertical-align:top;
display: inline-block;
text-align: center;
margin: 0 1rem 3rem 1rem;
width: 30%;
}
div.pic_frame .picsText{
text-decoration: none;
}
div.pic_frame img{
width: 100% !important;
}
            
        

15:00

5.全体のタイトル/説明文修正。

やっと本題ですね。参照サイトはココ。現在keywordは不要なようですが、ひとまず検索に引っかかるように下記をheadに追加しておきましょう。


title について。
さて、実際に何でもいいのでWeb検索してみて、表示される文字数を数えてみてください。2020年12月現在でGoogleだと最大28文字、Yahoo!だと最大25文字しか表示されないようです。これは日本語全角の場合ですが、25~28文字程度で決定すると良さそうです。

現在、私が記載している日誌の性質上、タイトルを何か1つの機能(画像添付方法、検索フォーム作成方法など)に絞ることは難しいので、タイトルの日付をそのままtitleにします。また、各まとめページについては、そのタイトルをtitleにします。


description について。
title同様調べてみると、Googleはムラがありますが、Yahoo!は安定して最大105文字程度ですね。Googleの判断基準が良く分かりませんが、一旦105文字以内で検討していきます。

正直、思いついたことをどんどんやってきましたが、方向性を再確認するためにもココはちゃんと考えた方が良いでしょう。私がサイトを立ち上げる際に使用したのは「5W1HPS」です。5W1HPSという名前は今考えた。(ドヤ
大抵の場合、考えたら即やるので「4W1HPS」ですけどね。
これを踏まえて、ノートに書き出し、head部分のhtmlを下記のようにしました。
            
html
<title>独学!Webサイト構築日誌</title>
<meta name="description" content="html/css/JavaScript 未経験の管理人が、Webサイトを独学で学びながら、実際に構築していくまでの日誌。構築中に得た知識や技術をすべて無料で公開。">
<meta name="robots" content="index">
            
        

我ながら上手くまとまっているんじゃないかと、自画自賛。

17:00

コピペ作業終了。

SEO関係をサクっと終わらせちゃいましたが、アクセス数を上げるには更に改良する余地が沢山ありそうです。他のサイトを参考にしたり、実際に文章や書き方を変えて様子を見るのもありだと思います。


本日はココまで!

今後の予定ですが、下記3つを行い、終わり次第phpの勉強を始めます。

今日もお疲れ様でした。



Before: 14日目

Before: 14日目

After: 15日目

After: 15日目



作成日:2020/12/27 - 更新日:2021/01/26

≪ 14日目≪ 一覧に戻る ≫16日目 ≫

HOME > 日誌一覧 > 15日目:朝から手悪さMAX。