WordPressでブログを作り始めることは、副業で稼ぐ第一歩です。
稼ぐと同時に、WEBマーケティングやWEBデザインを複合的に学ぶこともできます。
しかし、初めての方にとっては、初期設定や固定ページの作成、メニューの設定など、手順がわかりにくいこともあるかもしれません。
そこで、この記事では、本WEBページをご参考に、WordPressでブログを始めるための基本的な手順を詳しく解説します。
初心者でも迷わずに進めるよう、丁寧にステップバイステップでご説明します！
さあ、一緒にWordPressブログで副業の基盤を作りましょう！
【この記事の内容】
１．初期設定する
２．ページ構成を決める
３．固定ページを作成する
４．固定ページ（ホームページ）を設定する
５．固定ページをメニューに追加する
初期設定する
WordPressのインストールとCocoonのインストールが終わったら、WEBサイトの初期設定を実施していきましょう！
そもそも「WordPressのインストール方法とCocoonのインストール方法が分からないな～」という人は、以下にリンクを貼っておきますので、こちらを済ませてから進めましょう！
ブログタイトルとキャッチフレーズを決める
管理メニューの「外観」＞「カスタマイズ」の順で選択してください。
「サイト基本情報」を選択します。
ブログのタイトルとキャッチフレーズについては、Wordpressのインストール段階で決定しているかと思いますが、変更の必要があればこちらから変更できます。
サイトのタイトルは、検索した時に表示されるWEBサイト名やブログ名になります。
キャッチフレーズは、検索した時にタイトルに付属して表示されます。
【タイコウストアのタイトルとキャッチフレーズ】
●（タイトル）タイコウストア
●（キャッチフレーズ）探すことが、見つかることになる。
テーマのカスタマイズ（コード入力）
管理メニューの「外観」から「テーマエディター」を選択してください。
編集するテーマは「Cocoon Child」を選択してください。その中のstyle.cssにコードを貼り付けていきます。
/必要ならばここにコードを書く/の次の行から以下のコードをコピーして貼り付けてください。
ここで貼り付けるコピーでは、本文やメニューのデザインを定義するためのものです。
/************************************
** サイドバーのSNSフォローボタンの変更について
************************************/
.sidebar .sns-follow-buttons a {
width: 30%; /*ボタンの幅*/
}
.sidebar .sns-follow {
margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
background: none !important;
border: 1px solid #444d53;
color: #444d53;
border-radius: 50px;
}
.sidebar .twitter-button:hover {
background-color: #1da1f2 !important;
color: #fff;
border-color: #1da1f2;
}
.sidebar .feedly-button:hover {
background-color: #2bb24c !important;
color: #fff;
border-color: #2bb24c;
}
.sidebar .rss-button:hover {
background-color: #f26522 !important;
color: #fff;
border-color: #f26522;
}
/*白抜きボックス線の太さと破線ここから*/
.blank-box{
border-width: 1px;
border: 1px dashed;
}
/*ここまで*/
/************************************
**** 記事本文 ブログカード
************************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after,
.external-blogcard::after{
content: "続きを読む ≫";
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #808080;/*続きを読むの背景色変更はこちら*/
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-content{
max-height: none;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}
/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
color: #1a1a1a;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #1a1a1a;/*上線*/
border-bottom: solid 3px #1a1a1a;/*下線*/
}
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
color:#1a1a1a;/*文字色*/
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px #1a1a1a;
}
/* 目次のカスタマイズ */
div#toc_container {
border: 1px solid #000000;
border-radius: 5px;
display: block !important;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 90% !important;
background-color: #fffafa; /* ★ ボックス背景色 */
}
p.toc_title {
border-bottom: 1px dotted #000000;
margin-bottom: 10px;
padding: 5px 10px;
}
#toc_container span.toc_toggle {
font-weight: 400;
font-size: 90%;
}
ul.toc_list {
margin-bottom: 0;
}
.post ul.toc_list {
counter-reset: my-counter;
list-style: none;
padding-left: 30px;
}
.post .toc_list ul {
list-style: none;
padding-left: 10px;
}
ul.toc_list >li {
position: relative;
}
ul.toc_list >li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #000000;
color: #fff;
display: block;
float: left;
line-height: 24px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 27px;
border-radius: 50%;
}
ul.toc_list >li,
.toc_list ul > li,
.toc_list ul ul > li {
padding: 1px 0;
}
.toc_list ul > li:before {
color: #ffffff;
content: '\f105';
font-family: FontAwesome;
margin-right: 5px;
}
.toc_list ul ul > li:before {
color: #ffffff;
content: '\f101';
font-family: FontAwesome;
margin-right: 5px;
}
/************************************
** グローバルメニュー PC
************************************/
/* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
max-height: 100%;
height: auto;
max-width: 210px;
vertical-align: middle;
margin: 20px 0;
}
#header-container {
box-shadow: 0 0 10px rgba(30, 30, 30, .1);
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 10;
}
.site-name-text-link {
color: #fff;
}
.navi {
background: none;
}
.navi-in > ul .sub-menu {
background: #fff;
box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
width: auto;
}
.navi-in a {
font-size: 13px; /* ナビ文字大きさ */
font-weight: bold;
position: relative;
color: #ffd700 /* ナビ文字色 */
padding: 0 20px;
display: block;
text-decoration: none;
}
.navi-in a:hover {
background: none;
}
.navi-in a:before {
position: absolute;
left: 0;
bottom: 6px;
content: "";
display: block;
width: 100%;
height: 3px;
background: #00ff00; /* マウスON時の下線色 */
transform: scale(0, 1);
transition: 0.4s;
}
.navi-in a:hover:before {
transform: scale(1);
}
.navi-in > ul .sub-menu a {
color: #666; /* サブメニュー文字色 */
font-size: 12px; /* サブメニュー文字の大きさ */
}
.navi-in > ul .sub-menu a:before {
background: #00ff00; /* サブメニューマウスON時の下線色 */
}
.header-container-in.hlt-top-menu .logo-header {
max-height: 100%;
}
.header-small {
opacity: 0.9;
}
.header-small .header-container-in.hlt-top-menu .logo-header img {
max-width: 130px;
margin: 10px 0;
}
#container {
padding-top: 90px;
}
[id^="toc"]:target {
padding-top: 85px;
margin-top: -85px;
}
/************************************
** ●全画像のホバー時エフェクト処理
************************************/
a:hover img{
opacity: 0.6; /*不透明度*/
transition: all 0.8s ease; /*アニメーション*/
}
コード中の『#4169e1』などはカラーコードを定義しているので、サイトのイメージカラーに合わせてお好きなカラーコードを入力してください。
カラーコードの参考になるリンクを貼っておきます。
ページ構成を決める
それでは、どのようなページを入れてブログ全体を構成するかを考えてみましょう！
本WEBサイトのページ構成を整理してみたいと思います。
❶トップページ：
探しやすさの観点から「検索バー／カテゴリ一覧」のみ
❷記事一覧：
すべての記事を網羅的に確認するためのページ
❸タイコウストアについて：
どのようなWEBサイトなのかを紹介するページ
❹ご利用規約：
法的保護の確保、権利義務を明確化するためのページ
❺プライバシーポリシー：
利用者の個人情報保護を尊重し、透明性と信頼性を確保するためのページ
固定ページを作成する
WordPressでは、通常の記事作成に使う「投稿」以外にも「固定ページ」という便利な機能があります。
しかし、初めて見た人にとっては「投稿」との違いがわかりづらく、どんな使い方があるのか疑問に思うこともあるでしょう。
「投稿」と「固定ページ」には、表示方法に違いがあります。
新着記事として自動的にブログのトップページに表示されるのが「投稿」ですが、「固定ページ」はメニューなどから呼び出さなければ表示されません。
さらに、「投稿」では「カテゴリ」や「タグ」といった機能を使ってページ同士を関連付けることができますが、「固定ページ」では他のページとは独立して存在し、隔絶したコンテンツが作成されます。
固定ページの作成と編集方法
WordPressの管理画面の左メニューから「固定ページ」の「新規追加」をクリックして固定ページを作成しましょう。
右上の歯車型アイコンをクリック、「固定ページ」タブからさまざまな公開前設定が行えます。
ここでは、最も使用頻度の高い「パーマリンク（URL）」と「アイキャッチ画像」について説明します。
●パーマリンク（URL）：ウェブサイトの各ページに対して個別に与えられているURLのこと
●アイキャッチ画像：ユーザーの目（興味）を惹きつけるためのサムネイル画像のこと
固定ページ、投稿ページも同様に、パーマリンク（URL）は必ず設定してください。
パーマリンクは、“アルファベットで意味のわかる文字列”を設定しましょう。
アイキャッチ画像は、❶読者の目を惹くこと、❷画像サイズを揃えることを意識して設定してください。
これくらいのアイキャッチ画像の作成であれば、パワーポイントで充分ですし、トリミング機能を使えば画像サイズも揃えることができます。
「固定ページ」タブの「ステータスと公開状態」で、今すぐ公開する設定になっているか確認、画面右上の「公開」をクリックすると固定ページが公開されます。
固定ページ（ホームページ）を作成する
ここからは、ご参考までにタイコウストアの固定ページ（ホームページ）をご紹介していきます！
ホームページとは、WEBサイトを閲覧した際、最初に表示されるページのことを指しています。
タイコウストアのホームぺージでは、「タイトル」と「アイキャッチ画像」は設定していません。
カバーブロックを使って、全体のデザインを構成しています。
カバーブロックとは、画像を背景として設定して、その上に段落や見出しブロックを挿入して表示することができるブロックです。
従来のイラストレーターやフォトショップのソフトを使わなくても、文字を入力したり、背景の色や透過度等を変えたりできるので作業効率が上がります。
固定ページ（ホームページ）を設定する
管理メニュー「設定」の「表示設定」をクリックしてください。
ホームページの表示の「固定ページ」にチェックを入れてください。
ホームページはさきほどメニューの設定の章で作成した固定ページである「ホーム」を選択してください。
この設定をすることによって任意の固定ページをホームページのトップページに設定することができます。
固定ページ（ホームページ）にタイトルを入れていない場合には、「#数字（タイトルなし）」と表示されているので任意のページを探して選択してください。
固定ページをメニューに追加する
メニュー構成を決める
次に、上記❷～❺までのページを❶トップページ上のメニューのどこに表示させるかを決めます。
タイコウストアでは、以下のとおりでトップページ上に配置しています。
｜ヘッダーメニュー（ページ上部メニュー）｜
❷「記事一覧」はヘッダーメニューへ表示させます。
｜フッターメニュー（ページ下部メニュー）｜
❸「タイコウストアについて」❹「ご利用規約」❺「プライバシーポリシー」はフッターメニューへ表示させます。
メニューの作り方
WordPressの管理画面の左メニューから「外観」、「メニュー」を選んで、ヘッダーメニューとフッターメニューを作っていきましょう。
デフォルトでは、トップメニュー（ヘッダーメニューと同義）は存在していますが、フッターメニューは別途作成してあげる必要があります。
フッターメニューは「新しいメニューを作成しましょう」をクリックすると作成することができます。
メニュー名は、後から分かりやすいように「フッターメニュー」に変更しておいてください。
下部の「メニュー設定」で、メニューの位置はフッターメニューであれば「フッターメニュー」にチェックを入れてください。
ヘッダーメニューであれば、「ヘッダーメニュー」「ヘッダーモバイルメニュー」の両方にチェックを入れてください。
※ヘッダーモバイルメニューにチェックを入れないと、スマホなどでメニューが表示されなくなるので要注意です。
メニュー項目の追加
「メニュー項目を追加」から「固定ページ」で項目を選択し、「メニューに追加」ボタンをクリックします。
右側の「メニュー構造」で「メニュー名」を入力し、各種メニュー項目の順番をドラッグ&ドロップで入れ替えましょう。
最後に「メニューを保存」ボタンをクリックしましょう。
これで固定ページをメニューに追加する作業は完了です。
