WordPressテーマ変更方法!必ず実行すべき4つの事と注意点

WordPress テーマ 変更

WordPressのテーマをそろそろ変更しようかな〜

WordPressのテーマ変更はクリックするだけで管理画面から簡単に行う事が可能です。

しかしテーマ変更によって、今まで作り上げてきたカスタマイズが消えてしまう可能性があります。

その様な事態にならない様に、今回はテーマ変更を安全に行う方法を詳しく解説していきましょう。

1:テーマ変更時に必ず実行すべき4つの事と注意点

テーマの変更はWordPressの管理画面から簡単に変更する事が可能です。

しかし自分である程度カスタマイズしている場合、何も準備せずに変更してしまうとデザインが消えてしまう可能性が大いに考えられます。

テーマの変更は「ウィジェット」や「テーマ独自機能部分」に関しては設定内容が消えてしまいます。

そこで、テーマ変更時に必ずするべき4つの事注意点について解説していきましょう。

  • ① バックアップ
  • ② 使用するテーマのインストール
  • ③ アイキャッチ画像をリサイズ化
  • ④ Google アナリティクス・Search Console再設定

テーマ変更を行うにあたって必ず必要になる、上記4つの事について注意点と共に詳しく解説していきます。

1-1:バックアップ

テーマ変更前に必ずする事1つ目はバックアップです。

自身でカスタマイズしている場合には必ずバックアップを取る事を忘れてはいけません。

なぜならテーマの変更では、テーマ独自機能部分のカスタマイズ内容が消えてしまう可能性があるからです。

これはほぼ100%消えると考えて良いでしょう。

ウィジェットやPHP・CSSファイルなど消えてしまっては困るカスタマイズ内容がある場合には必ず以下2つのいずれかの方法でバックアップを取ります。

  • FTPソフトでバックアップ
  • 「BackWPup」プラグインを使ってバックアップ

上記いずれかの方法で、テーマ変更前に必ずバックアップを取っておきましょう。

1-2:使用するテーマのインストール

テーマ変更前に必ずする事2つ目は使用するテーマのインストールです。

テーマ変更前には、変更後に使用したいテーマを事前にインストールしておきましょう。

⬇︎⬇︎テーマのインストール方法については下記の記事を参考にしてみて下さい⬇︎⬇︎

WordPressテーマをインストールする2つの方法と失敗時の対策

1-3:アイキャッチ画像をリサイズ化

テーマ変更後に必ずする事3つ目はアイキャッチ画像のリサイズ化です。

アイキャッチ画像はテーマ変更に伴い、リサイズ化が必要になる場合があります。もともと使用していたテーマに合ったサイズで、新テーマでも表示されてしまった場合には手動でアイキャッチ画像を今のテーマに最適なサイズ感にする必要があるのです。

「えー面倒だなあ…」

私も面倒だと感じました。しかしそんな時に便利なのが一括でアイキャッチ画像のリサイズ化をしてくれるプラグインRegenerate Thumbnailsです。

アイキャッチ画像 リサイズ

このプラグインを使えば簡単にアイキャッチ画像のリサイズ化ができます。

1-4:Googleアナリティクス・Search Console再設定

テーマ変更後に必ずする事4つ目はGoogleアナリティクス・Search Consoleの再設定です。

テーマを変更するとheader.phpも変更されてしまう為、再設定をしなければGoogleアナリティクス・Search Consoleやアドセンスが利用できなくなってしまいます。

頻繁にアクセス数をチェックしているのであれば、変更のタイミングと一緒に再設定も行っておきましょう。

Googleアナリティクス・Search Console・アドセンスを利用する為には「トラッキングコード」を再設定する必要があります。Googleアナリティクス・Search Console・アドセンス、それぞれのマイページからトラッキングコードをコピーして変更した新テーマのheader.phpに貼り付ければ再設定は完了です。

ヘッダーPHP

WordPress管理画面のheader.php➡️<head></head>間に貼り付けましょう。

(子テーマを使用している場合には、親テーマのheader.phpに貼り付ける必要があります。)

2:テーマ変更方法

実際のテーマ変更方法が知りたい!

テーマ変更に伴う、すべき事と注意点を把握したらテーマを変更してみましょう。テーマの変更自体は、とても簡単ですが有効化する前に必ず「プレビュー」で変更内容を確認してから有効化を行う様にします。

詳しく手順について解説していきましょう。

2-1:テーマ変更の手順

さっそくテーマを変更する手順を紹介していきます。

使用するテーマはすでにWordPressにインストールしているものとします。

(1) 外観➡️「テーマ」クリック

WordPress テーマ

(2) 使用したいテーマの「ライブプレビュー」クリック

テーマ一覧が表示されます。

使用したいテーマにカーソルを持っていき「ライブプレビュー」をクリックしましょう。

この時「有効化」はクリックしない様にします。

WordPress テーマ

(3) ライブプレビューで変更内容が確認できる

ライブプレビューで変更内容を確認します。

また左側のメニューバーにて

  • タイトル
  • ヘッダー画像
  • メニュー
  • ウィジェット
  • CSSコードの追加

など、編集を加える事も可能です。

変更内容はリアルタイムで反映されていきます。

テーマ変更を有効化する前に、非公開の状態で実際の表示を確認しながら変更していく事が可能です。

WordPress テーマ

(4) 変更内容確認後「有効化して公開」クリック

変更内容の確認後「有効化して公開」をクリックすれば変更完了です。

やっぱりやめたい時には左上の「×」をクリックすれば、何も変更されず終了します。

WordPress テーマ

3:テスト環境で練習してみる!MAMPとXAMPPについて

いきなりテーマを変更するのは不安だなあ〜…。

そんな場合には、ローカル上でWordPressを設置・構築して練習してみるのはいかがでしょうか?

また、この方法は作業途中で中途半端なまま公開するのが嫌な場合やセキュリテイ上の問題からもローカル上で構築するのは大いに推奨できる方法です。

ローカル上でWordPressを設定・構築する2つのソフトを紹介します。

  • MAMP (Macユーザー)
  • XAMPP (Windowsユーザー)

上記2つのソフトで出来る事は、ほぼ同じです。

使用している端末によって、どちらを使うか決めると良いでしょう。

上記2つのソフトについて紹介していきます。

3-1:MAMP(Macユーザー)の概要と使用方法

MAMP

MAMPは、Macintosh・Apache・My SQL・PHPの頭文字で、これらを全て無料で使用する事が出来ます。

Macに特化したローカル上でWordPressを再現する事の出来るソフトです。XAMPPと比べると付属のソフトが少ないですが、テスト環境として使用するにあたっては全く問題なく使用する事が出来ます。

無料版・有料版がありますが、テスト環境として使用するのであれば無料版で十分です。

使用開始手順を紹介しておきましょう。

  • ① MAMPインストール
  • ② MAMP初期設定
  • ・スタート/ストップ設定
  • ・ポート設定
  • ・PHP設定
  • ・Apache設定
  • ③ データベースの作成
  • ④ WordPressのインストール
  • ⑤ データベース情報の入力
  • ⑥ サイト情報の入力
  • ⑦ ログイン

上記7つの手順でテスト環境を使用し始める事が可能です。

⬇︎⬇︎MAMPは下記URLからダウンロード出来ます⬇︎⬇︎

https://www.mamp.info/en/

3-2:XAMPP(Windowsユーザー)の概要と使用方法

XAMPP

XAMPPは、Apache・HTTPサーバ・My SQL・PHP・periの頭文字とクラスプラットフォームの「X」で、これらを全て無料で一括インストールし使用する事が出来ます。

