スポンサーリンク

【かんたん】ワードプレスを立ち上げる詳しい方法

ワードプレス立ち上げ ワードプレス
スポンサーリンク

ワードプレスを立ち上げる方法

あなた独自のドメインで、ブログを作ることができます。アメブロやnoteのように、広告やデザインのしばりがなく、自由にWebサイトを作れます。

具体的には、このページのような独自のサイトを立ち上げることができるんです。

サーバー契約&ドメイン取得

サーバー契約とドメイン取得は必須です。

サーバー契約

まずは、サーバー契約をします。

こちらからXサーバーのページにいきます。

Xサーバー

「お申し込みはこちら」を押します。

Xサーバー

「新規お申込み」を押します。

Xサーバー

サーバーIDがすでに記入されていますが、自分で決めることもできます。

次にプランを決めます。

私は「X10」というプランです。

たくさん画像を使ってますが、まだまだ空き容量はあります。

ですので、「X10」で十分かと思います。

「クイックスタート」という機能が追加されたようですが、ここでは「クイックスタート」ではない方法をご紹介します。

Xサーバー

Xサーバー

個人情報を入力します。パスワードなどは忘れないように必ずメモしておきましょう。

Xサーバー

入力内容を確認して、「お申込みをする」を押します。

Xサーバー

このような画面になりますので、メールボックスを確認しましょう。

Xサーバー

このメールにはIDやパスワードが記載されいますので、大切に保管しておきましょう。

Xサーバー

Xサーバーに戻り、「Xserverアカウント」にいきます。

Xサーバー

ログインします。

Xサーバー

「料金お支払い」を押します。

Xサーバー

契約期間を選択します。期間が長いほど、1ヶ月当たりの料金が安くなります。

支払い方法を選択し、決済しましょう。これでサーバー契約ができました。

ドメイン取得

次はドメイン取得です。

その前に、ドメインって何?という方のために、解説しますね。

たとえば、これは私のメルマガ登録ページです。
↓ ↓ ↓ ↓ ↓

https://kumikosalon.com/mail-magazine/
この場合、kumikosalon.comというのがドメインです。ドメインは、どのページのリンクにも表示されます。
私達のサイトは、comになりますが、お好みで大丈夫です。
comやnetが無難です。

ドメインにしたい文字列の候補を3つほど、考えておきましょう。

では、ドメインの取得方法をご紹介します。

「Xserverアカウント」から「ドメイン取得」を押します。

Xサーバー

取得したいドメインを入力します。

Xサーバー

上の場合は、「com」と「net」を選んでいます。
取得できるドメインが表示されたら、希望のドメイン(英文字)と契約年数を選択します。

Xサーバー

上の場合は、「com」を選んだ場合の料金と、「net」を選んだ場合の料金が、それぞれ表示されていますね。
どちらか好きな方を選んで下さい。

お支払いを済ませましょう。

サーバーとドメインの紐付け

サーバー契約とドメイン取得ができましたら、サーバーとドメインの紐付けをします。

「Xserverアカウント」に戻り、「サーバー管理」を押します。

Xサーバー

ドメイン設定」を押します。

Xサーバー

ドメイン設定追加」を押します。

Xサーバー

紐付けしたいドメインを入力します。私の場合ですと「kumikosalon.com」と入力しました。

Xサーバー

「無料独自SSLを利用する」にチェックを入れておきましょう。

ワードプレスのインストール

サーバーとドメインの紐付けができたら、次はワードプレスをインストールします。

簡単インストール」を押します。

Xサーバー

インストールしたいドメインを選択し、

Xサーバー

WordPressのインストール」を押します。

Xサーバー

ブログ名などを入力し、「インストール」を押します。ブログ名は、あとから変えられるので、暫定でいいです。

Xサーバー

すると、下のように表示されますので、URLを押します

Xサーバー

インストールした直後だと、下のように「無効なURLです」と表示されます。

Xサーバー

2時間ほど待ちましょう。すると、このような表示になります。

Xサーバー

今後は、ここからワードプレスのダッシュボードにアクセスします。

ダッシュボード(編集画面)に入るには?

ダッシュボードっていうのは、ワードプレスの管理画面です。
↓ ↓ ↓ ↓ ↓

https://●●●●●/wp-admin

↑●●●●●にあなたのドメインを挿入してログインできます。

以降は、この画面からの作業になります。

テーマのインストール

親テーマと子テーマをそれぞれインストールします。

私はCOCOON(コクーン)というのを使っています。コクーンを使えば、私のサポートを受けて頂けますので、以下のように設定しましょう。

COCOON(コクーン)のダウンロード

こちらより、ダウンロードページにいきます。

親テーマをダウンロードします。

