サイトマップって何?2つのサイトマップとその作り方

サイトマップってご存知ですか?Webサイトを運営するにあたって、実は必要不可欠なものなのです

「2つのサイトマップ?そのサイトマップとやらは1つじゃないの?」

そうなんです!サイトマップにはユーザビリティ向上に特化したHTMLサイトマップ。そしてSEO対策に特化したXMLサイトマップ<の2種類があります。

HTMLサイトマップとXMLサイトマップの違い

HTMLサイトマップ XMLサイトマップHTML
HTMLファイル XMLファイル
訪問したユーザーに見せるもの(対 人間用) 検索エンジンに見せるもの(対 機械用
サイトのナビゲーション・全体像を伝える サイトの構成・更新内容を伝える

サイトを運営するにあたって縁の下の力持ちになる2つのサイトマップ、今回はこの2つについてそれぞれ解説します!

1.  HTMLサイトマップの役割について

ホームページの構成図としての役割を担うHTMLサイトマップ。サイト内に存在するコンテンツがリスト形式で表示されている一覧になります。

弊社HPで例えるとこちらが該当しますね!

1-1. HTMLサイトマップを使うメリット

先ほどHTMLサイトマップには「ユーザビリティ(=使いやすさ向上に特化している」と記述しましたが、何が使いやすくなるのか?もう少し解説しましょう。

HTMLサイトマップを使うとどうなるのか?

  1. ユーザーが求める情報(=目的のページ)がどこにあるか判断できる
  2. 目的のページにすぐに移動できる
  3. 検索エンジンがクロール範囲を広げられる

こうして視覚化できるサイトマップを作ることで、利便性が高く離脱率の低いサイトに近づきます!

1-2. HTMLサイトマップの作り方

HTMLサイトマップの利便性がわかったところで、早速作ってみましょう!

1. WordPressプラグインからWP Sitemap Page」を追加・有効化する。

2. 新規固定ページ「サイトマップ」を作成。(スラッグはsitemap)

3. 固定ページに以下コードを入力。

[wp_sitemap_page display_category_title_wording=”false”]

4. 除外ページは[設定] > [WP Sitemap Page] で設定してください。

1-2. XMLサイトマップの役割について

メディア記事を書き、アイキャッチを作成、ディスクリプションもキーワードも入れて入稿!これでOKなんて思っていませんか…?

2-1. XMLサイトマップを使うメリット

検索エンジンにサイトの構成・更新内容を伝えることで検索エンジンがサイトを正確にクロールし、検索結果に表示するための情報を把握することができます。

2-2. XMLサイトマップの作り方

1. WordPressプラグインから「Google XML Sitemaps」を追加・有効化する。

Googleアナリティクスとの接続方法

  1. https://search.google.com/ :Googleアナリティクスマイページの「プロパティを追加」にてURLを入力
  2. 左側の「サイトマップ」から「/sitemap.xml.」と入力。
  3. 入稿後、ページからindexリクエストを行ってください。

3. 気をつけて!サイトマップの2つの注意点と1つのNG行動

検索エンジンに情報を送ってくれるサイトマップ。しかもいくつか注意点も…

正しく設定しないとSEOに悪影響が及ぶかもしれません!

 3-1. サイトマップ2つの注意点

次に、サイトマップ作成において2つの注意点を紹介します!

 

  1. 登録できるURLに制限がある5万個を超えるURLは登録できない
  2. 定期的に更新する→こと→更新がされていないとクローラーが巡回した時にサイト情報を拾ってくれないかも!

3-2. サイトマップのNG行動

存在しない・非表示コンテンツのURLを含めない

存在しないURLが記載されているとクローラーが正しい情報を読み取れなくなってしまいます!リダイレクト元のURLも読み込ませないようにしましょう。

 

まとめ

ユーザーが流入しやすいサイト設計・せっかく作った記事を検索結果に表示させるために使う2つのサイトマップ。

今回はその2つについて解説しました。

「ユーザーの利便性」を一番に考えたSEO対策に取り組んでください。

細部も意識して根気よく継続することで、確実にGoogleから評価されるWebサイトになるでしょう。

幼稚生でも分かるIllustrator(イラレ)でアウトライン化を一括で行う方法と適切なタイミング

イラレ アウトライン化 一括

「イラレのアウトライン化は一括でできないのかなあ。」

テキストボックスをいちいち「右クリック→アウトライン化」するのは正直、かなり面倒ですよね。

そんな時、イラレのアウトライン化が一括でサクッとできれば楽チンですよね。

実は、イラレでアウトライン一括化は1つのコマンドキーと1つのショートカットキーで簡単にできてしまいます。

そこで、本記事では「そもそもアウトライン化とは一体何なのか」というところから「アウトライン化をサクッと一括で行う裏ワザ」まで徹底解説します。

是非、最後までお読みください。

1:アウトライン化とは

印刷会社への名刺やチラシ納品時に

アウトライン化したデータを納品して下さい」

と言われたことはないでしょうか?

アウトライン化とは「イラレ(Illustrator)で入力した文字をオブジェクト化(図形化)」することを指します。

これを怠ると、ファイルを受け取った相手側がデザインで使用したフォントファイルを持っていなければ、そのフォントが正常に表示されないのです。

イラレは保存をするとai.ファイルに変換されます。

このファイルの中には以下3つの情報が保存されています。

  • 文章の内容
  • 文章の文字間
  • フォントの種類

しかしながら、使用したフォントそのものは保存されていません。

つまり、せっかく完成品を納品しても突っ返されてしまうのです。

アウトライン化を行うことで、自分が利用したフォントを受け取った側がインストールしていなくても、フォントが変わってしまうことをあらかじめ防止できるのです。

アウトライン化することで、文字情報からオブジェクト(図形)に変換されるので、下記のようにパスで文字を変形させることが可能になります。

アウトライン化 図形

ここで注意点として、一度アウトライン化したフォントは元に戻すことができないという点が挙げられます。

『command+z』で元に戻すことは可能ですが、保存してしまった場合はこれができなくなります。

なのでアウトライン化する場合には必ず別名で保存をし、アウトライン前のデータを確保しておきましょう。

2:アウトライン化のやり方

アウトライン化とは一体何なのかお分かりいただけたところで、早速アウトライン化する方法を2ステップで紹介します。

STEP1:全てのロックを解除する

アウトライン化する場合、オブジェクトの全てを選択できるようにする必要があります。

ドキュメント上の全てのオブジェクトを選択し、ロックを解除しましょう。

①全てのレイヤーのロックを解除する

レイヤーロック会場

②全てのオブジェクトのロックを解除する

オブジェクトロック解除

STEP2:アウトラインを作成する

下準備が完了したところで、早速アウトラインを作成していきましょう。

①全てのオブジェクトを選択

まず、全選択(command+a)で全てのオブジェクトを選択します。

全選択

②フォントをアウトライン化する

次に『書式』を選択し、『アウトラインを作成』をクリックすればアウトライン化の完了です。

アウトライン化

3-1:ショートカットキーで一括で行う方法

では、本題である「アウトライン化を一括で行う方法」について解説します。

イラレのアウトライン化はショートカットキーを利用すればサクッと一括で行うことができます。

利用するショートカットキーはたったの2つなので、これを機に覚えておきましょう。

  • command+a
  • shift+command+O

まずは、オブジェクト全体を『command+a』(全選択)で選択したら、『shift+command+O』を入力しましょう。

これだけで簡単にアウトライン化が一括で可能になります。

「右クリック→アウトライン化」で一つずつアウトライン化していた方は、作業が大きく時短できること間違いなしです。

4:アウトライン化をするタイミング

アウトライン化が必ず必要なのかと言われると、そうではありません。

アウトライン化をしてしまうと、フォントの変更やテキストの変更ができなくなるため毎回やる必要はないです。

アウトライン化が必要なタイミングは大きく3つほどあります。

  • 印刷会社にデータを納品する時
  • クライアント先にデータを納品する時
  • 他のPCで編集をする時

の3つが主なタイミングです。

フォントが違うものに変換されてしまうかも?と言った時に基本的にはアウトライン化する必要があります。

まとめ

いかがでしたでしょうか?

本記事ではわかりやすくイラレのアウトライン化を一括で行う方法を解説しました。

イラレでは以下のコマンドキーとショートカットキーを使えば簡単に一括でアウトライン化できます。

  • command+a
  • shift+command+O

※windowsの場合はCtrl+AとCtrl+Shift+O

デザイナーをしているとアウトライン化は必ず行う場面が出てきます。

本記事を通してショートカットキーを覚え、作業の効率化を測ってみましょう。

最後までお読みいただき、ありがとうございました.。

BackWPupが使えない!?代替プラグインはこれだ!

「WordPressのバックアップを取りたいのにBackWPupが使えない!!?」

WordPressのデータベースバックアップによく使われているBackWPup

簡単に使えて便利なプラグインですが、使っているテーマファイルによってはごく稀に相性が悪くて使えないことも……しかし代わりのプラグインが見つからない…そんな時の対処法をお教えします!

代替プラグイン「BackUpWordPress」

まずは「プラグイン」からBackUpWordPressをダウンロード・有効化してください。

有効化すると左側の「ツール」から「Backups」を選択できます。

使い方1:settingから設定する

「Backups」>「setting」からバックアップの設定を行います。
こちらのプラグインは日本語に対応していないので、上から解説します。

1. Backup(バックアップの種類):Files only(ファイルのみ)・Database only(データベースのみ)・Both Database & files(データベースとファイルの両方)
2. Schedule (自動パックアップを行う場合の周期):Manual Only(1回きり)〜月1
3. Start Time(バックアップを取る時間)
4. Number of backups to store on this server(サーバーの中で保管するバックアップファイルの数)
5. Email notification(メール通知のアドレス)

使い方2:除外ルールを設定する

「setting」右隣にある「Exclude」からバックアップ不要のフォルダ・ファイルを選択してください。
Status」下の「Exclude →」をクリックすることで除外ができます。不要ファイルを除外してバックアップファイルを軽くしましょう。

※万が一間違えて除外してしまった場合はYour Site上で「stop exclude」をクリックすればOKです!

使い方3:バックアップを開始する

「setting」左隣にある「Run now」をクリックでバックアップが開始されます。

バックアップ完了後は「Download」をクリックで保存してください。(形式はzipファイルになります)

ダウンロードしたzipファイルの中には、

  • WordPressの構成ファイル
  • MySQLデータベースのデータ

の2種類が入っています。構成ファイルはサイトの見た目・MySQLデータベースはサイトの中身に必要不可欠です。

まとめ:バックアップは定期的に

万が一のトラブルを防ぐため、サイトのバックアップは常に取っておきましょう!

【データ消失を防げ!】XサーバーでWordPressを移管する方法

現在使っているWordPressを別のサーバーに移したい場合、サイトファイルの他にデータベースのバックアップが必要となりますね。

データベースのバックアップを行っておくことでWordPressに入稿していた記事・プラグインなど全て引き継ぐことができます。

今回は各種サーバーごとのデータベースバックアップ方法をご紹介します。

1:元データのバックアップ

Xサーバーには自動バックアップ機能がございますので、初心者でも大きなトラブルなく安心してサイトを移行することができます。

1-1:サイトファイルのバックアップをとる

普段ご利用のFTPソフト等を用いて、ドメインフォルダ内からサイトのファイルデータをダウンロードしてください。public_html以下があるといいでしょう。

移転元サーバーで提供されている『ファイルマネージャ』を用いても大丈夫です。

1-2:データベースのバックアップをとる

データベースのバックアップを取る際は、『サーバーパネル』>『データベース』>『MySQLバックアップ』へ飛んでください。

現在のMySQLをダウンロード』というタブがあるので、そこからデータベースのバックアップをとってください。
.splファイル或いは.gzファイルがダウンロードされます。

※ここでデータベースのバックアップを取らないとドメイン削除と同時に今まで書いてきた記事・プラグインの設定など全て消えます!!!!!!

Q. sqlデータが取れていなかったりバックアップできていなかった場合はどうすればいいの?

A. Xサーバーでは過去14日分のバックアップ(契約による)を自動で取ってもらえるのでドメインを付け直して復元すれば大丈夫です。

2:新しいサーバーに移管する

次に、新しいエックスサーバーへの移転作業に移ります。

2-1:旧サーバーから新しいサーバーにドメインを移行する

サーバーパネル』>『ドメイン設定』より、使っていたサーバーからドメインを削除。
新しいサーバーに付け替えてください。

2-2:移行済みドメインにデータベースを作成する

サーバーパネル』>『MySQL設定』>『MySQL追加』より、利用するMySQLデータベースを作成・『MySQLユーザ追加』より該当ユーザを追加してください。
※ここで作成したMySQLデータベース名・ユーザー名・パスワード・ローカルホスト名は後に必要な情報のため、メモなどに控えてください。

2-3:wp-configファイルの書き換え

移転元サーバーでバックアップした、WordPressのサイトデータ内にある『wp-config.php』ファイルに作成したデータベースの情報を反映させます。

wp-config.php』をテキストエディタ(FileZilla・Tera Pad等)で開き、該当する情報を書き換えてください。

/** WordPress のためのデータベース名 */
define(‘DB_NAME’, ‘〇〇_wp‘);

/** MySQL データベースのユーザー名 */
define(‘DB_USER’, ‘設定したユーザー名’);

/** MySQL データベースのパスワード */
define(‘DB_PASSWORD’, ‘設定したパスワード‘);

/** MySQL のホスト名 */
define(‘DB_HOST’, ‘設定したホスト名(localhostが多い)‘);

3:各種データのバックアップをインポートする

3-1:データベースをインポートする

1-2でバックアップをとったデータベースをインポートします。
サーバーパネルの『phpmyadmin(MySQL5.7)』又は『phpMyAdmin(MariaDB10.5)』からphpmyadminへログインします。

ログイン後は画面左から作成したMySQLデータベース名を選択した状態で画面右の『インポート』へ進んでください。

インポート画面が表示されますので、

  1. インポートするファイルにて『ファイルを選択』をクリック
  2. バックアップを取ったsqlファイルを指定
  3. 外部キーのチェックを有効にする』にチェック
  4. インポート』ボタンをクリック

でデータベースのインポートが行われます。

3-2:サイトファイルをアップロードする

最後に、1-1でバックアップをとったWordPressのサイトファイルを、FTPソフトなどを用いてドメインフォルダ内にあるpublic_html』フォルダの中へアップロードします。

必要であればネームサーバーの変更も行ってください。

まとめ

サイトデータの消失は大切な財産の損失・クライアントへの信用問題に関わります!
移行時以外でもバックアップは常に取っておきましょう!

WordPressログイン画面をカスタマイズする2つの方法を解説

WordPress ログイン画面 カスタマイズ アイキャッチ

WordPressのログイン画面はとてもシンプルなので、複数のサイトを運用していると、どのサイトのログイン画面なのか分かりづらいと思ったことはありませんか?

そんなあなたに朗報です!
WordPressのログイン画面は自分の好きなようにカスタマイズすることができるんです!
ロゴや背景などをカスタマイズしておけば、どのサイトのログイン画面かすぐに分かるようになるのはもちろん、自分だけのWordPressログイン画面にすることでオリジナル感が出て、気分も上がるはずです!

そこで今回は、以下の内容を解説します。

  • プラグインを使用してログイン画面をカスタマイズする方法
  • CSS編集でログイン画面をカスタマイズする方法

この記事を読むことで、誰でも簡単にWordPressのログイン画面を好きなようにカスタマイズできるようになるので、ぜひ最後までご覧ください!

1.WordPressログイン画面をカスタマイズする2つの方法

WordPressのログイン画面は、プラグイン導入やCSS編集をすることで自分の好きなようにデザインをカスタマイズすることができます。見た目のデザインだけでなく、動作をカスタマイズすることもでき、便利なカスタマイズ方法がたくさんあります。

そこで今回はWordPressログイン画面をカスタマイズする方法として以下の2つを紹介します。

①プラグイン「Custom Login Page Customizer」
②CSSを編集してカスタマイズ

①プラグイン「Custom Login Page Customizer」

WordPressログイン画面を簡単にカスタマイズするならプラグインがおすすめです。
「Custom Login Page Customizer」なら背景色やボタンの色など、見た目のデザインをプレビューを確認しながら簡単にカスタマイズすることができます。

②CSSを編集してカスタマイズ

プラグインよりも高度なカスタマイズをしたい方は、直接CSSを編集してカスタマイズすることができます。
背景色やロゴの変更はもちろん、ロゴのリンク先を変更したり、入力欄にプレースホルダーを設定したりすることができます。

2.プラグイン「Custom Login Page Customizer」を使用してログイン画面をカスタマイズする

それでは、プラグイン「Custom Login Page Customizer」を使用してログイン画面をカスタマイズする方法を解説していきます。

2−1 「Custom Login Page Customizer」をインストール・有効化

WordPress管理メニューの【プラグイン】>【新規追加】へ進み、キーワード検索窓に【Custom Login Page Customizer】と入力して検索します。

WordPress管理メニューの【プラグイン】【新規追加】へ進み、キーワード検索窓に【Custom Login Page Customizer】と入力して検索します。

【今すぐインストール】をクリック

検索結果に表示されたら、【今すぐインストール】をクリックします。
インストールが完了したら、プラグインを有効化してください。

WordPressのプラグインをインストールする方法について詳しくはこちらの記事で解説しています。
参考記事:WordPressのプラグインをインストールする方法と出来ない4つの原因

【スキップ】をクリック

有効化する際に、このような画面が表示されますが、【スキップ】をクリックで大丈夫です。

WordPress管理メニューの中に【LoginCustomizer】が追加されていれば、これでプラグインのインストール・有効化は完了です。

2−2 「Custom Login Page Customizer」の使い方

WordPress管理メニューの中の【Login Customizer】>【Customizer】へ進み「Custom Login Page Customizer」を起動します。

WordPress管理メニューの中の【Login Customizer】【Customizer】へ進み「Custom Login Page Customizer」を起動します。

この画面から、WordPressログイン画面のカスタマイズが行えます。 右側にプレビューが表示されるので、表示確認を行いながらカスタマイズすることができます。

この画面から、WordPressログイン画面のカスタマイズが行えます。
右側にプレビューが表示されるので、表示確認を行いながらカスタマイズすることができます。

それでは、各メニューでどのような設定ができるのか解説していきます。

・テンプレート(Template)

3種類のテンプレート

用意されている3種類のテンプレートからログイン画面のデザインテーマを選択することができます。

・背景(Background)

【Background】では、背景色・背景画像のカスタマイズが行えます。
色か画像のどちらかを選択しましょう。

・ロゴ(Logo)

【Logo】では、ロゴ画像の設定 / ロゴのサイズ ・位置 / ロゴ下の余白サイズ / ロゴ画像のリンク先の変更を行うことができます。

「Logo URL」は、ロゴをクリックした時の遷移先になっているサイトURLで、デフォルトはWordpressのURLになっています。これを自分のブログサイトのURLにすることができます。

・フォーム(Form)

【Form】では、ログインデータを入力するフォーム部分の外観をカスタマイズできます。

入力フォームの背景やサイズ、余白や角丸、影の調整が可能です。

・フィールド(Fields)

【Fields】は、入力欄の余白や背景色、フォントサイズなどの設定。
「ログイン状態を保存する」チェックボックスの無効化やカスタマイズも可能です。

・ボタン(Button)

ログインボタン部分のカスタマイズをすることができます。
ボタン本体の色やサイズの変更はもちろん、枠線や影の配色もできるようになっています。

・その他(Other)

ここでは、

  • Disable Lost Password? で「パスワード忘れましたか?」の文言部分
  • Disable Privacy policy?でポリシーページへのリンク
  • Disable “Back to Website”?でホームに戻るリンク

を、それぞれ表示・非表示のカスタマイズをすることができます。

・Custom CSS & JavaScript

この項目はcssやjavascriptが触れる人向けの項目です。
コードを書ける人はカスタムCSSとJavaScriptコードを設定してみてはいかがでしょうか。

WordPressおすすめプラグインは、こちらの記事で紹介しています。
参考記事:超厳選!WordPressプラグインおすすめ6選

3.ログイン画面をCSS編集でカスタマイズする方法

ここまで、プラグイン「Custom Login Page Customizer」を使ったログイン画面のカスタマイズ方法を解説してきましたが、WordPressのCSSファイルを直接編集することで、ログイン画面をカスタマイズすることもできます。

WordPressではfunctions.phpを使うことで様々なカスタマイズができます。
functions.phpとは拡張子が「.php」となっており、PHPというプログラム言語でソースコード(中身)が書かれたPHPファイルです。
Wordpressのコアファイルの大半もこのPHPという言語で書かれています。

3−1 CSSの2つの読み込み方法

CSSを読み込む方法は以下の2種類があります。

方法1 head内に記述する
方法2 外部ファイルを読み込む

それぞれの読み込み方を見ていきましょう。

方法1 head内に記述する

任意のCSSやJavaScriptをhead内に挿入する場合は、functions.phpに下記のように記述することで実装できます。

任意のCSSやJavaScriptをhead内に挿入する場合の記述方法

方法2 外部ファイルを読み込む

外部ファイルとして作成したCSSやJavascriptファイルを読み込むには、同じくfunctions.phpに以下のように記述します。
ボリュームのあるソースを作成する場合は、外部ファイルとして作成し、それを読み込む形にすることをおすすめします。

外部ファイルとして作成したCSSやJavascriptファイルを読み込む時の記述方法

3−2 ログイン画面で使用されている主なセレクタ一覧

WordPress公式ドキュメントにWordPressのログイン画面で使用されているセレクタの一覧が掲載されています。

ログイン画面で使用されている主なセレクタ一覧

【背景をカスタマイズする】

ログイン画面の背景をカスタマイズするには、.loginセレクタを編集しfunctions.phpに記述します。

ログイン画面の背景をカスタマイズするには、.loginセレクタを編集

【ロゴをカスタマイズする】

ログイン画面のロゴをカスタマイズするには、.login #login h1 aセレクタを編集しfunctions.phpに記述します。

ログイン画面のロゴをカスタマイズするには、.login #login h1 aセレクタを編集

【ロゴのリンク先をカスタマイズする】

ログイン画面のロゴは初期設定では「WordPress.org」へのリンクが設定されています。
ロゴのリンク先をカスタマイズするには、functions.phpに以下のように記述します。

ロゴのリンク先をカスタマイズするには、functions.phpに以下のように記述します。

【ロゴのtitle属性を変更をする】

ログイン画面のtitle属性に初期設定では、「Powered by WordPress」が設定されています。
このtitle属性を変更するには、functions.phpに以下のように記述します。

title属性を変更するには、functions.phpに以下のように記述します。

【「ログイン状態を保存する」をデフォルトでチェックを入れる】

ログイン画面の「ログイン状態を保存する」のチェックボックスは、初期設定ではチェックが入っていない状態です。
これをデフォルトでチェックが入っている状態するには、以下のようにfuncitons.phpに記述します。

再度ログインが必要な際に毎回のようにチェックを入れているという人には地味に便利だと思います。

「ログイン状態を保存する」をデフォルトでチェックを入れる

【ログインエラー時のシェイクを止める】

ログインに失敗した際にエラーメッセージが表示されますが、初期設定ではメッセージがシェイク(振動)します。このシェイクを止めるには、functions.phpに以下のように記述します。

ログインエラー時のシェイクを止める

【ログインエラー時のエラー文を変更する】

ログインに失敗した際のエラーメッセージを任意の文章にカスタマイズするには、functions.phpに以下のように記述します。

ログインエラー時のエラー文を変更する

【ログインエラー時のエラー文を非表示にする】

先ほどの構文の任意のメッセージの部分を”null”にすることで、ログインに失敗した際のエラーメッセージそのものを非表示にすることもできます。functions.phpに以下のように記述します。

ログインエラー時のエラー文を非表示にする

【入力欄のラベルを非表示にして、任意のラベルを設定する】

入力欄にデフォルトで表示されているラベル(「ユーザー名」や「パスワード」)を非表示にし、プレースホルダーを設定することもできます。functions.phpに以下のように記述します。

入力欄のラベルを非表示にして、任意のラベルを設定する

【「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を非表示にする】

ログイン画面の「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を非表示にするには、
.login #nav と.login #backtoblogをdisplay: none;で非表示にします。functions.phpには、以下のように記述します。

「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を非表示にする

【「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を任意の文言に変更する】

ログイン画面の「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を非表示にするだけでなくするだけでなく、任意のメッセージに設定することもできます。任意のメッセージに設定するには、以下のようにfunctions.phpに記述します。

「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を任意の文言に変更する

まとめ

ここまでWordPressのログイン画面をカスタマイズする方法を解説してきました。
プラグインやCSSを編集して自分好みにいろいろとカスタマイズすることができます。

ログイン画面のカスタマイズは直接WEBサイトの機能を拡張したりサイトの評価をあげたりするものではありませんが、自分だけのWordPressにすることができます。

サイトの評価を上げるならコチラをご覧ください!
鬼コスパの『俺のSEO』で検索上位独占!ツール全容と8つの機能を公開

今回解説したプラグイン「Custom Login Page Customizer」とCSSを編集の2つのカスタマイズ方法で、WordPressのログイン画面をカスタマイズしてオリジナルのワードプレスを作ってみてはいかがでしょうか?

Web制作会社員イチオシWordPressテーマ10選|日本語対応

WordPress 日本語 テーマ アイキャッチ

「日本語対応のWordPressテーマはないの?」

日本語に対応しているWordPressテーマは多くあります。多く種類がある分、どれを選べば良いのか迷ってしまいますよね。そこでWeb制作会社に勤めている筆者が実体験を元に、以下10個のイチオシ日本語対応WordPressテーマを無料と有料に分けて紹介していきます。

【無料】
①機能性バツグン「Cocoon」
②サイトの表示速度が早すぎる「Luxeritas」
③使い勝手が良すぎる「Lightning」
④シンプルな作りが魅力「Xeory Base」
⑤レスポンシブ対応「LION MEDIA」

【有料】
①初心者に一番おすすめ「STORK19」
②とにかく上位表示を狙いたい人向け「賢威」
③ブログ運営に向いている「ALBATROS」
④カスタマイズ自由「ALPHA」
⑤企業サイトはこれ一本「CRAZY WP」

また「WordPressのテーマは決まったけど、自分のサイトにテーマを有効化する方法がわからない」という人に向けて本記事では以下の内容を紹介しています。

  • 【無料】Web制作会社員イチオシのWordPressテーマ日本語対応5選
  • 【有料】Web制作会社員イチオシのWordPressテーマ日本語対応5選
  • WordPressのテーマを選ぶ3つのポイント
  • WordPressテーマを有効化する3つの手順

これであなたも日本語対応のWordPressテーマを選べるだけでなく、所有のサイトへスムーズに有効化できブログを書くことができます。そうすればブログ効率が上がること間違いなしです。早速見ていきましょう。

1:【無料】Web制作会社員イチオシのWordPressテーマ日本語対応5選

まず最初に無料で利用できる、日本語対応のWordPressテーマを紹介していきます。
以下5つになります。

①機能性バツグン「Cocoon」
②サイトの表示速度が早い「Luxeritas」
③使い勝手が良すぎる「Lightning」
④シンプルな作りが魅力「Xeory Base」
⑤レスポンシブデザイン対応「LION MEDIA」

無料で利用できる分、機能が限られてしまいます。あなたの目的にあった機能を備えているテーマを選ぶようにしましょう。そうすれば無料で快適なブログ作業を行うことができます。
早速1つ目から見ていきましょう。

①機能性バツグン「Cocoon」

CocoonCocoon 評価

<特徴>
最初に紹介するのは、無料テーマでは定番のCocoonです。日本語対応はもちろんですが、筆者が一番驚いたのは収益化です。アフィリエイトのリンクを簡単に発行できブログに載せることができるので、収益化を簡単に狙うことができます。また、ブログには欠かせない文章ですが、あらかじめランキング機能や文章の装飾が備わっているためとても書きやすくなっています。収益化を目指したい、気軽にブログ作成をしたいという人におすすめのテーマです。
Cocoonはココをクリック

②サイトの表示速度が早い「Luxeritas」

LuxeritasLuxeritas 評価

<特徴>
次に紹介するテーマは「Luxeritas」です。LuxeritasはWebページを高速に表示することができるため、上位表示に一歩近づくことができるテーマです。ですが注意点が1つ、Luxeritasにはサポートがついておらずトラブルが起こった時の対処が難しいです。そのためブログ作成に慣れている人におすすめのテーマになります。
Luxeritasはココをクリック

③使い勝手が良すぎる「Lightning」

Lightning

Lightning 評価

<特徴>
次に紹介するテーマはLightningです。Lightningの魅力はなんといってもカスタマイズのしやすさです。筆者もカスタマイズを試しましたが初心者でも簡単にできる作りになっているなと思いました。
ブログ始めたばかりだけど自分だけのサイトを作りたいという人におすすめのテーマです。
Lightningはココをクリック

④シンプルな作りが魅力「Xeory Base」

Xeory Base

Xeory Base 評価

<特徴>
次に紹介するテーマはXeory Baseです。Xeory Baseは使い勝手、デザイン全てシンプルに作られているため、あまり弱点がないなと感じました。その分裏を返せば、強みがない、デザイン性がないともいえます。
どれを使えばいいのかわからないという人にはおすすめのテです。
Xeory Baseはココをクリック

⑤レスポンシブ対応「LION MEDIA」

LION MEDIALION MEDIA 評価

<特徴>
最後に紹介するテーマはLION MEDIAです。近年重要視されているレスポンシブデザインに対応しているためseo効果を期待できます。その他にも「パンくずリスト」「お問合せページ」を作ることができるためGoogleとユーザーからいい評価をもらいやすいです。上位表示を取りたい、SEO対策に力を入れたい、そんな人におすすめのテーマです。
LION MEDIAはココをクリック

また下記記事では、無料で利用できる高性能のWordPressテーマを18個選び紹介しています。無料のテーマをもっと見たいという人はぜひご覧ください。
参考記事:高性能!WordPressテーマ無料で使える本気のオススメ18選

2:【有料】Web制作会社員イチオシのWordPressテーマ日本語対応5選

次に有料の日本語対応テーマを紹介していきます。以下5つになります。

①初心者に一番おすすめ「STORK19」
②とにかく上位表示を狙いたい人向け「賢威」
③美しいデザイン「ALBATROS」
④カスタマイズ自由「ALPHA」
⑤企業サイトはこれ一本「CRAZY WP」

有料テーマは、無料テーマにはない機能や強みを持っています。「無料テーマでいいのか」「有料テーマがいいのか」ここで見極めましょう。

①初心者に一番おすすめ「STORK19」

STORK19STORK19 評価

<特徴>
最初に紹介するテーマはSTORK19です。STORK19は文章、デザインどの面で見ても完成されておりカスタマイズする必要がありませんでした。そのため購入後からすぐに使い始めることができます。カスタマイズに時間をかけたくないという人におすすめのテーマです。
STORK19はココをクリック

②とにかく上位表示を狙いたい人向け「賢威」

賢威賢威 評価

<特徴>
次に紹介するテーマは賢威です。賢威は、SEOに関するサポートが充実していました。賢威を購入すると賢威ユーザー会員サイトが利用できるようになるので、SEOに関する質問、どうすれば上位表示を狙えるかなど聞けないようなことを聞くことができます。初心者だけど上位表示を狙いたいという人におすすめのテーマです。
賢威はココをクリック

③美しいデザイン「ALBATROS」

ALBATROSALBATROS 評価

<特徴>
次に紹介するテーマはALBATROSです。ALBATROSは簡単に美しいデザインを作ることができるため楽しみながらブログ作成ができました。また、文章の書きやすさも群を抜いているため、作業効率上がること間違いなしです。デザインにこだわりたい、作業効率を上げたいこういった人におすすめのツールです。
ALBATROSはココをクリック

④カスタマイズ自由「ALPHA」

ALPHAALPHA 評価

<特徴>
次に紹介するテーマはALPHAです。ALPHAは数えきれないほどのデザイン、装飾品、ウィジェットが備わっておりカスタマイズが無限大でした。また機能性にも優れており簡単操作で記事をスラスラと書くことができます。カスタマイズがしたいでもあまり時間をかけたくないという人におすすめのテーマです。
ALPHAはココをクリック

⑤企業サイトはこれ一本「CRAZY WP」

CRAZY WPCRAZY WP 評価

<特徴>
最後に紹介するテーマはCRAZYWPです。企業サイト制作のために作られたテーマとなっており、多くのテンプレートが準備されています。HTMLなど専門的な知識がなくても作ることができるため、これから企業サイトを作るという人におすすめのテーマとなっております。
CRAZYWPはココをクリック

また下記記事では、有料の高機能WordPressテーマを6つ紹介しています。有料のテーマをもっと見たいという人はこちらをご覧ください。
参考記事:高機能WordPressテーマ!有料版オススメ6選と無料版との違い

3:WordPressのテーマを選ぶ3つのポイント

WordPressテーマを選ぶことはできましたか。無料か有料か、どちらの機能を優先するべきかなど多くの悩みが出てきますよね。そこで、3章ではテーマを選ぶ時のポイントを詳しく紹介していきます。
選ぶ時のポイントは以下の3つです。

ポイント①無料と有料の差
ポイント②自分の作りたいサイトに合っているか
ポイント③レスポンシブデザインに対応しているか

これで後悔のないテーマ選びをすることができます。早速1つ目から見ていきましょう。

ポイント①無料と有料の差

ポイント1つ目は無料と有料の差です。無料テーマでも収益化を目指すことができたり、カスタマイズすることはできます。ですが有料に比べるとどうしても勝てない部分があります。筆者自身多くの無料テーマを使ったあと有料テーマを試しましたがやはり「使い勝手」「デザイン」「収益化のしやすさ」どれも有料テーマがいいなと思いました。ですがいきなり有料テーマを買うのも少し抵抗がありますよね。
無料テーマを使い物足りなく感じてきたら有料テーマに変えるのも1つの手だと思います。

ポイント②自分の作りたいサイトに合っているか

ポイント2つ目は、自分の作りたいサイトに合っているかです。ブログをメインに作りたい人はデザインを重要視するかと思います。収益を目指したい人は少しでもseoの施策が備わっているテーマがいいかと思います。
あなたの目標をもう一度考えてテーマ選びをしましょう

ポイント③レスポンシブデザインに対応しているか

ポイント3つ目は、レスポンシブデザインに対応しているかです。現在、多くのSEO対策が存在しますが、近年重要視されてきたのがモバイルファーストです。サイトを閲覧する時はPCよりもスマートフォンの方が圧倒的に多いです。そのためGoogleはスマホ専用のページを準備しているサイトを高く評価します。スマートフォン専用のサイトを作るにはレスポンシブデザインに対応しているテーマでないといけません。
上位表示を狙っている人は必ずレスポンシブデザインに対応しているテーマにしましょう。

4:WordPressテーマを有効化する3つの手順

WordPressテーマを選ぶことができましたか。最後に選んだテーマを所有のサイトで有効化する手順を紹介します。手順は以下の3つです。

手順1.「外観」をクリック
手順2.テーマのアップロード
手順3.「有効化」をクリック

これであなたも新しいテーマで効率的にブログを書くことができます。手順1から見ていきましょう。

手順1.「外観」をクリック

WordPressにログイン後、横にあるサイドメニューから①「外観」を選びクリックします。その後下の画像に切り替わるので②「新規追加」をクリックしてください。

手順1

手順2.テーマのアップロード

次に①「テーマのアップロード」をクリック。そうすると②「ファイル選択」が出てきますのであなたのダウンロードしたテーマを選択しましょう。

手順2

手順3.「有効化」をクリック

最後、選んだテーマの下部にある赤枠「有効化」クリックでテーマの有効化ができます。

手順3

まとめ

本記事ではWEB制作会社員の筆者イチオシ、日本語に対応しているWordPressテーマを無料と有料に分け計10個紹介しました。

【無料】
①機能性バツグン「Cocoon」
②サイトの表示速度が早すぎる「Luxeritas」
③使い勝手が良すぎる「Lightning」
④シンプルな作りが魅力「Xeory Base」
⑤レスポンシブ対応「LION MEDIA」

【有料】
①初心者に一番おすすめ「STORK19」
②とにかく上位表示を狙いたい人向け「賢威」
③ブログ運営に向いている「ALBATROS」
④カスタマイズ自由「ALPHA」
⑤企業サイトはこれ一本「CRAZY WP」

次にWordPressテーマを選ぶポイントを3つ紹介しました。

ポイント①無料と有料の差
ポイント②自分の作りたいサイトに合っているか
ポイント③レスポンシブデザインに対応しているか

最後、WordPressにテーマを有効化する3つの手順を紹介しました。

手順1.「外観」をクリック
手順2.テーマのアップロード
手順3.「有効化」をクリック

 

WordPressテーマには様々な特徴、強みがあります。テーマを選ぶ時に大事なのは、あなたがなにを目標にしているかです。目標に沿ったテーマを選ぶことができればあなたの目標に大きく近づくことができます

また最後にあなたの目標達成をさらに近づける秘密のツールを下記記事では紹介しています。少しでも気になる人はご覧ください。
参考記事:鬼コスパの『俺のSEO』で検索上位独占!ツール全容と8つの機能を公開

【初級編】WordPressをローカル環境で作成する方法と3つの注意点

WordPress ローカル

WordPressをローカル環境で作成できないかな?

上記のようにWordPressをローカル環境で作成したいとお考えではないでしょうか?

ローカル環境を作成すれば、Webサイトの構築や動きを作り、テストを行うことが出来ます。また、インターネット上に公開されないので、どんなハプニングが起きても安心して取り組むことが可能です。

そんなWordPressのローカル環境は、Localという無料のツールを使えば初心者でもかんたんにローカル環境を作成することが出来ます。ローカル環境を作成する方法・注意点について詳しく紹介していきましょう。

1:WordPressでローカル環境を作る方法

Local

WordPressをローカル環境で作りたい。

上記のようにお考えであれば「Local」を使って、かんたんにローカル環境を作成してみましょう。

LocalはWordPressのローカル環境を作るツールの中でも、最もかんたんにローカル環境を作成することのできるツールです。初心者でもかんたんに作成することができるので、ぜひLocalを使って作成してみましょう。

さっそく作成方法について手順に沿って紹介していきます。

Localを使ってみる

1-1:Localを使った作成方法の全手順

Localを使ったWordPressのローカル環境作成方法を紹介していきましょう。

まずはLocalをダウンロードするところから始めます。

Localにアクセスし「無料ダウンロード!」をクリック

Local

)「プラットフォームを選択してください。」をクリック

Local

)使用しているデバイスを選択

