ブログをはじめたいけどまず何をしたらいいんやろか

ブログを始めたいと思った時、まず何をすべきか、ブログ初心者のかたが迷わず、確実に、簡単にできるWordpressブログの始め方を紹介します。

この記事はこんな人におすすめします！

• ブログはワードプレスで作りたい
• サーバーの知識やプログラミングの知識は無い
• サーバーはおすすめがいい

今回はエックスサーバーの「WordPress クイックスタート」を利用する方法の説明になるためエックスサーバー以外のサービスでは利用できませんのでご注意を。

ワードプレスでブログをすぐ始める方法

エックスサーバー を使う

今回の記事では、レンタルサーバーにエックスサーバーを利用します。レンタルサーバーとは有料でWEB上にワードプレスを設置する場所を提供してくれるサービスで、ワードプレスにはもちろん必須で、ワードプレスのみならず様々なサイトにも必要なサービスです。

WordPressが有料ブログといわれるのは、このサーバー費用が必要だからです。

エックスサーバーは国内シェアNo1のレンタルサーバーで国内で最も利用されているサービスです。現在170万サイト以上が運用されており個人でWordPressブログを始める際には最初に候補にあがるサービスのひとつです。私も利用していますのでおすすめです。

「WordPress クイックスタート」を使う

エックスサーバーの「WordPress クイックスタート」は2020年4月から利用出来るようになった新しいWordPressブログの始め方です。

これまでWordPressを始めるために必要な主な工程は

上記の4つがありますが、まとめてエックスサーバーが自動で行ってくれます。

申し込み後は、すぐにWordPressが使えるようになっているので、初心者の方でも簡単にWordPressブログをはじめることが可能になりました。

クイックスタートでワードプレスを始める手順

まずはエックスサーバーの申し込みにアクセスしてください。

「10日間無料お試し 新規お申込み」を選択します。

「10日間無料お試し　新規お申し込み」をクリック

１．WordPressクイックスタートを「利用する」にチェック

WordPressクイックスタートにチェックを入れると以下のウィンドウが表示されます。前述したようにクイックスタートにはお試し期間がなく、即契約になります。特に問題はありません。「確認しました」をクリックすると必要項目が表示されます。

２．サーバー契約内容

サーバーIDは特に変更の必要はありません。お好みでどうぞ。

プランは「X10プラン」「X20プラン」「X30プラン」の3つから選択が可能です。契約期間は3〜36ヶ月まで選択可能で長期間の契約ほど月間の利用料金がお得になります。基本的に使える機能に差はないので一番安いX10プランで問題ないです。

また料金もお得になるので12か月契約がおすすめです。

3．ドメイン契約内容

次は、ドメインの取得です。ここではあなたの好きなドメイン名を取得できます。特にこだわりがなければ「ずっと0円」の中にあるドメイン名の種類、特に「.com」をおすすめします。

定期的（継続的）に実施されているキャンペーンで年間1000円前後かかるドメイン料金が無料になってますのでかなりお得ですね！

4．WordPress情報の入力

「WordPressの情報」では、「ブログ名」「ユーザー名」「パスワード」「メールアドレス」を入力します。

ユーザー名とパスワードはログイン時に必要になるため、忘れないようにメモなどしておきましょう。

支払い方法はクレジットカードのみになります。入力欄にあるセキュリティコードは、カード裏面に記載されている3桁のコードのことです。

インフォメーションメールの配信はお好みでどうぞ。主にキャンペーンなどのメルマガ配信です。

次に、「利用規約」「個人情報に関する公表事項」を確認してチェックします。最後に、「次へ進む」ボタンを押します。

7．登録情報の確認

入力した情報に間違いがないか確認しましょう。

「SMS・電話認証へ進む」を押して次に進みます。入力内容に間違いがあった場合は、もう一度入力画面に戻って修正しましょう。

ブログにアクセスしてみよう

申込完了してしばらくしてからサイトURLにアクセスしてみましょう。ブログが表示されれば無事設置が完了しています。

最初のページはこの状態です。↑

この記事を読むとできること

ワードプレス「Cocoon」で表の作成・挿入方法

通常のHTML作成で表作成では<table>タグを使って表を作成しますが、ワードプレスではどうやって表を作成するのか、私と同じように悩んだ方のお役に立てれば嬉しいです。

