
「ワードプレス(WordPress)の基本的なカスタマイズは、ホームページを簡単に作成する方法」シリーズでは、ワードプレス(WordPress)のインストールや基本的な使い方をお話しし、固定ページでホームページのテストサイトを作成しました。

「ワードプレス(WordPress)の基本的なカスタマイズは、ホームページを簡単に作成する方法」シリーズでは、ワードプレス(WordPress)のインストールや基本的な使い方をお話しし、固定ページでホームページのテストサイトを作成しました。
今回は、wordpressの子テーマの作り方についてお話したいと思います。
wordpressをカスタマイズするためには、プラグインを導入すればできることは「ワードプレス(wordpress)をカスタマイズして使い方を覚えよう!!」でお話ししましたが、それだけでは、対応しきれない場合が出てきます。

目次は、最初に追加されています。どのような事が書かれているか前もってわかるようになっています。
書籍の場合は目次を確認し、その項目が何ページに書かれているかを見てから、そこを開けて読み始めると言うステップになりますね。
webサイトの場合は、読みたい目次の項目をクリックしますとそのページに飛んで、すぐに読むことが出来るようになっていますので、とっても便利です。
目次を追加するメリットは、先ほどの 1.ブログ等に書かれている内容がすぐにわかる
2.目次をクリックすると読みたい箇所へジャンプできる
の2点ですが、これらは読者にとってのメリットになります。その他の以下のメリットについてはサイト側のメリットとなります。
3.目次の一部がGoogleの検索結果に表示されることがあるんです。
4.また、実際に目次は読者によくクリックされているんです。
その為、SEO的にも良い効果が期待でき、アクセスアップにつながるようになります。
さて、目次を追加するデメリットはないのでしょうか。
目次の項目がたくさんありますと、スマホではなかなか本文にたどりつかないため何度もスクロールしないといけない場合があります。
この場合は、目次の横に【非表示】がありますので、これをタップしますと目次が表示されなくなりますので、本文をすぐに読みはじめることが出来るようになります。
このようにメリットは多いですが、デメリットは、あまりありませんので、目次をぜひ採用してくださいね。
それでは、さっそく目次の作り方をみていきましょう。
目次作成には、4つの作り方があります。
WordPressのプラグインでよく使用されているのが「Table of Contents Plus」と「Easy Table of Contents」と最近では、国産のプラグインの「Rich Table of Contents」があります。
wordpressのブロックエディタ「Gutenberg(グーテンベルク)」を使用することでプラグインを使用しなくても目次を作成することが出来ます。
無料のテーマ「Cocoon」を使用しますと、標準でWordPressサイトで目次作成ができます。
ページ内でHTMLで書いていく方法です。
目次の作り方には、4つの方法があると言いましたが、一番のおすすめがプラグインを導入する方法です。
一度設定するとブログ等を作成するだけで自動で目次を作ってくれますので、手間いらずでとっても便利です。
最初は、一番多く導入されている「Table of Contents Plus」のプラグインです。
それでは、WordPressのプラグイン導入から設定までを見ていきましょう。
目次は何をもとに作られるかと言いますと、見出しをもとにしています。
wordpressの見出しは、h1からh6まで設定できますが、目次は、h2とh3しか表示しないようにしています。
あまり細かい項目まで表示しますとわかりにくくなりますのでおすすめできません。多くてもh4までにしておく方が無難です。それと、h1も表示しないのが一般的です。
wordpressの管理画面左のプラグインをクリックします。
プラグイン画面が表示されますので、上のプラグイン表示横の「新規追加」をクリックします。

右上に「プラグインの検索」窓が現れますので「Table of Contents Plus」をコピペし貼り付けてください。

最初に「Table of Contents Plus」が表示されているはずです。

左上の「今すぐインストール」をクリックしてください。「有効化」になりますのでクリックしてください。これで導入が完了しました。

プラグインの「インストール済みプラグイン」をクリックすると「Table of Contents Plus」が導入されているのがわかります。


