Blogこれからの働き方をマーケティングで最適化するブログ

WordPress【超入門編】WordPressの構造の基礎を教えます!


これまでブログでは、どうして「WordPressがウェブ担当者に選ばれているのか」や、「入れておくべきプラグイン」などをご紹介してきました。これらの記事をきっかけにWordPressを始めてみた方がいらっしゃるのではないでしょうか。しかし、WordPressを作成して使用するプラグインの検討をつけたもののWordPressの構造がややこしくて「どうカスタマイズしていいのかわからない!と立ち止まっている方もいらっしゃるはず……。そこで、今回はカスタマイズをするために必要なWordPressの構造をご紹介しますので是非今後の作業にお役立てください。

 

ワードプレスの仕組み

WordPressとは、ブログ記事が簡単に作れるようにしたいわばホームページサービスの一環です。通常ホームページはHTMLとCSSという言語で作られているのですが、ワードプレスは形式が少し異なります。通常ウェブページとは、HTMLファイルという、<>タグという記号で区切られたデータを読み込んで表示します。HTMLファイル1つ当り1ページが表示されるのが基本です。

ワードプレスではどうでしょうか。ワードプレスではまずヘッダー、本文、サイドバー、フッターという4つの部分にページを分けます。それをPHPという言語で処理して、1つのページとして表示させているのです。いわばつぎはぎでウェブページを表示しています

 

各部分の詳細

各部分の詳細は、

・ヘッダーがheader.php
・本文がsingle.php
・サイドバー部分がsidebar.php
・フッター部分がfooter.php

となっています。見出し部分のヘッダー、メニューバーを操作するサイドバー、本文、下部のフッター、この4つでワードプレスの表示記事は出来ています。例えばサイトのタイトルやトップ画像操作の時はheader.php、など、どこを操作してカスタマイズするかによって対象部分が変わります。ここを操作する時はここの部分が対象になる、という概念がポイントになってきます。何となくでも良いので覚えておいてください。

 

カスタマイズの手段

WordPressのおおよその仕組みが分かったところで、次はどのようにカスタマイズしていけば良いのかを理解していきましょう。

 

1.カスタマイズ画面から操作

これが一番基本的な操作方法になります。まずはワードプレスの操作画面を開く。そして外観→カスタマイズと辿り、各項目を表示します。

 

・色
・ヘッダーメディア
・メニュー
・ウィジェット

は実際にウェブサイトの見た目に影響するので、しっかり作りこんでいきたいです。プラグインを使うと更に操作対象が増えます。

2.直接ワードプレス内の「style.css」CSSを編集

前述のとおりワードプレス記事は複数の部分を一つにして表示していますが、デザインをするには別途ファイルを読み込む必要があります。それがCSSです。コーディングについて知っておかなければなりませんが、CSSの編集画面をWordPressから出してコーディングが可能です。サーバーによっては時間がかかりますが、反映されれば簡単にデザインが変更できます。

・色
・ヘッダーメディア
・メニュー
・ウィジェット

上記の各カスタマイズ項目から最下部にある追加CSSをクリックして、CSS記述画面を出すと簡単に出来ます。CSSを編集するにあたり注意しなければならないことがあります。それは、WordPressの大元であるstyle.cssを直接編集してはいけないということです。

WordPressのテーマがアップデートする時にこれまで蓄積してきた他のデータが無くなってしまうアクシデントが起きる可能性があるからです。以上のように直接CSSを編集するにはリスクが伴います。少しでも、トラブルを未然に防ぐ方法としてお勧めするのが、「CSSプラグイン」を使う方法です

 

3.CSSプラグインを使う

CSSプラグインとは、CSSを編集しやすいようにしたプラグインです。Simple Custom CSSなどが有名です。

 

出典:https://ja.wordpress.org/plugins/simple-custom-css/

インストール後追加すると、カスタマイズ項目などにCSSの編集項目が追加されます。ここから作業すれば、CSSの読み込み順番など、CSS編集する時につきまとう、複数の作業を省略することができます。ただしプラグインによってはワードプレス最新版に対応しきれないものもあるので、頻繁に更新されているかどうかを見極めてから利用しましょう。

 

カスタマイズのコツ

 

カスタマイズにはコツがあります。ただ何となく片っ端からネットで調べた方法を試すのではなく、こで教えるコツを覚えれば作業能率が確実に上がります。なので是非参考にしてください。

 

1.サイトの目的を明確にする

サイトを作る前に

・目的=何のためにサイトを作るのか
・ターゲット=誰に向けたサイトなのか
・構成=どのようにしたら読者が読みやすいのか

を明確にしましょう。これらが不明確だとレイアウトやデザインが分からないまま手探りでやらなければならず効率が悪いです。目的やターゲットが絞る事ができれば

