【WordPress】Sightテーマをカスタマイズ【Sight】

1.ロゴをカスタマイズ

　Sightをインストールすると、画面左上にサンプルの画像が表示されます。サイトの顔となる部分ですので、自分でロゴを作成して必ずカスタマイズしましょう。

↓

ロゴについて

　ロゴは小さすぎず大きすぎずです。Sightテーマの推奨サイズは以下の通りです。

	128ピクセル
290ピクセル

Sightテーマは写真などではなく、色数を絞ったシンプルなデザインのロゴがよく似合います。

※ロゴは、フリーソフトでも作ることができます。

　→【画像加工ソフト】Paint．NET【フリー】

ロゴ設置方法

①メディアの「新規追加」を選択します。

②「ここにファイルをドロップ」と表示されている部分にロゴの画像をドラッグします。

③画像の編集画面を開きます。「編集」をクリックします。

④画像の詳細画面が開きますので、画面右側にある「ファイルのURL:」の「http」から始まるURLをコピーします。

⑤Sightテーマのオプション画面を開きます。メニューにある「外観」を選び、「Theme Options」をクリックします。

⑥ロゴ画像のURLを入力します。画面上部の「Custom logo URL:」の右側のテキストフィールドに

④でコピーしたロゴのURLを貼り付けます。そして、「save Changes」ボタンをクリックします。

⑦Webサイトを確認します。

2.カテゴリーを作る

　カテゴリーとは、投稿を整理するための分類です。よく考えてカテゴリーを決めればユーザが利用しやすく見やすいWEBサイトになります。

　※カテゴリーの下にカテゴリーを入れて「入れ子」のようにできます。

作り方

①かてごりーの管理画面を開きます。メニューから「投稿」を選び、「カテゴリー」をクリックします。

②名前の欄に、カテゴリー名を入力します。必要であれば、親カテゴリーやスラッグを入力します。

③「新規カテゴリーを追加」ボタンをクリックします。

④カテゴリーが作成できているか確認します。

3.ナビゲーションを作る

　ナビゲーションとは、ページ上部にあるコンテンツの一覧です。ユーザが素早く目的のページに進むため、必ず設置しましょう。

ナビゲーションに固定ページを追加する

①メニューの管理画面を開きます。メニューから「外観」を選び、「メニュー」をクリックします。

②画面右側上部の「メニューの名前」に「Navigation」を入力します。メニューを作成ボタンをクリックします。

③トップページへのリンクを作ります。画面左の固定ページのタブの中の「全てを表示」をクリックします。リスト中の全てのチェックボックスをクリックしてチェックします。チェックがすんだら「固定ページ」の「メニューに追加」をクリックします。

④画面右側の「Navigation」に項目が追加されました。メニュー設定の中のテーマの位置にある「Navigation」チェックボックスをチェックします。最後に「メニューを保存」をクリックします。

※項目の順番はドラッグで変更することができます。

ナビゲーションの項目名を変更する

①「Navigation」メニューに登録した項目の右側にある「▼」をクリックします。

②ナビゲーションラベルを書き換えます。そして「メニューを保存」をクリックします。

カテゴリーやカスタムリンクを追加

①画面左下の「カテゴリー」のところで、ナビゲーションに登録したいものだけにチェックを入れます。右側のリストに追加したら「メニューを保存」をクリックします。

②画面右側の「Navigation」にあるまとめたい項目を右にドラッグします。そして「メニューを保存」をクリックします。

③ナビゲーションの上にマウスカーソルを合わせると、階層の状態で表示されます。

4.SNSへのリンク追加

　Twitter、FacebookなどSNSへのリンクをWordPressサイトに追加します。WebサイトからSNSに誘導すれば双方向に情報発信できます。Sightテーマでは、ソーシャルメディアへのリンクをまとめて表示できます。カスタムリンクを使ったソーシャルメディアへのリンクよりも、まとめて表示することができます。

※Sightテーマは国産テンプレートではないため、mixiやpixiv等の国産ソーシャルネットワーキングには対応していません。

追加方法

①ウィジェットの設定画面を開きます。メニューから「外観」の「ウィジェット」をクリックします。

②右側に表示してある「Sidebar」の右端の「▼」をクリックします。

③画面左側の「利用できるウィジェット」の中にある「Sight Social Links」を「Sidebar」の中へドラッグ＆ドロップします。ウィンドウの右下の「保存」ボタンをクリックします。

④Twitterをリンクさせます。リスト中にある「Twitter」をクリックします。「Profile url:」の欄にリンクしたいTwitterのプロフィール画面のURLを入力して「保存」をクリックします。

