Webデザインでサイトをカスタマイズする方法まとめ

design1

ブログ運営・サイト運営が慣れてきたらWebデザインにも挑戦してみましょう。

Webデザインでアクセスアップにもなりますし、ユーザビリティーも良くなります。

少し理解できるだけで、カスタマイズの幅がぐっと広がります。

初めての人にもわかりやすく紹介して行きます。

 

Webデザインメニュー

 

Webデザイン カスタマイズ

 

スポンサーリンク
モッピー!お金がたまるポイントサイト

Webデザインの流れ ~何を学べばいいの?~

design2

Webデザインと言っても何から手をつけたら良いのかわからない人も多いと思います。

私も始めはよくわからず、プログラミング言語から勉強してしまったこともありました。

初めての人にもわかりやすいように、何から学んで行けば良いのか、何に使えるのかを紹介したいと思います。
 

Webデザインの学習フロー

 

HTML 基本的な構造

HTMLコード

[xml]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
</head>
<body>
<h1>ページタイトル</h1>
<p>文章が入ります</p>
</body>
</html>
[/xml]

 

HTML(Hyper Text Markup Language)は、ウェブサイトの基本的構造で、骨組みのようなものです。

建物で言うと、柱や梁、屋根のような無くてはならないもので、ウェブサイトもHTMLが必要になります。

 

CSS デザイン性をもたせる

CSSコード
[css]
h2 {
position: relative;
margin: 0 0 1.5em;
padding: 0.6em 0.9em;
background: #9fc5e8;
color: #fff;
font-size: 1.286em;
}
[/css]
 

CSS(Cascading Style Sheets)は、ウェブサイトにデザイン性をもたせるものです。

どんなサイトにもCSSが使われています。

HTMLとCSSは絶対必要な知識です。

 

PHP サイトに仕組みをもたせる

PHPコード
[php]
<?php
$number = 4;
if ($number == 3) {
echo ‘3’;
} else {
echo ‘3以外’;
}
?>
[/php]
 

PHP(Hypertext Preprocessor)は、サイトに動的な仕組みを加えるものです。

ブログを更新すると、新しい記事が1番上に来るのも、更新した日時が表示されるのもPHPが使われています。

ワードプレスでもPHPが使われていますので、ワードプレスのカスタマイズをする場合には必要になります。

 

MySQL データを保存する入れ物

MySQLコード
[sql]
mysql> CREATE TABLE schedule (pid INT AUTO_INCREMENT,
uid VARCHAR(15), subject VARCHAR(100), pdate DATE,
ptime TIME, cid INT, memo TEXT, PRIMARY KEY(pid));
[/sql]
 

MySQL(データベースの1つ)は、作ったHTMLファイルやPHPファイルを保存しておくための管理システムです。

レンタルサーバーを借りると多くはMySQLを使っています。

PHPとセットで使うことが多いです。

 

Webデザインで知っておくと良いもの

テキストエディタ

text-editor

HTML・CSSコードやプログラミング言語を書くためのテキストソフト

代表的なものでメモ帳などがあります。

 

FTP

ffftp

サーバー側とクライアント側のコンピュータ間で、ファイルを転送するためのソフト

 

ローカル環境(XAMPP・MAMP)

xampp

パソコンに擬似的にサーバーを作るフリーソフト

アップロードする前に作ったものがどうなっているのか確認するために使います

 

このあたりは次の記事で詳しく紹介します。

 

Webの基本構造を学ぼう

design9

Webの勉強を始める前に、Webの全体像をつかんでおきましょう。

全体像が見えてくると、何を学べば良いのかわかってきます。

カスタマイズする箇所と必要な知識についても紹介します。
 

Webサイトの基礎知識

Webサイトは1つ1つのWebページが集まったものです。

Webページの表示にはHTMLファイルをサーバーからダウンロードして表示されます。

HTMLファイルには画像やCSSファイルも一緒にダウンロードされます。

Webページには箇所によって名前と役割があります。

 

ページレイアウトと各部の名前

 

ヘッダー
会社やサイト名のロゴなどが含まれるページトップの領域のことです。

文字でも表示できますが、ロゴの方がデザイン的には良いとされています。

 

ナビゲーション(グローバルナビ)
グローバルナビは主要ページへのリンクを並べた領域のことです。

わかりやすいので、ナビは付けておくと良いでしょう。

 

パンくずリスト
サイトの現在位置を把握しやすくするためのツールです。

プラグインでも簡単に設定できます。

 