WordPressで表を作る方法はいくつかありますが、結論から言うとワードプレスではプラグイン を使って表を作成する方が断然簡単なのでこちらを紹介します。

プラグイン　TinyMCE Advanced

初心者の方には、プラグイン（TinyMCE Advanced）のインストール手順も説明します。

すでにインストール済みの方で下記のように「ツールバーに『テーブル』が表示されてるぅ」って場合は次のインストール方法をすっ飛ばしてください。

プラグイン【TinyMCE Advanced】のインストール

まず、ダッシュボードから「プラグイン」→「新規追加」をクリックします。

赤枠の検索窓に「TinyMCE Advanced」と入力して下さい。

「今すぐインストール」→「有効化」を押します。

有効化は忘れやすいので必ずチェックしましょう！

旧エディターの設定

TinyMCE Advancedの設定の前にエディターを「旧エディター」に切り替えておきましょう。

私がWordPressを始めたころは、すでに新しいエディターができていましたが、非常に使いにくいとあまり評判が良くなく、旧エディターを使用しています。

もちろん現在新エディターで慣れている方は、そのまま使っていただいて構いません。

旧エディターを使うにはプラグインの「Classic Editor」をインストールするか、もしくはCocoonは新旧エディターの切り替えが簡単にできるのでCocoon設定からも使えます。

プラグイン の場合は先ほど同様、プラグイン 検索からインストール、有効でOKです。

Cocoon設定の場合はまず「Cocoon設定」を開きます。

「エディター」タブを選択

「Gutenbergエディターを有効にする」にするチェックを外して、「変更をまとめて保存」を押します。

以上のこれだけで、旧エディターに変えることができます。

簡単ですね！

TinyMCE Advancedの設定

次に「TinyMCE Advanced」の設定です。

①「旧エディター」を選択

②「テーブル」を上のツールバーへドラッグ&ドロップ

③最後に「変更を保存」を押します。

テーブル以外にも色々あるので使いたいボタンがあれば、ツールバーへドラッグ&ドロップしておきましょう。

これで表を作る設定は完了です！お疲れ様でした！

表の作り方

早速、表を作ってみましょう。

投稿画面で、ビジュアルエディターの「テーブル」をクリックします。

そうするとマス目の表が出てきます。これを表と例え、「縦3列×横4行」の表を作るなら、このように選択します。

そうすると以下の表ができます。四隅の白いポイントで高さや幅を変えられます。

セルの大きさ（幅・高さ）の設定

セルの高さ

セルの幅と高さを調整するには、調整したい線の上にカーソルを当ててドラッグして下さい。

表全体のセルの高さを均一に変更したい場合、（またはどこか1列だけでもOK）まず全体を選択します。（全体選択は左上からドラッグして右下に引っ張ると簡単です）

テーブルをクリック→「セルのプロパティ」で高さを入力します。

いったん高さに指定したい数値を入れます。Ex,100px

そうすると全てのセルの高さが100pxで揃いました。

幅に関しては％入力

幅に関しては％で入れる必要があります。

もう一度「テーブル」をクリックして「表のプロパティ」を選択しましょう。

表の幅を、全体幅（コンテンツ幅）の何%にするかを指定します。

赤字のコンテンツ幅（100％）に対して表の幅を50％にすると上記のようなサイズになります。

行・列の追加

列や行を増やすには、テーブルから「挿入」を選択します。

不要な列や行を削除することもできます。

セルの設定

「セルのプロパティ」では、背景の色、線の種類や色などを変更することができます。

「横位置」「縦位置」はセルの中の文字位置のパターンです。

セルの種類の「ヘッダーセル」を選択すると、セルが見出し（太文字）になります。

セルのプロパティ（高度な設定）

高度な設定は「Border style (線の種類)」「枠線の色」「背景色」の指定ができます

表の横スクロール設定

表のセルの初期設定だと、文字がセル幅より長くなると、折り返して下に連なっていきます。

文字を一列にするには「Cocoon設定」の「本文」タブをクリックします。

「本文」タブページの下の方にあるテーブル設定で「横幅の広いテーブルは横スクロール」に チェックを入れて「変更をまとめて保存」を押します。

