静岡スタイルは、静岡クレールに新しく変わりました!

【静岡】100円で本格ホームページを作る方法【WordPress/CMS】

初心者でも簡単にホームページを作るほうほう

今回は月額たった100円で本格的なホームページを作る方法を紹介します。

近年ではWordpress(ワードプレス)というシステムが普及して、ブログのように写真をアップロードしたり、文章を修正できたりと、ホームページを制作するのが非常に簡単になりました。
以前であれば、HTMLの基本やWEB制作に関わる技術が必要でありましたが、このワードプレスを使えば中学生でも本格的なホームページが作ることができます。

1.レンタルサーバーを借りる

ホームページを公開する場所として、レンタルサーバーを借りる必要があります。
例えば静岡で普及しているTNC(TOKAIネットワーククラブ)にもサーバーを貸すサービスがありますがワードプレスには対応していません。

レンタルサーバー業者は色々ありますが、特に価格の安くてサービスの良いロリポップをお勧めします。

ロリポップ http://lolipop.jp/

lolipop

ここのレンタルサーバーは非常に安く、月間100円でサーバーを運用できます。
またアフターサービスも手厚く、初心者から中級者に非常に優しいのが特徴です。

もちろんワードプレスが対応していて、たった数クリックでインストールできるので、ホームページ作りが初めてで、ゆっくり設定しても10分~20分程度でワードプレスがインストールできます。
静岡スタイルのウェブマガジンも、このロリポップとワードプレスで公開しています。

※追記
記事を完成させたあとに気づきました、ワードプレス対応は「ロリポプラン」からだそうです。
つまり100円では無理でした… 月々250円となりますm(_ _)m

mousikomi

ロリポップのホームページを開き、「申し込みはコチラ」をクリックします。
新しく画面が出るので、そこで好きなドメインを入力します。
例えばお店の名前やホームページ名を入力します。

2.ドメイン名を決める

domain_name

もしも、◯◯◯.comや◯◯◯.netや◯◯◯.jpという本格的なドメイン(アドレス)を取得して運営したいのであれば、「独自ドメインを利用する」をクリックして、「ムームードメイン」という会社と契約を行います。
そうする事によって、年間1000円程度でオリジナルのアドレスを取得できます。

例えば、オリエントというバーを経営しているのであれば、 http://bar-orient.com やhttp://orient-bar.com などがお勧めです。何かの団体・クラブチームであれば、orient-clubなどでも良いです。
名称が長い場合は、短く略したドメインを使うと良いです。

例えばショップ名が、カフェ・ストロベリー・カプチーノだとすると、http://strawberry-cappuccino-cafe.com/ だとドメインが長くなりすぎてしまいます。
そういった場合は、http://st-cap.com などと省略した名称にするのがベストです。

domain

 

ご希望の【アカウント】と【ロリポップ!のドメイン】を入力。

この例では、無料ドメインの shizuoka.moo.jp を仮で入力しました。
こういった静岡っぽいドメインも利用できます。

roripo-login

メールを確認して、ログイン画面に移動します。
この画面を表示されたらログイン完了!基本的な操作はこの画面から行います。

3.WordPress簡単インストール

ここまで終わったら、インストール作業の半分位は終わります。
次に、左のメニューから「簡単インストール」を選択して、ワードプレスのインストールをします。

kantan_wp_install

 

一番上のインストール先URL は先ほど決めたURLを入力します。
http://shizuoka.moo.jp/など
利用データーベースは今回関係ないので、そのままでOKです。

タイトルを入力しましょう。後から自由に変更できますので仮でもOKです。
例えば、「静岡スタイル」など組織名やウェブ名を入力します。

4.ユーザー名設定とパスワード設定

ユーザー名、パスワード、メールアドレスを入力します。
ユーザー名とパスワードは後からログインするのに使いますので、しっかりとメモをしておき、忘れないようにしましょう。後ですぐに使います。