メイン領域
主要な情報が掲載されている領域のことです。

メイン領域とサブ領域を合わせてコンテンツ領域と呼びます。

 

サブ領域
コンテンツ領域の中でもリンクやバナーなどが並んだ、メイン領域の横に表示されている領域のことです。

 

フッター領域
ページの下部にあり、Webサイトのコピーライトやプロフィールなどが表示されている領域のことです。

 

これらの1つ1つをHTMLやCSSで設定しています。

ですのでカスタマイズする場合は、HTML・CSSのカスタマイズしたい箇所の設定を変更して行きます。

 

カスタマイズする箇所はdesign.css

ワードプレス以外のCMSやブログサービスの人は、それぞれのCSSをカスタマイズできるページがあると思います。

ワードプレスの人は、カスタマイズする場合はdesign.cssを基本的に触って行くことになります。

design.cssの中に、ヘッダー・ナビ・メイン・サブ・フッターや見出しタグの設定をする箇所があります。

細かいところになると、common.cssなども変更することもあると思います。

カスタマイズをして行く場合はHTMLとCSSの知識は身につけておきましょう。

 

ワードプレスはPHPファイルでつくられています

wordpress php2

通常だとHTMLファイルとCSSファイルでWebサイトがつくられていますがワードプレスはPHPファイルとCSSファイルでつくられています。

PHPファイルはHTMLコードを打つことができるので、HTMLとPHPの言語が混在していることになります。

ワードプレスをカスタマイズするためには、PHPの言語も学ぶ必要があります。

 

ただ、デザインだけを少しカスタマイズする程度でしたらHTMLとCSSの知識だけで十分です。

まずはやれる範囲からカスタマイズして行きましょう。

 

Webデザインの準備をしよう

design8

Webデザインを学ぶ前に必要なツールを準備しましょう。

言語ごとに必要なツールを紹介します。

MySQLだけインストールが必要ですが、他の言語はインストール不要です。


HTML・CSS 基本的にテキストエディタのみ

テキストエディタ

text-editor

HTML・CSSの学習にはテキストエディタを使います。

メモ帳でも構いませんが無料ツールで良いものがあります。

Atomの方が便利で高度ですが、初めての人はTeraPadの方がシンプルで使いやすいと思います。

Atomは拡張子を設定すれば、入力中に予測変換してくれます。

慣れてきた人にはAtomが良いでしょう。

関 連 TeraPad

関 連 Atom

 

FTP

ffftp

作ったファイルを手動でアップロードする時にはFTPソフトを使います。

通常だとブログサービスで直接入力できるので、必要な時には使いましょう。

関 連 FFFTP

 

PHP ローカル環境が必要

テキストエディタ

text-editor

PHPの学習でもテキストエディタは必須です。

TeraPadかAtomを入れておきましょう。

 

XAMPP(Windows)・MAMP(Mac)

xampp

PHPの学習にはXAMPP(ザンプ)やMAMP(マンプ)が必要となります。

PHPはサーバー上で実行されるので、パソコン上でサーバー機能を持たせる仕組みをつくります。

関 連 XAMPP

関 連 MAMP

 

MySQL インストールが必要

MySQLはインストールが必要です。

関 連 http://dev.mysql.com/

 

コマンドプロンプト

Command Prompt

コマンドプロンプトはWindowsには初めから入っています。

Macをお使いの人はターミナルというツールを使います。

MySQLはインストール後、コマンドプロンプトで操作して行きます。

 

XAMPP(Windows)・MAMP(Mac)

xampp

MySQLの学習にもXAMPP(ザンプ)やMAMP(マンプ)が必要となります。

 

準備ができたら続いてHTML・CSSから学んで行きましょう。

 

HTML・CSSを学ぼう ~コーディング入門~

design3

必要なツールの準備ができたらHTMLとCSSを学んで行きましょう。

HTMLとCSSは一緒に学んで行きたいと思います。

独学で学べる方法を紹介して行きます。

 

HTMLの基本

[xml]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
</head>
<body>
<h1>ページタイトル</h1>
<p>文章が入ります</p>
</body>
</html>
[/xml]

 

HTMLはウェブサイトの文章を書くためには必要なコードで、Hyper Text Markup Languageの略になります。

ウェブサイトのタイトルを設定したり見出しや段落を決めたりなど、文章に関わる設定をするコードになります。

書き方は、<開始タグ>~</終了タグ>で文章に初めと終わりのタグを書く方法が一般的です。

 

CSSの基本

