この記事では、 WordPressでのブログ作成手順をご紹介します。
始めたはいいけど何をしたら良いか分からない方に向けて手順の導線を作りました。
この記事で基礎的なブログの大枠が作れることを目指しています。
最低限の手順を載せています。ブログのオリジナリティなどは全体の理解が進んでから大幅に変えていくのが良いでしょう。
このブログは【ブログの始め方】の記事の続きです。全体のブログの手順構成を確認したい方はこちら
- プラグイン導入
- パーマリンク設定
- テーマの設定
- 文字の変更
- コメント設定
- SNSシェアの表示変更
- トップ画面の設定
- 固定ページ作成
- メニューの作成
- ウィジェット設定
- アイコン画像設定
- 投稿ページ作成
プラグイン導入
プラグイン(拡張機能)はセキュリティ、デザイン、分析といったところでブログをより良いものにしてくれます。
たくさんの種類があるのでここではセキュリティ、表示の観点から有名なプラグインを3つ、インストールを想定してご紹介します。
入れすぎると重くなったり、プラグイン同士の相性が悪かったり、ブログの表示が反映されないといったことも起きやすくなりますので、入れすぎには注意です。
私もこのプラグインをすべて導入しています。
プラグインインストール方法
プラグインのインストール方法はすべてこの手順です。
以降ご紹介する3つのプラグインもこの手順でインストールしてください。
1.左サイドバーの【プラグイン】>【新規追加】をクリック
2.プラグインの検索からインストールしたいプラグインを検索します。
3.【今すぐインストール】をクリックします。
※互換性ありかどうか確認します。互換性のないものは不具合が起きる可能性が高いので要注意です。
4.【有効化】をクリックします。
SiteGuard WP Plugin
セキュリティ対策におすすめのプラグイン
不正ログイン防止に強く、ログイン時の画像認証、ログインアラート、ログインページのURL変更などを行ってくれます。日本語対応しているのが便利。
1.インストールすると、このような画面が出ますが、そのまま作業して問題ないです。
※インストール手順はプラグインインストール方法をご確認ください。
2.ログイン画面はセキュリティのため文字認証が出るようになります。
3.左のサイドバーから【SiteGuard】をクリックします。
※値はデフォルト値で問題ありません。管理ページアクセス制限やフェールワンスを頻繁にログインする作成当初に設定すると、ログインできなくなる可能性があります。
WP Multibyte Patch
日本語文字化け防止のプラグイン
Word Pressは英語が標準のため、日本語でブログを作成するならおすすめのプラグインです。
文字化けや検索時の全角認識阻害、表記のゆれといったことを防ぐためにインストールします。
インストール後、有効化して完了です。
WPForms Lite
お問い合わせフォームを簡単に作る
ブログ運営には必ずお問い合わせ先が必要になります。
このプラグイン一つで簡単にセキュリティの高いお問合せフォームができます。基本英語ですが、難しくありません。
1.インストール後、有効化をクリックします。
スパム対策の設定を行うため、左サイドバーの【WPforms】【設定】をクリックします。
2.reCAPTCHAをクリック
【Checkbox reCAPTCHA v2】にチェックを入れます。
3.今からサイトキーシークレットキーを取得します。
4.Google’s reCAPTCHA admin consoleにアクセスし、キー取得を行います。ラベルにドメイン名を入力し、チャレンジにチェックを入れ送信をクリックします。
5.ラベルにドメイン名を入力
チャレンジ(v2)にチェックを入れ、「私はロボットではありません」にチェックを入れます。
ドメインはデフォルトで入っているもので良いです。【送信】をクリックします。
6.サイトキーをコピーしてメモしておきます。
7.Word Pressに戻り、WP formsのサイトキーシークレットキーに先ほど取得したキーを入力します。【設定を保存】をクリックします。
8.WPformsの【新規追加】をクリックします。
10.【テンプレートを使用】をクリックします。
11.左のサイドバー【設定】をクリックし、フォーム名に【お問い合わせ】を入力します。
12.【reCAPCHA】をクリックし、右側にマークが出たことを確認し、保存をクリックします。
以上でフォーム作成は完了です。
お問合わせページの作成についてはお問い合わせページの作成項目をご覧ください。
パーマリンクの設定
パーマリンクとは各ページのURL上のドメイン名の後の部分のこと
パーマリンクはカテゴリの変更でリンク先が参照されなくなったり、SEO評価が下がることを防ぐため、ここはカスタム構造ではなく投稿名で設定しています。
1.【投稿名】にチェックを入れ、【変更を保存】をクリックします。
テーマの設定
1.外観＞テーマで【Cocoon】テーマがインストール、有効化されていることを確認します。
※CocoonとCocoon Childでセットです。インストールされているか確認してください。
新しいアップデートがある場合には更新して最新にしてください。
2.左サイドバーのCocoon設定>Cocoon設定をクリック
好きなテーマを選びます。
※テーマチェックの横にある写真のマークにマウスを乗せるとスキンが確認できます。
3.全体タブに変更
お好みでサイトキーカラーを変更します。
※テキストカラーはデフォルトだと黒です。
文字サイズ設定
1.全体タブのサイトフォントから文字サイズを16pxか17pxに変更します。
※ブログで読みやすいとされているフォントサイズです。
サイト名変更
サイト名やキャッチフレーズを変更したい場合
1.【外観】>【カスタマイズ】>サイト基本情報をクリック
サイト名を変更し、右上の【公開】をクリック
※キャッチフレーズはタイトルの下中央に表示される
コメント設定
投稿ページへコメントをできないようにします。
このようなコメントを非表示にする
1.左サイドバーの設定＞ディスカッションをクリック
【新しい投稿へのコメントを許可】のチェックを外す
以上でコメント非表示の設定は完了です。
SNSシェア・フォロー設定
SNSシェア・フォローの表示、種類を変更します。ここでは例としてメインカラムトップシェアのみの表示に変更します。
すべて表示させているとしつこく感じてしまうため、トップシェアかボトムシェアのどちらかのみの表示がおすすめです。
1.【Cocoon設定】＞【SNSシェア】をクリックします。
トップシェアボタンの表示にチェック
2.ボトムシェアボタンの表示のチェックを外す
3.フォローボタンの表示をチェックを外す
４.左サイドバーのユーザーをクリック
フォローボタンに表示させたいものはURLを入力
5.feedyの表示とRSSの表示のチェックを外す
以上で作業は完了です。
トップページの作成
・固定ぺージで一から作る方法
・デフォルトで表示されている最新投稿画面をカスタマイズする方法
トップページ(フロントページ)はサイトの顔です。作成方法としては2種類あります。
固定ページで一から作る方法はブログの方向性やカテゴリーが決まっていること、記事が必要になってくるためデフォルト表示のカスタマイズ方法をご紹介します。
ホームページ(トップページ)の表示設定
今回は最新の投稿を選択します。
1.ここでホームページの表示の切り替え
・最新の投稿
・固定ページ
ホームページ(トップページ)の作成
1.フロントページのタイプを選んでチェック
2.カードタイプをチェックします。写真マークにマウスを乗せるとデザインが確認できる
3.スニペット抜粋の表示
投稿日の表示、更新日の表示にチェックを入れます。
固定ページ作成
ブログ運営には必要なプライバシーポリシー、お問い合わせ、プロフィールの固定ページを作成します。
固定ページは投稿ページと異なり、記事以外に捕捉情報として載せたいものなどに使います。
新規追加
1.【固定ページ】＞【新規追加】をクリックします。
プライバシーポリシーページの作成
自身のブログに合わせてプライバシーポリシーを作成します。
- 個人情報の利用目的
- 個人情報の第三者開示について
- Cookieの使用について
- 広告配信サービスについて
- アクセス解析ツールについて
- 免責事項
- 著作権
- リンクについて
- プライバシーポリシーの変更
私のプライバシーポリシーの内容はこちら
汎用性を持たせるために、一部変更しています。赤字の箇所やリンクフリーに関しては人によって変わってくるでしょう。
当サイトにおけるプライバシーポリシー・免責事項を次の通り記載します。
個人情報の利用目的について
当ブログでは、お問い合わせやコメント投稿の際に氏名・メールアドレス等の個人情報を入力いただく場合があります。
取得した個人情報は、必要な連絡のみに利用させていただくもので、これらの目的以外では利用いたしません。
個人情報の第三者開示について
・本人の同意が得られた場合
・法令により開示が求められた場合
Cookieの使用について
当ブログでは、広告配信やアクセス解析のためにCookieを使用していますCookieによりブラウザを識別していますが、特定の個人の識別はできない状態で匿名性が保たれています。
Cookieの使用を望まない場合、ブラウザからCookieを無効に設定できます。
広告配信サービスについて
当ブログでは、第三者配信の広告サービス(A8.net)を利用して広告を掲載しています。第三者配信事業者は、ユーザーの興味に応じたパーソナライズ広告を表示するためにCookieを使用しています。
パーソナライズ広告は、広告設定で無効にできます。
また、www.aboutads.infoで第三者配信事業者のCookieを無効にすることができます。
Amazonのアソシエイトとして、ブログXXXは適格販売により収入を得ています。
アクセス解析ツールについて
当ブログでは、Googleアナリティクスによりアクセス情報を解析しています。アクセス情報の解析にはCookieを使用しています。また、アクセス情報の収集はCookieを無効にすることで拒否できます。Google社のデータ収集・処理の仕組みについては、こちらをご覧ください。
免責事項
当ブログは、掲載内容によって生じた損害に対する一切の責任を負いません。各コンテンツでは、できる限り正確な情報提供を心がけておりますが、正確性や安全性を保証するものではありません。
また、リンク先の他サイトで提供される情報・サービスについても、責任を負いかねますのでご了承ください。
著作権
当ブログに掲載されている文章・画像の著作権は、運営者に帰属しています。
法的に認められている引用の範囲を超えて、無断で転載することを禁止します。
リンクについて
当ブログは完全リンクフリーです。リンクを行う場合の許可、ご連絡は不要です。ただし、インラインフレームの利用、画像の直リンクは禁止します。
プライバシーポリシーの変更
当ブログは、個人情報に関して適用される日本の法令を遵守するとともに、本プライバシーポリシーの内容の改善に努めます。
修正された最新のプライバシーポリシーは常に本ページにて開示されます。
制定日：yyyy年mm月dd日
更新日：yyyy年mm月dd日
お問い合わせページの作成
プラグインWP formのお問い合わせページ作成方法です。プラグイン導入の方法はこちら
1.固定ページの新規追加から【＋】で【WPForms】を追加します。
2.作成したフォームを選択します。
3.公開して完成です。サイト表示を確認するとこのように表示されています。
プロフィールページの作成
1.タイトルを記入し、【＋】をクリックします。
2.【プロフィール情報】を検索します。
メニューの作成
サイト内を簡単に移動するために必要なメニューを作成します。
メニュー構造としては、大枠のメニューにそれぞれ必要な項目を追加していきます。
ヘッダーメニューであれば、ブログの記事をまとめるカテゴリー、運営者情報やホームページなど
ヘッダーモバイルボタンであれば、検索、ロゴ、サイドバーを引き出しといった項目を入れ子の形で作成します。
名目にモバイルとついているものはスマホなどの小さい画面で表示されるメニューのことです。
メニューの種類
今から作成するメニューの表示内容です。
①サイドバー
②モバイルスライドインメニュー
③ヘッダーモバイルボタン
④フッターモバイルボタン
⑤ヘッダーメニュー(グローバルメニュー)
⑥フッターメニュー
メニューの作成
1.
①【外観】>【メニュー】
②【新しいメニューを作成しましょう】
③メニュー名
④メニュー設定から選択
⑤【メニューを作成】
下記5種類の項目メニューを作成します。
・ヘッダーメニュー
・フッターメニュー
・ヘッダーモバイルボタン
・モバイルスライドインメニュー
・フッターモバイルボタン
ヘッダーメニュー
フッターメニュー
ヘッダーモバイルボタン
モバイルスライドインメニュー
フッターモバイルメニュー
2.メニューに追加したい項目にチェックを入れ、【メニューに追加】をクリック
3.作成したメニューをそれぞれテーマの位置に合わせる
ホームメニューの追加
カスタムリンクから自身の独自ドメイン名のURLを入力し、追加します。
モバイルボタンコマンドメニューの追加
モバイルボタンのメニューにロゴありメニューを追加します。
カスタムリンクからURLに定義コマンドを入力することで、アイコンを表示させることが可能です。
下記コマンド一覧から追加したいコマンドを入力してください。
https://wp-cocoon.com/mobile-footer-menu/
URLコマンド リンク文字列例 ボタンの役割 #menu メニュー グローバルメニューをスライドインで表示
※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨#home ホーム フロントページへのリンクボタン #share シェア シェアボタンを表示
※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨#follow フォロー フォローボタンを表示
※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨#search 検索 検索フォームを表示
※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨#toc 目次 目次に移動
以下の条件の際にボタンが表示されます。
1 「Cocoon設定」で「目次を表示」にしている時
2 目次ウィジェットが「投稿・固定ページ本文中」ウィジェットエリアに入っている時
3 目次ショートコードが記事本文中に入っている時#top トップ ページトップに移動 #prev 前へ 現在表示中の投稿ページの前のページを表示 #next 次へ 現在表示中の投稿ページの次のページを表示 #comments コメント コメント欄へ移動 #logo サイト名入力
※短縮形推奨横幅広めのサイトロゴが表示されるボタンを表示 #sidebar サイドバー サイドバー項目をスライドインで表示
※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨フッターモバイルボタンの設定方法
ウィジェット設定
右のサイドバーに表示されている項目を設定します。
1.【外観】＞【ウィジェット】をクリックします。
サイドバーに追加したいウィジェットを選んで追加します。
2.▽から表示やタイトルなどの詳細設定を変更できます。
アイコン画像設定
必要な画像を作成、設定します。
・プロフィール画像 240×240
・ヘッダー画像 1260×300
・ロゴ画像 800×200
・ファビコン画像 512×512
ヘッダー画像やロゴ画像は言う人によってサイズは違います。テーマや見せ方、どのような環境かによって変わってくるからです。そのため、必ずResolution testで自分の画像を確認します。大きいデスクトップ画面だと引き伸ばされるので、合わない場合はサイズを変更します。
・Resolution testで画像を確認
・環境により端は切れる可能性あり
・表示速度を上げるため、画像は圧縮
Resolution Testはサイトを表示させた時の左下に表示されます。
今回は設定方法、確認方法のみご紹介します。画像のおすすめの作成方法はこちらからご覧ください。
プロフィール画像
240×240の画像を用意します。
1.【ユーザー】＞【プロフィール】をクリック
2.選択から画像をアップロード
ヘッダー・ロゴ画像
ヘッダー、ロゴ画像はデフォルトだとヘッダーメニューの上に表示されます。(フッターメニューに表示も可能)
ロゴは800×200、ヘッダー背景画像は1260×300の画像を用意します。
ロゴ画像は透過すること、ロゴとヘッダー画像は分けて作成します。
1.【Cocoon設定】＞【ヘッダー】をクリック
2.ヘッダーロゴ、ヘッダー背景ロゴそれぞれ選択し画像をアップロード
【変更をまとめて保存】をクリック
ファビコン画像
ファビコンとはタブの横に表示されるアイコン画像のことです。512×512の画像を用意します。
1.【外観】>【カスタマイズ】>【サイト基本情報】>
【サイトアイコンを選択】
投稿ページ作成
ブログ記事となる投稿ページを作成します。ブロックの機能の種類が多いのでよく使うものを抜粋します。
私が作成した記事をサンプルにしながら使い方をご紹介します。
新規追加
1.【投稿】＞【新規追加】をクリック
タイトル
1.タイトルを入力
右側【投稿】タブから表示状態の変更が可能
2.新たにブロックを追加したい場合は【＋】を押下
アイキャッチ画像
ブログの顔ともなるアイキャッチ画像の設定方法です。
アイキャッチ画像作成についてはあわせてこちらもどうぞ
タイトル下に表示されるアイキャッチ画像を設定する
1.【投稿】＞【アイキャッチ画像を設定】をクリック
2.アイキャッチ画像に載せたい画像をアップロード
３.画像を選択し、代替テキスト、タイトルを入力し、設定をクリック
4.画像が表示されれば完了
見出し
【＋】を押下して見出しを追加します。
1.h2~h6まであり、見出しの選択で文字表示サイズが変わる
2.自動的に目次が設定され、見出しの段階によって目次の段階も異なるため、レベルを合わせてタイトルを合わせていくことが必要
本文
文章を入力する際に表示されるツールをご紹介します。
テキストの寄せ方を変更することができる
選択した箇所のカラーリング、字の太さを変更し、目立たせることができる
文を選択しながらマーカーを引くと、ラインを目立たせることができる
サイズ変更したい文を選択しながらクリックするとサイズを変更することができる
文字をイタリック(斜字)にすることができる。
【さらに表示】から他の装飾を付けることも可能
ハイライトは選択した箇所の文字の色を変えることができる
ショートコードでリンクを貼ることができる。
オプションからコピー複製、ブロックの削除などを選択することができる
選択した箇所を太字にできる
ブロック(囲み枠)
【＋】から【Cocoonブロック】で検索するとボックスを追加できます。
右のサイドバー【ブロック】タブからデザインが変更可能
リンク
最初にリンクに飛んだ際に新しいタブを開く設定をします。
1.【Cocoon設定】＞【Cocoon設定】＞【本文】をクリック
2.外部リンクの開き方で【新しいタブで開く】をクリック
3.内部リンクの開き方で【新しいタブで開く】をクリック
ブログの投稿ページに戻ります。
1.リンクを貼りたい箇所を選択し、【リンク】をクリック
２.リンク先を入力し、【 Enter】をクリック
3.リンク先を右クリックし、編集をクリック
4.新しいタブで開くにチェックを入れ、保存をクリック
カテゴリー・タグ
カテゴリーは作成するとジャンルごとにブログの記事をまとめることができます。
タグは細かい項目を設定し、ウィジェットのタグクラウドで興味のあるタグを多く表示させることができます。
カテゴリーはフォルダのような階層的、タグは階層関係なく表示させられるハッシュタグのようなものです。
1.何もブロックを選択していない状態で、右のサイドバーをクリック
下にスクロールすると、カテゴリーとタグの新規追加が可能
ダッシュボードの投稿＞カテゴリーまたはタグから新規追加することも可能です。
バッジ
リンク先や画像などの表示の前に目立たせる機能です。
1.バッジにしたい文章を選択し、【バッジ】から色を選択
2.表示されれば完了
ブログカード
ブログ内に関連するブログや補足記事などがある場合に使用します。
プレビューでこのように表示
1.【＋】を押下し、ブログカードをクリック
2.リンク先のURLを貼る
右のサイドバーからブログカードのラベルの種類を変更できる
3.URLを右クリックし、【編集】をクリック
4.新しいタブで開くにチェックを入れ、【保存】をクリック
以上で、ブログの基礎編は完了です。ブログ記事は10本ほど作ってから公開、慣れたらさらにカスタマイズしていくことがおすすめです。
