素人だけれどWebページをと、レンタルサーバーを借りてWordPress(ワードプレス)をインストールしたはいいものの途方に暮れてしまった人の為に、WordPressの使い方を書いていきたいと思います。私たちのサイトは、Zerif Liteという無料のテーマをカスタマイズして作られているので、Zerif Liteの使い方がメインの内容になります。
まず初めにすること
Webサイトの初心者が時間を無駄にしないため、真っ先にすべきことは、これから作るWebサイトのイメージを固めることです。企業のページであれば、トップページに何を載せるか、何を見せたいかを明確にして、サイト全体の構成をおぼろげながらでも作らないことには、何も始まらないのです。
とはいえ、何ができるのか知らないことには、何も考えられないという方もいると思いますので、そういった方にもまずはZerif Liteを一度触ってみることを勧めします。私たちも何もわからない状態で幾つかのテーマを選んで触ってみたのですが、Zerif Liteが一番簡単にカスタマイズできました。
Zerif Liteでまず、テーマのカスタマイズがどういうものかを把握しておくことで、どんなサイトにするのかイメージすることの助けとなるはずです。
Zerif Liteの導入とカスタマイズ
まずZerif Liteとは、下図のようにダッシュボード左側メニューの「外観」の中にある「テーマ」から選択できるWebページのデザインテンプレートのうちの一つです。
「外観」→「テーマ」と進んで「新規追加」をクリックし、Zerif Liteと検索します。「有効化」を押すと、Zerif LiteがWebサイトに反映されます。下の図のように、テーマの一覧の左上に表示されているものが、現在使用しているテーマとなります。
ここで「カスタマイズ」を押してカスタマイズのページを開きます。
下の図左側メニューの「フロントページセクション」からサイトの顔となるトップページの改変を行います。Zerif Liteは何もしない状態でデモサイトと同じデザインから改変を始められるので、初心者には非常にありがたい。他のテーマはデモサイトの状態にするまでが大変なものが多く、そこで心を折られてしまいます。
また上図右側のサイトプレビューに表示される「青い鉛筆のアイコン」を押すことで、左側メニューに対応する箇所が表示されるので、わかりやすくカスタマイズできます。
トップページの画像は左側メニューの「Advanced options」から「背景画像」へ進むことで変更できます。
Zerif Liteを元にしたカスタマイズの実例
下がこのZerif Liteをカスタマイズした私たちのWebサイトです。
まだ完成ではないのですが、初心者でもこのくらいまで無料でカスタマイズすることができます。
下のリンクからZerif Liteのデモサイトが見られるので、見比べていただければと思います。
https://themeisle.com/demo/?theme=Zerif%20Lite
上に示すような改変には「プラグイン」と「追加CSS」を組み合わせる必要があるので、いきなりは難しいと思いますが、初心者の方でも比較的簡単に行うことが可能です。事実、今だ私たちも初心者の領分を出ていないので。
詳しい内容は改めて記載しますが、「プラグイン」によりインスタグラムを組み込み、「追加CSS」によって、フォント、色、アイコンの大きさ、色付き部分の範囲を変更しました。「プラグイン」はダッシュボードから行い、「追加CSS」はテーマのカスタマイズから行います。
どちらも「テーマ編集」という、テーマを形作る大元のコードの書き換えを行っているわけではないので、敷居が低いと同時に、Zerif Liteが更新されても変更が上書きされないという利点があります。因みに、ダッシュボードから「外観」→「テーマ編集」と進むと大元のコードを書き換えられますが、触らない方が無難です。
以上、初心者にお勧めするテーマであるZerif Liteを紹介しました。今後は「追加CSS」によるカスタマイズについて書いていきたいと思います。