XAMPPはWindowsを使用している場合にオススメな、ローカル上でWordPressを設置・構築する事の出来るソフトです。使用開始手順を紹介しておきましょう。

  • ① XAMPPインストール
  • ② XAMPP初期設定
  • ・Apache初期設定
  • ・Apache・My SQL設定
  • ・セキュリティ設定
  • ・文字化け・エラー対応設定
  • ・My SQL設定
  • ③ データベースの作成
  • ④ WordPressのインストール
  • ⑤ データベース情報入力
  • ⑥ サイト情報入力
  • ⑦ ログイン

上記7つの手順の後、XAMPPでテスト環境を使用し始める事が可能です。

⬇︎⬇︎XAMPPは下記URLからダウンロード出来ます⬇︎⬇︎

https://www.apachefriends.org/jp/index.html

4:変更する3つのメリットと2つのデメリット

テーマ変更前に、知っておきたいのがメリットとデメリットですよね。

テーマを変更するにあたってメリットだけではなく、もちろんデメリットも存在します。

テーマ変更前にメリットとデメリットを把握しておきましょう。

メリットは3つデメリットは2つあります。

メリット デメリット

上記3つのメリットと2つのデメリットについて詳しく解説していきましょう。

4-1:3つのメリット

テーマを変更する3つのメリットについて紹介します。

① SEO対策

1つ目のメリットはSEO対策です。

しっかりと内部対策がされているテーマを使う様にすれば、それだけでSEO対策になります。反対に内部対策がしっかりとされていないテーマを使ってしまうとガクンと検索順位が下がってしまう可能性もあるのです。

テーマ変更前に、しっかり内部対策はされているのか確認してから変更する様にすると良いでしょう。

② デザイン変更

2つ目のメリットはデザインの変更です。

テーマを変更するだけで、ガラッとサイトのデザインや雰囲気を変える事が出来ます。

サイトのイメージを変えたい場合などには、テーマの変更をすると良いでしょう。

③ テーマ機能の利用

3つ目のメリットはテーマ機能の利用です。

テーマによって、それぞれ入ってる独自機能が異なります。

テーマ機能が充実しているテーマに変更する事で、よりWordPressが使いやすくなう可能性がありますね。

4-2:2つのデメリット

テーマを変更する2つのデメリットについて紹介します。

① 面倒な作業が多い

1つ目のデメリットは面倒な作業が多い点です。

もともと使用していたテーマを独自カスタマイズしている場合など、Googleアナリティクス・Serch Consoleの再設定など、テーマを変更すると修正もしくは再設定しなければいけない作業が沢山ありますよね。

かなり面倒な作業なので、サクッと1分で終わったー!というわけにはいきません。

テーマ変更により、面倒な作業が増える事が最大のデメリットと言えるでしょう。

② プラグインが使えなくなる

2つ目のデメリットはプラグインが使えなくなる可能性がある点です。

テーマによっては使用する事の出来ないプラグインが存在します。

便利なプラグインが使用出来なくなってしまうのは、とても痛いですよね。

テーマ変更によっては、そういった事態も考えられる事を覚えておきましょう。

まとめ

WordPressテーマの変更について詳しく解説してきました。

テーマの変更自体は管理画面から簡単に行う事が出来ますが、変更前・変更後には必ずすべきポイントが4つあります。

  • ① バックアップ
  • ② 使用するテーマのインストール
  • ③ アイキャッチ画像をリサイズ化
  • ④ Google アナリティクス・Search Console再設定

テーマ変更前には必ずバックアップを取り、何が起きても元に戻せる保険をかけておきましょう。また、いきなり変更するのが不安な場合にはテスト環境で練習してみるのも良いでしょう。ぜひ参考にしてみて下さい。

WordPressでトラックバックを送信する方法と2つのメリット

WordPressトラックバック

WordPressのトラックバックって何だろう?

トラックバックとは簡単に言うと、参考にした記事のリンクをコンテンツに貼りあなたのサイトのリンクを貼りましたよ!リンク元の管理者へ通知する機能になります。

とても便利な機能ですが、手間がかかり面倒な作業が必要なので今では「ピンバック」というWordPressが独自に開発した機能の方が利便性が高くオススメです。

今回は、トラックバックについて詳しく紹介していきましょう。

1:トラックバックとは

トラックバックって、どんな機能なの?

トラックバックとは、参考にしたサイトのURLをコンテンツに掲載した時に、参考元の管理者へあなたのサイトのリンクを貼りました!通知する機能です。

トラックバックを活用する事で、サイトを知らない他サイトの運営者に自社サイトを知らせる事が出来るので活用して損は無い機能になります。ただし、トラックバックよりもオススメなのが「ピンバック」です。

ピンバックはトラックバックと同じ様な使い方を行う事が可能ですが、不要な手間なく自動で簡単に利用する事が出来ます。「トラックバック」と「ピンバック」の違いについて紹介していきましょう。

1-1:トラックバックとピンバックの違い

トラックバックとピンバックの違いについて紹介していきます。

トラックバックを行うには、必ずトラックバックURLが必要です。

また、トラックバック送信時には全て手動で作業を行う必要があります。

トラックバックURLを探したり、手動で作業する必要のあるトラックバックに比べて、ピンバックは記事URLのみ分かればOKで、手動で作業する必要も無いのです。

トラックバック ピンバック

表にしてみると、明らかにピンバックの方が手間がかからず利便性が良い事がわかります。

ただし、ピンバック機能はWordPress同士の場合にしか使う事ができません。

WordPressで作ったサイト以外に通知機能を使いたい場合には「トラックバック」を活用すると良いでしょう。

ピンバック機能について詳しく知りたい方は下記の記事をご覧下さい。

WordPress限定のピンバック機能!2つのメリットと設定方法

2:トラックバック2つのメリット

面倒な手間が多いトラックバックですが、メリットも勿論存在します。

ピンバック機能が使えない場合に、活用すると便利な「トラックバック」機能の2つのメリットについて紹介していきましょう。

  • SEO効果が発生する
  • アクセス数アップに繋がる

上記2つのメリットについて詳しく解説していきましょう。

2-1:SEO効果が発生する

1つ目のメリットは「SEO効果の発生」です。

トラックバックが相手の管理者から承認されて相互リンクとなれば被リンクとなりSEO効果が見込めます。

ただし、SEO効果が発生するのはnofollow属性がついていない場合のみになります。

nofollow属性がついていると、被リンクとしてのSEO効果は無効になるので把握しておきましょう。

nofollow属性についてはSearch Consoleヘルプをご覧ください。

2-2:アクセス数アップに繋がる

2つ目のメリットは「アクセス数アップに繋がる」です。

相手のサイトに、自身のリンクが設置されれば記事へのアクセス数アップが見込めます。

そもそも、トラックバックを行う際には自身のサイトと関連のあるサイトへ送信するものです。

リンク元のサイトでも、自身のリンクが掲載されればブログ同士のネットワークが拡大し訪問ユーザー数が増える可能性が高くなります。

訪問ユーザーが増えると、結果的に検索上位表示に繋がるので更なるアクセス数アップが見込めるのです。

3:トラックバックの送信方法

トラックバックの送信って、どうやってやるの?

ピンバックが使えないような状況になった時に、トラックバックが利用できると非常に便利です。

トラックバックを使用する為には、必ず必要なものがあります。

  • トラックバックURL

上記のトラックバックURLは記事の一番下に掲載されています。

トラックバックしたい記事のトラックバックURLを取得しトラックバックを行いましょう。

トラックバックの送信方法について詳しく紹介していきます。

WordPress トラックバックURL

3-1:送信手順

トラックバックを送信する方法を紹介していきます。

トラックバックを送信する為には、相手のトラックバックURLが必ず必要です。

事前に準備してからトラックバックを送信する作業を行うとスムーズに作業出来るでしょう。

