> 記事 > GITS関連 WordPress ウェブ制作 パソコン プログラミング > 【7】WordPressでブログのデザインを決める~ブログ始めよう!シリーズ

【7】WordPressでブログのデザインを決める~ブログ始めよう!シリーズ

2015.12.21.(Mon)Chieko By.Chieko

パース在住主婦ライター、Chiekoです。
12月も着々と半分を過ぎました。早いものですね。

そしてGITSの今年の営業日は、残り2日となりました!
お持ちのパソコンやiphone、ネットに関して何かご質問やご不安のある方は、GITSまで駆け込んでくださいね!(笑)

WP7-ec

さて、なんとかここまでやってきた、「ブログ始めよう!」シリーズ。
今回が最終回です。

前回は、WordPress上で記事を投稿してみる、ということについて、本当に基本的な部分ではありますが、手順とポイントをまとめました。
ウェブ上での表示に適した画像サイズの選び方なども、説明してあります。

 

今回は、「ブログのデザイン」を決める方法です。
ブログの見た目に一番関わるところです。

WordPressで言う「テーマ」とは?

前回にもちょっと説明しましたが、WordPressでは、デザインの元となるものが、あらかじめ用意されています。
それらは、『テーマ』と呼ばれています。

たとえば、

・ブログタイトルをどこに、どんな大きさで表示するか?
・表示する文字のサイズ、フォントは?
・トップ画面のレイアウトは?最新記事の表示の形式は?
・カテゴリや過去記事などのメニューは、左側?右側?どこに出すか?

などなど・・・

また、テーマによっては、ブログタイトルの下にヘッダー画像を表示したり(以下に実際に例を示します)、スライダー(ヘッダー画面が切り替わって、複数画像が表示できるもの)を設置できたりして、より視覚に訴えるデザインを取り入れることも可能です。

テーマは豊富に用意されており、常時新しいものが出てきます。その中からよさそうなものを選んで、自分のブログに適用させます。

そして、実際にデザインを見ながら、色んな設定を行い、自分が思い描いているブログの形にしていきます。

以降に、テーマの選び方について、初歩的な手順を説明します。

テーマを選び、インストールする

まず、WordPressの編集画面の左側で、「外観」→「テーマ」を選択。

WP7-screen1

(ここで、すでに自分がインストールしてあるテーマの一覧が表示されます。何もインストールしていなければ表示なし)
自分のブログにテーマを適用するには、WordPressが提供するテーマのリストから、テーマを選びインストールする必要があります。

上記画面中、テーマの一覧画面の上部右側にある「新規追加」ボタンをクリックします。

すると・・・

WP7-screen2

画像のように、WordPressのテーマ一覧が表示されます。

「注目」「人気」「最新」それぞれにリストがあるので、目的のリストを選んで表示させましょう(画像の例は「注目」のリスト)。

また、「特徴フィルター」というところを選ぶと、以下の画面が表示されます。

WP7-screen2-2
たとえば「青系のテーマだけ選んで表示させる」とか、「レスポンシブレイアウト(パソコンやスマホそれぞれに合わせて表示レイアウトを調整する)に対応しているテーマだけ表示させる」など、特徴を制限してテーマを表示させることもできます。

各テーマの画面表示例を見ながら、よさそうなものを探します。ただ、有料版にアップグレードしないとこんなふうにはならない、というものも多くあるので、あくまで参考程度に見てください。

 

興味あるテーマを見つけたら、そこにマウスを合わせてみます。

すると、以下の画面のようになります。
例では、『Twenty Sixteen』というテーマを選んでいます。

WP7-screen3
ためしに、「詳細&プレビュー」を押してみてください。
テーマの説明と基本的なブログの表示例が見られます。

ただ、これはWordPressで用意している英語の記事が例として表示されるだけなので、特に日本語ブログのレイアウトとしてはあまり参考にならないかもしれません・・・。

というわけで、自分のブログにこのテーマを適用したらどうなるか?を見てみます。

そのために、このテーマを実際に自分のWordPressのサーバーにインストールする必要があります。

上記画面の「インストール」というボタンを押します。
今回の例では、『Twenty Sixteen』というテーマが私のサーバーにインストールされました。

ここで、画面横の「外観」→「テーマ」を再び表示してみると、、、『Twenty Sixteen』が追加されています。

WP7-screen7

ここで、「有効化」のボタンを押すと、正式にこのテーマがブログに適用されます。
あなたのブログは、このデザインでネット上に表示されることになります。

でも本当に決める前に!ためしにどんな雰囲気になるか、見てみたいですよね?

「ライブプレビュー」というボタンを押します。

WP7-screen4

すると、こんな感じになります。

もし興味があったら、私の本当のブログ(笑)と見比べてみてください。→パースで手作りざんまい
ずいぶん見た目が変わっていると思います。

もしも「保存して有効化」を押すと、リンク先の私の本当のブログも、このように変わってしまう、ということです。

 