MacであればMac、WindowsならWindowsを選択します。

Local

)利用者情報を登録し「今すぐ入手!」をクリック

  • ① 名前
  • ② 苗字
  • ③ メールアドレス
  • ④ 電話番号

上記4つの項目を入力し「今すぐ入手!」をクリックしましょう。

Local

)ダウンロード開始

Local

)インストールするユーザーを選択し「次へ」をクリック

Local

)インストール先を選択し「インストール」をクリック

Local

)インストール完了まで待機

Local

)インストール完了通知が来るので「完了」をクリック

Local

インストールが完了すると、Localのアプリが起動します。

10)「+CREATE A NEW SITE」をクリック

Local

11)WordPress名を入力し「CONTINUE」をクリック

ローカル環境で作成するWordPressの名前を赤枠の中に入力します。自分が理解できる名前で結構です。

Local

12)「WordPress Username」と「WordPress Password」を入力し「ADD SITE」をクリック

WordPress UsernameとWordPress Passwordは、ローカル環境へログインする際に使用するものになります。

Local

13)Localでの設定が完了!

Localでの設定が完了すると、以下画面が表示されます。

「ADMIN」をクリックし、ローカル環境のWordPressへアクセスしてみましょう。

Local

14)作成した「ユーザー名」と「パスワード」を入力し「ログインする」クリック