(1) 投稿➡️「新規追加」

WordPress 投稿

(2) 画面右上「表示オプション」クリック

表示オプション

(3) 表示オプションの中にある「トラックバック送信」に☑️チェックを入れる

トラックバック

(4) 投稿画面したトラックバックURL入力欄が現れる

トラックバック

参考サイト元のトラックバックURLを貼り付けましょう。

トラックバックURL

(5) 「更新」もしくは「公開」をクリックすれば完了

投稿記事を更新/公開すると、トラックバックURL入力欄の下に送信済みトラックバックとして履歴が残ります。

トラックバックURL

以上がトラックバックを送信する方法です。

記事投稿時にトラックバックURLを入れるだけで簡単にトラックバックを送信する事ができます。

4:トラックバックを無効にする方法

トラックバックは通知を送る事が出来る便利な機能ですが、中には本来の目的からズレた使い方をしている人もいます。

なぜならトラックバックは記事の内容に関わらず、トラックバックURLさえ分かれば送信する事が可能です。

その為、サイトにスパムのトラックバックが大量に届いてしまう可能性があります。

その様な迷惑な事になる前に、トラックバックを無効にする方法があるのです。

手順について詳しく解説していきましょう。

4-1:無効にする手順

トラックバック機能を無効にする手順について紹介していきます。

まずはWordPressへログインしておきましょう。

(1) 設定➡️「ディスカッション」クリック

ディスカッション設定

(2) 投稿のデフォルト設定➡️トラックバックのチェックを外す

投稿のデフォルト設定項目の上から2つ目新しい記事に対し他のブログからの通知(ピンバック・トラックバック)を受け付けるのチェックボックスからチェックを外しましょう。その後保存して完了です。

トラックバック 無効

今まで投稿した記事には反映されないので、既存の記事にも反映させたい場合には個別で設定が必要になります。新しい記事に関しては、上記設定のみで完了です。

まとめ

WordPressのトラックバック機能について詳しく紹介してきました。

トラックバックを使う事でSEO効果の発生や、アクセス数アップが期待出来ます。

ただし、普段WordPressで作ったサイト同士で通知機能を使いたい場合には「ピンバック」機能がオススメです。ぜひ参考にしてみてください。

WordPressのテーマを削除する2つの方法とコピーライト編集

WordPress テーマ 削除

容量も重くなってきたし、WordPressの使っていないテーマを削除したいなあ…。

上記のようにテーマの削除をお考えではありませんか?

WordPressのテーマをいくつもインストールしていると管理が複雑になってしまったり、更新通知にイライラしたりします。削除する事で管理時のイライラが無くなり、データベースの容量節約にもなるのです。

今回はWordPressのテーマを削除する2つの方法を紹介します。

  • 管理画面から削除する方法
  • FTPソフトを使って削除する方法

上記2つの方法からテーマを削除する事が出来ますが、最も簡単でオススメなのは管理画面から削除する方法です。詳しく手順について紹介していきましょう。

1:管理画面から消去する方法

WordPressのテーマを削除する最も簡単な方法が管理画面から削除する方法です。

WordPressにログインしクリックするだけで簡単にテーマを削除する事が出来ます。

削除する手順に沿って詳しく解説していきましょう。

1-1:テーマ削除手順

さっそくWordPressの管理画面からテーマを削除する方法を紹介していきます。

まずはWordPressにログインしておきましょう。

(1) WordPress管理画面にログイン

WordPress 管理画面

(2) 外観➡️「テーマ」をクリック

WordPress テーマ

(3) インストール済みテーマが表示される

WordPress テーマ

(4) 削除したいテーマ画像にカーソルを当てる➡️「テーマの詳細」クリック

削除したいテーマ画像にカーソルを持っていき、テーマの詳細と表示されるのでクリックしましょう。

WordPress テーマ

(5) 画面右下「消去」クリック

テーマの詳細ページになります。画面右下の消去をクリックしましょう。

WordPress テーマ

(6) 「OK」クリック

消去をクリックすると消去確認のポップが画面上部に表示されます。

OKをクリックしテーマを削除しましょう。

WordPress テーマ 削除

以上が管理画面からテーマを削除する方法です。

2:FTPソフトから消去する方法

WordPressのテーマを削除する2つ目の方法は「FTPソフトから削除する方法」です。

この方法はFTPソフトを使った方法になるので上級者向きになります。

FTPソフトを使う事が出来れば、WordPressを開かずともテーマを削除する事が可能です。

FTPソフトについては下記URLをご覧ください。

https://ja.wikipedia.org/wiki/FTP%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88

2-1:テーマ削除手順

さっそくFTPソフトを使ってテーマを削除する方法を紹介しましょう。

FTPソフトは「FileZilla」を使用しています。

(1) 「Sydney」テーマを削除する

Sydneyテーマを削除していきます。下記画面は削除前です。

WordPress テーマ削除

(2) FTPソフトでサーバへアクセス

/home/ドメイン名/www/ドメイン名/wp-content/themes/

FTPソフトで上記の場所を開くと、themesの中にインストール済みテーマが下記画像のように表示されます。削除したい「sydney」テーマも入っていますね。

FTPソフト

(3) テーマを右クリック「削除(E)」クリック

削除したいテーマを右クリックし、ポップの中央削除(E)をクリックしましょう。

FTPソフト

(4) 「はい」クリック

削除をクリックすると確認のポップが表示されますのではいをクリックしテーマを削除します。

FTPソフト

(5) 削除完了

以上でFTPソフトからテーマを削除する方法は完了です。

実際にWordPress管理画面で、テーマ一覧を見てみるとSydneyテーマが削除されています。

WordPress テーマ

3:Proudly powered by WordPressを削除・コピーライトに変更する方法

フッター部分に記載されているProudly powered by WordPressですが、削除したい!もしくはコピーライトCopyright©︎ブログ名 All Rights Reserved.に変更したいとお考えではないでしょうか。

フッター部分に「Proudly powered by WordPress」が入っていると、なんだか格好悪いイメージがありますよね。そこで今回は、「Proudly powered by WordPress」を削除する方法コピーライトに変更する方法について詳しく解説していきましょう。

3-1:Proudly powered by WordPressを削除する方法

footer.php 削除

WordPressのフッター部分に記載されている「Proudly powered by WordPress」を削除する方法を紹介していきます。方法はfooter.phpを少し変更するだけですが、必ずバックアップを取っておきましょう。

(1) 外観➡️「テーマの編集」

Wordpress

(2) テーマファイル➡️「テーマフッター(footer.php)」クリック

テーマ編集の画面右、テーマファイルの中からテーマフッターを選択します。

Wordpress

(3) <div class=”site-info”>〜</div><!– .site-info –>の中を削除する

<div class=”site-info”>〜</div><!– .site-info –>の「〜」の部分を削除します。

footer.php 削除

削除後、更新をクリックし保存すれば、下記画像のようにフッター部分の「Proudly powered by WordPress」表記が削除されています。

Wordpress

以上がフッター部分に表記されている「Proudly powered by WordPress」を削除する方法です。

3-2:コピーライトに変更する方法

「Proudly powered by WordPress」をコピーライト「Copyright©︎ブログ名 All Rights Reserved.」に変更する方法を紹介します。

3-1同様にfooter.phpの一部の表記を「Copyright©︎ブログ名 All Rights Reserved.」に書き換えるだけで変更する事が可能です。

(1) 外観➡️「テーマの編集」

Wordpress

(2) テーマフッター(footer.php)クリック

Wordpress

(3) 以下部分にコピーライトタグを入力する

もともと「Proudly powered by WordPress」が記載されていた部分に以下タグを入力します。

