データベースに接続できません

TORIYAMAHONPOS WordPressのまめ知識

CSS

の記事

  • アクセシビリティに関する .screen-reader-text クラスの使い方

    TORIYAMA Yuko

    WordPressの自作テーマを1年ぶりにTheme Checkしてみた。そこには新たな「REQUIRED」の文字が〜！

    REQUIRED:.screen-reader-text css class is needed in your theme css. See See: the Codex for an example implementation.

    .screen-reader-text というクラスのスタイルが必要なので実装せよ、とのことだ。
    .screen-reader-text におぼえがないので、WordPressが付与しているクラスだろう。WordPressが自動的に付与するクラスはいくつかある。bodyタグの.home、.single はじめ、グローバルナビゲーションの .current_page_item、アイキャッチ関連の .has-post-thumbnail など。これらを利用してスタイルを場合分けすることができる。
    その中でも、WordPressの公式ディレクトリにテーマを登録する場合に対応必須のクラスがある。画像に付与される .aligncenter、.alignright、.alignleft、.wp-captionなど。 いつのまにか .screen-reader-text が加わったようだ。

    (さらに…)

    アクセシビリティに関する .screen-reader-text クラスの使い方
    続きを読む >: アクセシビリティに関する .screen-reader-text クラスの使い方

  • style.cssをSassで書く

    TORIYAMA Yuko

    半年ほど前からSassを使いはじめた。変数や式を交えたプログラム風の記法をコンパイルしてcssを生成するシステムだ。WordPressの勉強会で何度も言葉を聞くうちに興味を持った。いったん手を出したら、もう無しでは生きていけないとも言われるSassである。

    環境がWindowsなのでScoutというソフトを使うことにした。動作が少し鈍いものの設定がGUIのため導入が簡単なのだ。
    成果物のCSSと違って、Sassは他人のコードを見る機会が少ない。どんな順番でどう書くのがかっこいいのかは分からずも、ネストの記法やCompassを使うだけでも作業が格段に早くなった。プロパティの優先度に迷ったり、このクラスはどこで使われているのだ？と悩むこともない。

    (さらに…)

    style.cssをSassで書く
    続きを読む >: style.cssをSassで書く

  • body用のテンプレートタグ body_class

    TORIYAMA Yuko

    WordPress 2.8よりbody 要素用の新テンプレートタグ body_class が加わっている。テーマで以下のように書くことで、

    [sourcecode language=’php’]
    >
    [/sourcecode]

    homeの場合は、<body class=”home blog”>
    singleページの場合は、<body class=”single postid-1″>

    というように表示しているページごとにクラスが指定される。これによってページごとのスタイルを指定したり、JavaScriptでメニューの状態を変更したりすることができる。
    今までは is_single()ならclass=”single”・・・と必要に応じて自分で指定していたので、いつのまにかとても便利になっていた。defaultテンプレートを見ていて気がついた。このテーマもちゃんとバージョンアップしてるんだな。たまには見直さなければ。

    属性の一覧は、テンプレートタグ/body class – WordPress Codex 日本語版を参照。

    続きを読む >: body用のテンプレートタグ body_class

  • プラグインでCSSを指定する

    TORIYAMA Yuko

    テーマではデフォルトでstyle.cssを使用するようになっている。
    プラグインでも外部CSSファイルを使うことが可能だ。

    プラグインで外部CSSファイルを指定するにはwp_register_style()で登録し、wp_enqueue_style()で読み込ませる。たとえば自分で用意したcssファイルを使いたい場合は、アクションフックのwp_print_stylesで以下のように記述する。wp-headではなくて、wp_print_stylesというのに気がつくのに時間を要した。

    [sourcecode language=’php’]
    function regist_my_css(){
    wp_register_style(‘my_css’, ‘(CSSのフルパス1)’, array(), ”, ‘screen’ );
    wp_register_style(‘my_css’, ‘(CSSのフルパス2)’, array(), ”, ‘screen’ );
    wp_enqueue_style (‘my_css’);
    }

    add_action(‘wp_print_styles’, ‘regist_my_css’);
    [/sourcecode]

    続きを読む >: プラグインでCSSを指定する