ワードプレステーマ

同様に、子テーマもダウンロードします。

ワードプレステーマ

ワードプレスのダッシュボードにいき、「外観」→「テーマ」→「新規追加」と進みます。

ワードプレステーマ

COCOON(コクーン)のアップロード

テーマのアップロード」を押します。

ワードプレステーマ

先程ダウンロードしたzipファイルを貼り付けます。

ワードプレステーマ

今すぐインストール」を押します。

ワードプレステーマ

親テーマ」「子テーマ」ともにインストールします。

COCOON(コクーン)の有効化

子テーマを有効化します。親テーマではなく子テーマを有効化しましょう。

ワードプレステーマ

SSL化

SSL化をすることで「http」が「https」に変わります。

「http」のままだと、「危険なサイトです」のような表示が出てしまい、離脱してしまうきっかけになってしまいます。

こちらを参考に、必ずSSL化をしましょう。
ワードプレスインストール時に、「無料独自SSLを利用する」にチェックを入れていた場合は、既にSSL化になっています。

ワードプレスの詳細設定

以上で、最低限のワードプレスの設定はできました。

あとは、詳細設定になります。私がワードプレスを立ち上げた際に設定した項目は次になります。

プラグインのインストール&有効化

私は次のプラグインをインストールしています。

・Akismet Anti-Spam
・EWWW Image Optimizer
・XML Sitemaps
・WebSub/PubSubHubbub
・WP-Optimize
・Classic Editor
・Contact Form 7
・AddQuicktag
・Category Order and Taxonomy Terms Order
・Shortcodes Ultimate
・Advanced Editor Tools
・WP-PostViews
・pTypeConverter
久美子
久美子

同じように入れておいたら、使いやすくておススメです!

「XML Sitemaps」はこれをインストールしています。

ワードプレス設定

インストールだけではなく、必ず有効化までしておきましょう。

一番上の「Akismet Anti-Spam」は有効化の方法が少し違うので解説します。

ワードプレス:「Akismet Anti-Spam」の有効化

Akismet Anti-Spamの有効化の方法です。「有効化」を押します。

Akismet Anti-Spamの有効化

Akismet アカウントを設定」を押します。

Akismet Anti-Spamの有効化

Get Personal」を押します。

Akismet Anti-Spamの有効化

「¥4500」を左にスライドさせて「¥0」にします。

Akismet Anti-Spamの有効化

個人情報を入力し、3つのボックスにチェックを入れます。

Akismet Anti-Spamの有効化

メールに数字のコードが届きますので、コピーして貼り付けます。

Akismet Anti-Spamの有効化

Akismet Anti-Spamの有効化

同様にして、APIキーも貼り付けます。

Akismet Anti-Spamの有効化

以上で、Akismet Anti-Spamの有効化ができました。

ワードプレス:「設定」欄

設定」欄から各種設定をしましょう。

ワードプレス設定

メディア設定は上記のようにしておくと、無駄な画像データがアップロードされないのでオススメです。

パーマリンクは「投稿名」にします。

ワードプレス設定

ワードプレス:「Advanced Editor Tools」のオススメ設定

「Advanced Editor Tools」とは、記事作成画面のボタン配置をカスタマイズできるプラグインです。使うボタンの入替をして、自分の使いやすいようにカスタマイズできます。

Advanced Editor Tools

私は上のようにしていますので、まずは私と同じようにしてみてはいかがでしょうか。

ワードプレス:ウィジェット

外観」欄のウィジェットの設定です。

ワードプレスウィジェット

私のサイドバーは、上のようにしています。

ワードプレス:ファビコン

ファビコンとはタブやブックマーク欄に表示される画像のことです。

ワードプレスファビコン

外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコンを選択」と進むと、ファビコンの画像が設定できます。

ワードプレス:ダッシュボードのファビコン

ワードプレスのダッシュボードのファビコンも変えたい場合は、次のようにします。

久美子
久美子

設定が難しい場合は、無理にしなくても大丈夫です。枝葉のことなので。

ダッシュボードのファビコン

外観」→「テーマエディター」→「テーマのための関数」と進み、以下を貼り付けます。

/* 管理画面にファビコンを設定 */
function admin_favicon() {
echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”画像のURL” />’;
}
add_action(“admin_head”, “admin_favicon”);
画像のURLをコピーすると、「http」になっていますが、ここでは「https」に入力し直して下さい。
画像のURLをコピーするには?
メディアライブラリに「新規追加」から画像をアップすると、画像のURLが発行されます。

ワードプレス:プロフィール画像

プロフィール画像の追加をします。

ワードプレスプロフィール

右上の「プロフィールを編集」というところから設定できます。

ワードプレス:Cocoon設定