ライブプレビュー上で、項目を設定してみる

ライブプレビューの状態で、いくつかの項目が設定できるようになっています。
これらをいじってみることで、今試しているテーマが自分のブログに合っているか、より詳しく知ることができます。

WP7-screen4

●サイト基本情報

ブログのタイトルとキャッチフレーズを設定します。
それが、画面左上に表示されます。

●色

サイトの色、背景色、文字色、などを設定することができます。

●ヘッダー画像

『Twenty Sixteen』というテーマでは、ヘッダー画像を設定することができます。

ヘッダー画像を設定する画面中で、「現在のヘッダー」の下「新規画像を追加」のボタンを押します。

前回の記事中の「写真の入れ方は?」の項で説明した通りの手順で、「メディアのアップロード」から使いたい画像をアップロードし、選択します。

「画像を切りぬいて選択」というボタンが右下にあるので、そこをクリックします。

画像を適切なサイズに切りぬく画面が出てくるので、範囲を調整して右下の「画像切り抜き」ボタンを押すか、もしくは「切りぬかない」ボタンを押すか、どちらかを行います。

すると、ブログ画面のタイトル下のヘッダ画像が表示されます。
今回は、ガーベラの画像を「画像切り抜き」ボタンで写真を横長に切り抜いています。

WP7-screen8

ヘッダー画像には、テーマごとに推奨する画像サイズが指定されているので、それに従う方がベターだと思います。

●背景画像

ブログの背景に表示する画像を設定します。
画像の選択は、ヘッダー画像と同様です。

●メニュー

自分が設定したメニューを指定して、表示させることができます。
たとえば、私の場合は、[Home][プロフィール][コンテンツの使用について][お問合わせ]というメニューが、タイトルの右側に表示されました。

WP7-screen6

このメニューを作る手順については、説明すると長くなってしまうので、ここでは省略します。

●ウィジェット

サイドバー(右側に表示されているメニューなど)の設定を行います。
「サイドバー」をクリックすると、表示されているメニュー一覧が出ます。
私はすでに自分のブログで、5つの項目をサイドバーに設定しています。もしも何も設定がされていなければ、何も表示されません。

新しい項目を追加したい場合は、下の方の「+ウィジェットを追加」というボタンを押します。すると、サイドバーに表示させることができる項目の一覧が出てきます。

たとえば、サイドバーの一番上に、カレンダーを表示しようかな、と思ったら、、、
「+ウィジェットを追加」ボタンを押し、出てきたリストの中から「カレンダー」をクリックします。
すると、サイドバーのリストの一番下に「カレンダー」が追加されます。
表示する位置を変えたかったら(この場合は一番上に持ってきたい)、ドラッグ&ドロップで位置を並べ替えることができます。

WP7-screen10

 

●固定フロントページ

ブログのトップ画面に「最新の投稿」を表示するか、いつも同じ内容(「固定ページ」)を表示するか、を選べます。

このテーマに決定する?

以上の設定をやってみて、「よし、このテーマを使おう!」と決めたら、画面左側上部にある「保存して有効化」というボタンをクリックします。

他のテーマをもっと試してみたい、と思ったら、左側の×ボタンを押して画面を閉じ、また上記の手順を繰り返します。

テーマは、見た目を決めるだけでなく、そのテーマで何ができるか・・・といったことにも関わってきます。

たとえば、先に示したように、今回例に使った『Twenty Sixteen』というテーマは、ヘッダー画像を設定することができますが、設定できるようになっていないテーマもあります。

また、今回の例で「ウィジェット」という項目がありましたが、『Twenty Sixteen』というテーマは右サイドバーしか設定できませんが、左や画面下にもウィジェットが設定できるテーマもあります。

こうした簡単な例だけでなく、「読み込みの速度が速い」「パソコンでもスマホでもキレイに表示できる」など、もっとヘビーデューティな視点で「このテーマが優れている」という選び方もあります。

今回は本当に初歩的なテーマの選び方を説明しましたが、テーマ選びは本当に奥が深いものです・・・なんてったって、何千というテーマがあるんだから。

こうした「どのテーマがいいよ」といったことについても、ネット上でたくさんの人が発信していますので、自分が気になるテーマをググって評判を調べてみるのもよい方法です。

私自身も勉強中です。

 

まとめ~テーマでできないこともできちゃうのがWordPress

ブログの表示を設定する時に、もう一つ大切なものが「メニュー」です。
が、「メニュー」の設定のしかたも含めると、とっても長くなってしまうため、今回は説明し切れませんでした。ごめんなさい。

検索すると、色んな人のブログがやり方を書いているので、もし興味があればネットで調べてみてください。

 

今回は、テーマを選び、インストールしてから自分のブログに適用するまでの、本当に基本的な設定方法を説明しました。

ですが、ただテーマを選んだだけでは実現できないことってありますよね。

たとえば、