Local

15)ローカル環境のWordPressへアクセス完了

ローカル環境のWordPressへアクセス出来たら、作成は完了です。

下記画面から、通常のWordPress同様にWebサイトを作成することが出来ます。

Local

2:Localの操作に役立つ3つの方法

Localを使用する上で、覚えておくべき3つの操作方法があります。

3つの操作方法を覚えておくことで、よりスムーズにLocalを活用していくことが可能です。

お伝えしていく操作方法を3つ紹介します。

  • サイト言語を日本語にする方法
  • 共有URLの作成方法
  • バックアップ方法

上記3つの操作方法は、Localを使用するときに覚えておいた方が良い項目です。

さっそく3つの方法について詳しく紹介していきましょう。

2-1:サイト言語を日本語にする方法

WordPressのサイト言語を日本語にする方法を紹介します。

ローカル環境のWordPressへアクセスしておきましょう。

設定→「全般」をクリック

Local

サイトの言語で「日本語」を選択

Local

以上の方法でWordPressのサイト言語を日本語に設定することが出来ます。

ローカル環境を作成したら、まずは日本語に設定を変更しましょう。

2-2:共有URLの作成方法

2つ目の覚えておきたい操作方法は、共有URLの作成方法です。

Localではローカル環境で作成したWordPressを、第三者へ共有することが出来ます。共有URLの作成方法を覚えておけば、外部の者でもローカル環境上へアクセスすることが可能です。クライアントへテスト画面を見せる場合のためにも、覚えておきましょう。

