先日頼まれていた新しいサイトを作成していたのですが、ほぼ外観づくりが完成しました。
完成といってもサイトを立ち上げてしばらく放置していたので、そんな何日もかけて作成したわけではありません。
むしろある程度cssやhtmlの知識がある方なら数時間で終わってしまう作業です。
僕はまだまだ勉強中で初心者に近いレベルですので時間が少しかかりましたが、今回のカスタマイズの備忘録として書いていきます。
使用したのはワードプレス無料テーマ【Simplicity2】
まずブログサイトやホームページを作成する時は、無料のブログサービスやwixやJimdoといった簡単にできるwebビルダーサイトもありますが、長い目で運営しておくとなると独自のドメインをとりワードプレスで作成していく事をおすすめ致します。
関連記事 ブログをはじめるならワードプレスでやるべき理由とは
ワードプレスの中には有料テーマと無料テーマがあり、今回ホームページ作成に使用したのは無料テーマのSimplicity2を使用しました。
[aside type="warning"]こちらのサイトは有料テーマの「STORK」を使用しています。[/aside]
Simplicity2は数ある数ある無料テーマの中でも非常に評判が良く、ネットで「ワードプレス 無料テーマ おすすめ」などで検索すると必ずといってあがってきます。
無料とは思えない程機能が充実しており、僕も実際に使用してみてこれが無料なんだと思うくらいでした…！
ただ名前の通り、すごいシンプルな外観になっており初期状態のままですとあまり見栄えはよくありません。。苦笑
こちらのSimplicity2はcssをいじりながらサイトをカスタマイズする事ができるテーマですので、こちらのテーマを使いオリジナルなホームページを作成していきましょう。
サイトのBefore After
まずSimplicity2の初期状態です。(公式サイトより引用させて頂きました)
ちなみにスマホから見るとこんな感じです。
もともとワードプレスはブログ特化型のホームページですので、はじめの状態で記事を書いていくと、書いたブログ一覧がトップページにでるように表示されます。
簡単に見てみるとこういったレイアウトになります。
※ウィジェットとはサイドバーにあたるもの
それをカスタマイズしてサイトの外観がこんな感じになりました。
大きく変わったのが
・ロゴとヘッダー画像の挿入。
・グローバルメニューの設定
・ブログ記事の前にテキスト(サイトの紹介文)と新着情報のお知らせ機能
をつけました。
スマホだとこんな感じに。
こちらもロゴとヘッダーを設定する他に、ブログ記事が表示される前にグローバルメニュー・サイトの紹介文・新着情報が表示されるようになっています。
その後に続いて書いたブログ記事が表示されるようにしました。
カスタマイズした箇所を図で表すとこんな感じです。
※ウィジェットとはサイドバーにあたるものです。
実際のSimplicity2を使用して作成したサイトがこちらです。良かったら見てみてください(^^)⇒kimi.(キミドット)
依頼者(妻ですがw)が助産師として活動していくためのホームページを作成したいとの要望でしたので、
色や画像・トップページに載せたい情報をいれシンプルなサイトにしてみました。
テーマは「シンプル イズ ザベスト」です(笑)
[aside type="normal"]固定ページを作成しそのページをトップページに表示させる事もできますが、ここではブログ記事をトップページに表示したまま、記事の前にテキストを表示させるやり方でカスタマイズしていきます。[/aside]
トップページに載せたい情報をまず決める
まず先ほども説明しましたが、ワードプレスはもともとブログ特化型のホームページとしてデザインされているので、なにもカスタマイズしない初期状態のままですとトップページにブログ記事一覧が並ぶようになります。
単なるブログサイトとして使用していくなら初期状態でも十分ですが、ホームページをつくる意味を考慮するとデザインやレイアウトにもこだわりたいところです。
まずホームページをつくる意味はなにか？
理由をいくつか考えてみてまとめてみると
・自分の名刺代わりにしたい
・自分のやっている活動を広めていきたい
・集客・お問い合わせに繋げていきたい
がほとんではないでしょうか。
単なる日記ブログならまだしも、上記のような理由がありホームページを作成していきたいのであれば、トップページを見た方がぱっと見ただけで「ここはこんなサイトなんだ」と理解してもらえるようなサイトづくりが必須です。
サイトの主旨が決まればレイアウトも決めやすい！
さきほどのサイトで使用したレイアウトをもう一度見てみましょう。
まず初期状態ですとサイトタイトルが上に表示されるのみですので、ぱっと目をひくような画像をヘッダーに設定しロゴを加える事によりかなりのイメージが変わります。サイトのイメージにあった画像やロゴを用意しましょう。
その下にグローバルメニューの設置。
よく企業のサイトでも見られる、お問い合わせ欄やメニュー表・プロフィール等をグローバルメニューに設定する事により、サイトに訪れた方がサイト全体を回遊しやすくなります。
そしてその下に冒頭文(サイトの簡単な説明)を加える事により、サイトが存在している意義を訪れた方へ簡単に理解する事ができます。
さらに新着情報も加えてあげると、イベントの告知やブログの更新をサイトに訪れた方に簡単に告知できます。
また新着情報として載せる事により、サイトが定期的に更新されている事を読者にアピールする事もできます。
更新が全然されていないサイトより、定期的に更新されているサイトの方が安心感がありますからね♪
・サイトのイメージにあったヘッダー画像とロゴの設置
・グローバルメニューの設置
・サイトの説明文(紹介文)
・新着情報のお知らせ
これらを付け加えるだけで、十分オリジナルなホームページができてしまいます♪
サイトの主旨が決まっていれば、それを軸に画像や、ロゴ、サイトの説明文を決めていけますのでレイアウトが決めやすくなります。
時間がある時に【Simplicity2】を使った簡単なカスタマイズ方法を記事にしていきたいと思います。
ワードプレスを使い、簡単にシンプルなホームページを作成したい方の参考になればと思います(^^)興味のある方は見てみてください。
では