ログインパスワードは短すぎるとダメです。もしも悩んだのならば、いつも使っているパスワードを2回繰り返すのがお勧めです。
例えばabc123というパスワードは短いので、abc123abc123にすれば長くなります。
より安全性(セキュリティ)を高めたいのであれば、abc123の後に!と?を入れます。
例えば、 abc123!abc123? このパスワードは、「abc123」という最も弱いパスワードをベースに使っていますが、解析されにくい強靭なパスワードに変化します。

大文字や小文字を混ぜたり、!?#を混ぜると飛躍的に安全性が向上します。

5.ワードプレスのログイン

wp-login

入力内容を確認して、設定を完了すると、そのまま「管理画面」に行けます。
ここで、先ほどのユーザー名とパスワードを入力して下さい。

これが自分のサイトのログイン画面になります。ブックマークをしておきと良いです。
もしも、忘れてしまった場合は、パニックにならずに、ロリポップの管理画面から「ワードプレス」を選択してそこから、この画面に飛ぶことができます。

他にも自分のアドレスの最後に「 /wp-login.php 」と入力すると、ログイン画面に映ることができます。
例えば静岡スタイルの場合は、http://shizuokastyle.net/wp-login.php というアドレスで管理画面に入れます。

この「wp-login.php」というのをおまじないのように覚えて置けば、出かけ先のパソコンや、友達の家でも更新や編集できます。
自宅で自分だけが使うパソコンであれば「ログイン状態を保持する」をチェックしておきましょう。
もしも共有のパソコンや他人のパソコンであれば、チェックせずに、毎回ログアウトするようにしましょう。

wordpress_login_after

ログインすると、このような画面になります。
これでワードプレスのインストールは完了します。

6.ワードプレスを使ったサイト作り

ここからがワードプレスを使ったサイト作りになりますが、このシステムは非常に優秀で、まるで楽天ブログやアメブロのように簡単で誰でも簡単に編集や投稿ができます。
サイトのデザインも自由に変えれるのが特徴のひとつです。

ippansettei

まずは一般設定に移ります。
ここでサイト名と、キャッチフレーズを考えて入力します。
例えば、サイト名を「カフェ ストロベリー」 キャッチフレーズを「家族みんなで楽しめる、静岡市久能にあるストロベリーカフェ」など簡単な紹介文にします。

ここで注意が必要なのは、ワードプレスアドレスやサイトアドレスは絶対に触らないようにしましょう。
これは上級者向けの設定で、サーバーを移動したり、データベースを変更する時に使うものなので、変更はNGです。
メールアドレスの変更はしてもらっても大丈夫です!

7.記事を投稿する

次に記事を投稿する作業に移ります。
これはサイトの内容をどんどん書いていくために重要な作業です。

どこから投稿画面に行くかというと、ダッシュボードの左にある、「新規追加」もしくは、ホームページにずっと出ている黒いバーの+新規から投稿をクリックします。

toukougamen

 

ここで、黒いバーについて説明します。これは、管理バーと呼ばれ、ワードプレスにログインしている時に便利に作業できるために表示されているものです。

基本的にはずっと表示されていたほうが作業がしやすいと言えます。
何故なら、自分のサイトをポチポチ押しながら移動していて、これを編集したい!という時にスムーズにその画面の編集に移れるからです。

なので、管理バーを常に表示する事をお勧めしますが、もし気に入らないのであれば、ダッシュボードの「ユーザー」から「ユーザー一覧」自分のアカウント名をクリックすれば、管理バーを非表示にすることができます。
他にも管理バーの色を変えることもできます。可愛い色合いにしたり、自分の好きな色に変えるのもお勧めです。

なぜ色が変えれるかというと、サイト制作のプロフェッショナルが、5個や10個などのワードプレスサイトを移動しながら編集している時に、編集するべきサイトを間違えてしまうことがあるからです。
サイトによって色分けすることによって、間違えずに作業できるためです。

profile

 

話が戻りますが、新規追加では次のことができます。

  • 文章を書き込む
  • 文章の色やサイズなど変更する
  • 見出しを付ける
  • 引用の設定、リストの設定
  • 横ラインを入れる
  • 左揃え・中央揃え・右揃え
  • 他のページ、他のサイトにリンクする
  • ページを「次へ」と分割する
  • ワードなどから文章をコピー・ペーストする
  • 画像をアップロードする
  • 画像を記事に挿入する

