【WordPress初心者向け 1】とりあえずサイトの体裁を整えるまで（SWELL使用）

3

WordPressをとても「簡単、誰でもできる」的な言い方で紹介しているサイトがありますが、多分WordPressはそれほど簡単ではないです。

ただ、超えられないほど難しいということもないので、頑張り甲斐があります。

WordPressを使いこなすと言っての、それ以前の準備も初めての方には気が重い作業です。

レンタルサーバーの契約やドメインの取得、インストール…記事を書き始めるまでに結構な時間が必要です。

経験者ならあっという間のサーバー＆ドメイン契約でも、初めての時は説明文を読み、手順を確認し、上手くできたかしら？とドキドキする時間が必要ですから…。

でもそれらは1回だけ。1回だけ頑張れば、WordPressにたどり着けます。頑張りたいですねぇ～

＼WordPressブログがわかる！／

読めば理解度爆上がり！

どんなことでも初心者には難しい、でも努力すれば何とかなる！そんなもんじゃないですか？

どこを編集したら目的の結果が得られるか…それがパッと浮かぶくらいになると、もう自在の域に近いと思います。

HTMLやCSSの習得には更に時間がかかると思いますが、そこまで頑張らなくてもSWELLなど高機能テーマなら管理画面からかなりのカスタマイズができます。

デザインの前段階

WordPressで見た目に整ったサイトにするまでには、少し準備が必要です。

すべてを自分好みにできる反面、迷ったり悩んだり…でもそれが楽しかったりするんですけど。

ドメインやサーバーの契約、サイト名や記事の方向性の決定

いよいよWordPress！

1. インストール
2. WordPressの設定
3. テーマの設定
4. カスタマイズ

サイトのデザイン云々の前に、まずWordPressの基本部分の設定が必要ですし…。

初心者がテーマを使いこなすって…

WordPress初心者がテーマを自在に使いこなすのはなかなか大変なことです、SWELLでも他のテーマでも。

WordPress本体の仕様なのか、SWELLの機能なのか、ブラウザやGoogleのルールなのか…何となくそれがわかるようになってからテーマのデザイン（＋機能）に手を付けた方が良いです。

SWELL

私の一押しSWELLなら、デフォルト（初期設定）で綺麗な画面が作れます。

というか、この辺りが何となくわかるようになれば、SWELLは群を抜いて使いやすい、わかりやすいテーマです（国内外のテーマ30コくらい使い倒した経験上）。

それはSWELLを使っている多くの人の意見でもあります（Twitterを覗いてみて～）。

• 設定画面が整理されている
• SWELL公式サイトのマニュアルが丁寧
• SWELLユーザーのフォーラムが優秀
• 要望が開発者を動かすこともある
• Twitterでのアップデートの予告

＼高速・高機能な一押しテーマ／

見事に揃ってる！テーマを選ぶ時に気になる（機能以外の）要素！

だからってテーマの機能が一気に理解できるというモノではないです。

初心者だったら…

SWELLの機能に目を奪われて入り口で立ち往生するより、（味気なくても）基本のレイアウトを整えてから、1つ1つSWELLの機能を加えていくやり方が自身の理解のためにも、サイトの見栄えの上からもお勧めです。

パーツの設置や項目の設定などはテーマSWELLの画面で紹介しています。

この記事はSWELLを使いつつもSWELLらしいデザインを目指すのではなく「とりあえずの体裁」までの案内です。SWELLのメインビジュアルやピックアップバナーなどの説明は別の記事で紹介します。

この記事はWordPress初心者向けなので、すでに使っている方にはカッタルイ内容です。

SWELL公式サイト

初心者は基本のレイアウトでスタート

WordPress初心者がSWELLに初挑戦の時、どこから手を付けるのか？は大問題。

見た目は後回し、とにかく記事を書こう～というアドバイスをよく見かけます。

見た目を整えるにも中身がないとどうにもならないので、それはそうだ！と思うのですが、でも全くの後回しというワケにはいかないですよ。

テンションが下がるし、誰かに見られた時残念な印象を残したくないし…。

もっともブログの書き始めはだぁ～れも見ていないので、心配ご無用なんだけど…

とりあえずブログっぽい形にするには

4つのエリアを必要最小限の設定でブログをスタートし、記事執筆の合間や気分転換のために少しずつ要素を追加していくのが良いです。

