カテゴリー: ホームページ製作

カテゴリー
ホームページ製作

font awesome6をSCSSで使うときの注意点

font awesome6をscssで使ってみたら、正しく理解してないところがあった。とりあえずダウンロード。今日現在は、6.4.0だった。

下記のサイトの通りであるが、分かりにくかったところ。

https://qiita.com/sota_shimizu/items/8746aaf0c2d29bcba6e2

ポイント

  • $fa-font-pathは、cssファイルから、webfontsまでのパスを書くこと。
  • webfontsファイルも一緒にサーバーにアップロードすること。

$fa-font-path:”../webfonts”;と書かれているが、実際にcssファイルが置かれているところからwebfontのパスが違えば変更すること。_variables.scssに書く必要もない。

index.htmlファイルはこんな感じ。

scssファイルはこんな感じ。cssファイルからwebfontsへのパスを正しく書く。疑似要素の書き方は、以前とさほど変わらず。

index.htmlのフォルダ構成はこんな感じ。cssファイルも同じフォルダに置いた。webfontsファイルは、ダウンロードしたfontawesomeファイルにあるので、コピーした。

index.htmlファイルを開いてみます。

無事、font awesome6のアイコンが反映されてました。unicodeを使っても、アイコンが反映されてました。

それから、_variables.scssの不要なところを削除すると、作られるcssファイルが軽くなります。

カテゴリー
ホームページ製作

アクセスカウンタが2ずつ増える

アクセスカウンタを作ってみたら、2ずつ増え、その原因が分かりました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>

</head>
<body>

<?php
$counter_file = 'counter.txt';
$counter_lenght = 8;

$counter = NULL;

$fp = fopen($counter_file, 'r+');

if ($fp){
    if (flock($fp, LOCK_EX)){
        $counter = fgets($fp, $counter_lenght);

        print('count:'.$counter);

        $counter++;

        print('count:'.$counter);

        rewind($fp);

        if (fwrite($fp, $counter) === FALSE){
            print('ファイル書き込みに失敗しました');
        }

        flock($fp, LOCK_UN);
    }
}

fclose($fp);

print('count:'.$counter);
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
$.ajax({
  type: 'GET'
}).done(function(data, status, xhr) {
  var serverDate = new Date(xhr.getResponseHeader('Date'));

  $('#server').text(serverDate);
});
</script>

<p>サーバーの設定時刻<br><span id="server"></span></p>

</body>
</html>

至って普通のアクセスカウンタを設置し、jqueryを読み込ませ、ajaxを読み込ませるだけ。そうすると、アクセスカウンタが2ずつ増加した。

分かったこと

  • アクセスカウンタは、読み込み時は増えない。+1足した時と書き込み時+1増える。
  • jqueryとajaxの場所を移動させても、アクセスカウンタは2ずつ増える。
  • ajaxを失くすと、アクセスカウンタは1ずつ増える。
  • jqueryを失くすと、アクセスカウンタは1ずつ増えるが、ajaxは動かない。
  • jqueryにdefer,asyncを加えると、アクセスカウンタは1ずつ増えるが、ajaxが動かない。
  • jqueryにdefer,asyncを加え、ajaxをonloadイベントで呼び出すと、アクセスカウンタは2ずつ増え、ajaxは動く。

【jqueryとajaxの関係が書かれたブログ】

defer属性で読み込んだjQueryプラグインの関数をインラインで呼び出す際の注意点

アクセスカウンタが2ずつ増える原因と、jqueryとajaxの関係が分かりましたが、問題の解決はできませんでした。

カテゴリー
開発環境 ホームページ製作

Browserslist: caniuse-lite is outdated.

npx webpackをすると、Browserslist: caniuse-lite is outdated.Please run:npx browserslist@latest –update-db

の警告が出るようになった。そこで調べてみると、下記のサイトに分かりやすい解説が載っていた。

https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/

カテゴリー
ホームページ製作

J3サイトの修正作業まとめ

【J3サイト一覧】
http://toushin.konjiki.jp/

旧

  • bootstrap 4.6.0
  • jquery 3.5.1
  • popper 1.16.1
  • webpack 5.2.2

main.jsとsub.jsに別れていた。main.js 622kbで重い。

新

  • bootstrap 5.1.3
  • jquery 3.6.1
  • popper@core 2.10.2
  • webpack 5.6.0

main.jsに一本化。main.jsを軽くする。

  • ヘッダー、activeの書く位置が移動。
  • ハンバーガーメニューが開かない、動かない。
  • デフォルトのフォントが変化。
  • テーブルのth,tdの境界線の色が変化。
  • リンクにアンダーバーが付いた。