編集画面では変化がなくわかりにくいですが、プレビューで確認するとちゃんと一列になってます。

コンテンツ幅よりも長くなると「横にスクロールできます」と教えてくれるようになりますよ。

まとめ

ワードプレスでは表は簡単に作成できます。実際に触ってみてみるとすぐ慣れますので早速作ってみましょう。

”スタイル”ツールのテキスト装飾バリエが沢山あってなかなか把握できない。。。

WordPressテーマのCOCOON（コクーン ）を使っていてすごく使いやすいのですが、超便利ツールの”スタイル”ツールのテキスト装飾バリエが沢山あってなかなか把握できず、毎回、スタイルから選択→表示された装飾見てみる→ちょっとイメージと違う→再選択→表示された装飾みる・・・の繰り返しをしてました。。

そこで

WordPressテーマのCOCOON（コクーン ）の”スタイル”ツールにはどのようなテキスト装飾があるのかまとめました。

COCOON  スタイルツール　表示一覧

【ボックス】アイコン

【ボックス】案内

【ボックス】白抜き

【ボックス】タブ

【ボックス】付箋風

バッジ

オレンジ　レッド　ピンク　パープル　ブルー　グリーン　イエロー　ブラウン　グレー

マイクロコピー　（使い方）

マイクロコピーとは、リンク・ボタン周りに表示させるコピーライティング用の機能です。

例えばボタンの上に「＼アフィリエイト するなら／」と入れる場合

スタイル ＞ マイクロコピー ＞ テキスト（上）＞ 中央

になります。

テキスト（上）

テキスト（上）＞　左

テキスト（上）＞　右

テキスト（下）

テキスト（下）＞左

吹き出し（上）

吹き出し（上）＞左

吹き出し（上）＞中央

吹き出し（上）＞右

吹き出し（下）

吹き出し（下）　＞　左

吹き出し（下）　＞中央

吹き出し（下）　＞右

ボタン

大きさ

レッド小

レッド中

レッド大

大きさは上記の3パターンです。

カラーパターン

ピンク中

パープル中

ディープパープル中

インディゴ中

ブルー中

ライトブルー中

シアン中

ティール中

グリーン中

ライトグリーン中

ライム中

イエロー中

アンバー中

オレンジ中

ディープオレンジ中

ブラウン中

グレー中

囲みボタン

「囲みボタン」はaタグを用いたテキストリンクをボタンにする機能です。

A8.net 

↑こちらに「囲みボタン」を適用します。

レッド（中）
A8.net 

大きさ

A8.net 

A8.net 

大きさは上記の3パターンです

カラー

「ボタン」と同じカラー展開なので割愛します。

囲みブログカードラベル

まとめ

たくさんありすぎて全然使いこなせてなかった・・・という方！簡単に見え方が華やかになりますのでぜひ使ってみてください！

独学でプログラミングを勉強していくと、HTML ,CSS,JQuery次はなんの言語をとなった人、WordPress【ワードプレス】略してWPを学ぶタイミングです。

ぶっちゃけプログラミングの知識がなくてもできてしまうのですが、この先、サイト作成するにも必ずWP案件は出てきます。そして技術の割には高単価案件も多いのです。

ただし、WPはサーバー、ドメインが必要になりますので、先行投資として月サーバー代1000円程度、ドメイン代少々必要になりますが、後々回収できるほどのメリットがありますので飛び込んでいきましょう。ちょっと贅沢なランチ1食分と思えば安いもんです。

サーバーを借りる

サーバーはたくさんありますが初心者の私はいろいろ検討した結果エックスサーバー にしました。他のサーバーも含め料金プランはほぼ同じくらいなので有名なとこにしました。また独自ドメインが永年無料でゲットできるのも大きなメリットです。これは期間キャンペーンなのでHPで確認してください。

エックスサーバーの申込はこちら

エックスサーバー をレンタルする記事はこちら

【初心者向け】エックスサーバーをレンタルする方法

【初心者向け】エックスサーバーをレンタルする方法 エックスサーバーを借りてブログを作りたい エックスサーバーってどうやって借りるんやろか 実際にサーバーを借りる際には初めてのことなのでわからない...

design-eight.com