SWELLは機能満載で表現の幅が広いので、うっかり見た目に走ってしまうと記事が書けなくなります。

SWELLの機能を知って、より望む形のブログにするためにも、記事を書きつつ機能を知っていく…これでデザインも記事執筆も上手く進みます（進むはず）。

大きな装飾は後回し、必要な要素を先に固める！

この記事は初心者向けなので、SWELLらしい機能や細かい設定は一切スルーして、ブログの基本的なレイアウトをかなえるに留めてます。

ということは、基本のレイアウトができたあとも、それの何倍もの楽しい＆嬉しい機能が埋もれているワケでワクワクしますねぇ～！

＼高速・高機能な一押しテーマ／

SWELLのヘッダー設定

ヘッダー部分の必要最小限というとロゴとグローバルナビゲーション。

サイトのロゴがすぐ用意できないようなら、当初はテキストでも充分です。

ロゴの配置

外観 → カスタマイズ → ヘッダー → ヘッダーロゴの設定

ロゴの説明【SWELL公式】

あらかじめ用意したロゴを「画像を選択」から挿入。

ロゴ制作を後回しにするなら
「ヘッダーロゴの設定」項目に画像を設定しなければサイト名がテキスト（ヘッダー文字色・24px）で表示されます。

• ロゴ画像の高さ
• ロゴの位置
• ヘッダーバー各カラー

当初は上記の設定で他は後回しでも…。

SWELLのヘッダー周りの設定はなかなか細かくて、おしゃれで実用的な表現ができます。執筆の合間にお楽しみください！

グローバルナビ（ヘッダーメニュー）を設定

外観 → メニュー

グローバルナビの設定【SWELL公式】

1. メニュー画面で新規メニュー作成
   「新しいメニューを作成しましょう」をクリック
2. 「メニュー名」を入力（日本語も可）
3. 「メニュー作成」ボタンをクリック
4. 「メニュー項目を追加」欄の必要な項目にチェックを入れ「メニュー追加」ボタンをクリック
5. 並び順・表示名（ナビゲーションラベル）に変更する
   「メニュー構造」上で簡単にかえられます
6. メニュー設定「グローバルナビ 」にチェックをいれ「メニューを保存」ボタンをクリック

一般的にはカテゴリーをグローバルナビにすることが多いですが、タグや固定ページ、個別のページ…つまりURLがある対象ならどのような組み合わせのナビゲーションでも作れます。

• 固定ページ、投稿、カテゴリー
  チェックを入れて「メニューに追加」をクリック
• カスタムリンク
  URLとテキストを入力後「メニューに追加」をクリック

とりあえずの設定なので、無難に記事がすぐ書けるカテゴリーを設定すると良いかと…。

＼高速・高機能な一押しテーマ／

サイドバーの設定

ある程度の記事数になったら、自然とサイドバーに置きたい要素も決まってきます。

けれど、ブログを書き始めた時は材料がなさすぎ。例えば「人気記事」（よく読まれる記事）など置いても、アクセスそのものが少ない（または全然ない）ので意味がないです。

プロフィールと新着記事くらいを置いておけば良いんじゃないかと思いますよ。

PC画面の設定

外観 → ウィジェット

サイドバー・ウィジェットの設定【SWELL公式】

トップページ専用やスマホ用など工夫の余地があるSWELLのサイドバー用ウイジェットですが、ブログの立ち上げ当初は全ページに共通で表示される「共通サイドバー」内に必要な要素を設定します。

記事数（カテゴリー数も）が少ないうちにアレコレ考えるより、基本的な要素をサイドバーに置いて、記事に専念した方が得策です。

ただ、目次を表示する設定なら「追尾サイドバー」に「目次」を置くのは有効です。目次がコンテンツと一緒に移動してしまったら、目次の目的は果たせないですから。

目次に関する設定【SWELL公式】

スマホの場合

PCのサイドバーは、スマホ表示の場合メインコンテンツの下にきます。遠いですねぇ～。

関連記事などの後なので、どれだけの人がこの場所まで見に来てくれるか？と思うほど距離があります。

（絶望的なので）訪問者が手っ取り早くサイトの主要な項目にたどり着けるよう、サイドバーの要素を開閉メニューに入れちゃいましょう。

