この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスのためのHTML5+CSS3によるレスポンシブ×フラットデザイン 第四回目 オリジナルテンプレートの配布

今回は色々と考えた結果、先にオリジナルテンプレートを配布しようと思います。
前回、基本をやっていましたがいきなり完成形です。

というのもひとつひとつカスタマイズの方法を説明していくと時間がかかり、かなりの回数になるからです。
なので、先にテンプレートを配布します。

オリジナルテンプレートのスクリーンショット
オリジナルテンプレートのスクリーンショット

テンプレート名は「mhs」です。後ほどダウンロードのリンクをご案内します。
このテンプレートの特徴は、HTML5CSS3を用いたレスポンシブフラットなデザインです。

レスポンシブについてですが、最近の大画面モニターを考慮して960pxではなく1260pxにしています。これがPCサイズです。ブラウザを狭めていくと979pxに達するとタブレットサイズへとレイアウトが変わります。
さらに649pxまで狭めると(iPhone・Android)サイズへとレイアウトが変わります。

PCのブラウザだと見え方が少し変わりますが、スマホを持っていればこのブログを見てみて下さい。
右側のサイドバーウィジェットが下部に移動して最適化されていると思います。

「mhs」は広い本文スペースに横幅可変機能が付いています。見やすい記事を書くのに非常に適しています。
スマホでも見やすいはずです。コラムやチュートリアルを書くのにも適しています。

テーマの適用方法ですが、ファイルを解凍したらワードプレスのテーマフォルダにそのままアップロードして下さい。
テーマフォルダはワードプレスがトップレベルにインストールしてあれば以下の場所にあります。

/wp-content/themes/

ここにアップロードするとこのようになるはずです。

/wp-content/themes/mhs

「themes」の中には既にインストールしたテーマがいろいろと入っていると思います。

次に管理画面から [ 外観 ] → [ テーマ ] を選択するとテーマ一覧の中に「mhs」があると思います。
このテーマを有効にすればインストールは完了です。
ただし、このままだとミリオンハイスクールのスタイルなので自分のブログ用にカスタマイズしなければなりません。
取り急ぎ、CSSでカラーを変更しないのならばヘッダーのビジュアル(看板)を変えるだけで使えます。

ヘッダービジュアルについては1260px×300pxで作ってあります。縦サイズが大きくなるのは構いません。横幅は1260pxで作って下さい。
画像については全て「images」フォルダに入っています。

またスタイルシートですが5種類あります。

  • PC版を表示するためのCSSとして「style.css」
  • タブレッド版を表示するためのCSSとして「style-m.css」
  • スマホ版を表示するためのCSSとして「style-s.css」

とがあります。

この他にプラグイン独自のスタイルを記述したスタイルシートが2つあります。
プラグイン独自のスタイルについてはインストールしているプラグインによって個別に変わります。

  • PCとタブレッド版のCSSとして「plugin-custum.css」
  • スマホ版のCSSとして「plugin-custum-s.css」

例えば、スマホ版の見栄えを変更したければ「style-s.css」を編集すればいいことになります。
おそらくはレイアウトはそれほど変えることはないと思うので、カラーの変更をすることになると思いますが、カラーについては「#444444」とか「white」といったカラーコードやカラーネームを変えるだけで済みます。

講座の回数がかなり長くなりそうなので、まずやるべきことはヘッダーのビジュアル(看板)を作ることです。

これについては画像編集ソフトが必要になると思います。
フリー素材を拾ってきて文字をシンプルに重ねる方法もあります。スキルに応じて作ってみてください。

カスタマイズについては次回より順次解説していきます。

テーマのダウンロードはこちらから

関連記事