[css]
h2 {
position: relative;
margin: 0 0 1.5em;
padding: 0.6em 0.9em;
background: #9fc5e8;
color: #fff;
font-size: 1.286em;
}
[/css]

 

CSSはウェブサイトのデザインを設定するコードで、Cascading Style Sheetsの略になります。

ウェブサイトの色の設定、文字の大きさ、配置など、サイトを見やすくしてくれます。

基本的なカスタマイズはこのCSSが中心になってきます。
 

おすすめの学習方法

動画で学ぶ ドットインストール

dotinstall
ドットインストールは動画でHTML・CSSを学ぶことができます。

ツールのインストール方法も動画で見ることができるので、わからない人にもわかりやすいです。

映像で学ぶことはとても理解しやすいです。

関 連 HTML入門(全24回)

関 連 CSS入門(全23回)

 

学習サイトで学ぶ Progate

progate
ProgateはHTML・CSSやプログラミング言語などを無料で学ぶことができる学習サイトです。

実際にコードを打ち込みながら勉強ができますし、練習問題もあるので覚えたか確認しながら進めて行くことができます。

わかりやすく続けやすいと思います。

関 連 Progate

 

テキストで学ぶ

web1
資格用テキストは初めての人でもわかりやすく、自分のペースで進めれるのでおすすめです。

私は最終的にはこのテキストで学びました。

Webの仕組みなどもわかりやすく説明してあります。

1周だと理解は難しいかもしれませんが2~3周やると、かなり身に付きます。

関 連 Webクリエイター能力認定試験テキスト

続いてPHPとMySQLについても学んで行きましょう。

 

PHP・MySQLを学ぼう

design4

続いてPHPとMySQLについて学んで行きましょう。

WebデザインだけであればCSSで十分だと思いますが、PHPを学べば仕組みについてもカスタマイズすることができます。

MySQLはサーバーの中を設定する時や、サーバーを移行する時などに使うことがあります。
 

PHPの基本

[php]
<?php
$number = 4;
if ($number == 3) {
echo ‘3’;
} else {
echo ‘3以外’;
}
?>
[/php]
 

PHPは動的な仕組みをつくるプログラミング言語で、Hypertext Preprocessorの略になります。

ワードプレスでもPHPを使っていて、カスタマイズするためには知っておくと良いでしょう。

今日は<? echo date(‘Y/m/d’); ?>です。 と入力すると

今日は2016/5/1です。 と表示されます。

ブログシステムやCMSでは、このようなPHPがたくさん使われています。

 

MySQLの基本

[sql]
mysql> CREATE TABLE schedule (pid INT AUTO_INCREMENT,
uid VARCHAR(15), subject VARCHAR(100), pdate DATE,
ptime TIME, cid INT, memo TEXT, PRIMARY KEY(pid));
[/sql]

 

MySQLはデータベース管理システムの1つで、サーバーなどのデータベースに使われています。

プラグインの内容を変更したり、サーバーの移行をしたり、バックアップなどの時など、データベースは何かと関わることもあります。

通常のカスタマイズではあまり登場することも少ないですが、何かあった時に必要な知識なので、学んでおくと良いでしょう。
 

おすすめの学習方法

動画で学ぶ ドットインストール

dotinstall
ドットインストールは動画でHTML・CSSを学ぶことができます。

ツールのインストール方法も動画で見ることができるので、わからない人にもわかりやすいです。

映像で学ぶことはとても理解しやすいです。

関 連 PHP入門(全30回)

関 連 MySQL入門(全19回)

 

学習サイトで学ぶ Progate

progate
ProgateはPHPプログラミング言語などを無料で学ぶことができる学習サイトです。

実際にコードを打ち込みながら勉強ができますし、練習問題もあるので覚えたか確認しながら進めて行くことができます。

わかりやすく続けやすいと思います。

関 連 Progate

 

テキストで学ぶ

web2
学習用テキストは初めての人でもわかりやすく、自分のペースで進めれるのでおすすめです。

私もメインはテキストを見ながら学んでいます。

1回だけだと理解は難しいかもしれませんが2~3周やると、かなり身に付きます。

関 連 3日でマスターPHP

関 連 3ステップでしっかり学ぶ MySQL入門

 

見出しタグ(hタグ)をCSSでカスタマイズする(疑似要素あり)

design6

ここでは見出しタグ(hタグ)をカスタマイズする方法を紹介します。

CSSで疑似要素というものを使えば、オシャレな見出しをつくることができます。