画面下の「ENABLE」をクリック

Local

Live Link:の右側にURLが表示される

赤線を引いた箇所にURLが表示されます。クリックしてみましょう。

Local

ローカル環境上のWordPressへアクセス完了

下記画面のように、URLをクリックするとローカル環境上へアクセスすることが可能です。この時に表示されているURLを共有すれば、だれでもローカル環境上へアクセスすることが出来ます。

Local

2-3:バックアップ方法

3つ目の覚えておきたい操作方法は、バックアップ方法です。

ローカル環境とはいえ、作業している間にWebサイトが崩れた時のためにバックアップを作成しておくことをおすすめします。バックアップを取っておけば、かんたんに元のデザインに戻すことが可能です。

Localでのバックアップ方法を紹介していきます。

画面上部の「>」クリックして開く

Local

「test01(WordPress名)/app/public/wp-content/themes」の順にファイルを開く

上記の順にファイルを開くとテーマが保管されているフォルダに到達します。

右クリックで複製をして、別のところで管理しておけばバックアップは完了です。元のデザインに戻したい場合には、ファイル内のテーマを削除しバックアップしたテーマと入れ替えましょう。

Local

3:Localを使う3つのメリット

Localを使うメリットって何だろう?

ローカル環境を作成することのできるツールは、Local以外にも様々な種類があります。その中でLocalを利用して、ローカル環境を作成するのには3つのメリットがあるからです。

  • 初心者でもかんたんに使える
  • 複数のWordPressの作成が可能
  • 共有URLの作成が可能