「設定」をクリックしますと「TOC+」が表示されていますのでクリックしてください。

設定画面が表示されましたね。ここで設定をしていきます。

チェックしているところを確認し、チェックされてないところをチェックしてください。下にある「設定を更新」をクリックしますと完了します。
詳細設定をする場合は、次の項目を参考にしてくださいね。
ここでは、見出しを追加する位置を設定します。「最初の見出しの前(デフォルト)」 「最初の見出しの後」 「上」 「下」の中から選びます。
目次の自動生成を行うかどうかの設定で、サイトの見出しが何個あるかによって目次を表示するかしないかを設定します。2~10のあいだで行います。
どのコンテンツで表示するかを決めます。固定ページ 投稿ページ 等
目次の上にタイトルを表示するかしないかを設定します。[例] 目次 コンテンツ 等
目次に「表示」「非表示」を表示し、利用者が表示の切り替えを出来るようにします。目次は常に開いておくようにしましょう。
どの見出しまで目次に含めるかどうかを設定します。どこまで表示するかは、下の「上級者向け」の中で設定します。目次で要点やあらすじがわかるようにしておきましょう。また、表示はh3までにしておく方が見やすいです。
目次に連番を表示するかどうかを設定します。
アンカーリンクにジャンプするかスクロールするかを選択する。
外観は、デフォルトにしておきましょう。
これもグレーのデフォルトにしておきましょう。
見出しレベルを設定します。h2 h3だけでいいです。
除外する見出しがあれば設定します。
次は、もう一つのプラグインの「Easy Table of Contents」について説明します。
表示形式はほとんど同じです。「表示」「非表示」が右上のマークに代わっている程度です。

プラグインのインストールは、「Easy Table of Contents」を検索し同じように設定してください。
検索しますと、このように表示されますので、「今すぐインストール」をクリックし「有効化」してください。

設定画面もほとんど同じです。
ダッシュボード左の「設定」に合わせると「目次」が現れますので、クリックしますと設定画面が現れます。同じように設定をしてください。
設定例を参考にしてくださいね。



WordPress管理画面の「プラグイン」から「新規追加」をクリックし右側のプラグインの検索窓に「Rich Table of Contents」と入力してください。

「今すぐインストール」をクリックし、「有効化」をクリックしてください。 これでWordPressにインストールする事ができました。
管理画面の左側のメニューに「RTOC設定」が表示されましたので、ここで設定します。

初期設定のままではこのような表示になります。

「目次のタイトル」を「Contents」から「目次」に変更
「H3のリスト形式」を「〇」から「番号」に変更しますと、H3の見出しも番号表示になります。

設定は、「基本設定」「デザイン設定」「プリセットカラー設定」「カラー設定(上級者向け)」「応用設定」がありますので、お好みで変更してくださいね。
見出しの表示非表示をテキストで表示できます。
アンカーリンクにジャンプが標準になっている。
テーマの文字の色はブルーが標準になっている。
番号振りは数字のみになっている。
見出しの表示非表示がマークで表示しています。
アンカーリンクにスクロールが標準になっている。
テーマの文字の色はグレーが標準になっている。
カウンター(番号振り)は数字とローマ数字が選択できます。
唯一の国産プラグインです。
見出しの表示形式は、他のプラグインとほぼ同じです。
どのWordPressプラグインを選択しても大差はありませんので、お好みで選んでいただけれはいいです。
ブロックエディタ(標準エディタ)とは、「Gutenberg(グーテンベルク)」と言い、WordPress5.0より採用された新しいテキストエディタです。
ブロックエディタの名前の由来は、その名の通りブロックで構成されているエディタだからそのように呼ばれています。
見出しや、文章、画像などをブロックごとに構成していき、配置は、後でも自由に行えるようになっています。
なぜ「Gutenberg(グーテンベルク)」という名前になったのかといいますと、活版印刷の生みの親であるヨハネス・グーテンベルクの名前からとられたものなんです。
活版印刷は、世界で広く使用されるようになりましたので、同じようにブロックエディタもHTML・CSS・PHPなどの専門知識が無くても誰もが簡単にブログ等を作成してもらえるようにという思いから命名されたものなのです。
従来のエディタ(旧エディタ)をクラシックエディタと言います。当サイトは、使い慣れたクラシックエディタを使用していますので、頑張って説明していきます。
ちなみに、旧エディタは、「Classic Editor」というプラグインを導入しますと使用出来るようになります。
旧エディタとブロックエディタとの切り替えは、「設定」の「投稿設定」の「すべてのユーザーのデフォルトエディター」の項目で切り替えることが出来ます。
旧エディタを使用されてきた方は、使い勝手が全然ちがいますので、まずは、慣れることに専念してください。
Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。
Classic Editorプラグインより
まだ完全ではなく、バグがあったりします。また、ブロックエディタに対応していないプラグインもありますので注意が必要です。
管理画面の「投稿」の「新規作成」を開けてください。
タイトルを追加と⊕が表示されますので、⊕をクリックしてください。
Hの見出しをクリックしてください。

