WordPress勉強メモ(5)CSS〜その他

自分用のWordPressの勉強の記録。
(2014/8/17-18)

教科書は引き続きこちら。

WordPress Perfect GuideBook 3.x対応版

CSSでデザインをカスタマイズしよう[p128-162](1時間)

序盤はHTMLとCSSの簡単な説明。
WordPress.comでは、CSSの変更などは年間¥3,000のアップグレードが必要なので、今回は操作の確認のみ。

スタイルシートの確認

本から変わっていた。

• [外観]▶︎[カスタマイズ]▶︎[カスタムデザイン]を開く。
• [CSS]メニューが増える。

子テーマ作成

1. 適当なフォルダを作成
2. テキストファイルを作成。UTF8Nを利用するので対応するテキストエディタを利用する。
3. macでは付属のテキストエディットでよい。
4. 文字コードの指定、ヘッダー情報、親のCSSの読み込みを記述。
5. 必要な内容を記載して保存。
6. 親テーマのディレクトリをTemplateに記載。
7. 親テーマのテンプレートのディレクトリは、[外観]▶︎[テーマ]を選び、任意のテーマにカーソルを合わせて表示される[テーマの詳細]を押す。URLに付加されるthema=の後ろの文字列がディレクトリ名。
8. CSSができたらzip圧縮をする。
9. [外観]▶︎[テーマ]から、テーマの新規追加ができるらしいが、WordPress.comのフリー版では表示されない。

macでのUTF8Nのテキストファイルの作成方法

1. Launchpadを起動。
2. 検索で「t」を入力。
3. テキストエディットを起動。
4. [フォーマット]▶︎[標準テキストにする]を選択。
5. CSSファイルを作成。
6. ファイルを保存する際は[ファイル]▶︎[保存]を選択。
7. 名称、場所を適切に設定して、[標準テキストのエンコーディング]を[Unicode (UTF-8)]にして[保存]。

該当箇所のスタイルを確認

• Google ChromeやFirefoxで、確認したい要素を右クリックして、[要素の調査]を選ぶと見ることが出来る。

サイト全体のフォントの指定

• htmlに対してスタイルを設定する。

html {
    font-family: <フォント名>[,フォント名・・・]
}

以降、説明されている項目

• WebFontの利用
  • Webから読み込むフォントなのでユーザーの環境によらずに統一した見た目にできる。
  • 拡大しても画像のように荒れない。
  • 読み込みに時間がかかる。
  • 日本語版のWebFontは無料版が少ない。
• ヘッダーのカスタマイズ
  • 画像を削除
  • サイズの調整
  • フォント、余白の調整
• ナビゲーションメニュー
  • 背景色
  • マウスオーバー時の背景色
  • 表示中ページのリンク色
  • 開閉パネルの調整
• コンテンツエリア
  • タイトルのフォント変更
  • テキストリンクの色と装飾
  • 画像、チャット、動画など、投稿タイプごとに背景色を変更
  • ページナビゲーションの配色
• サイドバー
  • ウィジェットの背景色、リンク色
  • アイコンフォントの利用
• フッター
  • 背景パターンの設定
  • メインウィジェットエリアのテキストリンク色
  • フッターの背景色とテキスト色

その他

p164以降は、アクセス解析や広告掲載、検索エンジンへの登録、バックアップ、セキュリティ対策などがまとめられている。サイト設置後に、一通りチェックして設定するとよさそう。

固定ページやCSSの操作方法が分かったので、通常のWebサイトの構築は十分作れそうである。実際に自分で作成してみることとする。