利用されるブログ・ホームページの作り方

子テーマの準備

内藤勲 — Sun, 22 Jan 2012 06:46:31 +0000

WordPressには、たくさんのテーマ（デザインテンプレート）があります。

このサイトは、WordPress3.2からデフォルトテーマとなった「Twenty Eleven」の子テーマで作っています。
子テーマとは、特定のテーマをベースとして作るテーマの事です。

「TwentyEleven」を親テーマとした場合、TwentyElevenの機能を活かしつつ、子テーマで自分にあったサイトに編集出来るということです。

TwentyElevenの特徴

パソコンやスマートフォン、携帯、ipadなどのタブレット端末、それぞれに表示対応。※携帯はプラグイン対応
管理画面からヘッダー画像や背景画像も設定できる
サイドバーを左に配置、右に配置、サイドバーなしなどの、カラムレイアウトも管理画面から出来る
ヘッダー下のメニューバーも簡単に設定できる

他にもいろいろありますが、これだけでも「自分で作る」方にとっては便利なテーマです。

「TwentyEleven」のファイルを直接編集してカスタマイズしてしまうと、バージョンアップした際に上書きされてしまいます。

そこで「TwentyEleven」をベースとした、「子テーマ」を別で作り、この「子テーマ」を編集するのが便利です。
子テーマならば、バージョンアップの際にも上書きされることはありません。

子テーマの準備

子テーマは、style.cssだけでも作ることができます。
※style.cssは、見栄えやレイアウトを指定するファイルです。

子テーマとなるフォルダを作り、『style.css』のファイルを作ります。
子テーマの『style.css』の先頭にこちらを記入し、続けてCSSのコードを書いていきます。

@charset"utf-8";
/*
Theme Name:子テーマ名
Author:作成者
Description:Twenty Eleven子テーマ
Template:twentyeleven
*/
@import url("../twentyeleven/style.css");

※@import url(“../twentyeleven/style.css”);で、まずは親の「Twenty Eleven」のstyle.cssを読み込みます。『子テーマ名』や『作成者』は変更します。

これで親となる『Twenty Eleven』のstyle.cssは活かしつつ、子テーマで追加したものを上書きする形で、カスタマイズしていくことができます

後は、 wp-content/theme/　にフォルダごとアップロードし、テーマ選択すればOKです。

もしくは、子テーマのフォルダをZIP圧縮し、管理画面の[外観]⇒[テーマ]、テーマのインストールでアップロードすることもできます。

ブログやホームページに必ず必要な項目

内藤勲 — Sun, 22 Jan 2012 06:15:28 +0000

ブログやホームページなど、インターネットからお店やサービスを利用してもらうには、必ず用意しておかなければいけないものがあります。

最低限必要な項目

サービスのメニュー一覧ページ
お店までのアクセスページ
営業時間、住所、営業時間、電話番号などの情報
プロフィール
お問合せ、ご予約ページ

これらは必ず欲しい項目です

そして、それぞのページへのリンクが探さなくてもあるようにしておきたいものです。
サイドバー、記事の下などは良く見られる位置ですので、ぜひ配置しておきたいです。

トップページには、必要事項があるけど、他のページにはない。
ページごとにサイドバーの項目やナビゲーションの位置が変わってしまう。
などは、訪問者を迷わせてしまいます。

シンプルな作りでも良いので、迷わせないようにしたいですね。

ヘッダー画像を入れてみる

内藤勲 — Sat, 21 Jan 2012 07:20:34 +0000

アメブロのカスタマイズで、ヘッダー画像を入れるやり方です。

カスタマイズは、CSS編集用デザインを利用してくださいね。
デザインの選択方法はこちら

ヘッダー画像をアップロード

今のアメブロは、ブログ幅が980pxですので、ヘッダーも980pxのものを用意します。
カスタマイズで幅を変えている場合は、ヘッダーもその幅に合わます

管理画面のクイックリンクから、スキンCSSの編集で、CSS編集画面に移動します。

『ブログデザインヘッダ・背景用画像の追加』から、パソコン内のヘッダー画像をアップロードします

ヘッダー画像のアップロード

アップロード後表示される、『この画像のパス』がヘッダー画像のURLになります。

ヘッダー画像URLの取得

ヘッダー画像を入れるCSSを追加

CSSの編集ページで、紹介するCSSコードを一番下に追加します。
※直接追加するのではなく、パソコン上のメモ帳などに移して編集した方が安全です。

タイトル、説明文を残す場合

アメブロの基本設定で入力する、ブログタイトル、説明文をそのままテキスト表示させる場合は次を追加します。

.skinHeaderArea {
 background:url(画像URL) left top no-repeat;
 height: 300px!important;/*高さ*/
}

画像URLの部分を、上でアップロードしたヘッダー画像のURLに変更。
高さの数値を、ヘッダー画像の高さに調整します。

タイトル、説明文をヘッダーに画像として埋め込んだ場合

ヘッダー画像に、タイトルや説明文などを画像として埋め込んだ場合、上記のCSSだけではテキストのタイトル、説明文も表示されてしまいます。

タイトル、説明文を画像として埋め込んだ場合は、テキストのタイトル、説明文は表示されないように次のCSSを追加します。

.skinHeaderArea {
background:url(画像URL) left top no-repeat;
height: 300px!important;/*高さ*/
}
h1.skinTitleArea,h2.skinDescriptionArea{
margin:0;
padding:0;
}
h1.skinTitleArea a{
width:980px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block;
position:absolute;
text-indent:-9999px;
}
h2.skinDescriptionArea{
display:none;
}

こちらも同様に、画像URLの部分をヘッダー画像のURLにします。
高さの数値も調整します。今回は2ヶ所あります。

アメブロの基本設定で入力したタイトル、説明文を非表示にして、ヘッダー画像全体にトップページへのリンクがはられた状態になります。

また、タイトルや説明文を画像として埋め込んだ場合でも、基本設定で入力するタイトル、説明文は『.』などと省略せずに、正しく書きましょう。
検索ロボットは画像に埋め込まれた文字を認識できませんし、他のアメブロの『お気に入り』などでリンク表示される場合も、基本設定のものになります。

アメブロのカスタマイズはデザイン変更から

内藤勲 — Fri, 20 Jan 2012 12:20:16 +0000

アメブロでカスタマイズをするには、まずはカスタマイズが可能なデザインを選ぶ必要があります。

昔は”デザイン”ではなく、”スキン”と呼ばれていましたが、いつの間にか”デザイン”に変わっています。
管理画面のところどころでは”スキン”の表記が残っていたりしますが。

今CSSを編集してカスタマイズが出来るのは、『CSS編集用デザイン』だけになっています。
以前は、『ベーシック』や『ピーチ』『ブルー』など数種類ありましたが、1つだけになってしまいました。

アメブロでは2011年の7月末に、デザインの大幅な切り替えがありました。
7月以前のデザインを使っている場合、今デザインの変更をしてしまうと7月以前のデザインに戻すことができなくなります。

では、デザインの変更の手順です。

管理画面のマイページ上にあるクリックリンクを開きます

[クリックリンク]　⇒　[スキンCSSの編集]をクリック

カスタム可能を選択

CSS編集用デザインを選択

これで、

　からCSSを編集してカスタマイズすることができます。

今あるデザインで

ページが表示されるのはこの『CSS編集用デザイン』だけとなっています。

最初は、何のデザインも入っていない状態で殺風景ですが、読みやすい、利用されやすいアメブロを作るならば、CSS編集用デザインでカスタマイズしていく必要があります。

カスタマイズのCSSコードはまた今度アップしますね。