(①・② どちらかお好きなタグを入力しましょう。)

 Copyright &copy; <?php bloginfo( 'name' ); ?> All Rights Reserved.

上記コードを入力すると、自動的に’name’部分にサイト名が記載されます。

好きな文字に変更する事も可能です。

コピーライト

<p>Copyright &copy <?php echo date("Y"); ?> 名前 All Rights Reserved.</p>

上記コードに書き換えると“Y”部分に、今年の西暦が自動的に表示されます。

「名前」部分にはサイト名等を入れましょう。

コピーライト

上記コードに書き換えると、以下画像の様にコピーライトに書き換えられます。

コピーライト

タグを書き換えるだけで簡単にコピーライトに変更する事が可能です。

是非試してみてください。

まとめ

WordPressのテーマを削除する方法を紹介してきました。

テーマを削除する方法は2つあります。

  • 管理画面から削除する方法
  • FTPソフトを使って削除する方法

最も簡単なのは管理画面から削除する方法です。

WordPressの管理が複雑になる前に、不要なテーマを削除しておきましょう。

また不要なテーマを削除する事で、少しではありますがデータベースの容量を節約する事ができます。

是非参考にしてみて下さい。

WordPressのSSL化をさくらのサーバで行う全工程を記録

WordPress SSL さくら

WordPressを常時SSL化させたい!

ユーザーに安心してサイトを閲覧・利用してもらう為にも重要な設定となるSSL化ですが、

「面倒だから後でやろーっと!」という風に後回しにしていませんか?

SSL化されていないページにはブラウザが警告表示を行うようになっており、SEO対策的にもマイナス要素が出てきます。ホームページを作成したら、必ず常時SSL化を行うようにしましょう。

今回は、さくらインターネットでWordPressの常時SSL化する方法について詳しく解説していきます。

1:さくらインターネットSSL有料証明書と無料証明書の特徴と違い

SSL化は有料の証明書無料の証明書がある事はご存知ですか?

さくらのレンタルサーバでは無料のSSLサーバ証明書を発行する事が出来るLet’s Encrypt(レッツエンクリプト)が対応しています。無料証明書でも有料証明書との暗号化強度は全く変わらないのです。

「じゃあ無料SSLサーバ証明書で十分じゃない?」

無料SSLサーバ証明書でも暗号化するには十分ですが、個人用サイトや練習等での利用がオススメです。

  • 有料SSLサーバ:企業サイト向け
  • 無料SSLサーバ:個人サイトや練習用向け

有料と無料、どちらにするか決める前に2つのSSL証明書の特徴について紹介していきます。

1-1:有料SSLサーバ証明書5つの特徴

有料SSL証明証

  • ❌コストがかかる
  • ❌自動更新に対応していない場合が多い
  • ⭕️手厚い付加サポートが付いている場合が多い
  • ⭕️信頼性の高い証明証を選ぶ事が出来る
  • ⭕️有効期間が長い

有料SSLサーバ証明書は無料SSLサーバ証明書に比べて、コストはかかりますが信用性のある証明書を付ける事が出来たりサポートが付随していたりするのでメリットが多いのです。

上記5つの特徴について、さらに詳しく解説していきましょう。

《コストがかかる》

有料証明書が無料証明書と違う1番の特徴は、コストがかかる事です。

本来、SSLサーバ証明書は認証局の運用の為、多くのITインフラを必要としています。その為、必然的にお金が発生する事は当たり前になります。価格は900円〜20万円まで幅広く用意されており、自身が求める証明証を購入しましょう。

《自動更新に対応していない場合が多い》

有料SSLサーバ証明書は、自動更新に対応していない場合が多いです。

有効期限が切れる60日前〜30日前に届く更新通知を確認し、ご自身で更新手続きを行う必要があります。

《手厚い付加サポートが付いている場合が多い》

有料のSSLサーバ証明書だと、無料SSLサーバ証明書には無い付加サポートが付いている場合が多いのです。例えば、マルウェアからサイトを守る為に毎日サイトをスキャンして保護してくれる機能・認証局側の過失で流失した顧客情報等の損害を補償してくれる等のサポートがあります。

無料のSSLサーバ証明書には、この様な手厚いサポートは付いていない場合があるので有料SSLサーバ証明書の方が安心して利用する事が出来るでしょう。

《信頼性の高い証明証を選ぶ事が出来る》

SSL証明書

SSLサーバ証明書には3つの種類があり、種類によって信頼性の高いサイトかどうかの印象を与える事が出来ます。

  • 【誰でも作れる】ドメイン認証型SSLサーバ証明書(DV:Domain Validation)
  • 【高い信頼性】企業認証型SSLサーバ証明書(OV:Organizaion Validation)
  • 【最高レベルの高い信頼性】EV SSL証明書(Extended Validation)

利用するSSLサーバ証明書によって金額や、発行までのスピードも異なりますが有料SSLサーバ証明書であれば信頼性の高いSSLサーバ証明書を選ぶ事が可能です。

《有効期間が長い》

更新手続きが面倒なSSL証明書ですが、有料SSLサーバ証明書であれば最長2年間の有効期限があるものを購入する事が出来ます。

1-2:無料SSLサーバ証明書3つの特徴

Let's Encrypt

無料のSSLサーバー証明書の特徴について紹介します。

  • ⭕️コストがかからない
  • ❌90日毎に更新手続きをしなければならない
  • ❌突然サービスが終了になる可能性がある

コストが全くかからないメリットに対して、マイナスな特徴が多い無料SSLサーバ証明書です。

上記3つの特徴について詳しく解説していきましょう。

《コストがかからない》

無料SSLサーバ証明書の一番の魅力は「コストがかからない事」です。

認証局の運営の為にコストがかかるのは必然的ですが、Let’s Encryptの運営は企業からの寄付によって支えられています。その為、利用者は無料で利用する事がきます。

《90日毎に更新手続きをしなければならない》

無料SSLサーバ証明書は、自動更新に対応していないレンタルサーバを利用している場合、90日毎に手動で更新手続きを行う必要があるのです。

また、自動更新スクリプトという設定を行なった場合でも面倒な手間がかかる場合があります。

《突然サービスが終了になる可能性がある》

無料で利用する事の出来るLet’s Encryptの運営資金は寄付で支えられているので、通常の認証局よりサービス提供終了の可能性が高いです。

2:WordPressをさくらインターネットでSSL化する方法

WordPressをさくらインターネットで常時SSL化するには、どうしたら良いのだろう?

さくらインターネットでSSL化する手順について紹介していきます。

今回は、さくらインターネットで有料のSSLサーバ証明書を発行しSSL化していく方法を紹介していきましょう。手順は以下の通りです。

  • ① CSRと秘密鍵の作成
  • ② SSL証明書の申込み
  • ③ 支払い
  • ④ 認証と審査
  • ⑤ 発行
  • ⑥ インストール

1つ1つゆっくり作業していけば、誰でも簡単にSSL化する事が出来ます。

是非一緒にトライしてみてください。

2-1:① CSRと秘密鍵の作成

さっそくSSL化する手順について紹介していきます。

まずはCSRと秘密鍵の作成が必要です。サーバコントロールパネルから操作していきます。

(1) 「サーバコントロールパネル」ログイン

サーバーコントロールパネル

⬇︎

サーバーコントロールパネル

(2) 「ドメイン/SSL設定」クリック

コントロールパネル画面左下のドメイン設定→「ドメイン/SSL設定」をクリックします。

サーバーコントロールパネル

(3) SSL化したいドメインの「登録」クリック

管理しているドメイン一覧が表示されます。

SSL化したいドメイン名にある証明書欄「登録」をクリックしましょう。

サーバーコントロールパネル

(4) SSLサーバ証明書概要→「詳細設定」クリック

