フレームワーク初学者が、Web制作でBootstrap3を使ってみた | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

フレームワーク初学者が、Web制作でBootstrap3を使ってみた

フレームワーク初学者が、Web制作でBootstrap3を使ってみた


個人的には、あまりフレームワークのたぐいが好きではないので今までWeb制作案件でフレームワークを使わないようにしていました。

しかし、今更ながら「Bootstrap3系」を使って自分の仕事サイトのModxのテンプレートと当ブログ「Webクリエイターな備忘録」のWordPressのテンプレートを作ってみました。

また両サイトのデザインが、黒を基本カラーにした色使いで「かなり怪しい」イメージだったので、オレンジベースのデザインに変更しました。

Bootstrap3の基本データをダウンロードする。

201501xx-2


Bootstrapを使用する為に、まずは基本データをダウンロードしないと始まりませんのでここからダウンロードします。

ダウンロードしたデータを「解凍」し中身を確認してから作業に移ります。

基本的にModx用もWordPress用も今使っているテンプレートに、Bootstrap3のcssやjsファイルを読込んでからBootstrap3で使いたい機能のclass名を記述していく感じなのであまり深く考える事もなく使用できました。

jQueryで実装していたことをBootstrap3の機能に置き換えたりできたので不要になったスクリプトを読込まずに同じことを表現することができソースの軽量化ができたと思います。

フレームワークを使ったWeb制作を増やしていきます

201501xx-3


今回ModxとWordPressのテンプレートを作ったのですが、Bootstrap3のすべての機能を使ったわけではありません。まだいろいろな機能があるようで、今回は使用しない機能や使用できるのに自分の理解不足により使用していない機能が多くあるようです。

今後は、少しずつBootstrap3を使ってのWeb制作を増やしてみたいと考えています。

高評価!Bootstrap3で作ったテーマ変更して

201501xx-4


また当サイトの表示が重く、一部の記事でスクリプトエラーが出ていましたので修正致しました。

スクリプトエラーの原因は、ソースコードを表示するのに「Syntax Highlighter Evolved」プラグインを使用していたのが原因でした。

以前作ったテーマファイルか、ほかのプラグインと競合していたのか、「Syntax Highlighter Evolved」プラグインでスクリプトエラーが出ていましたので、プラグインを停止し記述を<pre>タグにすべて置き換えたところ、エラーを吐かないようになりました。

表示の重さもBootstrap3を使って作ったテーマに変更したところ、以前よりスムーズに表示するようになりました。実際に「GTmetrix」にて、計測したところ「D評価」から「A評価」となり、かなり改善されました(^o^)

今回の記事で参考にさせていただいたサイト

WordPressで画像挿入時にwidthとheightを削除する方法
レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた

コメントは受け付けていません。