⑤確認すると、アイコンが表示されています。

5.リード文を設定する

　ロゴの横にこのWEBサイトの概要（リード文）をつけましょう。良いリード文であれば、ユーザに安心感を与えることができます。WEBサイトが伝え帯ことを簡潔な文で記しましょう。

※230文字以内で入力すると丁度良い長さになります。

設定方法

①ウィジェットの設定画面を開きます。メニューにある「外観」を選び「ウィジェット」
をクリックします。

②登録されているウィジェットを削除します。管理画面右側に「Site description」の中にある不要なウィジェットを左側の「利用できるウィジェット」の中にマウスでドラッグします。

③「利用できるウィジェット」の中にある「テキスト」ウィジェットを「Site description」の中へドラッグします。

④入力フォームが表示されますので、リード文として表示させたいテキストを入力します。段落がある場合は、テキストフォーム内で改行し、「自動的に段落追加する」のチェックを入れます。入力が終わったら「保存」ボタンをクリックします。

※タイトルは入力してもしなくてもOKです。

⑤メニューから「外観」の中の「テーマ編集」をクリックしてテーマ編集画面を開きます。右側のリストにある「Sight：スタイルシート（Style．css）」をクリックします。

⑥スタイルシートを書き換えます。40行目の以下の行目くらいに「/***Header***/」があります。その7行下にあります。

以下のように書き換えます。

.site-description {width: 290px; height: 111px; padding: 35px 30px 0; float: left; overflow: hidden;}

↓

.site-description {width: 290px; height: 111px; padding: 35px 10px 0; float: left; overflow: hidden;}

書き換えたら「ファイルを更新」ボタンをクリックします。

⑦表示を確認します。

6.トップページにスライドショーを表示

　スライドショーをトップページに表示しましょう。投稿した記事をスライドショーに設定すれば、複数の画像やテキストが自動的に切り替わります。サイトを訪れたユーザに印象を与えることができます。

設定方法

①メニューから「投稿」を選び「投稿一覧」をクリックします。

②投稿済みの記事リストから、スライドショーを設定したい記事の「編集」をクリックします。

③スライドショーに追加したい画像を追加します。

④編集画面右下の「アイキャッチ画像を設定」をクリックして画像を追加します。

⑤編集画面右下の「Slideshow Options」の中の「Show in Slideshow」チェックボックスをクリックします。設定したら「更新」ボタンをクリックして更新します。

⑥画面を確認します。

スライドショーをバランスよく表示するには？

　スライドショーの画像をバランスよく表示するには、スライドショーの設定に合わせてトリミングする必要があります。（スライドショーは横幅640ピクセル、高さ290ピクセルで設定されます。）

①メニューから「メディア」を選び「ライブラリ」をクリックします。

②メディアライブラリのリストから、編集したい画像の「編集」をクリックします。

③「画像を編集」をクリックします。

画像が小さい場合

④「画像のトリミング」の縦横比を「164:100」にします。表示したい箇所をShiftキーを押しながらトリミングします。最後に「保存」ボタンをクリックして保存します。

画像が大きい場合

④縮小するため横幅を「640」と入力して「縮尺変更」ボタンをクリックします。

⑤画像の左端から右下の端までドラッグすると、枠線が表示されます。枠線を上下にドラッグして高さが「290」になるように調整します。トリミングのサイズが「640」「290」になっていることを確認してトリミングをクリックします。

※横幅が「640」のままになるように注意します。

7.サイドバーにブログパーツ追加

　ブログパーツとは、ブログに埋め込む小さな部品のことです。例えば、以下のようなサイトで提供されています。

→ブクログ

ブクログでは、自分の本棚を公開するブログパーツなどを提供しています。これは、小さな本棚の画像をWEBに埋め込むことができます。お店が掲載された雑誌や自分が読んだ本を登録すれば、WEBサイトに訪れたユーザにアピールすることができます。

設定方法

①ブクログにログインします。

②一番右上の設定ナビゲーションから「ブクログのアプリ」をクリックします。

③右側の一覧から「本棚ブログパーツ」をクリックします。

④「ミニ本棚ブログパーツの設定」内の項目をセットします。Sightテーマでは、本棚の幅を最長5列（200px）まで納めることができます。

⑤「貼り付けコードを更新する」をクリックして、その下の貼り付けコードをコピーします。

⑥管理画面のメニューから「外観」の「ウィジェット」をクリックします。

⑦「Sidebar」に「テキスト」をドラッグ＆ドロップして機能追加します。

⑧テキストのウィンドウが開いたら、④でコピーしたコードを貼り付けます。そして「保存」ボタンをクリックします。

⑨更新を確認します。