SSLサーバ証明書概要ページになるので、SSL証明書詳細設定欄の「詳細設定」をクリックしましょう。

サーバーコントロールパネル

(5) 独自SSLの設定→「秘密鍵を生成する」クリック

「*現在SSLの設定はされていません*」の下にある「秘密鍵を生成する」をクリックしましょう。

サーバーコントロールパネル

(4) 独自SSLの設定→「CSRを作成する」クリック

サーバーコントロールパネル

⬇︎

「CSRを作成する」をクリックし画面を下へスクロールします。

サーバーコントロールパネル

  • ドメイン
  • 会社名
  • 部門名
  • 国コード
  • 都道府県
  • 市町村

(※ が付いているものは必須項目)

上記入力欄を全て埋めて一番下の「CSRの作成」をクリックします。

(5) CSRが表示される

下記の赤枠で囲った部分にCSRが表示されるので、コピーしてテキストエディター等に保存しておきましょう。

コピーしたら一番下の「JPRS SSL (有料サービス) のお申し込みへ進む」をクリックします。

サーバーコントロールパネル

(6) 「サーバ証明書のお申し込み」クリック

サーバーコントロールパネル

2-2:SSL証明書の申込みと支払い

CSRと秘密鍵の作成が完了したら、続いてSSL証明書の申込みと支払いを行なっていきます。先ほどの最後のページの後、さくらインターネットログインページに切り替わるので、続きから進んでいきましょう。

(1) さくらインターネットにログインする

さくらインターネット

(2) 「SSLサーバ証明書お申し込み」ページ

SSL証明書の申込み

 

(3) プランを選択する

SSL証明書の申込み

(4) 支払い方法を選択・入力する

SSL証明書の申込み

(5) 同意するにチェックを入れて「確認画面へ進む」クリック

SSL証明書の申込み

(6) CSRの内容確認

先ほどテキストエディターにコピーしておいたCSRを下記画面に入力します。

入力後「➡️」をクリックしましょう。

SSL証明書の申込み

(7) 「確認画面へ進む」クリック

SSL証明書の申込み

(8) 申込み内容の確認

申込み内容に問題が無ければ画面下の「この内容で申し込む」をクリックしましょう。

SSL証明書の申込み

SSL証明書の申込み

(9) 申込み完了

この後メールが届くので待ちましょう。

SSL証明書の申込み

2-3:認証(アップロードを行う)

SSLサーバ証明書の申込み完了後、10分程度でさくらインターネットからメールが届きます。

SSLサーバ証明書 認証ファイルのアップロードについて

このタイトルのメール本文に記載されているURLから、ファイルをダウンロードしてサーバへアップロードする必要があります。

https://secure.sakura.ad.jp/menu/service/index.php

(1) さくらインターネットにログイン

SSL証明書の申込み

(2) 「契約サービスの確認」クリック

SSL証明書 インストール

(3) 契約SSLサービス名右側の「サーバ証明書」クリック

SSL証明書の申込み

(4) 「認証ファイルDL」クリック

SSL証明書の申込み

(5) ダウンロードしたファイルをサーバへアップロードする

ダウンロードしたファイルをサーバへFTPソフト等を使ってアップロードしましょう。

  • ① まずはデスクトップに「.well-known」というファイルを作る。
  • ② その中に「pki-validation」というファイルを作る。
  • ③ pki-validationファイルの中にDLした認証ファイルを入れる。

SSL証明書の申込み

上記のように作った「.well-known」ファイルを以下の場所へアップロードします。

(/home/アカウント名/www)にアップロードしましょう。

2-4:発行

アップロードが完了すると、さくらインターネットからメールが届きます。

SSLサーバ証明書発行のお知らせ

上記題名のメールに記載されているURLから中間CA証明書をインストールしましょう。

(JPRSのサーバー証明書を発行する際の手順で紹介します。)

(1) URLから中間CS証明書をダウンロードするサイトへアクセス

SSL証明書発行

(2) サイト下部にある「中間CA証明書のダウンロードはこちら」クリック

SSL証明書発行

(3) 該当する中間証明書をダウンロードする「PEM形式」クリック

SSL証明書発行

(4) ダウンロードした中間証明書をテキストエディターで開きコピーしておく

2-5:インストール

中間CA証明書が発行されダウンロードしたら、サーバへインストールしていきます。

サーバコントロールパネルへログインしておきましょう。

(1) 「ドメイン/SSL設定」クリック

SSL インストール

(2) ドメイン名横、証明書欄の「更新」もしくは「登録」をクリック

SSL証明書発行

(3) 「中間証明書のインストール」クリック

SSL証明書 インストール

(4) 中間証明書を貼り付けて「送信」クリック

先ほどダウンロードしてテキストエディタに表示させておいた中間証明書を貼り付けて送信しましょう。

SSL証明書 インストール

(5) さくらインターネット「契約サービスの確認」クリック

続いて”さくらインターネット”へログインして「契約サービスの確認」をクリックします。

SSL証明書 インストール

(6) 「サーバ証明書」クリック

SSL証明書 インストール

(7) 「サーバ証明書DL」クリック

サーバ証明書をダウンロードします。

ダウンロードしたサーバ証明書はテキストエディタで開きコピーしておきましょう。

SSL証明書 インストール

(8) コントロールパネルへ戻る

コントロールパネルへ戻り、ログインします。

(9)「ドメイン/SSL設定」クリック

SSL インストール

(10) ドメイン名横、証明書欄の「更新」もしくは「登録」をクリック

SSL証明書発行

(11) 「証明書のインストール」クリック

SSL証明書 インストール

(12) サーバ証明書を貼り付ける

先ほどDLしたサーバ証明書を貼り付けて「送信」をクリックします。

SSL証明書 インストール

(13) インストール完了!「ドメイン設定」クリック

インストールが無事に完了すると、下記画面になります。

「ドメイン設定」をクリックしSNI SSLを有効にしましょう。
SSL証明書 インストール

(14) 4項目の「SNI SSLを利用する」にチェックを入れて「送信」クリック

SSL証明書 インストール

(15) ドメイン詳細設定の完了画面

SSLサーバ証明書の設定が完了しました。

SSL証明書 インストール

実際に「https」でサイトが表示されるか確認してみましょう。

《Before》 SSL化する前のURL部分

toribae.com

《After》SSL化した後のURL部分

toribae.com

きちんと上記のようにhttpsでサイトが表示されれば完了です。

3:SSL化をするべき3つの理由

SSL化ってなぜやるべきなの?

面倒な手間はなるべく省きたいですよね。

わざわざ面倒な手間と時間を使ってWordPressをSSL化すべき理由について紹介していきましょう。

SSL化すべき理由は主に3つあります。

  • セキュリティ上の問題
  • サイト運営組織の実在証明と信頼性の向上
  • SEO対策

上記3つの理由から、サイトを運営していくのであればSSL化はするべきと断言出来るでしょう。

3つの理由について詳しく解説していきます。

3-1:セキュリティ上の問題

SSL化すべき1つ目の理由は「セキュリティ上の問題」です。

SSLとは、そもそもサイト閲覧者とのやりとりを暗号化する為のものになります。インターネット上に書き込んだ内容や、ECサイトで利用したクレジットカード情報、パスワードなどの情報は悪意のある第三者が盗み見ようと思えば盗み見れてしまいます。その様な事がない様、安心してインターネットが利用できる様にという事で生まれたのがSLL化です。

SLL化を行う事で、情報を暗号化し安心してサイトを利用する事ができる様になります。

3-2:サイト運営組織の実在証明と信頼性の向上

SSL化すべき2つ目の理由は「サイト運営組織の実在証明と信頼性の向上」です。OV・EV証明書を取得する事で、実際に存在する会社だという事を証明する事ができ安心感を持って利用できる信頼性が向上します。

