Bootstrap ならこんなに簡単にレスポンシブ対応のWordPressオリジナルテーマが作れますよ

スポンサーリンク

数か月前にライブドアからWordPressに返り咲いたこのブログ、元の無料テーマを利用せずに完全オリジナルテーマで仕切り直ししました。とはいっても、Bootstrap というスマホ重視のレスポンシブテーマを作れるCSSフレームワークを活用しました。ど素人の私でもそれを可能にしてくれた参考ブログやサイトを手順ごとにご紹介します。

Prepros AppPrepros AppBootstrap3を活用したスポンシブ対応のWordPressオリジナルテーマ作成方法

ブログやサイトの訪問者の半分近くはスマホを利用しています。我がブログの訪問者も例外ではありません。そこでGoogleはレスポンシブテーマを利用して、HTML構造は共通化してCSS(スタイルシート)でモバイル表示やPC表示を切り替えることを勧めています。メンテナンス性に優れているからです。

でもレスポンシブ化はかなり勉強と骨が折れる作業が必定です。そこで役立つの Bootstrap(現時点でのバージョンは3)です。ある程度HTML&CSSに関する知識がある方ならとても簡単に、レスポンシブ対応のWordPressのテーマを作成できちゃいます。

以下は手順ごとに私が参考にしたWebページです。

Bootstrapとは

まず「Bootstrapとはいったい何?」という初心者が参考にしたいブログ記事やサイトです。

WorPressをローカルにインストール

WordPressのテーマ作成を直接本番ブログで行う愚かな人はいません。そこで、PC(ローカル)にWordPreeの環境を構築して、[/wp-content/themes/]内でオリジナルテーマを作成してゆきます。

Windowsならおススメは Bitnami です。データベースやWordPressも自動で構築してくれます。

WordPressの基本テーマの作成

まずはBootstrap のグリッドCSSを利用して、基本的なHTMLの構造をつくりあげます。

Bootstrapに最適化する

最終的にBootstrapで動くように、上記で作成した基本HTMLのheaderなどをいじります。

オリジナルCSSを追加する

最後に、デザインを個性的にするために、オリジナルCSSを追加します。その方法は以下の3つです。

  • Bootstrapのlessファイルを直接調整してコンパイルする
  • lessファイルにuser.lessみたいなファイルを追加して、そこに記述し読み込ませる。
  • プラグインJetpackなどを利用して、簡単にオリジナルCSSを追加する。

上2つの方法を紹介したWebページはググれば沢山見つけられると思いますが、少々面倒です。おススメは、Bootstrap を使う意味が半減しそうですが、プラグインJetpackの「カスタム CSS」機能を利用することです。レスポンシブテーマにも活用できます。これを利用するなら、万が一別のテーマに変更しても、かなりの程度デザインが反映されます。

ちなみに私は、2番目を利用しています。コンパイラは Prepros App の無料版を使っています。

以上、大雑把ですが、簡単にWordPressのレスポンシブテーマを作成できるCSSフレームワークBootstrap活用法でした。(本当に大雑把でですみません。でも私はそれでこのテーマを自力作成できました。いつまで利用するか分かりませんが、結構愛着があります。)

スポンサーリンク

シェアする

フォローする

関連記事