開閉メニューとは
タイトル横のハンバーガーメニュー（横3本線）を押した時に横にスライドして現れるスマホ用メニュー。

スマホ開閉メニュー

外観 → カスタマイズ → サイト全体設定 → スマホ開閉メニュー
外観 → メニュー「スマホ開閉メニュー内」
外観 → ウィジェット → スマホ開閉メニュー下

スマホメニューの設定【SWELL公式】

フッターの設定

PC用のフッター

ブログをスタートしてしばらくはフッター無しで良いと思います。あら、このサイトにもフッターが無いわwww

すごく重要というワケではないし、記事が少ないと表示するモノがなかったり…。

フッターが無くてもサイトのデザインに違和感なし。それよりドンドン記事を書きましょう。

フッターメニューとコピーライトがページの終わりを締めてくれます。

記事数が多くなったら、タグ一覧や広告、告知したいことなどの配置場所として自然と必要になると思います。

スマホ用の固定フッター

外観 → メニュー「固定フッター（SP）」
外観 → カスタマイズ → サイト全体設定 → 下部固定ボタン・メニュー

スマホ用の固定フッターメニューの設定【SWELL公式】

スマホはサイト内のナビゲーションが弱いので、固定フッターの導入は特にお勧めします。

トップページへのリンクやページ先頭への移動、目次、カテゴリーなど主要な要素は置いておきたいです。

＼高速・高機能な一押しテーマ／

メインエリア

ブログのいのち、メインコンテンツの部分です。

ここで書く記事の中身と量でブログは決まり！です（ブログデザインがメインテーマのサイト以外なら）。

読みやすくてタメになる記事ならアクセスが徐々に伸びていくと思います。

基本の書き方

WEBライティングの記事や本が山のように存在しますが、最初は気にせず基本的なことだけ押さえて書けばよいと思います。

WordPressやSWELLの使い方が良くわかり、記事もスラスラ書けるようになってから、サイトのデザインを研究したり、ライティングスキルを高める方に目を向けましょう。（自分に言いたい！）

多くの人が数ヵ月や数記事でブログを断念するらしいですが、勿体なさすぎよ。

ヒマや勢いを味方につけて（忙しい人は気合で）断続的でもとにかく続けましょう。（自分に言いたい！）

1. 1段落の行数を（スマホで見た時）4、5行に抑える
   紙媒体の文章に比べ可読性が悪いので、文章が団子にならないように。
   1文1段落という人もいるくらいです。
2. イメージの言葉を多用しない。
   「感じ」「思う」「かもしれない」など…

＼高速・高機能な一押しテーマ／

ブログを書く前に用意したいページ

下記の2ページは簡単でも用意した方が良いです。

両方とも固定ページで制作します。

プロフィールページ

ごく簡単に仕上げ、サイドバーに表示。

どういう方向で自分やブログの内容を伝えるか考えつつ、文章を追加していきます。

お問い合せページ

「WPForms」か「Contact Form 7」が一般的です。

WPFormsなら、あっという間にページが完成します、しかもキレイ。

このサイトのようにコメント欄を解放していないと、外部と繋がる窓口は「お問い合せ」だけです。

ここからたまに質問をいただいたり、レビュー記事のお誘いを受けたり…。

ずっと以前の話ですが、Amazonアソシエイトの申請をした時（別のブログですが）、お問い合せページがないので却下されたことがあります。

＼WordPressブログがわかる！／

読めば理解度爆上がり！

カスタマイズのヒント

トップページのカスタマイズ

独自のカテゴリーページ

SWELLブロックとSWELL Tips

次の段階へ！SWELLらしいサイト作り

基本のレイアウトで記事を書きつつ、WordPressやSWELLの使い方・特徴を掴んできたら、少しずつデザインに手を加えましょう。

何もかも一気に進めるというのではなく、1要素を追加したら表示の乱れや不具合は無いか確かめます。

訪問者の気持ちになって、ヘッダーが重すぎないか？ それぞれの画像が適切か？ 可読性は保たれているか？ そんなことをチェックしましょう。

そして必ずやるコトが2つ！

1. キャッシュのクリア
2. PC、スマホ両方で画面チェック

＼WordPressブログがわかる！／

読めば理解度爆上がり！

3