独学!Webサイト構築日誌

1日目:お久しぶりぶり。

17:00

初っ端から下ネタチックなタイトルで再開してみました。

お休みしていた間も、サイト内のリンク整理やらでちょいちょい弄ってたけどね。

全然関係ないですが、
今朝やっと換気扇の工事が始まったかと思いきや、取り寄せた換気扇が違うとかで、天井を破壊しただけで終了。
現状、浴室天井がテープで塞がってるだけで、熱効率が下がっただけです。

で。

朝から所用でドタバタしていたらこの時間になっちゃったていう。

  1. htmlの書き方を、SEO意識して変更。
  2. サブドメインGET。
  3. 新日誌を書き始めるにあたって、不具合出そうなphpの整備。
  4. 仮のトップページ作成する。
  5. Google Analyticsの設定。
  6. サイトロゴの作成。

1.htmlの書き方を、SEO意識して変更。

旧日誌の手直しするのが面倒だったので諦めましたが、「brタグ」連打で改行するとSEO的に良くないらしい。
ので、ちょっと面倒ですが「pタグ」を使って書いていくことにしました。
正直、pタグって変な改行入るし、好きじゃないんですけどね...

あと、強調表示として「strongタグ」と「bタグ」があるかと思いますが、これはどちらでも良いらしい。
昔はstrongタグ使わないとNGだったらしいですが、現在は大差ないとのこと。bタグが楽でイイネ!

上記の強調表示に不随して、ページごとに押したいキーワードを太字にすると良いらしいです。
旧日誌では、全然関係ないワードを強調表示にしてましたが、新日誌からは自重します...多分。


2.サブドメインGET。

取りに行こ!
...て打とうとしたら、鶏に逝こ!に変換されたんだけど、どういうことよ。

↑ 早速無駄な強調表示を使う上級テク。

Xserverを利用している人は、公式ページ参照。

サクっと完了。
反映待ちになっているので、待っている間に夕飯食べてきます。


19:00

3.新日誌を書き始めるにあたって、不具合出そうなphpの整備。

