Bootstrap3を使ってみた | Webクリエイターな備忘録

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

Bootstrap3を使ってみた

201501xx-1
個人的には、あまりフレームワークの類が好きではないので、今までフレームワークを使用しないようにしていましたが、今更ながら「Bootstrap3系」を使用してみました。
今回、Bootstrap3を使用して作ってみたのは、私のお仕事サイトのテンプレートとこの備忘録ブログ(Wordpress)のテンプレートです。

また、今まで両サイトともに黒ベースの色使いで「かなり怪しい」イメージだったので、オレンジベースの色味に変更してみました。

Bootstrapをダウンロード

201501xx-2
Bootstrapを使用する為には、まずダウンロードしないと始まりませんので、ここからダウンロードします。
ダウンロードした物を「解凍」し中身を確認!し、作業に移ります。
基本的に既存のテンプレートにBootstrap3のcss、jsファイルを読込んでおいてから、使いたい機能の各classを振っていくって感じなので、あまり深く考える事もなく使用できました。
jQueryで実装していた事をBootstrap3に置き換えたので、多くのスクリプトを読込まずに同じことを表現する事ができソースの軽量化ができたと思います。

まだまだ…(-ω-)

201501xx-3
今回テンプレートを制作してみて、Bootstrap3の全てを使用したわけではありません。
まだいろいろなプロパティが、あるようで、今回は使用しない物や、使用できるのに解らず使用していない物が多くあると思います。
今後は、少しずつBootstrapの使用回数を増やしていろいろと制作して行こうと考えています。

Bootstrap3テーマ変更して

201501xx-4
また当サイトの表示が重く、一部の記事でスクリプトエラーが出ていましたので、修正致しました。
スクリプトエラーの原因は、ソースコードを表示するのに「Syntax Highlighter Evolved」プラグインを使用していたのですが、
以前のテーマファイルか、何かのプラグインと競合していたのか?スクリプトエラーが出ていましたので、<pre>タグに全て置き換えたところ、エラーを吐かないようになりました。

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

参考サイト

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

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