なぜなら、OV・EV証明書を取得するには第3者機関である認証局が、実際に運営組織(会社)が存在するのか調査して承認された場合のみ証明書が発行されるのです。信頼度の高い証明書を発行する事で、サイト運営の重要な信頼度の向上に繋がります。

3-3:SEO対策

SSL化すべき3つ目の理由は「SEO対策」と関係があります。

検索エンジンでもSSL化しているサイトを優遇する様になっています。

SEO対策にも関係があるという事を受けて、今までサイトの一部のみをSSL化していた会社もサイト全体を暗号化する常時SSL化が急激に進んでいるのです。

まとめ

WordPressをさくらインターネットでSSL化する方法について紹介してきました。SSL化はユーザーが安心して安全にサイトを閲覧・利用する事ができる様にやり取りを暗号化するものです。

セキュリティ面以外にも、利用者からの信頼度の向上やSEO対策においても欠かせない設定になります。

そんなSSL化ですが、さくらインターネットでSSL化を行う際には有料証明書と無料証明書があるのです。無料証明書はワンクリックで簡単に利用する事が出来るので、練習用や個人ブログ用で使ってみると良いでしょう。

企業サイトや更新が面倒な場合には有料のSSLサーバ証明書がオススメです。

ぜひ参考にしてみて下さい。

WordPressでフッターの色を変更する方法と2つのカスタマイズ手順

WordPress フッター 色

WordPressのフッターの色を変更したい!

うまくできないなあ〜何か簡単でサクッと出来る方法は無いだろうか?

上記のようにお考えではありませんか?実は簡単に変更する方法があります!

今回紹介する方法を使えば、「イメージが湧きやすく」「CSSにコピペするだけ」で簡単にフッターの色を変更する事が可能です。ぜひ参考にしてみて下さい。

1:WordPressフッターの色を変更する超便利な方法

Wordpress フッター

WordPressのフッターの色は何もカスタムして居ない状態だと、黒もしくは白の様なシンプルなデザインだと考えれます。フッターの色を変更する事で、デザイン性の統一オリジナリティを出す事が可能です。

そんなフッターの色を簡単に変更する事は出来ないのだろうか…

今回紹介する方法を使えば、WordPressで簡単にフッターの色を変更する事が出来ます。

XeoryBaseテーマではフッターを上下で分けて色を変更する事が可能です。

  • footer-01:フッター上部
  • footer-02:フッター下部

fotter

フッターの色を変更する方法を紹介していきます。

今回はfooter-01の色を変更する方法を紹介しますが、footer-02も同じようにfooter-02を選択し作業すれば同様にフッターの色を変更する事が可能です。

1-1:フッターの色を変更する手順

まずは、ご自身のサイトを開いてデベロッパーツールを用いて作業をしていきます。

(1) フッター色を変更したい自身のサイトへアクセス

Wordpress

(2) キーボード「F12」を押して「デベロッパーツール」を起動する

Wordpress フッター

(3) デベロッパーツールで「footer」を探す

デベロッパーツールを使って色の変化を確認しながら、フッター色を変更していきます。

footerが書かれている部分をデベロッパーツールで探しましょう。

Wordpress フッター

⬇︎

Wordpress フッター

footer-01の色を変更していきます。

(4)<div class="footer-01">_</div> = $0」クリック

デベロッパーツールでfooter-01部分を探してクリックします。

wordpress フッター

(5) footer-01部分のCSSが表示される

デベロッパーツールにてfooter-01部分のstyleが下に現れます。

wordpress フッター

(6) footer-01部分の色を変更する

background部分左の「■」をクリックすると色を選択する事の出来るウィンドウが開きます。

フッター

選択すると実際に画面上のフッター色もプレビューで変更されるので、色を確認しながらフッターの色を変更する事が可能です。

wordpress フッター

(7) 色が決まったらコピーしてCSSに追加する

フッターの色が決まったら、下記部分をコピーしてCSSに追加します。

.footer-01 {
background: 色コード;
border-top: 1px 色コード;
font-size: 13px;
}

WordPress フッター

(8) WordPressのCSSに追加する

WordPressに付随しているCSSエディターで下記コードを入力します。

コピーライト

①外観→②スタイルシートでフッター部分を探して入力する事も可能ですが、③付随のCSSエディターを用いる方が簡単なのでオススメです。

WordPress フッター

(9) きちんと色が変更出来ている事を確認し公開する

CSSエディターで入力すると、編集内容がそのままプレビューで確認する事が出来ます。きちんと下記画像のように変更出来ている事を確認したら、左上の公開をクリックし保存しましょう。

WordPress フッター

2:コピーライト2つのカスタム方法

コピーライト

コピーライトの文字の色位置を編集したいなあ〜

フッター部分にあるコピーライト、文字の色を変更したり位置を編集したい時がありますよね。

コピーライトの編集は、フッター編集時と同じように簡単に編集する事が可能です。

コピペで簡単に編集できるのでぜひ参考にしてみて下さい。

  • 文字色の変更
  • 位置の変更

今回は、上記2つのコピーライトの編集方法について詳しく解説していきます。

2-1:文字色の変更手順

コピーライトの文字色を変更する方法を紹介しましょう。

編集したいサイトへアクセスしデベロッパーツール(F12)を表示させます。

(1)</footer> = $0 」部分をデベロッパーツールで見つける

</footer> = $0を見つけてクリックしましょう。

コピーライト

(2) Stylesで文字色を決めていく

クリックすると

#footer {
     color: ■ #2b2d2d;
}

と下のStyle部分に表示されます。

コピーライト

(3) color: ■ ← クリックして色を変更する

「■」をクリックすると色を選択出来るウィンドウが開きます。

実際にプレビューで色を確認しながら、コピーライトの文字色を決めていきましょう。

コピーライト

(4) コピーしてCSSに追加する

文字色が決まったら、赤枠で囲った部分を全てコピーしてCSSに追加します。

コピーライト

(5) スタイルシートに追加する

WordPressにて①外観 ②スタイルシートを選択し、CSSに先ほどのコードを追加していきます。スタイルシートでフッター部分に直接追加する事も可能ですが、今回は③付随のCSSエディターにて追加していきましょう。

コピーライト

(6) CSSエディターに追加する

先ほどコピーしたコードをCSSエディターに追加します。

コピーライト

(7) 変更を確認し「公開」クリック

コピーライト

2-2:コピーライトをセンタリング位置にする方法

コピーライト位置

サイトの一番下にあるコピーライト「この部分をどうにか中央に指定したい!

そんな時には、下記コードをCSSに追加するだけで簡単に中央に移動させる事が可能です。

.footer-02 .footer-copy {
text-align: center;
}

(1) WordPressのスタイルCSSに追加する

付随のCSSエディターにて追加するだけになります。

コピーライト位置

(2) センタリングに移動している事を確認し「公開」クリック

コピーライト位置

以上が、コピーライトをセンタリングに移動させる方法です。

まとめ

WordPressのフッターの色を変更する方法について紹介してきました。

デベロッパーツールを使えば、実際のフッター色を確認しながらコピペで簡単に色を変更する事が可能です。

また、コピーライトの文字の色も同じようにデベロッパーツールを使えば実際に変更した時の色味を確認しながら簡単に変更する事が出来ます。

是非この方法を使って、オリジナリティ溢れるサイトへ作り変えてみて下さい。

WordPressの背景画像を設定する基礎知識とCSS指定方法

WordPress背景画像

WordPressで背景画像を設定したい!

あまりにもサイトがシンプルすぎたり、ただ単にカスタムして自分色にしたい場合は背景画像を設定するだけでサイトの雰囲気が一気に変わります。