既にトップページの最新記事がエラー起こしているので、修正します。
ついでに画像が増えてきたので、日誌用のフォルダ作って整理した。

            
php ※showNew.php 一部抜粋。
// 並び替えして出力
$files = array_merge(glob( 'dokugaku/diary/*.*' ),glob( 'dokugaku/new-diary/*.*' ));
$num = 0; //記事数
usort( $files, $sort_by_lastmod );
foreach( $files as $file ) {
    if($num<3){
        $categoryPart = explode("/", $file);// $categoryPart[1]; フォルダ
        $fileURL = basename( $file );
        $imgURL = explode(".", $fileURL);//day□□
        $theDay = explode("day", $imgURL[0]);//日付
        $imgURL[0] = 'dokugaku/img/'. $categoryPart[1]. '/'. $imgURL[0]. '.jpg';
        $fileURL = 'dokugaku/'. $categoryPart[1]. '/'. $fileURL;

        $num2 = (int)$theDay[1];
        while($num2 > 0) {//画像チェック
            if(file_exists($imgURL[0])){ //ある
                break;
            }else{ //ない
                $num2--;
                $imgURL[0] = 'dokugaku/img/'. $categoryPart[1]. '/day'. $num2. '.jpg';
            }                  
        }


php ※forDiary.php 一部抜粋。
// new-diaryと0日目を回避
if($categoryPart[2]=='diary' && (int)$diaryDay[0]==0){
    //何もしない。
}else if($categoryPart[2]=='diary' && 28<=(int)$diaryDay[0]){ //28日目以降に画像は付けない。
    //何もしない。
}else if($categoryPart[2]=='new-diary' && (int)$diaryDay[0]==1){
    echo '<br>'.
    '<div class="baText">'.
    '   <p><a href="../img/new-diary/day1.jpg" target="_blank">'.
    '   <img class="baPic" src="../img/new-diary/day1.jpg" alt="1日目"></a></p>'.
    '</div>';
}else{
    //画像
    echo '<br>'.
        '<div class="baText">'.
        '   <p>Before: '. mojicheck($backDay). '日目</p>'.
        '   <p><a href="../img/'. $categoryPart[2]. '/day'. mojicheck($backDay). '.jpg" target="_blank">'.
        '   <img class="baPic" src="../img/'. $categoryPart[2]. '/day'. mojicheck($backDay). '.jpg" alt="Before: '. mojicheck($backDay). '日目"></a></p>'.
        '</div>'.
        '<div class="baText">'.
        '   <p>After: '. mojicheck($diaryDay[0]). '日目</p>'.
        '   <p><a href="../img/'. $categoryPart[2]. '/day'. mojicheck($diaryDay[0]). '.jpg" target="_blank">'.
        '   <img class="baPic" src="../img/'. $categoryPart[2]. '/day'. mojicheck($diaryDay[0]). '.jpg" alt="After: '. mojicheck($diaryDay[0]). '日目"></a></p>'.
        '</div>';
}
            
        

19:30

4.仮のトップページ作成する。

今使用しているindex.htmlをそのまま流用します。

            
html ※index.html全文
<!DOCTYPE html><!--HTML使用宣言-->
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style-sp.css">
        <meta charset="utf-8">
        <title>気まぐれ製作所</title>
        <meta name="description" content="これあったら便利だな、というツール・ソフトウェアを気が向いたときに作るところ。気ままに更新してるので、気が向いたときに訪問してください。">
        <meta name="robots" content="index">
        <link rel="icon" type="image/vnd.microsoft.icon" href="img/icon.ico">
        <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="img/icon.ico">
    </head>
    <body>
        <header>
            <div class="headerImg">
                <a href="https://software.ki-luck.info/">ココにタイトル画像持ってくる。alt="気まぐれ製作所" title="気まぐれ製作所"></a>
            </div>
            <nav class="headerNav">
                <ul class="menu">
                    <li>HOME</li>
                    <li>メニュー1</li>
                    <li>メニュー2</li>
                    <li>メニュー3</li>
                </ul>
            </nav>
        </header>
        <div class="middle-body">
            <div>
                <h1>ようこそ。</h1>
                <p>topページ。</p>
            </div>
        </div>
        <footer>
            <div>フッターだよ。</div>
        </footer>
        <br><br><br>
    </body>
</html>
            
        

5.Google Analyticsの設定。

Google Analyticsを追加で作る用に説明。

1.Google Analyticsにログインする。




2.「プロパティを作成」クリック。

GoogleAnalytics1




3.青枠を適宜入力&選択し、「詳細オプションを表示」クリック。

GoogleAnalytics2




4.赤矢印辺りにあるポチをクリックすると、下記のような画面に切り替わるので青枠を入力して「次へ」クリック。

GoogleAnalytics3




5.質問に回答して「作成」クリック。

GoogleAnalytics4




6.画像のように「-GA4(0123456)」的な感じになっている場合、そこをクリックし「UA-0123456」的なものに変更。

GoogleAnalytics5




7.下記のような画面に変わったら「トラッキング情報」クリック。

GoogleAnalytics6




8.「トラッキング情報」をクリックし、青枠内をコピー。

GoogleAnalytics7




9.HPのheadタグの最後に貼り付ければ終了。※</head>の直前ね。





20:30

6.サイトロゴの作成。

仮のやつをサクっと作ってきます。

20:31

すんごい雑なの作ったw


22:00

cssを少し弄って、今日はコレにて終了とします。

            
css 全文
@charset "utf-8";
@media only screen and (min-width: 1000px) {
  /*全体--------------*/
  body{
    background-color:	 #ffffff;
    width:1000px;
    text-align: center;
    margin: 0 auto;
  }
  .middle-body{
    background-color: #ffffff;
    width: 100%;
  }
  
  /*ヘッダーメニュー --------------------*/
  header{
    width: 100%;
    background-color:#ffffff;  
  }
  header .titleImg{
    width: 20%;
    display: inline-block;
    vertical-align: middle;
  }
  header nav{
    width: 75%;
    display: inline-block;
  }
  header ul{
    list-style: none;
  }
  header ul li {
    width: 20%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
  }

  /*フッターメニュー --------------------*/
  footer{
    width: 100%;
    background-color:#ffffff;  
  }
  footer nav{
    width: 100%;
    display: inline-block;
  }
  footer ul{
    list-style: none;
  }
  footer ul li {
    width: 20%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
  }
}
            
        

折角2回目なので、綺麗に立ち上げていこ~。





作成日:2021/02/01 - 更新日:2021/02/01

≪ HOME≪ 一覧に戻る ≫2日目 ≫

HOME > 新日誌一覧 > 1日目:お久しぶりぶり。