第34回 レイアウトを改良するため、簡単にプログラムを操作する!

    Posted in: WordPress超活用

WordPressのレイアウトやデザインを少しだけ変えてみる!

そもそもWordPressの個々の記事投稿の画面では、Webサイト全体のレイアウトやデザインを変更することはできません。この場合、あくまで記事ページ内での体裁の変更に限定されます。では、どうしたらWebサイト全体にかかわる共通したデザインを、自分流にカスタマイズすることができるでしょうか。

その解決方法として、WordPressのテーマに付属しているカスタマイズメニューが用意されています。通常の場合、管理画面では「外観」をクリックすると、このメニューが現れます。

Webサイト全体にかかわるロゴや色合い、そしてメニューなどを、簡単なマウス操作で変更することができます。思い通りに変わっているか、都度確認できるので、比較的簡単に、ある程度満足のいく仕上がりになると思います。

ただしこの方法では、大幅なカスタマイズは不可能です。例えばブログ用のテーマを、企業サイトのレイウアトに変更することです。それでは、この問題を実現する方法はあるのでしょうか。

CSSとは?

CSSと呼ばれているプログラムファイルを操作することで、ある程度は解決することができます。CSSとは、Cascating Style Sheetsの頭文字で、一般的にスタイルシートと呼ばれる、制御するためのファイルです。簡単に言うと、どこの、何に、どのくらい変更するかを指示するような、見栄え調整用のプログラムです。

例えば、サイト全体(body)の背景色(background)を、薄いブルーの色に指定する方法です。他にも、以下のような用途が代表的です。

・文字関連(フォント、サイズ、装飾など)
・位置関連(文字や図の上下左右の位置指定、また複数の図を並べる方法など)
・表示関連(指定の文字や図の表示制御、ちょっとした動きをつけるなど)

ここまで、変更する方法について、なんとなくおわかりいただけましたでしょうか。では、これらの指示をいったいどのファイルに施せばいいのか、次項で解説したいと思います。

操作方法1(基本的な方法)

多くの公開情報では、WordPressの管理画面で、「外観」メニューより「テーマの編集」を選択して表示されるファイルに、直接書き込むように説明しています。具体的には、スタイルシート (style.css)と呼ばれる、おおもとのファイルの任意の箇所に、追加する方法です。

正しい指定内容を正しい場所に追記すれば、正しく稼働する場合がほとんどです。ただし、ちょっとした間違いがあったり、不正確な場所に記述した場合には、正常に反映されないばかりか、時にはWebサイトが見えなくなります。

最悪の場合には、管理画面も立ち上がらなくなってしまうので、実は細心の注意が必要です。よほど自信がある場合を除いて、この方法をとることは、控えた方がいいのかもしれません。

操作方法2(安全な方法)

では、どうすれば比較的安全に目的を達成できるのでしょうか。その方法には、大きく分けて以下の2点を挙げることができます。

(1)プラグインを使用する
テーマに直接ではなく、プラグインを使って記述を行えば、上記のようなリスクは極力おさえることができます。

また、テーマのデータを更新(アップデート)した場合に有効です。つまり、テーマに関係するファイル(前述のstyle.cssなど)に直接書き込んだ変更点は、このアップデートによってすべて上書きされて、消えてしまいます。この消失を防ぐ手段という意味で、有効です。

(2)子テーマを使用する
プラグインのかわりに、「子テーマ」をつくり、そこに変更点のみを記述する方法もあります。この作業により、もともとあったテーマファイルに、必要な箇所のみ上書きすることができます。そのために比較的低リスクで、かつ管理がしやすくなります。もちろん、テーマのアップデートにも有効です。

まとめ

ここまで、いかがでしたでしょうか。WordPressでレイアウトやデザインを少し変える方法について、概要をおわかりいただけましたでしょうか。プログラムの制御は、けっして大げさことではありません。その正しい方法がわかり、注意深く実施さえすれば、誰にでも、ある程度望みをかなえることができます。この点で、たいへん重要な手法と考えています。ぜひマスターして、素敵で使いやすいサイトづくりを目指していただきたいと思う次第です。

参考サイト

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】
http://www.ituore.com/entry/html-css-basic

スタイルシート(CSS)の基本的な書き方【初心者向け】
http://techacademy.jp/magazine/4872

Simple Custom CSS – テーマを直接編集せずにCSSをカスタマイズできるWordPressプラグイン
http://netaone.com/wp/simple-custom-css/