「目次」と入力してください。

目次の下の⊕クリックし、「リスト」をクリックしてください。

番号無しリストが表示されますので、今回は練習として、「テストサイト1」「テストサイト2」「テストサイト3」「テストサイト4」と書いてみてください。

このようになったと思います。

「テストサイト2」と「テストサイト3」を選択して、「リスト項目をインデント」をクリックしてください。
そうしますと、階層構造が出来上がります。

引き続き、下の⊕をクリックし[H見出し]を選択し、「テストサイト1」と「テストサイト4」をh2に「テストサイト2」と「テストサイト3」をh3にしてください。
このようになります。これで、目次と見出しが完成しました。

最後にアンカーリンクを設定しましょう。
アンカーリンクを設定することにより、目次の項目をクリックしますと、それに対応した見出しまで、飛ぶことが出来るようになります。それでは、さっそくはじめましょう。
見出しの「テストサイト1」を選択します。右側の「高度な設定」をクリックしますと、「HTMLアンカー」が現れますので、 「test1」と入力し「下書き保存」してください。

つぎに、目次側の「テストサイト1」を範囲指定し、リンクマーク🔗をクリックしますと入力欄が現れますので、「#test1」と入力し、[enter]をクリックし「下書き保存」てください。

一度サイトを表示し、目次の「テストサイト1」をクリックしますと見出しの「テストサイト1」に飛びます。
残りの「テストサイト2」から「テストサイト4」も同じようにアンカーリンクを設定してください。
これで完了です。
まずは、無料テーマ「Cocoon」をダウンロードし、WordPressにインストールしてください。
インストール方法は、こちらで確認してくださいね。
https://wp-cocoon.com/downloads/#toc7
インストールが完了しますと、WordPressの管理画面の左に「Cocoon設定」が追加されますので、クリックしてください。そうしますと、このようなCocoon設定が現れますのでその中の目次をクリックしてください。

設定画面が現れますが、特に設定をする必要はありません。無料テーマ「Cocoon」は、最初から目次機能が備わっているんです。とっても便利ですね。
最後に、プラグインなしでの目次の作り方ですが、先ほどの「WordPressのブロックエディタでの目次の作り方」とほぼ同じです。
投稿画面の「テキスト」で次のようなタグを入力すれば作成することが出来ます。
テキストで、以下の見出しタグをコピペしテキストに張り付けてください。

