Tom Works

Amazon Web Service, Bootstrap5, WordPress, WordPressオリジナルテーマ

第4章 2.2 ① bootstrap.css ② bootstrap.min.css ⑤ bootstrap.bundle.js ⑥ bootstrap.bundle.min.js を準備する




new:

解説) Bootstrap5 の公式サイトから2つの CSS ファイル( ① bootstrap.css ② bootstrap.min.css )と2つの JS ファイル(⑤ bootstrap.bundle.js ⑥ bootstrap.bundle.min.js)をダウンロードして準備します。 

Noプログラム名解説
bootstrap.cssBootstrap5 の公式サイトからダウンロードします。実際に使用するのは ② bootstrap.min.css ですが、後で確認などチェックができるように ① bootstrap.css を用意します。
bootstrap.min.cssBootstrap5 の公式サイトからダウンロードします。こちらが実際に使用されます。
Noプログラム名解説
bootstrap.bundle.jsBootstrap5 の公式サイトからダウンロードします。実際に使用するのは ⑥ bootstrap.bundle.min.js ですが、後で確認などチェックができるように ⑤ bootstrap.bundle.js を用意します。
bootstrap.bundle.min.jsBootstrap5 の公式サイトからダウンロードします。こちらが実際に使用されます。

以下に公式サイトからのダウンロード方法を記載します。

Bootstrapの公式サイトのアクセスします。(ここでは日本語バージョンのサイトにアクセスします。)以下のURLをクリックしましょう。

https://getbootstrap.jp/

↑クリックすると上記の画面が表示されます。中央部にある「ダウンロード」をクリックします。

「コンパイルされたCSSとJS」欄にある「ダウンロード」ボタンをクリックします。

zipファイル「bootstrap-5.3.0-dist.zip」がダウンロードされますのでダブルクリックします。

zipファイル「bootstrap-5.3.0-dist.zip」が解凍され「bootstrap-5.3.0-dist」フォルダが現れますのでダブルクリックします。

「bootstrap-5.3.0-dist」直下にcss フォルダとjs フォルダがあります。まず「css フォルダ」を開きましょう。ダブルクリックします。

css フォルダ」直下には複数のファイルがありますが、ここでは一番上の「bootstrap.css」と3番目の「bootstrap.min.css」を使用します。この2つのファイルをオリジナルテーマ「Tom Works Dental」のフォルダの css フォルダにコピーします。

↑これで① bootstrap.css ② bootstrap.min.css の2つファイルが準備できました。(2つの自作CSS ファイル(tom-custom.css、tom-editor.css)はこの後で準備します。)

次に「js フォルダ」を見てみましょう。css フォルダと同様に直下には複数のファイルがあります。ここでは一番上の「bootstrap.bundle.js」と3番目の「bootstrap.bundle.min.js」を使用します。

この2つのファイルをオリジナルテーマ「Tom Works Dental」のフォルダの js フォルダにコピーします。これで⑤bootstrap.bundle.js ⑥ bootstrap.bundle.min.js の2つファイルが準備できました。

第4章 1.13 ⑩ functions.php のソースコードと詳細
解説) 今回作成する【歯科クリニックのWebサイト】にいろいろな機能を追加するプログラムです。
第4章 2.3 ③ tom-custom.css のソースコードと詳細
解説) 【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5 を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。



TomWorksProfileIcon TomWorksProfileLogo

フリーランス

働いていた会社が外資になり10年間外国人と一緒に働きました。

今は好きでIT学習やプロボノ活動をリモートでしています。

このサイトでは今までの経験や学んだITの事例などを紹介します。

Amazon オーディブル