Wixブログの作り方

Wixブログの作り方

Posted at May 31,2017 12:55 AM
Tag:[Wix]

Wixブログの作り方を紹介します。

Wixブログ

1.はじめに

Wix(ウィックス)は、2006年に設立された企業で、Wix.comではドラッグ&ドロップ形式の無料ホームページ作成ツールを提供し、世界で1億人以上が利用するオンラインプラットフォームとなっています。

本エントリーではWixブログの基本的な機能と、簡単な作成フローについて紹介します。

2.Wixブログの機能・特徴

Wixブログは、選択したテンプレートを元にウェブページを直接編集するという操作で、記事やデザインを作成することができます。HTMLを書く必要は一切ありません。

選択するテンプレートもデザイナーが手がけたもので非常に美しいものばかりです。これらのテンプレートはすべて無料で使えます。

記事やテンプレートで利用する画像も、切り抜き・反転・フィルタ・明るさ・キズ補正など、ページ上で編集できます。

作成したページは、スマホ・タブレットなどのレスポンシブデザインにも自動的に対応します。

無料で利用することもできますが、独自ドメインを登録することも可能です。

次項ではWixブログの具体的な作り方を紹介します。

3.ブログ作成フロー

Wixブログのページにアクセスして「いますぐはじめる」をクリック。

(クリックで拡大、以下同様)
いますぐはじめる

メールアドレス・パスワードを入力して「新規登録」をクリック。

新規登録

登録が完了するとテンプレート選択画面が表示されます。

テンプレート選択画面

テンプレートは、

  • ファッションブログ
  • フォトブログ
  • デザイナーブログ
  • ジャーナリストブログ
  • フードブログ
  • 書籍ブログ
  • ビジネスブログ

など数十種類のカテゴリーから選択することができます。

ここでは先頭に表示されている「ファッションブログB」を選択してみます。

ファッションブログB

スクリーンショットにマウスをポイントすると、「編集」と「表示」のボタンと「詳細」のリンクが表示されます。

スクリーンショットにマウスをポイント

「詳細」のリンクをクリックすると、テンプレートの説明が表示されます。

テンプレートの説明

「表示」をクリックすると、新しいタブにサンプルデータでテンプレートが表示されます。サンプルデータ上部にある「編集」をクリックすると、そのままテンプレート編集画面に移動することができます。

テンプレート編集画面

「編集」をクリックして編集画面に移動します。なおテンプレートを後から変更すると記事データが消えてしまうようなので、注意しましょう。

編集

これがテンプレート編集画面です(この画面に遷移するまでちょっと時間がかかるようです)。さきほどのサンプルページと似ていますが、編集用のアイコンが表示されていることがわかります。

テンプレート編集画面

それではこの画面を使って、まず新しい記事を作成してみます(テンプレートの編集はこの後行いますが順番はどちらでも構いません)。

記事タイトル・記事本文を編集するには、記事部分をクリック。

記事部分をクリック

ボタンが表示されるので、「新しい記事を追加」をクリック。

新しい記事を追加

これで記事作成画面に移動します。

編集画面

「タイトルを入力してください」の部分をクリックして記事タイトルを入力します。

記事タイトルを入力

同様にして、本文も入力します。

記事本文を入力

画像を挿入するには上部の「画像」をクリック。

画像を挿入

右側の大きな点線の枠内に画像をドラッグします。

画像をドラッグ

アップロードできたら「完了」をクリックして、右下にある「ファイルを追加」をクリック。

ファイルを追加

これで記事に画像が追加されました。追加した画像の上部には代替テキストのテキストフィールド、位置揃え、画像リンク、画像の回転、削除のアイコンが表示されます。

アイコン表示

画像をクリックして少しドラッグする操作をすれば上部のアイコンが消えます(ここの切り替えはちょっと分かりにくいかもしれません)。

アイコンを非表示

これで記事ができあがったので、右側の「記事を公開」をクリック(右の▽をクリックすれば予約投稿もできます)。

記事を公開

ブログ記事一覧画面に遷移します。ちなみにこの状態では「ブログ記事はサイトを公開するまで公開されません」というアラートが上部に表示され、まだ記事は公開されていません。

ブログ記事一覧画面

