まとめ
- CSS を読み込むときに使用する
<link>にはrel="stylesheet"を付けないと読み込み失敗する。 - CSS を読み込むときに使用する
<link>にはtype="text/css"は不要。 - つまり、例としてはこう ->
<link href="main.css" rel="stylesheet">
タグ: CSS
まとめ
- とりあえず始めるなら、Getting started · Bootstrap Bootstrap CDN で読み込むのが楽。
- Latest compiled and minified CSS は必須。
- Optional theme は必要になることの方が少なそう。
- Latest compiled and minified JavaScript は必要なときは必要。Bootstrap3 と同時に使うプラグインはこれをよく利用している印象。
- ページのメイン部分 (ヘッダー部分やフッター部分を除いたコンテンツ部分) は、
<div class="container">と</div><!-- /.container -->で囲む。- ソースは Getting started · Bootstrap の Starter template、Bootstrap theme、Grids の HTML ソース。
- form
- 日本語で最初に読むと良いページ -> モバイル・ファーストな基本スタイル ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
- 安心と充実の英語本家ページ -> CSS · Bootstrap Forms
はじめに
Markdown PDF のプレビュー表示を変更する方法をノートいたします。
まとめ
- VS Code の Markdown PDF の設定で PDF の CSS を指定すれば良い。
- 出力した PDF が変化するのであって、VS Code 上のプレビューの表示は変化しない点に注意。
- 左が PDF スタイル変更前、右が変更後の比較画像をページトップに掲載。
TwentySixteen テーマは WordPress 4.4 以上が必要だそうですの。
2015年12月7日21時37分現在、まだ WordPress 4.4 はリリースされておりません。
ですけれども、TwentySixteen の子テーマをささやかながら作成し、未完成ではありますが一段落つきました。
そこでカスタマイズ内容を残しておきますの♪
全体の参考
- 【WordPress】Twenty Fifteen の子テーマを作った記録！ | oki2a24
- 子テーマ – WordPress Codex 日本語版
- WordPress/twentysixteen · GitHub
-1. 準備
Material Design Lite でパッとウェブページを作ったときに学んだことメモ | oki2a24 で MDL を使ったウェブページの作り方を初めてやってみました。
初めてですので GETTING STARTED ページにまずは取り組みました。フレームワークに関するファイル等を自分のサーバに置くやり方を実践いたしました。
JavaScript ファイル、CSS ファイルは自分のサーバに置くことができました。けれども、アイコンだけは CDN にホストされたファイルを使用しておりました。
前回の実践では強引にリンク先をたどってファイル等を入手いたしました。ですけれども次のページにアイコンも自分のサーバにホストする方法がございました。
今回は自分のサーバで MDL のアイコンをホストする方法を記録しますわ♪
Twenty Fifteen 子テーマで公開した投稿のフォントを変更した時に気がついた、管理者ページ側の問題点
- 投稿の編集ページの入力フォームフォントが Noto Serif に設定されている。タイトル入力フォームは問題ない。
- しかしそのフォントは日本語が見つからないため設定されない。
問題解決まで
- 設定されないフォント、Noto Serif を指定している場所を探す
- 親テーマの functions.php で editor-style.css を検索、修正部分を特定する
- Noto Serif フォント指定をしている関数を子テーマで先に書く（オーバーライド（上書き）はできないが親テーマが関数を if で囲っているため親テーマで読込させないことが可能）
- 子テーマディレクトリに css/editor-style.css ファイルを作り、フォントの設定を上書きする
子テーマを作る時、CSS を読み込むポイント
- 親テーマ CSS を子テーマから読み込むには、functions.php で wp_enqueue_style 関数を使用する。
- 子テーマの style.css で @import url(“../twentyfifteen/style.css”); とする方法は古く、非推奨 ← 子テーマ – WordPress Codex 日本語版
- 子テーマで外部の CSS を読み込む時も、同様に wp_enqueue_style 関数を使用する。用途は親テーマの CSS の読み込に限定されない。
本投稿は、【WordPress】Twenty Fifteen の子テーマを作った記録！ | oki2a24 の続きですの♪「CSS の読み込み方が実は古い。」という課題を、解決しましたので記録いたしました。
実際の子テーマのソース修正部分・内容
子テーマを作り始めてから完成！切り替えるまでの大まかな流れ、概要
開発環境でテーマを作り、確認、テストも済ませてから本番環境へアップロードし、切り替えるのが１番間違いのない、おすすめの方法でございます。
ですけれども面倒ですの！ですので本番環境で直接ファイルやディレクトリを作って編集しながら、でも失敗してもできるだけ簡単に復旧できるように工夫しながら進めていった方法をノートいたします♪
- 本番環境へターミナルからログインし、CUI 環境でコマンドとエディタは Vim を使いながら進めていった
目次
ポイント
- style.css で text-transform: none; を指定するように修正する。修正前は text-transform: uppercase;
実際にやってみましたの♪
WordPress テーマ「Twenty Twelve」「Twenty Eleven」「oki2a24」の見出しを比較し、Twenty Twelve ベースの子テーマ（すでに適用済み♪）ではどうするか考えます♪
- Twenty Twelve
- 見出しと本文の間が一番大きい
- h3 までは本文以上の文字サイズ
- 全ての見出しが太文字
- Twenty Eleven
- h3 が見出しの中では一番小さく、本文文字サイズよりも小さい。ナンデ？
- h3 のアルファベットが強制的に大文字に変換される。ナンデ？
- 太文字となるのは h1、h2 のみ
- oki2a24
- 次のように Twenty Eleven をベースに修正したもの → WordPressテーマTwenty Elevenの見出し（hタグ）スタイルを修正します！ | oki2a24
- h1 〜 h3 までに見出しを強調するために縦線を入れている
- h4 〜 h6 までは Twenty Eleven と同じ