上記3つのメリットについて詳しく紹介していきます。

3-1:初心者でもかんたんに使える

1つ目のメリットは、初心者でもかんたんに使えるという点です。

ローカル環境作成ツールのXAMPP・VCCWなどは、サーバー知識が必要となり初心者には操作が難しくなっています。しかしLocalならサーバー知識ゼロで、かんたんにクリックするだけでローカル環境を作成することが可能です。また、WordPressを動かすためのデータベース知識・PHP知識等も必要ありません。

初心者がローカル環境を作成する場合には、Local以外の選択肢は無いと言えるでしょう。

3-2:複数のWordPressの作成が可能

2つ目のメリットは、複数のWordPressの作成が可能という点です。

Localでは複数のローカル環境を作成することが出来ます。
Local管理画面の左下にある「+」をクリックしてみましょう。

Local

追加するWordPressの名前を入力し「CONTINUE」を押せば、かんたんに作成することが可能です。

Local

上記の手順で行えば、かんたんにWordPressを追加することが出来ます。

3-3:共有URLの作成が可能

3つ目のメリットは、共有URLの作成が可能という点です。

ローカル環境で作成したWordPressは、共有URLで第三者へ共有することが出来ます。社内で共有したい場合や、外部の人間に共有したい場合にも、共有URLを作成すればかんたんに共有することが可能です。