・ビジネス系ならば青や黒=色味のしまったものを選ぶと知的な印象。
・ポップなデザインにしたいのならば明るい、オレンジや水色=明度どが高く、色彩の鮮やかなものを選ぶとよりポジティブな印象。

のように色合いも決めることができます。そして、携帯の画面での表示の形式などを優先方が良いのかなど可読性などにも気配りすることができますね。

 

2.テンプレートを使う

サイトの目的やターゲット、構成が決まったら次はデザインに取り掛かります。WordPressを使い慣れていない人やまたコーディングについて知識の浅い人はテンプレートを使いましょう。テンプレートとはあらかじめデザインなどが決まった金型の事で、ワードプレスや配布サイトで手軽にダウンロードできます。Google検索などでテンプレートが調べられるので、運用するサイトにあったものを選びましょう。

テンプレートには無料と有料のものがあります。はじめのうちは無料のテンプレートで十分でしょう。ただし、サイトを収益化したい場合は、有料テンプレートを検討するのも一つの手かもしれません。有料テンプレートだと無料より更に洗練されたデザイン、操作しやすいように独自の機能が追加されているので、より効率的に作業を進めることが可能になります。

ひとまずは、無料のテンプレートで様子を見てみることをオススメします。いくつか使えそうな無料のテンプレートをピックアップしてみましたので参考にしてみてください。

 

https://themeisle.com

出典:https://themeisle.com

ヘッダーが斜めにデザインされているのでモダンな印象を読者に与えることが可能となります。アパレル関係や化粧品のサイトに使えそうですね。

 

https://ja.wordpress.org/themes/zillah/

 

出典:https://ja.wordpress.org/themes/zillah/

 

こちらのテンプレートはとてもミニマルで洗練された印象ですね。このデザインで企業ブログ等を運営すればお客様からの信用度が上るかもしれません。ほかにも様々なテンプレートがありますので是非お好みのものを探して見てください!

 

スムーズに作業する方法

ここではスムーズに作業するポイントを箇条書きで書いていきます。

1.カラー変更は暖色か寒色かを見る

サイトを構築する前に目的、ターゲットと構成を明確にすることで色合いを決めることに繋がると前述しました。色合いを決めることは簡単なようで実は難しく悩むことで時間を使う原因になります。まずは、暖色か寒色かと大まかに区別することから始めましょう。ざっくりとした分け方ですが効率よくサイトの色の統一感を演出できるので色に悩んだときに参考にしてみてください。

 

2.表示画像は縦横比も勘案する

画像を指定位置に表示させる時は、黄金比や白銀比などを使いましょう。

・黄金比=見栄えが良い作品になる、縦横比が1:2の比率

出典:http://ameblo.jp/soho-college/entry-11068470315.html

 

・白銀比=縦横比が2:3の作品の比率

出典:https://www.capa.co.jp

 

このように画像の比率まで考慮すると、ユーザーを惹きつけるサイト作りに近づけることが可能になります。

 

3.その他の注意点

・プラグインを入れすぎない

プラグインはとても便利なのですが注意しなければなりません。プログラムの数が多くなれば多くなるほどCPUに負荷をかけてしまいます。なので、プラグインを入れすぎるワードプレス内のプログラムの数が増え、サーバーがダウンする可能性も出てきます。プラグインは一度試して本当に必要なものかどうかを判断して、使う必要のないものは無効化するか、削除しておきましょう。

・プラグインを選ぶ時は評価の高いものを選ぶ

プラグイン自体も評価の良いインストール数が多いものを選ぶと、頻繁にアップデートされている可能性が大きいので、ワードプレスのアップデートがあっても現役で活躍してくれるはずです。

 

まとめ 

ワードプレスの良さはたくさんありますが、いざ実際に使ってコンテンツを作成使用とすると理解することが難しく立ち止まってしまうことが多いと思います。しかし、今回ご紹介した、基本的な知識を持っていれれば決して難しいことはありません。苦手意識を持たずに是非WordPressを使って素敵なサイトを作ってくださいね!勿論記事のライティング構成も忘れずに。見た目だけでは評価されません。なので、是非下記の記事も参考にしてください!

 

▼サイトで使用するバナー等のご参考に

【図解】お客様に伝わる資料の『デザインの基本4原則』近接・整列・コントラスト・反復
https://cyclo.jp/archives/blog/1393/

 

▼サイトで使用する写真のご参考に

マーケ担当者も今すぐ活用できる『写真撮影の基本構図5選』
https://cyclo.jp/archives/blog/1370/

▼コンテンツの話題に

昭和のギーク向けサービス「ドニーチョ」をご存知ですか?
https://cyclo.jp/archives/blog/1438/

 

 

 


お問い合わせ

本記事内容や「wordpress」についての
お問い合わせはこちらからお気軽にお問い合わせください

お問い合わせはこちら