WordPress.comで無料ウェブサイト作り

ある日、友人の一人にちらっと相談受けたのがこれ。

自分のウェブサイトを無料で設けたい

そこでピンと来たのがWordPress.comです。ところが、2005年以来のWordPressユーザな私ですが、実は無料レンタルブログのWordPress.comは触ったことがありませんでした。友人に勧めたはいいもの、本当に作れるもんかと不安になり、デモサイトを作るつもりでさっそく触ってみたわけです。ちなみに、このブログも私のポートフォリオサイト(endunham.com)もWordPressで構築してありますが、サーバーインストール型のWordPressを利用してます。ご存知ない方のため念押ししておきますが、WordPress.comは無料レンタルブログサービスのサイト。一方、WordPress.orgは、サーバーインストール型ソフトウェアWordPressの公式サイトです。

さて、触ってみての第一印象はこれ。

限られた機能とテーマ(外観用テンプレ)の条件下で自分だけのオリジナルサイト製作は難しい!

でも不可能なことはないので、自分用の覚書と友人に教えるのも兼ねてちょいと紹介しておきますね 😉

【注意】 ここでいう「ウェブサイト」(「ホームページ」とも言う?これって死語?)のタイプは、自分のデザインやアートを展示するためのポートフォリオサイトに絞り込んでます。

◎デモサイト→ http://analogimagery.wordpress.com/


I. ウェブサイト作りする上でのWordPressの醍醐味

WordPressは基本的にブログツールです。とはいえ、固定ページ設定機能があり、これを利用して「プロフィール」ページや「ギャラリー」ページなど、可能な限り個別ページを設定できるからウェブサイト製作には使い勝手が良いのでは。また、ブログ機能の部分は、単なる個人ブログとして利用はもちろんのこと、更新情報や新着ニュースなどの情報発信目的で利用できるのもいい。

一方こちらで広く普及してる無料ブログツールと言えば、GoogleさんのBlogger。WordPressでいう個別ページっていうのは、機能的に無いですよね?(間違ってたら、ドついてくだされ :mrgreen: ) Googleさんは、別でGoogle Sitesっていうサービスがあるから、たぶんブログはBloggerに任せ、ウェブページ作りはGoogle Sitesにとすっきり分けてるのでしょうか。

とにかく、どちらの機能もひとつにまとまったWordPressは、ブログもいろんなページも同じURL下に統一できるから便利かもです。

II. WordPress.comでアカウント取得をする