2020.10.08

エックスサーバー ではすぐにワードプレスを始めたい人に「ワードプレスクイックスタート」があります。こちらの記事から

【初心者でも安心】ワードプレスでブログをすぐ始める方法

【初心者でも安心】ワードプレスでブログをすぐ始める方法 ブログをはじめたいけどまず何をしたらいいんやろか ブログを始めたいと思った時、まず何をすべきか、ブログ初心者のかたが迷わず、確実に、簡単にできる...

design-eight.com

2020.10.10

料金プランはベーシックで【X10】でいいと思います。基本的には10日間無料キャンペーンをやってますので自ずとそのパターンになります。10日以内に支払登録しなければ10日間で終了、契約する場合は10日以内に支払登録をします。年払いがお得なのでおすすめです。

独自ドメインの取得

無料で独自ドメイン取得

聞いたことはあるけど実際に取得したことがある人は少ないのではないでしょうか。プログラミングの勉強を始めるにあたり、いずれは取得するとは思っていましたが。。

独自ドメインは実際にはいろいろなサイトで取得できますが、今回はエックスサーバーで独自ドメインが無料で取得できるのでここで取得しましょう。（期間限定キャンペーンのため、要確認）通常は年間700円〜1000円程度かかりますが永年無料だそうです。これはありがたいですね！

事前に取得できるかドメインを調べましょう。決定後、変更できませんのでご注意を。ドメインは『.com』など一般的なものがいいです。見慣れないドメインより、なんとなく信頼されやすいからです。【ムームードメイン】などのサイトでお好きなドメインを事前検索して使用可能かチェックしましょう。エックスサーバー でも調べられますが、調べるだけならドメインに特化したサイトの方が調べやすいからです。
ムームードメイン
お好きなドメインが決まったらエックスサーバー で独自ドメインを取得しましょう。

エックスサーバー で独自ドメインの取得方法

独自ドメインは「Xserverアカウント」からの申し込みになります。エックスサーバー の管理画面の左に【サービスお申し込み】がありますのでここから入ります。

その中のエックスドメインにキャンペーン対象の無料サービスの独自ドメイン取得があります。キャンペーンがない場合は新規申し込みになります。

独自ドメインを使うための設定

エックスサーバーで独自ドメインを用いたWordPressを設定、公開するためには、「独自ドメインを使うための設定」が必要になります。エックスサーバー の管理画面の『サーバーパネル』と呼ばれる管理画面に入り『ドメイン設定』を行います。

「Xserverアカウント」の右下にある「ご契約一覧」のなかにある、「サーバー管理」をクリックします。以上でサーバーパネルにログインできます。

サーバーパネルのトップページに並んでいるメニューのなかから、「ドメイン設定」をクリックし,「ドメイン設定追加」をクリックします。取得したドメイン名を「.com」「.net」などまで入力し、「確認画面へ進む」をクリックします。

WordPressを設置する

引き続きサーバーパネルから、「WordPress簡単インストール」をクリックします。

「ドメイン選択画面」が表示されたら、先ほど追加したドメイン名の右にある「選択する」をクリック。

「WordPressインストール」をクリックします。

「サイトURL」を選択・入力します。
その後、「ブログ名」「ユーザー名」「パスワード」「メールアドレス」を入力し、「確認画面へ進む」をクリックします。

確認画面へ進むと「インストールを行うと、インストール先ディレクトリ内の「index.html」が削除されます。ご注意ください。」と表示されますが無視でOK。

管理画面URLが発行されるのでさっそくログインしてみましょう。WordPressの初期ページが表示されれば、WordPressブログの設置は完了です！

ワードプレスの初期画面。これが表示されれば設置完了！

まずはサーバーをレンタルするところから始まります。プログラミングをはじめる前は無縁だった物を今はレンタルして活用しているなんて、感慨深く感じます。。。知らないことを自分で調べて知識にしていくことは何歳になっても必要。そして今はネットで全て調べられる。これを使わないてはないです。今後、より一層広がるネット社会に向けて必須になる知識、ツールです。この機会にぜひ学んで見ては。

今回レンタルしたサーバー、独自ドメインもキャンペーンで無料（期間制限あり。HPで確認してください）

エックスサーバー