SAMURAI TERAKOYA

Bootstrapの無料テンプレートを使用し、オリジナルテーマを作成する方法

Bootstrap

本記事では、Bootstrapの無料テンプレートのダウンロード手順から、テンプレートを使用し、WordPressのオリジナルテーマを作成する方法までご紹介させて頂いております。注意点としましては、WordPress環境は、個々で準備出来ることを前提としてますので、内容としては省いておりますため、宜しくお願い致します。

 

✅   Bootstrapテンプレートの使い方が分かる
✅   Bootstrapテンプレートを用いたオリジナルテーマの作成方法
✅   テーマのイメージ画像を配置する方法が分かる

Bootstrapテンプレート

Bootstrapのテンプレートとは、HTML/CSS, javaScript, jQuery,Boostrapをベースに作成されたもので、以下の特徴が御座います。

   レイアウトデザインが既に固まっている
   無料で使用できるものも多い
   レスポンシブに対応している
   JavaScript/jQuery(アニメーション)も実装されている
   デザインの種類が数百以上ある
   HTML/CSSを変更するだけでカスタマイズが可能
以下のサイトからテンプレートをダウンロードできます。

◇  THEMA WAGON

Free Archives
Searching for high-quality free demo HTML5 website templates? Download responsive HTML5 CSS3 website templates & Bootstrap themes. Free for commercial use.

◇  W3Layouts

Templates and Themes » W3Layouts

テンプレートのダウンロード

 

では、実際にBootstrapテンプレートのダウンロードをしてみましょう。
今回は、THEMA WAGONというサイトに掲載されている「FINDSTATE」というテンプレートを使用します。

公式サイトへアクセス ⇨ 検索欄より 「FINDSTATE」 と検索

検索結果の中から赤枠で囲っているものと同じものを選択


 

ダウンロードの際、初回の場合は、メールアドレスの登録を求められますが、一応、使用するのは、フリーメール(Gmail, Yahoomail…)をお勧めします。

登録したメールアドレス宛に本登録用のリンクが送られますので、クリックしますと、ダウンロードが開始されます。次回からは、Download Freeのボタンが表示されるようになりますので、今回は、メールアドレスの登録をしましょう。

ダウンロードが始まると、保存先を指定しますが、今回は、デスクトップに保存しましょう。

デスクトップ上にダウンロードされたzipファイルが確認出来たら解凍しておきます。 解凍出来たら完了です。

 

スポンサーリンク

WordPress環境の準備(参考)

◇  Local by fly wheel

Local by fly wheel インストール & サイト作成〜言語変更方法
WordPressでWeb制作を行っていくためには、PC上で作業を行うためのローカル環境を準備する必要があります。そこで、本記事では、ローカル環境として使用するLocalbyflywheelのインストールとサイトの作成までの手順をご紹介させて頂いております。

◇  MAMP

【2021年版 MAMPでWordPressをインストールする方法】
今回は、「MAMP(マンプ)」というフリーのソフトウェアを利用して、WordPressをローカル開発環境(PC)でインストールする方法を説明します。   なお、MAMPはMacを想定したソフ

◇  XAMPP

XAMPPを使ってローカルでWordPressを動かそう②【XAMPPでWPを動かす手順編】
今回は「XAMPP でどのように WordPress を動かすのか? データベースの作り方、複数 WordPress は動かせるの? 効率よく利用するための小技」などなど、XAMMP で WordPress を動かすまでの手順を最後まで紹介します。

オリジナルテーマの作成

 

最後に、ダウンロードしたBootstrapテンプレートをオリジナルテーマとして、WordPressへ反映させる作業を行なっていきましょう。

テンプレートの移動

 

デスクトップに配置していると思いますが、findstate-masterフォルダを準備して頂いたWordPress環境下のwp-contentフォルダ内にあるthemesフォルダへ移動してあげる必要が御座います、

 

index.phpに名前を変更

 

続いて、オリジナルテーマを作成するために必要なファイルの一つであるindex.phpを準備していきましょう。
作業としては新規で作成するのではなく、findstate-masterフォルダ内のindex.htmlの拡張子を.phpに直すだけOKです!

style.cssを作成

 

オリジナルテーマを作成する上で、index.phpのみでは、いけません。 テーマ用のstyle.cssを作成し、findstate-masterフォルダ内に保存しましょう。
また、テーマ名を記述してあげないといけませんので、コードとして以下を記述してあげてください。


/* 
  Theme Name: findstate-master
  Author: 制作者名
  Description: テーマの説明
*/

テーマのイメージ画像を設定

 

ここについては任意ではありますが、テーマのイメージ画像の設定方法についても確認していきましょう。
方法は、至って簡単で、好きな画像で構いませんので、ファイル名をscreenshotにしてあげればOKです。拡張子は、.png, .jpg, .jpegであれば大丈夫です。

テーマ一覧に反映されているかを確認する

 

ここまで、準備が出来ましたら、早速、WordPress環境にログインし、テーマ一覧に今回、作成したオリジナルテーマが反映されているかを確認してみましょう!

 

 

確認できましたでしょうか?? もし、表示されない/反映されない場合は、再度、各ファイルの配置場所やindex.phpに変更できてるか, style.css内の記述を見直してみましょう。

 

まとめ

✅   Bootstrapテンプレート
⇨ ナビゲーションメニューやフォームなどのUI(ユーザーインターフェース)の要素が既に定義されているテンプレート
✅   Bootstrapテンプレートを用いたオリジナルテーマの作成
⇨ ダウンロードしてきたBootstrapテンプレート内のindex.htmlをindex.phpに変換し、新規でstyle.cssを作成する
✅   テーマのイメージ画像を配置する方法
⇨ テーマフォルダ内にscreenshot.png(.jpgなどもOK)を作成することで、テーマのイメージ画像として反映される

コメント

タイトルとURLをコピーしました