» 2013 » 10月のブログ記事

01

 

1.レスポンシブウェブデザインとは?

 
既に知っている方も多いとは思いますが、まずレスポンシブウェブデザインについてご説明します。

レスポンシブウェブデザインっていうのは、サイトにアクセスしてくる端末をUserAgentなどから
識別して、それに最適化したWEBサイトを表示させる、というものです。

 

例えば、アクセス元がパソコンなのか、iPhoneなのか、タブレット端末なのか、で
全然画面サイズや縦横比のレイアウトが違いますよね。

それぞれの端末に最適化したレイアウトで表示させることで、文章の内容やコンテンツを
読んで貰いやすくなったり、商品ページであれば購入率やクリック率が上がります。
Googleもレスポンシブウェブデザインを推奨する、と明言していることから余計に今注目を浴びています。

 

 

2.WordPressのブログをレスポンシブウェブデザインにする方法

 

いくつかの方法がありますが、最も簡単なのがプラグインを使うことです。
「WP-TOUCH」というプラグインが人気です。

WordPressの管理画面にある「プラグイン」⇒「新規追加」から無料でWPTouchを追加することができます。

 

FSV001WTB005

 

ただしWPTouchだと確かにスマホに最適化された表示にはなりますが、このように少し味気ない見た目になってしまいます。
元々のサイトデザインやCSSが全く加味されませんので、あくまでもPCでの表示と同じ雰囲気で表示させたい、という場合には少し不向きです。

 

 

もう1つの方法は、あらかじめレスポンシブウェブデザインに対応したWordPressブログテンプレートを使うことです。
WordPressテンプレートのなかには、最近では割と「レスポンシブウェブデザインに対応」と謳っているものが多いです。

そのほとんどが、サイドバーなどをスマホで表示した場合に2カラムではなく、下回りに表示させるレイアウトの変更や、
画像サイズの縮小、文字サイズの自動調整などですが、こういった機能がテンプレートそのものについていると、
サイトの雰囲気やイメージを壊さずにスマホに最適化させることができます。

 

 

WS02230

 

それでは先ほどサイトよりダウンロードしたZIPファイルをWordPressに適用する方法を紹介します。
WP-SITE.BIZのテンプレートは、例えばこの「biz02.zip」のようにZIP形式でダウンロードされます。

 

WS02231

 
このWP-SITE.BIZのZIPファイルは、「style.css」の入ったフォルダがそのままZIPになっていますので(テンプレートキングのときとは違って)そのままアップロードすれば大丈夫です。

まずはWordPressにログインして管理画面にアクセスします。
左側のサイドメニューより「外観」⇒「テーマ」を選択してください。

 
WS02232

 

テーマの管理画面に移行します。
「テーマの管理」タブが表示されていますので、その横の「テーマのインストール」を選択してください。

 

WS02233

 

「アップロード」の項目をクリックし、先ほどWP-SITEサイトよりダウンロードしたZIPファイルを選択します。
この状態で「いますぐインストール」をクリックします。

 

WS02235

 
あとは「有効化」をクリックすれば完了です。

 

WS02225

 
WP-SITE.BIZはシンプルで企業サイト寄り(HTMLサイトやシリウスっぽいテンプレート)を多数取り揃えたサイトです。いわゆる個人の「ブログ」というよりは、コンテンツ型のサイトっぽいレイアウト、デザインにしたい場合に結構お勧めのテンプレートサイトです。

それではテンプレートを選んでいきましょう。

 
WS02226

 
まずはグローバルナビにある「WordPressテンプレート」をクリックします。

すると以下のようにWordPressのテンプレート一覧の画面になります。
好きなテンプレートを探して、「続きを読む」を選択します。

 
WS02227

 
すると専用の個別ページに遷移しますので、そこで「ダウンロード」ボタンをクリックします。
※ちなみに横のプレビューをクリックすると、そのサイトを実際にブラウザで表示したサンプルサイトを閲覧することができます。

WS02228

 
このようなZIPファイルのテンプレートがダウンロードできればOKです。

 
WS02229

 

これでWP-SITE.BIZからのテンプレートのダウンロードは終了です。
種類も豊富ですし、そのまま使ってもある程度のかたちになり、かつカスタマイズ性も高いです。

つまりある意味、テンプレートキングとBizVektorとの良いところ取り、というようなテンプレートでもあります。

WP-SITEBIZのテンプレートは、結構、有名なアフィリエイターさんなんかも使っているので
そういう点でもお勧めです。

 