日本語なので難しくないと思います。こちら(http://ja.wordpress.com/)にて手順に沿って取得してください。

III. ログインして、管理画面にて環境設定

管理画面にはいろいろメニューがあるのですが、ここではサイト作りに最低限必要かなって思う点だけ簡単にメモって置きます。(*画像をクリックすると拡大画像が表示されます。)

  1. 「一般設定」画面
    「一般設定」画面
    管理画面左がわにメニューがずらっとあります。そこの「設定」下に更にサブメニューがあり、その中の「一般設定」でそれぞれの項目を設定する。
  2. 「ページの編集」画面
    「ページの編集」画面
    同じく管理画面内の「ページ」メニュー下でページを追加する。デフォルトでは、「about」ページがすでに作成されてあるので、これを編集(例:日本語表記で「プロフィール」とか)し、新規にページもいくつか追加する。コンテンツはとりあえず空のままでもOK。
  3. 「表示設定」画面
    「表示設定」画面
    管理画面内の「設定」下にある「表示設定」にて、トップページの表示を設定する。デモサイトの場合、「ご挨拶」ページを表示したいので選択。デフォルト設定では、ブログ記事である「最新の投稿」になってます。

IV. ギャラリー作り

  1. 管理画面の「ページの編集」にて、先につくっておいた「ギャラリー」ページを選択する。
  2. 「ページ編集」画面
    「ページ編集」画面
    編集画面にて画像をアップロードする。(「アップロード/挿入」隣アイコンをクリック)
  3. 「ファイルを選択」をクリック→ 好みのファイルを選択
  4. 「画像アップロード」画面
    「画像アップロード」画面
    アップロードした画像の「タイトル」、「キャプション」、「説明」に情報を入力→ 「すべての変更を保存」をクリック。
  5. 「画像アップロード」画面②
    「画像アップロード」画面②
    「コンピュータから」をクッリクし、続けて次の画像をアップロードする。③と④の手順を繰り返す。
  6. 「ギャラリー設定」画面
    「ギャラリー設定」画面
    画像すべてをアップロードしたら、同じアップロード画面にて「ギャラリーの設定」を設定する。「ギャラリーを挿入」をクリック。

V. サイトの外観を変える

「テーマの管理」画面
「テーマの管理」画面
サイトの外観用テンプレート(WordPressでは「テーマ」と呼称)を選ぶ。前にも触れましたが、WordPressは基本的にブログツール。よって、このウェブサイト作りに適した「テーマ」はとても限られてます。いろいろ試してみて、これが一番かな?って思ったのがこれ。

Phu Ly @ Ambiru

理由は、1カラムである、固定ページ用のメニューが上部にある、ヘッダー画像を自分用の画像に変更可能、フッターにブログ関連のメニューが表示されるなどなど。

【ヘッダ―画像】

「カスタムヘッダー画像」画面
「カスタムヘッダー画像」画面
ヘッダー画像は自由に変更可能 (左の参考画像を参照)です。また、画像の色によって、サイト名(一般設定画面では、ブログ名と呼称)が繁栄されない時は「文字色を選択」で調整する。ヘッダー画像のみで表示したい場合、「テキストを隠す」というオプションをクリック。

【ウィジェット*の位置】

「ウィジェット」画面
「ウィジェット」画面
ややこしいなって思ったのが、このテーマにおけるウィジェット表示位置。「ウィジェット」管理画面では、「ここから右側のサイドバーにウィジェットをドラッグして、サイト上に表示します。使用を停止し、設定を削除するには、ウィジェットをここにドラッグして戻してください。」とあるけど、実際ウィジェットが反映されるのはメインコンテント下で、フッター的な位置になるよう。

*ウィジェットとは、個別ページやブログに関するメニューの表示、及びコンテンツなどをサイドに追加・管理できる機能。
その説明が動画で見れます。こちらをクリック!(日本語字幕は、Subtitles [off] というドロップダウンメニューから Japaneseを選択してください。)

VI. まとめ

細かい管理画面上の操作や説明はかなり省いてます。(すいません 😐 ) なので、ちょっと分り難いかも。
まあ、実際自分で遊んでみないことには、わからないこともあるので、いろいろ触ってみてくだされ。それが修得の近道だと独断と偏見さながら思います :mrgreen:

あと、フォトログ形式でポートフォリオ作りする場合は、「ギャラリー」ページは入らないですね。ただブログ機能の記事ごとに画像をアップロードし公開するだけ。

最後に、ここで紹介したテーマは、横幅がかなり狭いのでちょっと時代錯誤だなって感じはあります。この他にも同様の用途で適用できるかなって思ったテーマは以下のもの。

MistyLook 
シンプル、トップメニュー付き、サイドバーウィジェット機能あり。カスタムヘッダー画像も変更可能。実はこのテーマの方がAmbiruより良かったかも?
ウェブサイト適用度: ★★★★

Hemingway
とってもシンプル。ただトップメニューがないので、サイドバーにウィジェットとして「ページ」メニューを設置しないといけない。
背景は白と黒が選べて、フッター部分にコンテンツやメニューなどを入れれるオプション選びがあり。
ウェブサイト適用度: ★★★★

Day Dream
Ambiruと同じく1カラムで、カスタムヘッダー画像サイズが少々大きい。フォントサイズが大きいので、少し違和感はある。
ウェブサイト適用度: ★★★★

DePo Square
機能的にもデザイン的にも粋なテーマ(詳しい説明はこちら)で使えるかもです。ただ、初心者はちょっと混乱するかな?
ウェブサイト適用度: ★★★★

Monotone
そもそもフォトログ用テーマ。フォトログするには、これしかないのは痛いかも。ウィジェット機能を持ち合わせてないので、使い勝手があまりよくない感じがしました。
ウェブサイト適用度: ★★★

White as Milk
殺風景なくらいシンプル。CSSを知ってる方なら自由自在に調整できるかも。
ウェブサイト適用度: ★★★

VII. あとがき

実はこの記事、一週間以上かけてコツコツ書いてました。説明・言語下手ながらの投稿なので、たくさん間違いあるかも  😳
その間にWordCamp Kyotoもすでに終わってたみたいだし 😆
素人の目線で書いたつもりだけど、けっこう省いてる部分多いので、つっこみ、ド突き、及び補足など大歓迎です。
お気軽にコメントくださいませ~ 😛

コメント

  1. かな さんの発言:

    えっちゃん、さすが本職だけあって、よく知ってるねえ。
    ちょっとこのページは要ブックマークだな。

    最近アメブロに登録してみたけど、すごいけちで(基本的に写真がアップできない、サイズがでかすぎて)結局使い物にならなくて放置。その後、別のところでも登録してみたけど、広告がうるさくてイヤ。気が付くとやはりこちらも放置状態。気力が沸いてきたら、私もオリジナルなマイブログを作成してみようと思いまっす。

    1. endunham さんの発言:

      いや~、そんなことないでよ。
      ウェブ界は変化がホント早いじゃん。なかなかテック的に追いついてないくって凹むわ 😳
      本職なりにがんばらんとね。

      そうだよねー。日本のレンタルブログって、広告多いし、スパムも多いよね。
      少し放置すると広告に乗っ取られるし(笑)
      WordPressは、それが無いからおすすめかも。
      ぜひお試しあれ~ 😮

  2. あぶぅ さんの発言:

    おおお、えっちゃん、すばらしい。ありがたーいっっっ。
    教えてもらってからも、ゆっくり座る時間が絞り出せずまだ試していないの…。
    そうか、しかもこれって日本語。いぇーい。
    ちょっとやる気出てきました(笑)
    ジオシティでは、テンプレートを使用せずまっさらなやつを使ってました。文字も写真も勝手にプレイスできたの。そういうのもあるのかなぁ。
    ちょっと頑張っていろいろ見てみます。

    1. endunham さんの発言:

      おお、よかったー。
      とはいえ、書いては見たもの使えなかったらごめんよー。
      まずはやってみて、できんかったら参上しまっせ。
      遠慮なく言ってちょ。

      ジオシティでは、テンプレートを使用せずまっさらなやつを使ってました。文字も写真も勝手にプレイスできたの。そういうのもあるのかなぁ。

      あるある!HTML知らなくでも全然大丈夫よー。FlickrやTwitterの更新状況も確かのせれたはず!

      まずは触ってみてさ。
      がんば!

  3. ナッツ さんの発言:

    初めまして

    HPを作ろうと思い検索したらここにたどり着きました

    wordpressでホームぺージを作りたいのですがサーバーやドメインはいらないのでしょうか?

    返信宜しくお願いします

    1. endunham さんの発言:

      ナッツさん、コメントありがとうございます!

      このWordPress.comのサービスなら、サーバーやドメインは必要ありません。日本にもあるいろんな無料ブログサービスと同じ感覚ですよ。
      もし自分オリジナルのドメインを利用したいけど、ブログ自体はこのWordPress.com上に置きたいのであれば、年間13ドルでそのサービスも利用できるみたいですね。
      ちなみに、日本語サイトはこちらです。http://ja.wordpress.com/ 
      詳しくは、「機能」を参考にしてみてください 😉

      個人的に、今までウェブサイトを立ち上げたことがない、ノンテックな方にはこちらの無料サービスを先に試してみるのをお勧めします。後で、ここで作ったサイトを自分のオリジナルドメイン下で運営したいと思っても、その変更は可能ですからね。

      それでは、がんばってくださいね!

  4. anuhea さんの発言:

    はじめまして。クリーブランドウェストサイド在、しかもJANO会員のanuheaです。こちらのブログときどき拝見させていただいておりました。
    さて、すぐに本題です(すみません)。自分の備忘録を兼ねてブログ製作を思いつき、何の知識もないのですが、WordPressがよさそうなのでつくってみました。
    http://yamatoutaha.wordpress.com/
    ひとつご教授願いたいのですが….
    widgetsを組み入れたいと思い、appearanceからwidgetsの画面に行くのですが、なんと右側にsidebarが見当たりません。(いちおうwordpressのforumにも同じ質問を投稿しました)なぜ???と「?」が昨晩から頭から離れません 🙄
    なぜかおわかりになりますか?わたしの選んだthemeの関係?(そんなはずはないと思うのですが)すみません、お時間のある時で結構ですので、教えて下さい。メールでも結構です。

    1. endunham さんの発言:

      こちらこそ、はじめまして!
      それとコメント頂きありがとうございます。
      anuheaさんもJANO会員なんですね。
      私は入会したばかりなので、あまり知ってる方が少ないのですが、もしかしたらどこかでお会いしてるかもしれませんねー。
      西側は日本人少ないので、ホントに繋がりは貴重です。
      これからもどうぞ宜しくお願いします。

      さて、私もすいません、本題の質問にさっそくお答えさせて頂きます。
      Sidebarが見えないとのことですが、ブログを拝見したところSidebarはちゃんとブログ上で表示されてます。
      今表示されてるCategoryやArchivesもろもろは、defaultで表示されてるかと思います。

      widgetsを組みたいという事で、大丈夫です!appearanceからwidgetsの画面に行ったところは間違ってないですよ。
      その画面中央に使用可能なwidgetsアイテムが並んでいると思いますが、それらは見当たりませんか?
      もし見当たるなら、その中から使用したいwidgetを引きずって(drag)、右側に表示できるセクション名で枠組みがあるはずなので、そこに引っ張ってきたウィジットアイテムを落とすだけです。
      このセクションはテーマによって変わってきますが、ざーっとご使用のテーマの概要を見たところ、サイドバーにウィジット表示は可能のようです。
      だから大丈夫かと思うのですが、デモサイトで使ってるテーマのウィジット画面(anuheaさんご使用テーマと多少違いがあり)を一応参考のためここに貼っておきますね。

      それでは何かまたあったらご遠慮なくどうぞ!
      Good luck!

  5. anuhea さんの発言:

    ご返信ありがとうございます。
    実はForumの方でも回答がありました。その人いわく、「わたしが使っていたSidekickというのはweidgetsがないから、似たようなthemeでSuperheroはどうか」ということでしたので、Superheroに変えてみました。というわけで、Superheroに変更して、dashboardからappearanceにいって、widgetsを選んだら、ちゃんと右側にdragする先のフレームがありました。Sidekickにはなかったので、やはりSidekickはwidgets機能がないのだろう、と勝手に解釈してしまいました。
    それにしても、自分がまだまだ初心者なせいか、それともdemoにあるようなappearanceにするのには、お金を払わないといけないのか、よくわかりませんが、demoは立派ですね〜。

    ところで、westside在住ですか?

    1. endunham さんの発言:

      よかったですねー、問題解決して。

      いえいえ、デモサイトは特別なにもいじってませんよ。
      だからお褒め頂きホントに恐縮です。ありがとうございますね!
      初心者でも大丈夫ですよ。いろいろ自分いじってるうちに、好みのサイトに仕上がると思いますから。

      そうです、私は西側住民です。
      ここではネット上なので詳しく言えませんが、City of Clevelandと言えば想像付くかと思います。今度春先にJANOのピクニックがあるでしょうから、その時お会いできたら良いですねー。
      それでは、ブログ作りがんばってください 😉

コメントは受け付けていません。