Simplicityのスキン設定で簡単にデザインを変更
前回は、Simplicityというワードプレスのテーマをインストールしました。
画面の配置が少し変わりましたが、まだ色味がありません。
インストールするテンプレート(テーマ)によっては、ここから「css」というデザインをカスタマイズできる言語を使って、色をつけたり文字の大きさを変えたりしなくてはなりません。
でも、いきなり新しい言語を勉強するのは抵抗ありますよね。
そんな方のために、Simplicityでは簡単にサイト全体の色調を設定できる、「スキン」という機能があります。
これを使ってみましょう。
設定方法はこれだけです。
「WordPressの管理画面」 → 「外観」 → 「カスタマイズ」と進みます。
サイドバーの「スキン」をクリックすると、「選択しない」「瑠璃紺きなり」「深紅きなり」などが並んでいます。
今回は、「淡桜」を選択しました。
「保存して公開」ボタンを押せば、設定完了です。サイト内の枠線や、リンクの文字に色がつき、ブログらしくなってきました。
ロゴの作成。シンプルなロゴを無料で作れる「squarespace.com」の使い方
次に、ブログの顔とも言えるロゴを自分で作ってみましょう。
無料でロゴを作成できるサイトはたくさんありますが、お勧めなのは「squarespace.com」というサイトです。
Simplicityのテーマにふさわしいシンプルなロゴを直感的に、簡単に作れるのです。
「squarespace.com」にアクセスします。
中央の「LOGO NAME」という黒いボックスに、あなたのサイト名を打ち込みます。
「Search」ボックスに、ロゴに入れたいイラストの名前を入力します。このとき、英単語で入力してください。
すると単語に応じたたくさんのイラストが出てくるので、好きなものを選びます。
選んだイラストが画面に表示されます。これで自由に移動したり大きさを変えたりできます。
左サイドバーに「Tagline」のボックスがあります。ここにロゴのサブタイトルを入力できます。シンプルさを追求したいなら、使わなくても良いでしょう。
イラスト同様、サブタイトルもロゴのタイトルも自由に移動・拡大縮小ができます。
文字を選択すると、「FONT FAMILY」からフォントを変えられます。
イラスト・文字は色を変更できます。クリックでカラーパレットから選んでもいいですし、「#xxxxxx」とあるボックスに16進数のカラーコードを入力することもできます。
選んだ色はリアルタイムで変わるので、画面を見ながら適当な色を決めましょう。
文字の太さは「FONT WEIGHT」、文字のスタイルは「FONT STYLE」で変更できます。
画面の左上には設定ボタンがあります。
「GRID SIZE」を「1」にすることで、背景が白くなります。画面のスクリーンショットを撮ることで、大きなロゴを作りたいならここを設定しておきましょう。(無料でダウンロードできるロゴのサイズは 400×360 のサイズなので)
画面左下の矢印ボタンで、ロゴを大画面で表示できます。スクリーンショットを撮るときは大きくした画面が良いでしょう。
全部でいくつのイラストがあるのかわかりませんが、単語を打ち込めば素敵なイラストがたくさん出てくるので、いろいろ検索してみましょう。
画面右上のメニューボタンで、サイトのその他のサービスなどを見ることができますが、今回はロゴを作るだけなので不要です。
気にったロゴが作れたら、「SAVE LOGO」をクリックし保存しましょう。
「DOWNLOAD LOW RES」で400×360ピクセルのpng画像をダウンロードできます。高画質の画像のダウンロードは有料です。
名前とメールアドレスを入力すると、今回作成したロゴに再びアクセスできるようになります。後で手直ししたいなら、登録しましょう。
上にも書きましたが、無料で大きなロゴを作るなら、スクリーンショットを使うのがオススメです。Windowsならスクリーンショットボタンがありますし、macなら「Command + Shift + 4」です。
ただ、デメリットもあります。スクリーンショットの画像はJPGファイルになるので、背景が白い画像になってしまいます。なので、私は画像を別の無料ソフトで加工して、背景の白い部分を透明化させています。これが少し面倒かもしれません。