初心者がワードプレスで自在にWEBデザインカスタマイズする方法

【結果】ワードプレスでWebデザインカスタマイズしたら

投稿記事すべての冒頭にあいさつ文を入れる

記事に更新日を表示

記事に余白を設定

トップに戻るボタンの調整

多種のBOXデザイン枠を作成

目次のデザイン変更

吹き出し作成

などなど・・・

簡単な事しかやってませんが、自分だけのWEBだとういのが実感できて、楽しいですよ！

ワードプレスでWebデザインをカスタマイズするための前提知識

「WordPressでWEBデザインカスタマイズする」といっても、初心者にとっては、何をどこまでするべきなのか？　イメージしづらいところですよね。

そこで、まずは基礎知識を理解しましょう！

この章では、「WEBデザインとは何をすること」で、また「WordPressとはどういうものか」、さらには「自在にカスタマイズするためには何が必要なのか」を説明します。

そもそもWEBデザインとは

WEBデザインとは、伝えるべき情報を閲覧者にわかりやすく伝わるように、Webサイトのレイアウト・文字装飾などの”ページの見た目”をデザイン（設計）することです。

WEBデザインの原則は、文書構造はHTML言語で記述し、文書フォーマットはCSS言語で記述します。さらには、動的なWEBページにするにはPHP言語が必要で、HTMLのプログラミング文の中に埋め込むことで使います。つまり、HTML言語、CSS言語、PHP言語の習得は、あなたにとって必須となります。

とは言うものの・・・。

これらのプログラミング言語を習得するのは困難です。そこで、そのわずらわしさをお助けするために「ワードプレス(WordPress)」というソフトウェアが必要となるのです。

Webデザインの仕事にWordPressが必要となる理由です。

では、ワードプレスとは

ワードプレス（Wordpress )とは、ブログ記事を書くための手助けをしてくれる道具一式（ツール、ソフトウェア）の事です

Webページは「HTML」や「CSS」などのプログラミング言語を用いて作られます。しかし、ワードプレス(WordPress)という無料のソフトウェアを使うと、これらのプログラミング言語を全く意識しなくてもWebサイトを作れるようになります。

ただし、ワードプレスはあくまでも最低限の基本的な機能を備えたWEB構築および記事作成のお助けツールです。これだけでは、見栄えのよいデザインにすぐれた記事を書くことは困難です。
そこで必要となるのが、次項に述べる「テーマ」です。

ワードプレスに「テーマ」の導入は必須

記事作成のフォーマットが用意されている「テンプレート」の一式が揃ったものが、「テーマ」と呼ばれるものです。ワードプレスの機能を補完・拡張する役割を担います。

ここで、「テーマ」のデメリットも説明してしまいましたが・・・

ワードプレスと一緒に、「テーマ」の導入は必須！
なのですが・・・
使う「テーマ」によって使えるデザインは変わります。であれば、「テーマ」を変更する場合は、各記事を含めて多大な修正が必要となってしまうのです。

ワードプレスでのデザインカスタマイズするために必要な事とは

WEBデザインを自在にカスタマイズしたいなら、「ワードプレス」や「テーマ」の基本機能だけに頼れない部分もでてきるんです！

最低限でもHTMLとCSSの記述方法の基礎的な部分を知っていれば、具体的にカスタマイズしたいものについては、ググった情報を何となくでも理解できれば、それを自分のデザインに適用できるわけです。

WEBデザインカスタマイズする例として、

デザイン
記事中に使う枠デザイン	テーマではあまり多く用意されていない。 テーマ独自で用意されている場合もあるが、テーマを変更した場合は、記事中につかっていたその部分が全て無効となる。
目次	プラグインを使えば、目次は自動表示できるようになる。ただし、デザインはかなり限定されている。
見出し	テーマで用意されているデザインはかなり限定されている。

こういう事をしたい場合に、Google検索すれば、多くのソースコード（つまり、記事に埋め込むHTMLやCSS言語の文）の例を見つける事ができます。

ただし、このソースコードをそのままコピーして自分のWEBに適用できない場合が多いです。

ソースコードを自分専用に少しでも修正できるようにするためには、HTMLとCSSが何たるかを知る必要があるのです。

それでは、ワードプレスで自在にデザインカスタマイズするために必要な事を説明します。

WordPressでカスタマイズする手順

WEBデザインを自在にカスタマイズするために必要な準備を簡単にまとめました。

HTMLとは？　CSSとは？　PHPとは？その役割

HTMLとCSSとPHPを習得し自分で自在にプログラミングできるようになるためには多大な時間が必要です。

しかし、初心者でもWebデザインをカスタマイズできるようになるためには、HTMLやCSSがどのような役割を担うもので、基本的な書き方を理解する事が重要です。

あとは、流布しているコードをある程度理解できて、それを自分好みに修正していけば、自分のデザインに適用することは可能です。

HTMLとCSSとPHPはWordpressでWEBを構築し、記事を書くためには、欠かせない極めて重要なプログラミング言語です。ここでは、それらの役割だけでも覚えてください。

HTMLとCSSとPHPの基本的な記述方法

HTMLとCSSの基本的な記述方法を示します。
これを知っているだけで、HTMLとCSSのコードを理解する事が早まります。

【HTMLの基本的な記述と例】
<タグ名　属性=属性値>コンテンツ</タグ名>

【例】<p class="sample">おはよう</p>　・・・指定したクラス属性に従い「おはよう」と表示させる。
p--タグ名：コンテンツ部分（おやよう）が段落であることを示す
class--属性、”sample"--属性値：<P>タグにclass属性を追加し、そのclass属性の値を「sample」にしている。

【CSSの基本的な記述と例】
."セレクタ名" {"プロパティ値1":"値1" ;"プロパティ値2":"値2"・・・・}

【例】h1{color:red;}・・・H1の見出しの色を赤とする
h1--セレクター。スタイルを適用する対象
color--プロパティ。対象に適用するスタイルの種類

【HTMLとCSSの記述例】

■例：HTML
<p class="sample">HTMLとCSSの基礎を習得しよう</p>
■例：CSS
　.sample{color:blue;}
■結果表示
HTMLとCSSの基礎を習得しよう

上記の例について説明すると
・HTMLのタグ名は p で、<p>～</p> でひとつの段落を示します。そのpの属性値（プロパティ）は classで、ここであるひと固まりのものに名前を定義します。例では　sample がそのclassの名前になります。
・CSSではそのclass(=sample)に対して、デザイン(文字の装飾など）を設定する事ができます。例では、sample というclassに対して、フォントの色(プロパティ値はcolor)をblueにするとしています。

【PHPの基本的な記述と例】
<?php 　命令　命令の対象　;?>

【例】 <?php echo date("Y");?>　・・・現在の日付を表示させる。
echo--命令：文字列を出力させる。
date("Y")--命令の対象：現在の日付の関数

【まとめ】結局、自在にデザインカスタマイズできるようにするために大事な事は

いかがでしたでしょうか。

最後にポイントをまとめると