「作者のプロフィール欄を投稿の下に入れたいんだよなー」
「ツイッターやフェイスブックのシェアボタンをつけたいんだけどなぁ」

というケース、ありますよね。でも、自分の選んだテーマにはその機能がついていない、ということはよくあります。

その場合、WordPressには『プラグイン』という機能が備わっています。

テーマと同じように、プラグインも様々なものが提供されています。
たとえば「作者のプロフィールを表示する」というプラグインがあります。
それも色々とあり、たとえば『Simple Author Box』というのは定番のようですし、私自身は『Sexy Author Bio』というのを(ぜんぜんSexyじゃないけど)使っています。プラグインも、テーマと同様に、使いたいものをインストールし、自分用に設定していきます。

プラグインも、クオリティの良し悪しなどはありますが、これによって自分の好きな機能を簡単にブログに追加することができるんですね。
「この機能は自分の選んだテーマには装備されていないから、できないんだ・・・」とあきらめることはありません。

もう一つのカスタマイズの方法として、WordPressは、直接プログラムに書き込むことができます。

たとえば、

「このテーマのデザインはだいたい満足なんだけど、見出しのフォントを他のにしたいんだよなー。」

と思ったら、スタイルシート(css)というのを編集します。フォントやカラーなどはたいていこのファイルで定義されているので、ここを直接自分の好きなように書き替えることで、思うままにデザインを変えることができます。
また、phpというファイルは、WordPressの動作を全て定義しているファイルです。なので、ここを書きかえることによって、標準では備わっていない機能を追加することもできます。

ただ、これらのファイルは、厳密なプログラミングのルールに基づいて記述されていますので、うっかり文字を書き間違ってしまっただけでも、大変なことになります。サイアク、デザインがぐちゃぐちゃになって、元に戻せない、、、なんてことにもなり得ます。慎重な取り扱いが必要となります。

とはいえ、多くのブロガーさんが、WordPressのカスタマイズのしかたを投稿しており、「このphpファイルのここをこう書き替えると、この機能を追加することができるよ」と、わかりやすく教えてくれています。
WordPressのカスタマイズ方法については、ネット上に多くの情報があるのは、とても便利なことですね。

このようにして、やろうと思えば自分の完全オリジナルのブログを構築することができます。
それがWordPressの素晴らしいところですね~。

 

最後のまとめ

今回が最終回です。お付き合いいただいた皆様、ありがとうございました。

この連載が、少しでも「ブログやってみたい!」と思う方の参考になったら幸いです。

自分の個人ブログを持つということは、私自身の経験から、やはりクリエイター系の方々には是非おススメしたいなー、と思います。
ブログを続けることにより、自分自身のテーマ性や個性について、考える機会にもなるし、気づかされることも多いです。
もちろん、コンテンツを蓄積していくことによって、ブログ自体が作品となり得ると思いますし。

ただし、これまでのシリーズで取り上げてきましたが、レンタルサーバー選びなどは難しい面もあり、実際に使ったことがある人の意見を聞きたい、と思われることもあるでしょう。特に、海外でのサーバー選びについては、あまり情報がないですよね。実際に私もこの連載中に、借りていたオーストラリアのサーバーのトラブルに見舞われました。今はGITS Hosting(お問い合わせはGITSまで。日本語でどうぞ)のサーバを使っていて、落ち着いて使えています。
国内・海外さまざまな事情に応じたサーバー選びも、GITSにお気軽にご相談ください。

また、先ほど述べた、WordPressのカスタマイズについても、いくら「誰でもできる」とはいえ、まったくプログラミングを知らない方にとってはハードルが高いかもしれません。
特に、プログラミングにおいては、ちょっとした書き間違いが、致命的な事態を引き起こす可能性も、ないとはいえませんので・・・。

その点についても、GITSでは時間制のパソコン教室を随時開催しています。

WordPressの本格的なカスタマイズをしてみたい、と思う方、プロの安全で確実な技を知っておきたいという方には、ぜひおすすめです。
完全個人指導で、パースシティ周辺に在住でなくとも、スカイプでの対応もできますよ。
これまでに、日本在住の方にスカイプを通じてお教えした実績もあります。
皆さまのニーズに合わせて、GITSの技術部員が適切な方法をわかりやすく説明します。

今年好評だったGITSの無料相談会も、来年もまた開催すると思いますので、おためしに、そのような機会を利用していただくのもよいですね。

また、引き続き、WordPressを使用したウェブサイトの完全受注も承っていますので、こちらもお気軽にご相談ください。

それではみなさま、楽しいクリスマスとよい新年をお迎えください~。

 

Chieko

Chieko
2013年4月よりパース在住。ライター&ブロガー。オーストラリアの食・子育て・生活を紹介するブログ「パースで手作りざんまい」、ネイティブ英語とは?がテーマの勉強ブログ「話す英語。暮らす英語。」執筆中。複数の企業サイトへ、食・旅行・教育に関する記事を寄稿中。2児の母。
  • facebook
  • twitter