無料レンタルサーバーでWordPressブログを運営する【5】外観デザインをカスタマイズ

   2018/07/18   icon-clock-o読了時間:約14分19秒

前回記事【4】テーマのインストール で日本語のWordPressテーマ・Simplicity2を
インストールする手順をご説明しました。
今回は更に進んで、ページの構成やデザインを変更する手順をご説明します。

 目次 

基本的なデザインの変更方法

外観のカスタマイズ
 サイト基本情報
 
 ヘッダー
 背景画像
 スキン
 レイアウト
 画像
 SEO
 SNS
 アクセス解析(Analyticsなど)
 広告
 プログカード
 ソースコード
 コメント
 AMP(β機能)
 テーマ内テキスト
 管理者機能
 その他
 メニュー
 ウィジェット
 固定フロントページ
 追加CSS

無料レンタルサーバーでWordPressブログを運営する シリーズ記事


基本的なデザインの変更方法

WordPressサイドメニューから【 外観 】をクリックし、
【 カスタマイズ 】からは簡易なメニュー項目からページ内容の変更ができ、
【 テーマの編集 】からはスタイルシート(CSSファイル)を自分で記述して
より自由にデザインを変更することができます。

  icon-lightbulb-o CSSファイルの編集について詳しくは
  Webサイトを作ろう!【12】スタイルシート(CSS)の解説をご覧ください。
WordPressカスタマイズ
ここではより簡単に【 カスタマイズ 】からページデザインを変更してみます。


外観のカスタマイズ

サイドメニュー【 外観 】から【 カスタマイズ 】を開くと、
左には変更可能な項目が、右には現在のサイトデザインのプレビュー画面が表示されます。

メニュー項目上部の【 < 】をクリックするとメニュー欄に戻れます。
※【 保存して公開 】をクリックするまで設定は保存されません。
カスタマイズプレビュー
デザインスキン 』 で一気にデザインを変更する方法もあります。
「 まだ自分で色々するの不安だし 」 という方は、
Simplicity作者さんによるスキン紹介のページ をご覧いただいて、
スキン の項目から一気にデザインを変えてみてください。

それでは上から項目を順に見ていきましょう。

 icon-lightbulb-o ポイント

カスタマイズ項目からページ内容の変更をした後で
WordPressテーマ(親テーマ)を全く違うものに変更したとしても、
カスタマイズの内容は基本的には維持されたまま、削除されることはありません。

ただし、子テーマが上書きされてしまうような変更をしてしまうと
全ての設定が削除されてしまうこともありますので、
テーマ自体を別のものに変更する際には
あらかじめ必ずバックアップを取り、慎重に作業を行ってください。

サイト基本情報

サイトのタイトル
サイトの名前です。
ブックマーク(お気に入り)登録する際の名称にもなります。

キャッチフレーズ
サイト内容の説明など、なんでも自由に記入できます。

サイトアイコン
ファビコンと呼ばれる、サイトに個性を出すための画像を設定できます。
ファビコンについて詳しくはこちらをご覧ください。
ファビコンの作り方~ブックマークやタブで個性を出そう~

このブログを例にするとこんな感じです。
WordPress:サイト基本情報

パソコンから閲覧できるサイトの構成は基本的にこんな感じになっています。
ページ構成
それぞれの箇所の色づかいは
 icon-picture-o カラーコードを入力するか、
 icon-picture-o カラーチャートを調整して色を作るか、
といったお好みの方法で背景色や文字色を変更することができます。
WordPress:色の変更
初期状態に戻したい時は【 クリア 】をクリックしてください。

カラーコードの仕組みや、配色の参考サイトについて詳しくはこちらをご覧ください。
 icon-picture-o Webサイトを作ろう! 【 4 】テーマカラーを決める

自分で変更するのは面倒、という方は下記の スキン から
提供されているデザインスキンを適用すると一気にカラーやデザインが変わって簡単です。

WordPress:カラー変更
それぞれの項目をお好みのカラーに変更してみてください。
もちろんシンプルに白とグレーと黒、というサイトでも構いません。

グローバルナビ

メニューボタンをクリックすると、グローバルナビが広がります。
グローバルナビ(グローバルナビゲーション)はグローバルメニューとも呼ばれます。
これはどのページを閲覧していても、主要なメニューにすぐにアクセスできるように
最近のサイトやブログでは当たり前にページ最上部や最下部に設置されています。

リンクホバー

その部分の上にマウスポインタを持っていった状態のことをマウスホバーと呼びます。
ポインタを合わせると色が変わったり、ポインタの形状が変わったり、といった設定をすることで
「 今マウスが合っている箇所はこのメニュー 」
「 ここをクリックしたらリンク先に移るんだな 」
と視覚的に理解できる、閲覧者に親切なサイトを作ることができます。

モバイル用デザインと確認方法

モバイルの設定は、スマホや携帯電話用の設定なので、ブラウザの枠を縮めて確認するか、
自分のスマホでサイトを表示させて表示状態を確認しましょう。
ただし、レスポンシブWebデザインが組み込まれているテーマの場合は、
パソコン表示のカラー設定がモバイルでも適用されることがあり、
PC、タブレット、スマホ、どれから閲覧しても、サイトのカラーが変わらない場合もあります、

 ※レスポンシブWebデザインとは、サイトを見ている機器や、
  その機器の画面サイズに関わらず最適な状態で表示されるサイト構築方法のこと。

ヘッダー

