WordPressのテーマをBootstrap3で作成する方法を勉強した苦労話

スポンサーリンク

新生Amamob.comにようこそ!訳ありでLivedoorブログから再びWordPressに戻って参りました。新しいロゴは水草と魚のシルエットです。さて、今日はグリッドシステムを採用したレスポンシブデザインを簡単に作れるTwitter Bootstrap3からWordPressのオリジナルテーマを作成する方法とその苦労話を少々ご紹介しますね。

WordPressのテーマをBootstrap3でレスポンシブ化

グリッドシステムのレスポンシブデザイン

まず出来上がりのデザインの確認です。今スマホでこのブログを確認している方はお分かりと思います。以下の画像の通りです。

image

横向きはこんな感じです。

2014-05-01_16h00_03

PCでの閲覧の場合、ブラウザの幅を変えるとサイトの幅が伸縮するだけでなく、サイドバーのウィジェットがメインカラムの下へ移動します。これがGoogleがおすすめのレスポンシブなわけです。

Bootstrap 3を利用してテーマ作成

でもスポンシブなWordPressテーマを一から作ろうとしたら私の能力では大変な時間がかかってしまいます。そこで、グリッドシステムを採用したレスポンシブなウエブサイトを簡単に利用できるBootstrap を利用しました。

利用法はググれば日本語解説サイトが沢山でてきますし、WordPressのテーマに採用する方法も沢山出来ます。主にお世話になったのは以下のサイト。

作業時間は片手間ですが2週間以上もかかりました。完全にBootstrap3のCSSを利用するのではなく、かなりオリジナルなCSSを加えました。そのため「あーでもない!こうでもない!」と悩みまくりました。おかげでかなり勉強になった次第です。

WordPressの勉強

以前のWordPresテーマは「Suffusion」 でした。以前は知識が限られていましたし、それにブログを書くことに集中したかので、そのような既存のテーマを利用していました。

しかしブログに対する愛着を深めるために、そして将来性を考えてWordPressを一から勉強しました。参考にしたのは以下の2つの教科書です。むちゃくちゃ分かりやすかった。

ちなみにブログのアイコン(ファビコン)は新しいロゴのイラストを採用しました。印象が悪いですね。でも気に入っています。

2014-05-01_16h59_45

まとめ

今回WrodPressのテーマを一から作成したことをきっかけに多くのテクニックや知識に触れました。ですからブログのネタとして吐き出したくてたまりません。でも本格的なブログ更新はゴールデンウィーク以後となります。お楽しみに。

スポンサーリンク

シェアする

フォローする

関連記事