working_page

まるでワードのような使い心地で、とても簡単に何でもできるのがワードプレスの特徴です。
他にも、写真を追加したいときは、白の空白の部分に、写真をドラッグ・アンド・ドロップすれば、簡単に挿入できます。
あとは、大サイズ・中サイズ・小サイズなど選択すればすぐに挿入完了です。

8.記事の管理

記事の管理ですが、これもアメブロなどと同じように簡単です。
右上に「公開」などとありますが、そこで「下書きとして保存」をクリックすれば下書きとして保存されます。
「公開」をクリックすれば、ただちに公開されてホームページ上からも確認できます。

予約投稿という機能も付いており、例えば7件の記事を書いたとして、一つづつ投稿予定日をずらしていけば、ワードプレスが毎日自動的に投稿してくれます。
この機能を使えば記念日や何かのイベントと連動させて自動でポストできるので便利です。

例えば、「5周年オープン記念!本日で5週年を迎えました」という記事や、「新年あけましておめでとうございます!」といった記事まで、その日に公開するのが面倒な場合も予約投稿なら簡単です。

リビジョンというのは、ワードプレスが自動的に保存してくれている「差分バックアップ」のことで、間違って保存しちゃった!!この前の文章が正しかったのに!!って時に活躍します。
昔の編集途中の画面を復旧するのにも便利です。

cath

アイキャッチというのはずばりこれですね。
トップページに表示される小さな画像の事です。テーマによっては大きく表示される場合もあります。
デスクトップの写真をドラッグ・アンド・ドロップで設定しましょう。サイズは記事すべて統一すると良いです。

9.テーマの設定

ワードプレスの最も感動的で素晴らしい機能と言えば、この「テーマ設定」です。
グーグルで「ワードプレス テーマ」と検索しましょう。
すると、あらゆるテーマが紹介されていて何千や何万種類のテーマから好きなデザインを選ぶことができます。
もちろん無料の物が半分以上ですが、こだわりのデザインや高機能性を追求したいのであれば有料の物もお勧めです。そういった有料のハイクオリティテーマも1000円~1万円を一度払うだけで使うことができます。

WordPressテーマ(テンプレート)50+選 | Themegraphy

2013年 : 無料で使えるクオリティの高いWordPressテーマ 100 

ハイクオリティーなレスポンシブ対応WordPressテーマ27選 

無料で使える日本国内のWordPressテーマ – NAVER まとめ

theme_sample

ワードプレスを使えば、こういった、とてもカッコいいサイトを作ることも可能です。
ダッシュボードの「外観」から「テーマ」をクリックしてみましょう。

theme_defalt

これは、ワードプレスの標準のテーマです。
公式テーマと言っても良いもので、どれも完成度が高く、スマホやタブレットでも快適に動作します。
クリックして「有効」と押せばテーマが設定されます。

そうしたらサイトを確認してみます。

shizusuta_theme

このように、記事の内容はそのままでテーマだけが変更されます!
どうでしょうあ、静岡スタイルの印象もガラッと変わりますね。
他のもっと良いテーマが欲しければ「新しいテーマを追加」をクリックします。

すると、最新のテーマや人気のテーマ、特徴フィルターを使った絞り込みもできます。
3カラムや2カラム、スマホ対応など幅広い設定で抽出することも可能です。

こういったテーマは、背景の色や写真を変更できるものも多く、自分だけのお気に入りの一つを作り上げることも可能です。

10.背景色、ヘッダー画像の変更

「外観」から「ヘッダー」をクリックします。

header

例えばこのように、自分の持っている写真をアップロードして、サイトのヘッダーに表示させることができます。
この写真を変えるだけで、イメージが一気に変わるので、色々変更してどれが自分のサイトに合うか試して下さい。