サイトの雰囲気に合った見出しタグをつくりましょう。

そのままコピーして使ってください。

 

下ボーダー

[css]
h3 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
[/css]
 

シンプルな下線の見出しです。

solidをdotted・double・dashed などに変えると雰囲気も変わってきます。

 

下ボーダー+最初の文字を大きくする

[css]
h3 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
h3:first-letter {
margin-right: .1em;
font-size: 1.5em;
}
[/css]
 

上のものに、最初の文字を大きくしたものです。

1.5emを2.0emなどに変えることによって、倍率も変わります。

 

左ボーダー

[css]
h3 {
padding: 3px 0 3px 15px;
border-left: 6px solid #ccc;
}
[/css]
 

左側にボーダーをつけたものです。

6pxを変えると太さが変わります。

 

上下ボーダー

[css]
h4 {
padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
[/css]
 

上下に線をつけたものです。

 

背景色

[css]
h3 {
padding: .5em .75em .5em 1em;
background-color: #f6f6f6;
}
[/css]
 

背景色をつけた見出しです。

 

背景色+左ボーダー

[css]
h3 {
padding: .5em .75em .5em 1em;
background-color: #f6f6f6;
border-left: 6px solid #ccc;
}
[/css]
 

上のものに左ボーダーをつけたものです。

 

左+下ボーダー

[css]
h3 {
margin: 0 0 1.5em;
padding: 0.8em 0.8em 0.8em 1.5em;
border-left: 7px solid #ccc;
border-bottom: 1px solid #ccc;
}
[/css]
 

左+下ボーダーです。よく使われている見出しです。
 

 左ボーダーを2色(疑似要素)

[css]
h3 {
position: relative;
margin: 0 0 1.5em;
padding: 0 1em 0.5em;
border-bottom: 2px solid #d2d2d0;
}

h3:after {
content:"";
position: absolute;
top: 0px; /* 上からの位置 */
left: 0px; /* 左からの位置 */
width: 10px; /* 横幅 */
height: 100%; /* 縦幅 */
background: linear-gradient(left,#9fc5e8 50%,#FFA500 51%, #FFA500 100%);
background: -webkit-linear-gradient(left,#9fc5e8 50%,#FFA500 51%, #FFA500 100%);
background: -moz-linear-gradient(left,#9fc5e8 50%,#FFA500 51%, #FFA500 100%);
background: -o-linear-gradient(left,#9fc5e8 50%,#FFA500 51%, #FFA500 100%);
background: -ms-linear-gradient(left,#9fc5e8 50%,#FFA500 51%, #FFA500 100%);
}
[/css]
 

当サイトでも使っている見出しタグです。

疑似要素を使いafterを使っています。

afterの色比率を変えることによって3色も可能です。

 

 ポイント付き1

[css]
h3 {
position: relative;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
border-bottom: 3px solid #9fc5e8;
}

h3:before{
content: "";
position: absolute;
background: #9fc5e8;
top: 0;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

h3:after{
content: "";
position: absolute;
background: #FFA500;
top: 1.0em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
[/css]
 

これも当サイトで使っています。

疑似要素のbeforeとafterを使ってポイントを2つ付けています。

 

 ポイント付き2

[css]
h3 {
position: relative;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 2.0em;
border-bottom: 2px solid #ffa500;
}

h3:before{
content: "□";
font-size: 150%;
position: absolute;
color: #ffa500;
top: -0.8em;
left: 0.3em;
height: 12px;
width: 12px;
}

h3:after{
content: "□";
font-size: 150%;
position: absolute;
color: #9fc5e8;
top: -0.5em;
left: 0;
height: 12px;
width: 12px;
}
[/css]
 

上のタグを変えたものです。

疑似要素を使えば、ちょっとオシャレな見出しがつくれます。

 

サイトを2段(2段組み)にする方法

2dan

サイトを2段にしてスマートに表示したい人もいるかと思います。

ここでは2段組みを簡単に行なう方法をお伝えします。(3段組みなどもできます)

サイトのトップページや目次になるページに使って、たくさんの情報をコンパクトに伝えましょう。

プラグインを使って簡単に設定することができます。

 

ライバルサイトが2段組みを採用していた

私が2段組みにした理由は、参考にしているライバルサイトのトップページが2段組みにしていて良かったからです。

2段組みだとスクロールが少なく見ることができ、トップページや目次になるページにピッタリだと思いました。

2段組みを手作業で行なうとコーディングの知識が必要なので、プラグインで簡単に行なう方法を紹介します。

 

HTMLとCSSを理解している人は、そんなに難しくなく2段組みをやれると思いますが、あまり詳しくない人にはプラグインが良いと思います。

 

簡単に設定できる WP Canvas – Shortcodes

WP Canvas - Shortcodes

このWP Canvas – Shortcodesというプラグインを使えば簡単に2段組みが可能です。

特にサイトも重くなることもないので良いと思います。

関 連 WP Canvas – Shortcodes

 

2dankumi2

プラグインを入れると、記事作成画面で簡単に2段組みが設定できます。

もちろん3段組みもできますし、細かい設定も可能です。

 

レスポンシブル対応の仕方

このWP Canvas – ShortcodesはPC版のみ対応しています。

スマートフォンなどのレスポンシブルになると、1段ずつの表示になってしまいます。

ですので、表示が変にならないように対応が必要となります。

 

1段目左 左にするコード

1段目右 右にするコード

2段目左 左にするコード

2段目右 右にするコード

こんな感じで交互にコードを打つことによって、スマホ表示際にキレイに1段表示となります。

HTMLとCSSがわかる人は、コードが短くて済むのでそちらをおすすめしますが、あまり詳しくない人には便利なプラグインなので、ぜひ活用ください。

 

アイコンとリストタグをCSSで作る方法

icon-list

アイコンやリストタグも画像からCSSにすることによって、ページの表示が高速化できます。

ページ表示が速くなると、離脱率も下がりアクセスアップにつながります。

CSSでも十分おしゃれなアイコンやリストタグを作ることができるので、ここで紹介して行きます。

 

簡単コピペ アイコン

コピペやCSSを読み込むだけで簡単に使えるCSSで作られたアイコンセットです。

よく使うアイコンはぜひストックしておきましょう。

 

css3-icons

関 連 CSS3 Icons

 

icono

関 連 icono | Pure CSS icons

 

手作り アイコン

関 連 ← こういったアイコンもCSSを使って簡単に手作りできます。

色を替えたり、文字を替えたりも簡単にできます。

注 目 1 位 などなど簡単にカスタマイズできます。

ぜひ自分なりにカスタマイズしてみましょう。

 

HTML

[xml]<span class="gr">関 連</span>[/xml]

 

CSS
[css]
.gr {
width: 50px;
font-size: 13px;
font-weight: bold;
display: inline-block;
padding:0.8px 1px;
margin: 1px 0;
text-align: center;
background-color: #32cd32;
color: #fff;
letter-spacing:1px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
[/css]

 

こんな感じです。

ぜひ自分オリジナルのアイコンを作ってみましょう。

 

リストタグ

ここからはリストタグです。

リストタグもCSS表示にして、ページを軽くしましょう。

 

矢印アイコン

List1
List2
List3

 
CSS

[css]
ul li {
position: relative;
}
ul li::after {
display: block;
content: ”;
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
[/css]

 

矢印アイコン②

List1
List2
List3

 
CSS

[css]
ul li {
position: relative;
}
ul li::after,
ul li::before {
display: block;
content: ”;
position: absolute;
}
ul li::after {
top: 9px;
left: -1em;
width: 6px;
height: 6px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
ul li::before {
top: 12px;
left: -1.025em;
width: 8px;
height: 1px;
background-color: #666;
}[/css]

 

丸形矢印アイコン

List1
List2
List3

 
CSS

[css]
ul li {
position: relative;
}
ul li::after,
ul li::before {
display: block;
content: ”;
position: absolute;
}
ul li::after {
top: .35em;
left: -1.2em;
width: 14px;
height: 14px;
background-color: #3498db;
border-radius: 100%;
}
ul li::before {
z-index: 2;
top: .625em;
left: -.975em;
width: 4px;
height: 4px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}[/css]

 

チェックアイコン

List1
List2
List3

 
CSS

[css]
ul li {
position: relative;
}
ul li::after {
display: block;
content: ”;
position: absolute;
top: .5em;
left: -1em;
width: 8px;
height: 3px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}[/css]

 

ダイヤアイコン

List1
List2
List3

 
CSS

[css]
ul li {
position: relative;
}
ul li::after {
display: block;
content: ”;
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
background-color: #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}[/css]

 

 
関 連 ブログで稼ぐ方法まとめ

関 連 ウェブサイト(ホームページ)で稼ぐ方法まとめ

 

 
ネット副業.comトップへ
ネットでお金を稼ぐ|ネット副業.comトップへ

コメント