WordPress 有料テーマ Snow Monkey の基本的な構造について – CSS・エディタースタイル設計編
Snow Monkey アドベントカレンダー6日目の記事です。 昨日はさとうさんが「Snow Monkey オンラインセミナーに参加しました！」というタイトルで Snow Monkey オンラインコミュニティでライブ放送を視聴したときのことを記事にしてくださいました。とても嬉しくなる記事で、ライブ放送もやってよかったなと思いました。ライブ放送はまたやってみたいと思います！ 今日は Snow Monkey の CSS 設計や CSS・エディタースタイルに関する Tips なんかを書きたいと思います。 命名規則・CSS フレームワーク Snow Monkey は Basis という自作の Sass/CSS フレームワークを使用しています。Basis については今までいくつか記事を書いているので詳しくはそちらをご参照ください。 Basis は命名規則に FLOCSS を使っているので、Snow
CSS内でPHPの変数を使いたい。 - かもメモ
例えばWordPressのプラグインなんかを作っていて、CSSで変数を使いたいなんて時があります。 読み込みをPHPファイルにする。 まずはCSSファイルの拡張子を.phpにして、CSSを読み込ませていた部分をPHPのファイルに変更します。 HTMLならこんな感じ。 <link rel="stylesheet" type="text/css" href="sample.php" /> WordPressのwp_enqueue_styleでCSSファイルを読み込ませている場合も拡張子を変えるだけです。 <?php wp_enqueue_style( 'sample-css', PLUGIN_URL . '/css/sample.php' ); このままでは、text/htmlとかで読み込まれてしまうためCSSとして動作しません。 PHP化したCSSをCSSとして読み込んでもらう PHP化した
WordPressでプラグインとか独自のオプションページを作るときに使えるかもしれないクラスとか | NeGiMeMo.net
bell賞味期限切れコンテンツ この記事は公開または最終更新から1454日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 ほぼ自分用メモです。 プラグインを作ったりとか、テーマの独自オプションページを作るときに便利そうな、WordPressの管理画面などで利用されている汎用的なクラスをすこし調べてみました。 ボタンとかメッセージボックスって別にそこまでデザインを凝るつもりはないにしても、ただ字をだすだけでは味気がなさすぎるよな…というときに使えるかもしれません。 はじめに WordPress3.8.1 で自分がつかってるなかで見つけたものです。これらのIDやクラスはもしかしたら将来的にバージョンアップで変更になる可能性もあり、そうなった場合はまたIDやクラスを調べる必要があるかもしれません。 また、今
WordPressでSass,Lessが使える！Jetpackでブラウザからコンパイル！
WordPress.com(ブログサービスのほう)のCSSエディターがSass・Lessに対応したようです。 WordPress.comの機能はパッケージ型のWordPressでもJetpackプラグインにより提供されているので早速試してみました。 とりあえずプラグインをインストール。 1. プラグインからJetpack by WordPress.comをインストール。 2. WordPress.comのアカウントが必要なので登録しアカウント認証。 インストールと認証が完了するとJetPackのメニューが現れます。 JetPackのメニューからカスタムCSSを選択。 もしくは、「外観」から追加された「CSS編集」。 CSSスタイルシートエディター画面にいきます。 この「カスタムCSS」とは、テーマのstyle.cssとは別のCSSで、 テーマのCSSをいじらずに外観を編集する際に使用します
WordPressの投稿画面の表示をプレビューと同じにする｜Webクリエイターネット
Category WordPress WordPressで記事を作成する際、投稿画面の表示とプレビュー画面の表示(ブラウザでの表示)が違うため、何度もプレビューで表示確認をしないといけません(ちょっと面倒...)。 これは、管理画面で使われているCSS(既に用意されているWordPressの管理画面用のCSS)とプレビュー表示で使われているCSS(テーマ側で作成したCSS)が異なるためです。 今回は、投稿画面の表示とプレビュー画面の表示を同じにする3つの方法を紹介します。 Keyword：投稿画面表示,functions.php やることは大きく分けて2つです。 1つ目は、functions.phpに投稿画面で読み込むCSSの設定をします。 2つ目は、投稿画面専用のCSSを作成します(※既にテーマ側で作成しているCSSをコピー&ペーストすれば、ほぼ済んでしまうので簡単です)。 まず、Wor
WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法 - NxWorld
WordPressでページや記事ごとに個別のCSSやJavaScriptを追加したいときに役立つカスタマイズを紹介します。 他のページでも使うような共通のスタイルだったり、かなり長くなってしまうような場合はもちろん外部で読み込む方が良いと思いますが、何かちょっとしたスタイルを指定するぐらいであれば結構便利なカスタマイズだと思います。 （例えば特定のページのみ文字の色を赤にするとか、強調したいから太字指定するとか...） 以下で紹介する方法はfunctions.phpを使用しますので、テーマ内にない場合は作成してください。 CSSを追加できるようにする CSSを追加できるようにする場合は、下記をfunctions.phpに記述します。 //Custom CSS Widget add_action( 'admin_menu', 'custom_css_hooks' ); add_action(
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
ナビゲーションメニューのclassにページやカテゴリーのスラッグを追加してみる – Simple Colors
WordPressのナビゲーションメニューで出力されるソースにスラッグを追加してみました。 命名規則は、カテゴリーと固定ページなどで同じスラッグを使っても問題とならないよう、投稿タイプやタクソノミーのスラッグも含めて、menu-item-category-news（newsというカテゴリーのメニューの場合）となるようにしています。 function add_slug_nav_menu_css_class( $classes, $item ) { switch ( $item->type ) { case 'post_type' : $post = get_post( $item->object_id ); if ( $post ) { $classes[] = esc_attr( 'menu-item-' . $item->object . '-' . $post->post_name )
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使いやすいWordPressのためのCSSのつくりかた
Back to Basics With WordPress CSS: Understanding the Native Classes | CSS-Tricks
Twitter Bootstrap のCSSをコンテンツ部分のみに適用できるWordPressプラグインつくったー！ | Firegoby
http://labrid.jp/wp/archives/1041/