ちなみにこの写真は、静岡県立美術館のプロムナードで撮影したものを、フォトショップで少し編集して、フランス語の一節を入れたものです。
こういった手作りの可愛い画像を入れれば世界で一つだけの自分のサイトが持てます。

bg.jpg

次にカスタム背景設定に移ります。

haikeigazou

何とつまらない画像でしょう。ですが、これでOKなのです。
静岡スタイルの背景は、このようなつまらないシンプルな画像で作られていますが、メインのコンテンツの雰囲気を引き立てます。
お刺身のツマみたいなものです。シンプルなほうが良いです。
他にもアンティークな紙の背景や、布地(ファブリック)などもお勧めです。今どきの可愛いサイトが作れます。

是非ともこのサイトをチェックして下さい。

Free-Style – ALL FREE

昔から好きなサイトですが、こういった素材を山ほど提供しています。全て無料です。
他にも背景を探したい場合は、「素材 パターン」や「素材 シームレス」と検索すると良いです。
背景画像は大きい物を設定すると読み込みに時間が掛かってしまうので、小さな写真を繰り返すものがお勧めです。

11.いったん完成

これで、だいぶホームページっぽくなってきました。
他にも便利なものが、「プラグイン」です。

WordPressの優良プラグイン50選、最初にインストールすると超 

こういったサイトでワードプレスのプラグインを紹介しています。
特に「All in One SEO Pack」や「コンタクトフォーム」が人気です。
昔はホームページ制作業者で「ホームページ制作とSEO対策で150万円です!安いでしょ?」とぼったくていたものが、今では無料で自分で出来る時代なのです。

「コンタクトフォーム」つまり、お問い合わせフォームも、以前はcgi perlなどの特殊な技術が必要でしたが、このプラグインを使えば、たった5分。中学生でもできます。
このフォームも業者に頼むと3万円~10万円も取られてしまいます。

他にもツイッターと連動させたり、フェイスブックと連動させれば動的なサイトができますよ!

wiget

12.ウィジェット

「外観」からウィジェットに行くと、サイドバーやヘッダー、フッターに簡単に機能を追加できます。
例えば、テキストを使って文章を追加したり、カレンダー、アーカイブなど色々挿入できます。
「RSS」という標準の機能を使えば友達や仲の良い人のサイトの新着履歴を、自分のサイトにも自動更新で挿入できます。
プラグインと連動させることで、ツイッターを埋め込んだり、人気ランキングを追加したり本当に自由なことができます。慣れてくると、とっても楽しいです。

追加の方法は、左側のアイテムをドラッグ・アンド・ドロップで、右側に移動すればOK!
メインサイドバーという所に入れます。
並び順も影響するので、自由に変えてみて下さい。
検索ボックスや、コメントなども並べ替えができます。

他にも「テキスト」をサイドバーに追加して、そこにHTMLコードを挿入することもできます。
例えば、テキストを追加して <a href=”http://yahoo.co.jp/”>Yahooのホームページ</a>と入力すれば、ヤフーへのリンクが埋め込めます。

13.高度な設定とテーマ編集、CSS

「最初にホームページ制作、簡単って言ったのに、全然簡単じゃないじゃん!!!!」
「7番目の記事の投稿から、ちょっとむずくない??」

確かに初心者にはちょっと難しいですが、慣れです!!頑張って慣れて下さい。
友人の高校生の女の子(18歳)にワードプレスの使い方を教えたのですが、たった2ヶ月で月間1万ページビューの大きなサイトを運営しています。
特にmixi、フェイスブック、アメブロや楽天ブログ、FC2ブログなど、そういったウェブサービスに慣れている世代の人に取ってはワードプレスも簡単に使えるようです。

csssyle

大きな大人の方は頑張って慣れて下さいませ。
何しろ業者だと何十万円も掛かるホームページを100円で済ませようとしているのです。

騙されついでに、もうちょい教えます。これはお勉強が必要なので、お勉強が苦手であればスルーして下さい。
「外観」から「テーマの編集」を押すとスタイルシートの編集に移ります。
ここで、サイトのCSS(カスケード・スタイル・シート)を編集できます。