WS02220

 
BizVektorの魅力がこの「拡張テーマ」を無料で使える、ということです。(一部のものは有料です)
BizVektorの場合、他のテンプレートサイトと比較しても、テンプレート自体は1種類しかありませんので少ないですが、
その1種類のテンプレートのクオリティがかなりハイレベルなことと、この拡張テーマが充実していることから
私自身もかなり愛用しています。

 
さて、BizVektorの拡張テーマをまずはダウンロードしましょう。
公式ページのダウンロードタブより「拡張テーマ」を選択してください。

 
ここでは、例えば「Calmly Plus」という新作の拡張テーマが登場していたので、こちらを見てみます。
「詳しくはこちら」というボタンをクリックしてみましょう。

 
WS02221

 
新作の拡張テーマでは、デフォルトのBizVektorの無料テンプレートをこのようにアレンジすることができます。
これを実行するためには、ダウンロードボタンを選択してください。

 
WS02222

 

 
2.WordPressへの適用方法

 
前述のように、BizVektorの拡張テーマは、厳密にはテーマファイルではなく「プラグイン」ですので、WordPressへのアップロード方法も異なります。

まずはWordPressの管理画面にログインしてください。左側のサイドメニューより「プラグイン」を選択します。
プラグインの「新規追加」をクリックしてください。
 

WS02223

 
さらに「アップロード」の項目を選択し、先ほどダウンロードしたプラグインのZIPファイルを選択し、「いますぐインストール」をクリックします。
そして「有効化」を実行すれば、アレンジされた拡張テーマが適用されます。
※既にベースとなるBizVektorの無料テーマが設置されている必要があります。

 
WS02224

 
以上がBizVektorの拡張テーマの適用方法になります。

 

wordpress-image

 
BizVektorでダウンロードしたZIPファイルをWordPressにインストールする方法について、解説していきます。
WordPressにインストールするZIPファイルは直下にstyle.cssが含まれている必要がありますが、BizVektorの場合は便利なことに、最初からその状態でZIP形式に圧縮されているので、
テンプレートキングのときと違って何もせずにそのまま落としたZIPファイルを上げるだけでOKです。

 
まずWordPressの管理画面にログインしてください。
次に左側のサイドメニューから「外観」を選び「テーマ」を選択します。

 
WS02217

 
するとテーマの選択画面になります。
上のタブに「テーマの管理」と「テーマのインストール」というタブがありますので、「テーマのインストール」のタブを選択します。

 
WS02218

 
アップロードの項目を選択し、先ほどダウンロードしたBizVektorのZIPファイルを選択、「今すぐインストール」をクリックしてください。
あとは「有効化」を実行すれば、すぐにBizVektorのテーマを適用することができます。

 
WS02219

 
今回は以上です。
次は拡張テーマをプラグインで設置する方法について詳しく見ていきたいと思います。

 

WS02211

 
BizVektorは僕もかなり愛用している無料ブログテンプレートです。テンプレートキングほどの種類や手軽さはないですが、カスタマイズ性が高いのでしっかりしたWEBサイトのようなブログを作りたいときには最適です。

※例えば、有料テンプレートで有名な「賢威」(紹介ページ)と同じように、メインイメージを差し替えたり、グローバルナビを設定したり、コンテンツエリアに小メニューを作成できます。

 

WS02212

 
ダウンロード手順としては、まずグローバルメニューのダウンロードをクリックします。
するとダウンロードリンクがありますので、こちらの「Download」ボタンをクリックしてください。

 
WS02213

 

これでZIPファイルをダウンロードできました。
ちなみに、BizVektorは無料でダウンロードできるバリエーションはこの1種類だけですが、「拡張テーマ」というプラグインによってアレンジすることが可能です。

 

2.拡張テーマについて

 
WS02214

 
拡張テーマはダウンロードページの左側のサイドメニューにある「拡張テーマ」をクリックします。

 
WS02215

 
青枠で囲われた3つの拡張テーマが全て無料で使えるものとなります。(残りの3つに関しては、有料のテーマです。)

これらの拡張テーマは全てWordPressの「プラグイン」という位置づけになっています。
なので、まずは上で紹介したZIP形式のテンプレートをインストール、WordPressに設置してから、プラグインとして拡張テーマを読み込むかたちになります。

その方法は次回の記事で紹介します!

 

1.ZIPファイルを解凍する

WS02202

 
テンプレートキングでダウンロードしたテンプレートは上のようにZIPファイル形式でダウンロードされます。