背景画像は無料で配布されていたりするので、気軽に設定する事が出来ます。

また、設定方法もクリックしていくだけで簡単に設定可能です。

今回は、背景画像を設定する一番かんたんな方法からCSSで指定し設定する方法まで詳しく解説していきます。

1:1番かんたん!WordPressで背景画像を設定する方法

WordPressで背景画像を設定する最もかんたんな方法を紹介していきます。

準備するものは、背景画像のみです。

事前に背景画像を入手しておきましょう。

ちなみに今回は、submit a patternで無料ダウンロードした背景画像を設定していきます。

ファイル形式はpngです。

WordPress 背景

1-1:背景設定方法

早速、背景設定方法を紹介していきます。

(1) 外観→「背景」選択

wordpress

(2) 「画像を選択」クリック

背景画像をメディアライブラリから選択、もしくはファイルをアップロードします。

背景画像

(3) 背景画像を選択し「画像を選択」をクリック

wordpress

(4) 背景画像 設定完了(プレビューで見てみる)

wordpress

左側にある編集メニューで細かく表示を変える事が可能です。

背景画像

【プリセット】

  • デフォルト:たて・よこに繰り返し画像を表示
  • フルスクリーン:スクリーンいっぱいに画像を表示
  • 画面に合わせる:画面サイズに合わせて、背景画像サイズが調整され表示
  • 繰り返し:デフォルトと同じ
  • カスタム:画像サイズ・ページと一緒にスクロール等の微調整が可能

【画像の位置】

  • 矢印をクリックして画像の位置を調整

【画像サイズ】

  • 元サイズ
  • 画面に合わせる
  • フルスクリーン

(5) 変更を保存する

上記の手順で設定完了後、必ず変更を保存しましょう。

背景画像

画面右側の「保存して公開」をクリックします。

「保存して公開」のボタンではなく「下書きとして保存」の場合は、クリックをして公開すれば設定した背景画像が適用されるので安心しましょう。

背景画像

2:CSSで背景を指定する2つの方法

自分が利用しているWordPressテーマで、背景画像を設定する所が無い!

そんな時はCSSで背景の色を設定したり、背景画像を設定する事が可能です。

back groundプロパティを使用して、簡単にコピペで設定する事が出来ます。

今回はCSSで背景を設定する2つの方法を紹介しましょう。

  • 背景の色を設定する
  • 背景画像を設定する

2-1:背景の色を設定する

CSSで背景の色を設定する場合、background-colorを使用すると背景の色を変更する事が出来ます。

background-color: 色コード;

色コード部分には、#ffa500やorangeの様な色コードもしくはカラーネームを入力しましょう。

そこで入力した色が、背景色として反映されます。

設定方法について詳しく紹介しましょう。

2-1-1:CSSで背景色を設定する手順

実際にCSSで背景の色を変更する方法を紹介します。

WordPressのstyle.cssで直接設定する事もできますが、WordPress付随のCSSエディターを使った方が簡単です。

(1) テーマ➡️「カスタマイズ」クリック

WordPress

(2) 「追加CSS」クリック

WordPress css

(3) 追加CSSページ

WordPress css

(4) CSSを入力

画面下、入力欄にCSSを書き込みます。

