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


Posted:2014/05/30 6:00:15 PM|Category : WordPress

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

1.ロゴをカスタマイズ
 ロゴについて
 ロゴ設置方法
2.カテゴリーを作る
 作り方
3.ナビゲーションを作る
 ナビゲーションに固定ページを追加する
 ナビゲーションの項目名を変更する
 カテゴリーやカスタムリンクを追加
4.SNSへのリンク追加
 追加方法
5.リード文を設定する
 設定方法
6.トップページにスライドショーを表示
 設定方法
 スライドショーをバランスよく表示するには?
7.サイドバーにブログパーツ追加<
 設定方法

1.ロゴをカスタマイズ

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

wordpress007
wordpress013

ロゴについて

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

paintnetlogo 128ピクセル
290ピクセル

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

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

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

ロゴ設置方法

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

wordpress008

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

wordpress009

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

wordpress010

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

wordpress014

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

wordpress011

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

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

wordpress012

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

wordpress013

2.カテゴリーを作る

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

親カテゴリー プログラム
子カテゴリー C PHP JAVA

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

作り方

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

wordpress015

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

wordpress016

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

wordpress017

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

wordpress018

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

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

wordpress028

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

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

wordpress019

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

wordpress020

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

wordpress021

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

wordpress022

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

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

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

wordpress023

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

wordpress024

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

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

wordpress025

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

wordpress026

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

wordpress027

4.SNSへのリンク追加

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

wordpress033

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

追加方法

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

wordpress029

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

wordpress030

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

wordpress031

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

wordpress032

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

wordpress033

5.リード文を設定する

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

wordpress039

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

設定方法

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

wordpress029

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

wordpress034

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

wordpress035

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

wordpress036

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

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

wordpress037

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

wordpress037

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

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

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

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

wordpress038

⑦表示を確認します。

wordpress039

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

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

wordpress045

設定方法

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

wordpress040

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

wordpress041

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

wordpress043

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

wordpress044

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

wordpress042

⑥画面を確認します。

wordpress045

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

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

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

wordpress046

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

wordpress047

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

wordpress048

画像が小さい場合

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

wordpress049

画像が大きい場合

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

wordpress050

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

wordpress051

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

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

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

ブクログ

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

wordpress058

設定方法

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

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

wordpress052

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

wordpress053

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

wordpress054

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

wordpress055

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

wordpress029

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

wordpress056

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

wordpress057

⑨更新を確認します。

wordpress058


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告