小三ツ星インターフェイス

必須CSSクラス

WordPressテーマ作成、いきなりの壁。必須CSSクラス

  • 必須: テーマの css には .sticky の css クラスが必要です。
  • 必須: テーマの css には .gallery-caption の css クラスが必要です。
  • 必須: テーマの css には .bypostauthor の css クラスが必要です。
  • 必須: テーマ CSS 中に CSS クラス .screen-reader-text が必要です。Codex で実例を参照してください。

.sticky

記事の先頭表示を設定すると、その記事に付与されるとのことなのだが、実際どのタイミングでどのように付与されるのか、といった情報は少ない。

調べてみると、 post_class()　関数を使った際、先頭表示のページに付与されるようだが、作成中のテーマではそれが確認できない。

基本的に表示を変えることはしない（実案件作業時にカスタマイズすることになる）のだが、Sassでコードを書いているため、何も書かないわけにはいかない（何かプロパティを設定しておかないとコンパイルしてくれないため）。とりあえず、

.sticky {
display: block;
}

だけを設定することにした。

.gallery-caption

ギャラリーを表示する際に必要となる模様。詳しいことは次のリンク先がわかりやすい。

http://wordpress.hitsuji.me/edit-gallery-style/

そもそも現時点ではギャラリー機能をONにしていない（functions.phpに有効化するコードを記載する必要がある）ので、使わないのだが。こちらはとりあえず文字サイズの調整のみ行うことにした。
.gallery-caption {
font-size: 87.5%;
}

.bypostauthor

これは管理者のコメントに付与されるとのこと。ビジネスサイトではそもそもコメント欄を開くこと自体ほとんどないので使う機会はないのだが、ここは文字色のみ設定を行った。
.bypostauthor {
color: $color_text;
}

.screen-reader-text

これも情報がかなり乏しいのだが、音声読み上げソフトに読み上げさせるためにつけるものらしい。通所のテキストだけでは意味が通りにくいものを補完する役割を果たしているようだ。日本語の解説サイトではdisplay:none;を使って消去することを紹介しているところもあったが言語道断だ。display:none;では音声読み上げソフトは認識してくれない。
次のリンク先は英文だがかなり読みやすい記事だ。
The screen-reader-text class, why and how?
スキップリンクなどに用いられる手法で見えなくしている。
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}

以上でCSSクラスに関するエラーを解消することができた。出力状況を確認していないのがほとんどなので、後日、ギャラリー、コメントなどの機能を有効化して確認する予定。