サイトのヘッダー(上部のサイトタイトルなどを含む部分)に画像を設定することができます。
ここでは試しにテーマに最初から含まれている画像を設定してみました。
WordPressヘッダー設定

背景画像

本文部分の背景画像を設定できます。
同じ画像を繰り返し、あるいは一回だけ表示なども設定できるので色々と試してみてくださいね。
WordPress本文背景画像

スキン

Simplicity2 にあらかじめ含まれているデザインスキンを借りて、
一気にサイトのデザインを変更することができます。

『 Flower Pop 』 だとこう。
WordPressデザインスキン2
『 Monokai 』 だとこんな感じ。
WordPressデザインスキン2

レイアウト

ページの文字や表示に関する構成の設定項目です。
最初は初期状態のままでもOK。
サイトの運営に慣れてきてから変更しても良い箇所です。

レイアウト(全体・リスト)

文字フォントやエントリーカードなど、主な構成を決めることができます。

レイアウト(投稿・固定ページ)

本文の文字の大きさや、一覧表示の表示数などの構成。

レイアウト(モバイル)

タブレット、スマホ、携帯電話での表示構成。

画像

Simplicity2には、画像表示を制御して表示速度アップしてくれる
プラグイン・Unveil Lazy Loadが組み込まれています。
閲覧者を待たせることなくページを表示するための設定です。

SEO

SEO対策とは、GoogleやYahoo!などの検索エンジンに対して
「 うちのサイトはこんな感じで、結構頑張ってる有料サイトなんです 」 とアピールをして、
誰かがキーワード検索を掛けた時に、出来るだけ上位に表示してもらおう、という対策のことです。
詳しくは icon-arrow-circle-right  【 HTML 】メタタグ(meta要素)の書き方 をご覧ください。

SNS

TwitterやFacebookといったSNSに記事をシェアしてもらうためのボタン設定です。
参考になったと呟いてもらったりすると嬉しいですし、
よりサイトに来てくれるひとが増えるかもしれないので
出来る限りSNSボタンは設置しておきましょう。

アクセス解析(Analyticsなど)

Google Analyticsや、Google Search Consoleといった
Google Earthのアクセス解析を既に登録している方は、
ここからサイトと解析を連携することができます。

広告

投稿記事に広告を表示・非表示を切り替えます。

プログカード

ブログカードとは、
・記事タイトル
・記事の冒頭部分
・サムネイル画像
などを1枚のカードのようにまとめて表示して、
記事一覧をパッと見た閲覧者の興味を惹きやすい見栄えにするものです。
詳しくはSimplicity作者さんの ブログカードの利用方法 をご覧ください。

ソースコード

本文中にソースコードを記述・紹介したい時に使います。

コメント

閲覧者が寄せてくれるコメントを表示するかどうか。

AMP(β機能)

スマホや携帯電話からサイトを表示した時に
できるだけ高速表示できるようにする設定です。

テーマ内テキスト

メニューの名称などの表示名をお好みのものに変更することができます。

管理者機能

管理画面に関する設定。
自分が編集や投稿をしやすいように設定を変えることができます。

その他

ファビコンの設定や、コピーライト(著作権)表記などの設定。

メニュー

トップメニューとフッターメニューの設定、
各メニュー項目の名称やリンク先の変更ができます。

ウィジェット

ウィジェットとは、WordPressサイト上に配置できる
小型のアプリケーションツールのことです。
このブログでも右を見ていただくと、
・最近の投稿
・検索ウィンドウ
・カレンダー
・天気予報 などが、
最下部を見ていただくと
・運営者情報
・人気記事 などを配置しています。

ウィジェットに関しては、ここで追加するよりも
管理画面の左サイトメニュー【 外観 】→【 ウィジェット 】から設定するほうが
扱いやすいと思いますので、また追々ご説明します。

固定フロントページ

フロントページ、つまり閲覧者が 『 サイトのホーム=(自分のドメイン).wp.xdomain.jp 』 に
アクセスした際に表示されるメインページの設定です。
自分で表示させたい固定ページを作成し、そのページをフロントページに指定することができます。

追加CSS

テーマに含まれていないデザインを追加したい時にはここにCSSを記入します。
例えば
こんな感じの文字フォントと囲み枠
を使いたい、という時は、
文章中のHTML記述はこう。

<span class=”shadowblue”>こんな感じのテキスト囲み</span>

CSSの表記はこうなります。

CSS
.shadowblue {
background-color: #b0c4de;
font-size: 200%;
width: 70%;
    high: auto;
margin-top:5px;
margin-bottom:20px;
margin-right:0px;
margin-left:5px;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
display: inline-block;
box-shadow:rgba(12, 18, 26, 0.31) 0px 0px 11px 3px;
-webkit-box-shadow:rgba(12, 18, 26, 0.31) 0px 0px 11px 3px;
-moz-box-shadow:rgba(12, 18, 26, 0.31) 0px 0px 11px 3px;
}
背景色はこれ、文字のサイズは200%、余白の大きさはこれくらい、と設定しています。



これらの項目を変更したら、上部の【 保存して公開 】から変更内容を保存しましょう。
保存して公開


無料レンタルサーバーでWordPressブログを運営する シリーズ記事

【1】概要説明
【2】会員登録とインストール
【3】初期設定
【4】テーマのインストール
【5】外観デザインをカスタマイズ(この記事です)
【6】固定ページ編集
【7】記事を投稿する
【8】Google Search Consoleにサイトを登録
【9】初期化(再インストール)

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket