読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

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

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

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

WordPress Perfect GuideBook 3.x対応版

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 ChromeFirefoxで、確認したい要素を右クリックして、[要素の調査]を選ぶと見ることが出来る。
サイト全体のフォントの指定
  • htmlに対してスタイルを設定する。
html {
    font-family: <フォント名>[,フォント名・・・]
}

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

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

その他

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


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