「Cocoon設定」→「Cocoon設定」と進むと、サイトのデザインなどが変えられますので、自分好みにカスタマイズしましょう。

コクーン設定

全体」や「ヘッダー」をカスタマイズすると、サイトの雰囲気がガラッと変わります。

コクーン設定

「サイトキーカラー」や「サイト背景色」はあなたのサイトのイメージに合ったものにするといいですね。

「サイトフォント」は私は上のようにしています。

コクーン設定

「ヘッダーロゴ」や「ヘッダー背景画像」もサイトのコンセプトにあったものにしましょう。

ワードプレス:吹き出しの設定

久美子
久美子

これが「吹き出し」だよ♪

上のような吹き出しの設定をしましょう。

Cocoon設定」→「吹き出し」→「新規追加」と進みます。

ワードプレス吹き出し

私は、上のように設定しています。

ワードプレス:マウスホバー設定

マウスカーソルを上に置くと色が変わるようにできます。

例えば、下のように、マウスカーソルを置いたところが、ピンクになります。この設定をします。

ワードプレスマウスホバー

外観」→「テーマエディター」→「スタイルシート」と進み、以下を貼り付けます。

/************************************
** ■ホバー時の背景色設定
************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #ffddee; /*背景色*/
transition: all 0.8s ease; /*アニメーション*/
color: #333; /*フォントカラー*/
}

カラーコードはお好みで変更して下さいね。

ワードプレス:グローバルメニューの設定

グローバルメニューの設定をしましょう。

ワードプレスグローバルメニュー

グローバルメニューとは、ヘッダー画像の下の部分のことですね。

「外観」→「メニュー」のところから設定できます。

ワードプレスグローバルメニュー

スマホ表示のことを考慮して、メニュー数は偶数個がオススメです。

ワードプレス:グーグルアナリティクスとサーチコンソールの設定

最後に、グーグルアナリティクスとサーチコンソールの設定をしましょう。

Googleアカウントを複数お持ちの方は、メインで使っているアカウントで設定して下さい。

グーグルアナリティクス、サーチコンソール、アドセンスは、同じGoogleアカウントでログインして

ワードプレス:グーグルアナリティクスの設定

まずは、グーグルアナリティクスを開いて下さい。

管理」を押します。

グーグルアナリティクスとサーチコンソールの設定

プロパティを作成」を押します。

グーグルアナリティクスとサーチコンソールの設定

下の赤枠のところを設定します。

グーグルアナリティクスとサーチコンソールの設定

プロパティ名には、あなたのブログ名を入れましょう

ここは未記入でも大丈夫なようです。

グーグルアナリティクスとサーチコンソールの設定

ウェブ」を選択します。

グーグルアナリティクスとサーチコンソールの設定

URLなどを記入し「ストリームを作成」を押します。

グーグルアナリティクスとサーチコンソールの設定

測定ID」をコピーします。

グーグルアナリティクスとサーチコンソールの設定

Cocoon設定」「Cocoon設定」「アクセス解析・認証」と進み、上記に「測定ID」を貼り付けます。

グーグルアナリティクスとサーチコンソールの設定

貼り付けたあと、変更の保存をしましょう

以上で、グーグルアナリティクスの設定ができました。

ワードプレス:サーチコンソールの設定

次に、サーチコンソールの設定をします。「プロパティを追加」を押します。

グーグルアナリティクスとサーチコンソールの設定

URLプレフィックス」の欄にサイトURLを入力します。

グーグルアナリティクスとサーチコンソールの設定

グーグルアナリティクスの設定が済んでいる場合、自動的にサーチコンソールの設定も完了します。

グーグルアナリティクスとサーチコンソールの設定

所有権を確認できない場合、グーグルアナリティクスの設定が済んでいません。
もう一度、すべての手順ができているか?1つずつ、チェックしましょう。

サーチコンソール:サイトマップの追加

サーチコンソールにサイトマップを追加します。

ワードプレスのダッシュボードから「設定」→「XML-Sitemap」と進みます。

上の方に、サイトマップのURLがあるのでコピーしておきます。

ワードプレス:サイトマップ

ついでに下の方にいき、「優先順位を自動的に計算しない」にチェックを入れておきましょう。

ワードプレス:サイトマップ

サーチコンソールの画面にいき、新しいサイトマップの追加に、下のように入力します。

ワードプレス:サイトマップ

グーグルアドセンスの審査

こちらの記事で詳しく説明しています。

よくある間違い

wordpress.com(ワードプレスコム)と、私の言ってるwordpress(ワードプレス)は、別物です。

まとめ

以上を参考にして、ワードプレスを立ち上げてみましょう。

コメント

タイトルとURLをコピーしました