以上が、WordPressで目次を作る方法です。
WordPressで、どの目次の作り方が一番おすすめなのかをまとめておきます。
すでに目次機能の無いテーマを導入済みの方は、「Table of Contents Plus」「Easy Table of Contents」「Rich Table of Contents」のプラグインがおすすめです。
まだテーマを決めておられないのであれば、一度、目次作成機能のある無料テーマ「Cocoon」を導入してみてください。
これらは、一度設定してしまうと、以降は自動で作成してくれますので、超便利ですよ。
プラグインなしで目次を作るWordPressのブロックエディタや、手動で作成する場合は、毎回作成しなけれはならない為、とっても手間がかかりますのでお勧め出来ません。
以上を参考にしていただいて、自分にあった方法で目次を作成してくださいね。

WordPress(ワードプレス)とは、従来のように「HTML」や「CSS」の専門的な知識がなくても、文章を作成するだけでブログやホームページを作ることが出来るシステムなんです。
このようなシステムをコンテンツ管理システム (CMS)と言います。
具体的な内容は、メリットやデメリットを見ていただければ、概要は理解していただけると思います。
WordPressはを使用することによってどんなメリットがあるのでしょうか。さっそく見ていきましょう。
オープンソースとは、一般に公開されたソースコードのことで、WordPressもその一つなんです。無料のソフトウェアなので、広く使用されています。
専門的な「HTML」や「CSS」などを知らなくても、文章作成や画像を使用するだけでブログやホームページなどのWebサイトが簡単に作れるんです。
作成したブログやホームページなどのコンテンツが、ダッシュボードの投稿一覧や固定ページにまとめられていて編集や更新する場合も簡単に行うことができます。
WordPressでは、公式の無料テーマ(テンプレート)が数多く準備されており、その中からお気に入りのデザインを選ぶ事が出来ます。
また、WordPressの公式以外にも有料・無料のテーマが作成されており、それをアップロードすることにより取り込むことも出来ます。
テーマは、スタイルシート(デザイン関係)と各テーマファイル(トップページ用、固定ページ用、記事用テンプレートなど)で出来ています。
基本となるデザインを決めるものなので、「WordPressおすすめのテーマ」などで検索してサイトに合ったテーマを見つけてください。
もちろん自分好みにもカスタマイズできますので挑戦してみてください。具体的な使い方につきましては、後半でお話しします。
サイトを作成していますと、「このような機能」が欲しいと思う事が出てきます。そんな時に便利なのが、プラグインです。
その他にも、SEOの強化に関するものや、スパムから守るもの、バックアップするもの、サイトマップを自動で作成するものなど多数あります。ほぼ、自分が欲しいと思うプラグインはありますので検索して探してみてくださいね。具体的な使い方につきましては、後半でお話しします。
WordPress自体がSEOに強いですが、さらにブラグインを追加する事により、より強くすることが出来るんです。
WordPressには、「HTML」や「CSS」がわからなくてもテーマをカスタマイズできる機能が付いているんです。
サイトを確認しながら色を変更したり、メニューを追加したり、ウジェット(サイドバー)を編集したり出来ます。具体的な使い方につきましては、後半でお話しします。
もちろんテーマの編集(テーマエディタ)を使えば、直接PHPファイルやCSSファイルを編集することもできます。
公開したり更新する場合は、通常、転送ソフトFTPなどを使用しますが、容量が多くなるほど時間がかかります。
その点、WordPressの場合は、「公開」又は「更新」のボタンをクリックするだけで一瞬で行うことが出来るんです。ストレスフリーで行う事が出来ます。
次に、デメリットですが、WordPressはオープンソースの為、すべて自己責任で行う必要があります。と言いますとちょっと怖いと感じますが、対策さえしておけば心配いらないです。
それと、WordPressだけでは、サイトを公開することができないんです。これらについて説明していきます。
公開するためにはドメインとサーバーが必要になってきます。WordPressは無料ですが、ドメインとサーバーは有料なんです。でもそんなには高くはありません。ドメインは年間千数百円程度から、サーバーは月数百円程度から始められます。使い方につきましては、後半でお話しします。
無料のブログサービスもありますが、広告が表示されたり、容量が少なかったりします。
トラブル発生時は、ネットで調べることになります。ただ、WordPressのホームページには、「サポートフォーラム」があり、そこで質問することもできるんです。使い方につきましては、後半でお話しします。
WordPressは人気が高く世界中で使用されていますので、攻撃を受ける可能性もあります。
スパムから守る必ためには、セキュリティ対策が必要です。セキュリティ対策用のプラグインもありますので、導入しておきましょう。
また、WordPressは、たえず新しいバージョンに更新しておくようにしましょう。
WordPressは、バージョンよっては、たまに、エラーやバグが発生する場合があります。
その為、必ずバックアップはとっておくようにしましょう。バックアップ用のプラグインもあります。
その他にも、有料無料のCMSがあります。今回は、無料のものを紹介します。あと、無料のブログサービスも紹介しておきます。
無料のCMSと言えば【Drupal(ドルーパル)】があげられます。主に企業で使用されています。もちろん個人での使用もできます。
世界のシェアは約5%です。 ちなみにWordPressは、約60%です。
利用のしやすさは、WordPressは初心者の方でも簡単にできますが、【Drupal(ドルーパル)】は初心者の方にとっては難しいです。
まずは、WordPressを使用することをおすすめします。
代表的な無料サービスは、Ameba、ライブドア、FC2、Seesaa、goo、はてなブログがあげられます。
これらを使用するメリットは、ドメインもサーバーも用意することなく無料で始められることです。
一度日記や、趣味をブログにあげて経験されてみるのもいいと思います。
デメリットとしましては、広告が表示される場合があります。
サーバーは、そこの会社のものを使用することになりますので、サービスが終了された場合は今までのブログはすべて消えてしまうことになります。
複数作成数が少なく1個から10個程度しか作成することができません。
ドメイン形式は、そこのサービス会社のドメインですので、使用する場合は、「サブデレクトリ」か「サブドメイン」になります。
※有料の場合は、独自ドメインを取得することが出来るサービス会社もあります。
今後、Googleアドセンスやアフィリエイトを始めようとしている方は、注意してください。
Googleアドセンスの場合は、「サブデレクトリ」や「サブドメイン」は申し込むことはできません。
アフィリエイトの場合は、各サービス会社により、禁止されているところがあります。
無料サービスを使用する場合は、目的を明確にし、どのサービスを使用するかを決めてくださいね。使い方は、今回は割愛させていただきます。
よくある質問については、公式の「WordPress.org 日本語」の使い方全般フォーラムを見ていただきますと最新の質問から表示されてますので、一度確認してみてください。
また、知りたいことを検索をしますと表示されます。
WordPressを始める為の準備が必要になります。順を追って進めていきましょう。
ムームードメインを使用していますので、ムームードメインで取得します。
ロリポップのサーバーを使用していますので、ロリポップのサーバーを登録します。
ここまでは、こちらで詳しく使い方を説明していますので、ご覧ください。
確認が終われば、このサイトに戻り次に進んでください。
ムームードメインで取得しましたドメインで独自ドメインを設定します。
ロリポップのサイト作成ツールでワードプレスを簡単インストールします。使い方につきましては、後でお話しさせていただきます。
ロリポップで設定することができます。使い方につきましては、後でお話しさせていただきます。
ここまでは、こちらで詳しく使い方を説明していますので、ご覧ください。
確認が終われば、このサイトに戻り次に進んでください。
WordPressのすべての操作は、管理画面(ダッシュボード)でおこないます。
管理画面(ダッシュボード)の操作で見るべきところは、左側に注目してください。
こちらを操作することにより、サイトを作成していきます。