これらを旧タイプのデザインに近づける。

main.jsとstyle.cssの分離する作業をする。

旧main.jsでの点数。622kb。

新main.jsでの点数。448kb。

新main.jsとstyle.cssに分離する。167kb、93kb。

jsとcssを分離したら、点数が悪くなったけど、やりたかった作業なので、そのままにした。

【webpack5の参考サイト】
https://yumegori.com/webpack5-setting-method

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

【npm install後のパッケージ確認】
https://dackdive.hateblo.jp/entry/2016/10/10/095800

【javascriptのimport】
https://qiita.com/TakamiChie/items/4d92c7e80a9d4cce0178

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

【フォントの設定方法】
https://willcloud.jp/knowhow/font-family/

【CSS】font-familyの正しい指定方法と書き方（効かない原因やGoogle Fontsの使い方も）

【bootstrap5の最低限取り入れ】
https://qiita.com/shouchida/items/2c3fc4586de66a067dfd

https://bootstrap-guide.com/customize/sass

【bootstrap5のナブバー、ナブトグル】
https://bttb.jp/bootstrap5/index.php?strkey=navbar%20navbar-expand-lg%20navbar-dark%20bg-dark

【aria-current=”page”の意味】
https://temari.co.jp/blog/2021/07/12/aria-current-2/

次回はクリックカウンターを付けたい。google apps scriptでなんとかなりそう。

カテゴリー
開発環境 ホームページ製作

wordpressをdockerに複製する

wordpressサイトを自分のパソコンのdockerにコピーする

  1. レンタルサーバー(mixhost)にあるwordpressのコピーサイトを作る。
    1. コピーしたサイトで設定→表示設定より、検索エンジンがサイトをインデックスしないようにする。
    2. 簡単にログインできるよう、新規に管理者を作る。
    3. All-in-One WP Migrationをプラグインで入れる。
    4. 不要なプラグインを無効化し、削除する。
    5. All-in-One WP Migrationの高度なオプションで、メディアライブラリをエクスポートしない、テーマをエクスポートしないにチェックを入れ、エクスポート先をファイルにしてエクスポート。
    6. メディアが入っているuploadフォルダをダウンロード。
    7. 自作テーマが入っているフォルダをダウンロード。
  2. 自分のパソコンに入っているdockerでwordpressを立ち上げる。
    1. 自分のパソコンに専用フォルダを作り、そのフォルダからdockerを起動し、wordpressを入れる。

      npm i @wordpress/env –save-dev
    2. そのフォルダのpackage.jsonに書き込む。

      “scripts”: {“wp-env”: “wp-env”}
    3. そのフォルダに.htaccessファイルを作り、書き込む。

      php_value upload_max_filesize 128M
      php_value post_max_size 128M
      php_value memory_limit 256M
      php_value max_execution_time 300
      php_value max_input_time 300

      【参考サイト】
      https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/
    4. そのフォルダにwp-contentフォルダを作り、ダウンロードしたuploadフォルダと自作テーマフォルダを入れる。
    5. そのフォルダに.wp-env.jsonを作り、書き込む。

      {“plugins”: [    “https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.44.zip”  ],
      “themes”: [ “./wp-content/themes/自作テーマフォルダ” ],
      “mappings”: {“.htaccess”: “./.htaccess”,”wp-content/uploads”: “./wp-content/uploads”}
      }

      【参考サイト】
      https://qiita.com/akinov/items/5554cad0aaedb53e5aed
    6. wp-envでwordpressを立ち上げる。自然と同期される。

      npm run wp-env start

      【参考サイト】
      https://tomosta.jp/blog/wordpress%E3%81%AE-docker%E7%92%B0%E5%A2%83%E3%81%8C%E7%B0%A1%E5%8D%98%E3%81%AB%E3%80%82wp-env%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/
    7. wordpressにログインし、日本語設定に変更する。
  3. dockerのwordpressの作業。
    1. All-in-One WP Migrationを有効化し、インポートファイル容量が128MBになっていることを確認する。2MBだったら、同期がうまくいってないので、.htaccessファイルを確認。
    2. All-in-One WP Migrationのエクスポートファイルを実際にインポートする。
    3. インポート後、ログアウトし、最初に作った管理者でログインできるかどうか確認する。
    4. wordpressサイトが表示されるか確認する。
    5. 固定ページが表示されるか確認する。されない場合、設定→パーマリンク設定の変更保存をクリック。
    6. All-in-One WP Migrationを無効化して、終了。