まずこのZIPファイルを解凍しましょう。通常は「右クリック ⇒ 解凍 ⇒ ここに解凍」で解凍できると思います。

 
WS02203

 
もしこのように解凍ができない場合には、ZIPファイルの解凍ソフトが入っていませんので、Lhpalusという無料の圧縮/解凍ソフトを入れておいてください。
(Lhaplusで検索するとすぐ出てきます)

 

2.フォルダの中身を確認する

WS02204

 
フォルダを解凍すると、このように「2列右」「2列左」「3列」の3つのフォルダがあります。これはその名の通り、ブログのデザインのレイアウトを2カラムにしてサイドバーを左におくか、右におくか、それとも3カラムのレイアウト(両側にサイドバーをおく)にするか、の違いになります。

好きなものを選んで、そのなかのディレクトリを開いてください。

 
WS02205

 
すると「themes」と書かれたフォルダが見つかると思います。さらにこのthemesフォルダを開いてください。

中に、もう1個、名前のついたフォルダがあると思います。(このフォルダの名前は、ダウンロードしたテンプレートごとに異なります。)

 
WS02206

 

このフォルダをWordPRessにアップロードしていきます。

 

3.themesフォルダをZIPに圧縮する

 
今度はこの「pc_keyboard_wt」というフォルダをZIP形式に戻します。
※繰り返しになりますが、フォルダ名はダウンロードしたテンプレートごとに違います。

 
右クリック ⇒ 圧縮 ⇒ .zipを選択してください

 
WS02207

 
すると、このように「pc_keyboard_wt.zip」というZIPフォルダが生成されます。

※違うフォルダをZIPにしても、この後の作業がうまくいきませんので、必ず「themes」フォルダの中にあるフォルダをZIP形式にしてください。

 

4.WordPressにアップロードする

 
ZIPファイルの準備ができたら、WordPressにテーマをアップロ―ドしていきましょう。WordPressにログインして管理画面を開いてください。

 
左サイドメニューの「外観」⇒「テーマ」を選択します。

 
WS02208

 
上の「テーマのインストール」タブをクリックしてください。

 
WS02209

 
すると「アップロード」という項目がありますので、こちらを選択して先ほど作成したZIPファイルをアップロードします。

 
WS02210

 

「いますぐインストール」をクリックし、その後に「有効化」をクリックすれば、WordPressにテーマを反映させることができます。

※上記が上手くいかない場合は、ZIP形式にするフォルダを間違っている可能性が高いので、もう一度上の設定を見直しましょう。

 
以上でテンプレートキングのWordPress設置は終了です。
お疲れ様でした。

 

WS02194

 
それでは以前にも紹介したテンプレートキングのダウンロード方法を紹介してみます。テンプレートキングには、WordPressとMovableTypeのテンプレートが両方、用意されています。

なかにはMovableTypeだけでしか使えないデザインや、逆にWordPressだけでしか使えないデザインもありますので、気をつけてください。

 

1.まずはテンプレートのデザインを選ぶ

 
まずは左側のサイドバーより、WordPressの項目を探し、「ビジネスサイトテンプレート」、「ブログテンプレート」、「iPhone対応テンプレート」の中からテンプレートを選択します。

 
WS02195

 
もともとMovbleTypeがまだ全盛期だったころにあったテンプレートサイトなので、MovableTypeのほうが種類が充実しているようにみえますが、実際は同じくらいの数が用意されていますのでご安心ください。

 

■ビジネスサイトテンプレートの種類

WS02196

 

■ブログ系デザインのテンプレートの種類

WS02197

 

■iPhone対応のブログテンプレートの種類

WS02198

 

ちなみにiPhone対応テンプレートというのは、レスポンシブデザインのブログテンプレートです。

レスポンシブWEBデザインとは、PCとスマホでブログの表示方法を変更させて、それぞれの端末で見やすいように自動で最適化するテンプレートのことですが、これを実現するには『WPtouch』という無料のプラグインが別途必要になります。

 

2.選んだテンプレートをダウンロード

 
選んだテンプレートをクリックすると、ダウンロードボタンが表示されます。MovableType、またはWordPressの好きなほうを選択して、「ダウンロード」のボタンをクリックしましょう。

 
WS02199

 
すると規約の画面が表示されますので、規約をよく読んでから【次へ進む】を押してください。

 
WS02200

 
必須項目である【名前】と【メールアドレス】を正しく入力したら、「申し込み内容の確認」をクリックし、ダウンロードしてください。

 
WS02201

 
以上で、テンプレートキングのダウンロード方法の説明は終了です。