WordPressには、ご覧のような項目があります。まずは、どのような機能があるのかを知るために目を通してください。
使用していくうちに理解出来るようになってきます。
ダッシュボード (ホーム、更新)
投稿 (投稿一覧、新規追加、カテゴリー、タグ)
メディア (ライブラリ、新規追加)
固定ページ (固定ページ一覧、新規追加)
コメント
外観 (テーマ、カスタマイズ、ウジェット、メニュー、ヘッダー、背景、テーマエディタ)
プラグイン (インストール済みプラグイン、新規追加、プラグインエディター)
ユーザー (ユーザー一覧、新規追加、プロフィール)
ツール (利用可能なツール、インポート、エクスポート)
設定 (一般、投稿・表示設定、ディスカッション、メディア、パーマリンク設定、プライバシー)
各項目の使い方は、こちらで詳しく説明していますので、ご覧ください。
確認が終われば、このサイトに戻り次に進んでください。
「サイトのタイトル」と「キャッチフレーズ」は、「設定」の「一般」を選択しますと、一般設定の項目が表示されますので、入力していきます。具体的な使い方につきましては、後でお話しさせていただきます。
パーマリンクとは、サイトURLのドメイン以降をパーマリンクといいます。
「設定」の「パーマリンク設定」で、カスタム構造を設定します。
具体的な使い方につきましては、後でお話しさせていただきます。
テーマとはデザインテンプレートのことで、スタイルシートとテーマファイルで構成されています。デザインと機能を決めるものなんです。
テーマは、WordPressの公式テーマとWordPressの公式テーマ以外があります。公式テーマは、すべて無料で使用できますが、公式以外のテーマは、有料と無料があります。
公式テーマは、WordPress内で検索できますが、公式以外のテーマは、ダウンロードしたzip形式のテーマをインストールすることで使用できるようになります。
もちろん、テーマエディタで[PHP]や[CSS]を編集する事により、テーマのデザインを変更することもできます。
具体的な使い方につきましては、後でお話しさせていただきます。
プラグインとは、機能を増やすことが出来るプログラムのことで、スマホでいうアプリの様なものなんです。
プラグインを導入する上での注意事項
セキュリティ面で、WordPress公式のプラグインを使用するようにしましょう。
WordPressプラグインをインストールする方法
テーマと同じく、公式プラグインは、WordPress内で検索できますが、公式以外のプラグインは、ダウンロードしたzip形式のプラグインをインストールすることで使用できるようになります。
具体的な使い方につきましては、後でお話しさせていただきます。
「固定ページ」の「新規作成」をクリックしますと、新しい固定ページが表示されます。
「タイトルを追加」欄にタイトルを入力しましょう。
タイトルを入力し、2回クリックするとバーマリンクがタイトルの下に現れますので、設定します。
サイトには、画像が必要です。WordPressの「メディアを追加」をクリックし、外部からファイルをアップロードすることにより、「メディアライブラリ」に登録され、この画像を挿入します。
各項目の使い方は、こちらで解説していますのでご覧ください。
確認が終われば、このサイトに戻り次に進んでくださいね。
投稿機能は、特にブログ作成に使用します。
固定ページと同様、「新規作成で」タイトルとパーマリンクを設定し記事を書いていきます。
ここからは、固定ページで作成したテストサイトをブログでも作成してみましょう。
タイトルとパーマリンクを設定し画像を挿入し下書き保存し、プレビューで確認してみてください。
ここでは、ホームページとブログの共通の項目と使い方について説明していきます。
ここまでの内容は、こちらで説明しておりますので、ご覧ください。
確認が終われば、このサイトに戻り次に進んでくださいね。
次は、作成するにあたり、キーワードや、検索ボリューム、関連キーワード、などの調べ方や、タイトルの書き方、ディスプリクションの書き方、関連キーワードの書き方についてお話させていただきます。
こちらで具体的な使い方を説明しておりますので、ご覧ください。
確認が終われば、このサイトに戻り次に進んでくださいね。
最後に、WordPressに使用する画像をあなた好みに編集してみましょう。
こちらで詳しく使い方を説明していますので、ご覧ください。
このサイトを参考にしていただいて、ぜび、作成してみてくださいね。
今回は、以下の項目につきましてお話しさせていただきました。
どのような内容だったのかもう一度見てみたい項目がありましたら、確認してみてください。