図書館に行くと、必ずと言っていいほど「CSS入門」という本があります。これを借りて1週間みっっちり受験生のように勉強します。
すると、あら不思議、自分のサイトが自由自在に編集できているでは無いですか。間違って1ヶ月勉強すると、自分で手作りテーマが制作できます。

ついでのついでに、ごく簡単にCSSについて説明します!!

最近のホームページは<div>とい箱でできています。この<div>という箱に中身を入れて成り立っているのです。
<div>は箱の始まりの合図で、</div>が終わりの合図です。
この箱に”クラス名”を付けます。小学校の3年2組のクラスと大体同じと思って良いです。
名前の付け方は<div class=”abcd”>です。
この””の間に好きなクラス名を入れます。

そして、そのクラス名をCSS=スタイルシートと呼ばれる所とつなげるのが、CSSの技術です。
スタイルシートには class=”abcd”とは書きません    .abcd  となるのです。
そういう物とおぼえて下さい。

スタイルシートを使いたいのであれば、「投稿」画面で右上の「テキスト」モードを使う必要があります。

divdvi

こんな感じです。これで、箱の中身君が、クラスに入りました。
次に外観→テーマの変更に移り、  .abd{ color:#blue ; font-size:large;}と追加します。
これにより、箱の中身のサイズを変えたり、色をつけたり自由にできます。

fontsize

 

これがCSSの原理です。
むか~~しHTMLを習った人は、こんな感じで覚えていると思います。

<font color=”blue” size=”15px”>箱の中身</font>

これはですね~。今は使いませんのでご注意下さい。
例えば、このようなページが100ページ作って、やっぱり赤に変えたいとなったら、100ページちまちまと変更しなければなりません。絶対10時間以上掛かります。

ですがこのCSSという方法を使えば、CSSのファイルに一行「colo:red;」と書き換えるだけなので、1分も掛かりません。
すると、全てのページがCSSファイルを除き込み、「あ!このクラスは赤だ!」ってなる訳です。

 

難しいですねーーー・・・・。

 

頑張って下さい!!!

 

13.SEO対策

最後の説明です。SEO対策ってどうなのー?って思いますよね。
昔は「被リンク数が~」「PageRankが~」と言って、制作会社が何十万円~何百万円もぼったくっていました。
今の最大のSEO対策は
「価値のある記事を書き続ける事」
これに尽きます。
もちろん、無料のプラグインソフトであるSEO関係を使っても良いです。

後はグーグルに「こんなサイト作ったよ-!」登録してね!とお願いすればOKです。
https://www.google.com/webmasters/tools/submit-url

なぜSEO対策が無駄かというと、静岡スタイル以外にも、もう2つサイトを運営していますが、その一つが月間のアクセス数が100万PVを余裕で超えています。
作って半年のサイトですが、何のSEO対策もしていませんが、一日3万人以上のアクセスがあります。

accsess

ゴールデンウィークは一日7万~10万アクセスがあるので、来月中には月間200万~300万PVのサイトになる勢いです。
そうなると、ロリポップでは運用できずに、さくらレンタルカートやエックスサーバーなどの超高速サーバーが必要になります。

ロリポップでの運用目安は月間10万アクセス位までは対応できます。
是非とも価値のある記事をバンバン更新して、サイトを上位に上げて下さいね~。

14.ホームページ作りのまとめ

今回はワードプレスを使ったホームページ作りの基本を紹介しました。
100円で作ったサイトに何万人も訪れたら嬉しですよね!!
どうせ100円なので、途中で挫折してもオッケです。もしかしたら、自分に才能があって上手く作れるかもしれません。

是非とも挑戦して見て下さいね~!

 

参考になるサイトたち

スタイルシートの基本 — ごく簡単なHTMLの説明

5日で分かるスタイルシート・CSS講座

はじめてWordPressのオリジナルテーマを作るときの参考になれ 

※この人は特にお勧め。http://webdesignrecipes.com/ 物凄く参考になります。

WordPress超初心者講座

WordPress ワードプレス の使い方 – ロリポップ!