body {background-color: #ffa500}

背景 色

(5) カラーが表示される

WordPress 背景

(6) 「公開」をクリックし変更を保存する

WordPress 背景

(7) プレビューで確認し完了

WordPress 背景

2-2:背景画像を設定する

CSSで背景画像を設定する場合、background-imageを使用します。

画像はあらかじめサーバーにアップロードしておけば、背景画像に指定する事が可能です。

background-image: url("画像へのパス");

”画像へのパス”に背景画像に設定したい画像ファイルへのパスを入力します。

  • CSSファイルと画像ファイルが同じディクトリ内にある場合は、ファイル名のみでOK
  • 画像ファイル•••絶対パス・相対パスどちらでもOK

2-2-1:CSSで背景画像を設定する手順

CSSで背景を画像に設定する方法を紹介します。

まずは、CSSファイルと同じディレクトリ内に画像ファイルをアプロードしておきましょう。

(1) 画像ファイルをアップロード

この時「images」フォルダには「photo1.jpg」という名前の画像が入っています。このphoto1.jpgを背景画像に設定していきましょう。

FTPソフト

(2) CSSにてコードを追加する

body {background-image: url(画像へのパス);}

画像へのパスは絶対パス・相対パスのどちらでもOKです。

下記画像では、絶対パスにて画像へのパスを指定してます。

画像ファイル パス

(3) 画像が背景に反映される。完了

Wordpress 背景画像

2-2-2:コピペで出来る!背景画像の位置・サイズ指定のタグ一覧

コピーペーストで簡単に出来る、背景画像の位置やサイズを指定する4つのタグを紹介していきます。

  • 表示する位置
  • 画像のサイズ
  • 繰り返しの有無
  • スクロール有無

【表示する位置を指定するタグ】

左上  background-position: left top;
中央上  background-position: center top;
右上  background-position: right top;
左中央  background-position: left center;
ど真ん中  background-position: center center;
右中央  background-position: right center;
左下  background-position: left bottom;
中央下  background-position: center bottom;
右下  background-position: right bottom;

【画像のサイズを指定するタグ】

デフォルト  background-size: auto;
画面サイズに合わせる  background-size: contain;
フルスクリーン  background-size: cover;

【繰り返しの有無を指定するタグ】

あり  background-repeat: repeat;
なし  background-repeat: no-repeat;

【スクロール有無を指定するタグ】

あり  background-attachment: scroll;
なし  background-attachment: fixed;

3:無料背景!おすすめサイト3選

WordPressで背景画像を設定したい!

無料の背景画像を設定するのであれば、どのサイトでダウンロードするか悩んでしまいますよね。

今回は、背景画像を無料で提供しているサイトの中から特にオススメな3サイトをピックアップしました。

  • Subtle Patterns
  • フリーテクスチャ素材館
  • texturemate

上記3つのサイトは無料で、背景や素材をダウンロードする事が可能です。

またクオリティも高いサイトばかりですので、きっとお気に入りの背景が見つかるでしょう。

3-1:Subtle Patterns

subtle patterns

Subtle Patternsは、シンプルなシームレス素材を多く取り扱っています。

普段使いしやすい様な素材が多く、一番利用しやすいサイトです。

また、ダウンロードする前にサイト上で背景をプレビューで見る事が出来ます。

プレビュー機能はとても便利で、無駄なダウンロードをしなくて済みます。

Subtle Patterns URL:https://www.toptal.com/designers/subtlepatterns/

3-2:フリーテクスチャ素材館

フリーテクスチャ素材館

フリーテクスチャ素材感は日本のサイトです。

日本のサイトならではの、畳や和紙等のデザインから木材・金属・布・革まで様々な素材が取り揃えられています。サイト内もシンプルで見やすくオススメなサイトの1つです。

外国のサイトが不安な場合には、フリーテクスチャ素材館を利用すると良いでしょう。

フリーテクスチャ素材館 URL:https://free-texture.net/

3-3:texturemate

texturemate

texturemateは、検索ツールが充実しており素材が見つけやすいサイトです。

背景の素材も木材・コンクリート・砂利・金属・プラスチックなど、実に様々なジャンルの素材を扱っています。背景画像以外にも利用できる様な素材を多く取り揃えているので、覚えておくと便利なサイトです。

texturemate URL:http://www.texturemate.com/

まとめ

WordPressで背景画像を設定する方法について紹介してきました。

背景画像は無料配布サイト等から、簡単に入手する事が出来るので気軽に設定する事が可能です。

また、設定方法もクリックしていくだけで簡単に設定する事が出来ます。

思い思いの背景画像に設定し、自分だけのサイトを完成させましょう。

ぜひ参考にして下さい。

初心者の為のWordPressでフッターメニューの作成と追加する2つの方法

WordPress フッター メニュー

WordPressにフッターメニューを追加する方法が知りたい!

WordPressではサイトのナビゲーションの役目をする「メニュー」を2つの場所へ表示させる事が出来ます。

サイト冒頭部分のヘッダーと、サイト下のフッターです。

サイト内の記事数やカテゴリー、固定ページ数が多くなった時にナビゲーションの重要性は高まります。

そんなフッターはフッターメニューが搭載されているテーマであれば、簡単に追加する事が可能です。

しかし中にはフッターメニューが実装されていないテーマもあります。

  • テーマにフッターが実装されているフッターメニューの追加方法
  • テーマにフッターが実装されていない場合の、フッターメニュー追加方法

今回は、上記2つのフッターメニューを追加する方法について詳しく解説していきましょう。

1:いちばん簡単!WordPressフッターメニューの追加方法

テーマにフッターメニューが実装されている場合の追加方法を紹介します。

サイト内で大きな役割を担う「フッター」ですが、どの様に追加していくかご存知ですか?

固定ページや投稿数、カテゴリー数が増えていくとフッターやヘッダーの様なナビゲーションが備わっていないとユーザーにとって非常に不便です。

そんなフッターをサイト内に追加させる事で、サイトの使い勝手を向上させる事が出来ます。

サイトの下部分に表示させるメニュー「フッター」は5つのステップで作成する事が可能です。

  1. 外環➡️メニュー
  2. 新規追加
  3. 名前をつける
  4. 追加したいメニューを選択
  5. 保存して完了

早速、上記5つのステップでフッターを作成する方法について解説していきます。

1-1:かんたん5ステップ!フッター追加手順

フッターをサイト内に追加する手順を紹介していきましょう。

WordPressにログインし設定していきます。

(1) 外観➡️「メニュー」クリック

フッター設定方法

(2) 「新規メニューを作成」クリック

画面トップの「編集するメニューを選択:または新規メニューを作成してください。」の「新規メニューを作成」するをクリックしましょう。

フッター設定方法

(3) メニュー名を入力

①でメニュー名を入力します。今回は分かりやすく「フッターメニュー」とします。

入力後、②「メニューを作成」ボタンをクリックします。

フッター作成

(4) 左カラムからメニュー項目を追加する

固定ページ・投稿ページ・カスタムリンク・カテゴリーの中から追加したいメニュー項目を選択し「メニューに追加」をクリックします。

フッター作成

(5) 追加するとメニュー構造に追加される

フッター作成

(6) 名称とメニューの並び順 変更方法

メニュー構造に追加したメニュータイトル▼をクリックすると以下画像の画面になります。

フッター作成

① ナビゲーションラベル(メニュー名)の変更や②ではメニューの並び替えを行う事が可能です。

フッター作成

メニューの並び替えは、ドラッグ&ドロップで行う事も出来ます。

フッター作成

(7) 「フッターナビ」にチェックを入れる

メニュー設定➡️メニューの位置では、「フッターナビ」にチェックを入れましょう。

フッター作成

(8) 「メニューを保存」クリック

ここまで入力が終わったら「メニューを保存」をクリックします。

フッター作成

(9) サイトを確認してみる

下画像の様に、フッターにメニューが入って入ればOKです。

フッター作成

以上がフッターを追加する方法になります。

2:コピペで簡単!フッターメニューを追加するカスタマイズ方法

サイト内のナビゲーション機能を向上させるフッターですが、全てのWordPressテーマにフッターメニューが実装されている訳ではありません。

使ってるテーマにフッターメニューが実装されていない場合は、どうやってフッターを表示させればいいの?

安心してください、フッターメニューをコピペで簡単に追加する方法を紹介していきます。

今回は、Twenty Sixteenテーマを用いて解説していきましょう。

※Twenty Sixteenの親テーマを直接いじってしまうと、失敗してしまった時に取り返しがつかなくなってしまうので、必ず子テーマで作業する様にして下さい。

フッターが実装されていないテーマにフッターメニューを追加させる手順3ステップで出来ます。

  1. functions.phpにコード追加
  2. footer.phpのコードを一部消去しコードを追加
  3. WordPress管理画面でフッターメニューの作成

上記の順に手順を紹介していきましょう。

2-1:【ステップ1】functions.phpにコードを追加

さっそくフッターメニューを追加する手順を紹介していきます。

まずは、functions.phpにコードを追加します。

(1) 外観➡️「テーマの編集」クリック

フッターメニュー

(2) 「テーマのための関数(functions.php)」クリック

function.php

(3) functions.phpにコードを追加

functions.phpに下記コードを入力します。

register_nav_menu( 'footer-menu', 'フッターメニュー' );

functions.php

‘フッターメニュー’の部分はメニュー名になるので、好きな名前へ変更してもOKです。入力したら、更新をして保存しましょう。

2-2:【ステップ2】footer.phpのコードを一部消去しコードを追加

functions.phpにコードを追加したら、続いてフッターメニューを表示する為にfooter.phpを編集します。

(1) footer.php を開く

footer.php

(2) site-infoクラスのコードを消去する

footer.phpファイルのsite-infoクラスのコードを見つけて消去します。

下記画像部分です。

footer.php

(3) 消去部分にコードを入力する

site-infoクラスのコードを消去した部分に、下記コードを入力します。

<div class="site-info">

    <?php wp_nav_menu( array('theme/location' => 'footer-menu')); ?>

</div><!-- .site-info -->

footer.php

2-3:【ステップ3】WordPress管理画面でフッターメニューの作成

管理画面からフッターメニューが追加されているか、確認し作成してみます。

(1) 外観➡️「メニュー」クリック

フッターメニュー

(2) メニュー追加画面へアクセス

フッターメニュー

(3) フッターメニューが追加されている

メニュー設定に、設定したフッターメニューが追加されています。

フッターメニューに表示したいメニューを追加してサイトを見てみましょう。

フッターメニュー

(4) フッターが表示される

フッターメニュー

3:作成済みのフッターを編集・削除する方法

作成したWordPressのフッターを編集したい!

フッターはいつでもメニューの追加や編集を行う事が可能です。

また、不要なフッターはいつでも削除し作り直す事が出来ます。

作成済みフッターの編集・消去する方法を紹介していきましょう。

3-1:編集方法

作成済みフッターの編集方法を紹介します。

(1) 外観➡️「メニュー」クリック

フッター 編集

(2) 編集するメニューを選択する

フッター

(3) 作成済みフッターが表示される

作成済みのフッターが表示されます。

このページで作成した時と同様に、メニューを追加・名前の変更・並び順の変更等を行う事が可能です。

フッター

3-2:削除方法

作成済みフッターの消去方法を紹介します。

削除するまでの手順は、編集する際の手順と同じです。

(1) 外観➡️「メニュー」クリック

フッター 編集

(2) 削除するメニューを選択

削除したいメニューを選択します。

フッター

(3) 画面下の「メニューを消去」クリック

フッター消去

(4) 確認のメッセージが表示される。「OK」クリック

削除するか確認のメッセージが表示されます。「OK」をクリックしましょう。

フッター消去

(5) プレビューで削除できているか確認し完了

フッター消去

まとめ

WordPressのフッターメニューを追加する方法について紹介してきました。

フッターはサイト内のナビゲーションを行う重要な機能です。

投稿数や固定ページ数、カテゴリー数が多くなればなるほど重要性が高まります。ユーザーが使いやすいサイト構成にする為にも、フッターはサイト内に入れるべきでしょう。

いつでも編集や削除をする事が出来るので、まずは試しに作成してみて下さい。