4:Localを使用する3つの注意点

Localでローカル環境を作成する上で注意点は無いかな?

新しいツールを使う際には、注意点が必ずあります。

もちろんLocalにも使う上で注意してほしい項目が3つあるのです。

  • ローカル環境と本番を間違えないようにする
  • カスタム時にはプログラミング知識が必要
  • テーマはバックアップする

上記3つの注意点は、Localだけでなくローカル環境を作成した際に注意すべきポイントになります。Localにも当てはまるポイントなので、しっかり把握しておきましょう。3つの注意点について詳しく解説していきます。

4-1:ローカル環境と本番を間違えないようにする

1つ目の注意点は、ローカル環境と本番を間違えないようにするという点です。

ローカル環境と本番のWordPress管理画面は同じデザインになっています。

そのためローカル環境と認識していた管理画面が「実は本番だった!」という様に間違えない様にしましょう。ローカル環境で作業する時は、本番の管理画面を開かない等の工夫をするようにします。

「いやいや、間違えないでしょ」と感じるかもしれませんが、両方の画面を開いていると起こりやすいミスですので注意が必要です。

4-2:カスタム時にはプログラミング知識が必要

2つ目の注意点は、カスタム時にはプログラミング知識が必要という点になります。

Localは初心者でもかんたんに作成することのできるローカル環境作成ツールです。しかしWordPressの使用方法は同じですので、Webサイトをカスタマイズしたい場合にはCSSやPHP等のプログラミング知識が必要となります。

4-3:テーマはバックアップする

3つ目の注意点は、テーマをバックアップするという点です。

ローカル環境上で作成したWordPressのデザインが崩れた場合に、元の状態へ戻せるようにバックアップを取ることをおすすめします。バックアップはLocalの管理画面上で、かんたんに行うことが可能です。

WordPressはバックアップを取り、思わぬハプニングに備える様にしましょう。

まとめ

WordPressをローカル環境で作成するという事について詳しく紹介してきました。

ローカル環境はLocalを使用することで、初心者でもかんたんにローカル環境を作成することが可能です。また、Localで作成したWordPressは共有URLを使用することで、かんたんに共有することも出来ます。

ローカル環境を作成したいという場合には、Localがおすすめです。

ぜひ参考にしてみてください。