ブログ記事一覧画面右上の×印をクリックすると下記のように、作成した記事が表示された状態でのテンプレート編集画面になります。

テンプレート編集画面

続いてブログタイトルを変更します。タイトル部分にマウスをポイントすると「テキスト」という枠が表示されるので、枠内の任意の位置でクリック。

タイトル部分にマウスをポイント

表示された「テキストを編集」をクリックすれば編集モードになります(前の画面でダブルクリックしても編集モードになります)。

編集モード

ブログタイトル部分が反転されるので消去し、任意のテキストを入力します。

任意のテキストを入力

右側に表示されているウィジェットからスタイルやフォント・フォントサイズを変更できます。

ウィジェット

フォントを変更しました。なおスタイルを後から選び直すとフォントがデフォルトに戻ってしまうようなので注意しましょう。

フォントを変更

表示されたウィジェットは、右上の×をクリックするか、ページ上のどこかをクリックすれば非表示になります。

ウィジェットを非表示

同様の手順で、ブログタイトル下にあるサブタイトルも変更します。

サブタイトルも変更

テキストの位置修正は、オブジェクトをシングルクリックした状態でドラッグすれば移動できます。

テキストの位置修正

ちょうどいいところにくると補助線が表示されます。

補助線

ブログタイトルとサブタイトルはこのようになりました。

ブログタイトルとサブタイトル

最後にページの背景を追加してみます。左側にあるアイコンの一番上にある「背景」をクリック。

背景

背景の候補がずらっと表示されるので、その中から任意の1枚を選択。わかりにくいですがサンプルにビデオのアイコンが表示されているのは動画です。

背景の候補

これで背景が設定されました。

背景が設定

さらに背景選択画面上部の「設定」をクリックして、選択した背景の詳細設定を行います。

背景の詳細設定

詳細設定用のウィジェットが開くので、ここでは「スクロールエフェクト」の「フリーズ」をクリックして背景を固定します。その他、画像の透明度や表示方法(拡大・原寸・タイル等)や表示位置も修正することができます。

詳細設定

拡大表示されていた画像がブラウザのサイズにおさまりました。

背景を固定

設定が終わったら、各ウィジェットの×印をクリックして閉じます。

ウィジェットを閉じたところ

ざっくりですがこれで最低限の準備ができたので、右上の「公開」をクリックします。

これでブログが公開されました。「サイトを見る」をクリック。

サイトを見る

今回の出来上がりはこのような感じになりました。左サイドバーの著者画像は手順を省略していますが差し替えています。

ブログ

公開後の記事の追加や管理は、テンプレート選択画面の上部にある「マイサイト」をクリック。

マイサイト

マイアプリの「ブログ」をマウスでポイントして表示された「ブログを管理」をクリック。

ブログを管理

これで記事一覧画面が表示されます。テンプレート選択時にデフォルトで用意されていた記事は削除しておきましょう。

ブログ

4.感想

実際にWixブログを作成してみて感じたことは、まずウェブデザインが素人の私でも、HTMLを一切書かずにここまで綺麗なブログを作れることに驚きました。

今回は画面をキャプチャしながらの作業だったため多少時間がかかりましたが、そうでなければかなり短時間でブログを作成できるのではないかと思います。

また管理画面は記事やカテゴリ・タグなどの必要最低限のデータしかなく、画像などは記事作成画面で編集できるようになっているため、シンプルで分かりやすいです。

不満な点は、非力なPCで操作したせいかもしれませんが、エディタに遷移するときにやや時間がかかってしまう点です。

それからテンプレートを再編集するときのリンクが不明なことでしょうか。マイアプリから起動できるのは前述の記事・カテゴリ・タグの管理のみで、記事の作成や更新画面でもテンプレート編集画面には遷移できないようです。

テンプレートを後で編集したい場合、テンプレート編集時のURLをブックマークしておく必要があるかもしれません(ちなみにテンプレート選択画面から同じテンプレートを選択しても元の編集画面には戻れないようです)。

2017.6.6追記
テンプレートを再編集するときは、「マイアプリ」が表示されている画面左上の「サイトを管理」をクリック。

サイトを管理

左側にある「サイトを編集」をクリック。これでテンプレート編集画面に遷移します。

サイトを編集

以上です。
これからWixブログでブログを始めたい方の参考になれば幸いです。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)