increment [WordPress]Jetpackの関連投稿（関連記事）の表示数を増やしたりCSSで調整する
Jetpackの関連記事表示機能（プラグイン上での名前は関連投稿）が中々良かったので使うことに。 ただ、若干レスポンシブへの対応が完璧ではなかったのでフックによるPHPコード、CSSで調整してみました。 Jetpackの関連投稿をPHP&CSSで調整す…
「CSS」カテゴリー一覧
Sassの@at-rootをBEM記法で上手く使う方法 ~ Blockより親要素のクラスでElementとの子孫セレクタを作りたい
SassでBEM記法を使っていると、綺麗にコーディングできない場面が出てきていました。 どんな場面か。それはBlockよりも親要素のクラスでElementとの子孫セレクタを作りたいときです。これにはSassの「@at-root」を使うのですが、ネットで調べても…
WordPressの検索フォームをレスポンシブに対応するSass(CSS)のコード
WordPressのウィジェットや関数get_search_form()で出力される検索フォームをレスポンシブに対応するSassとCSSのコードを公開いたします。 ブラウザは最新のモノしか考慮していないのでご了承ください。 対応するHTML（PHP)のコードは…
Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法
Compassのコンパイル速度を向上させる効果のあるimport-onceですが、とある状況下（自分のOSはWindows 7やWindows 10）でコンパイルをすると以下の様なエラーを吐き出します。 [crayon-5c13cd3509eaa2095846…
これはスマート！z-indexをSassで管理する方法に感動しました
positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。 使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りにな…
フォントサイズのrem指定をCompassのMixinと関数で行う
クリスマスイブまで4日なのに今からアドベントカレンダーをやるとかちょっと意味が分からない宣言ですが、せっかくなので「アドベントカレンダーやってるよ！」という雰囲気を出すためブログを連日更新してみます。（なんか技術者っぽいし！） というわけで今回はSassに関わ…
ボタン実装のSassライブラリ「Buttons」で色の追加やサイズの変更をする
ボタンを簡単に実装できるライブラリ「Buttons」で色の追加やボタンサイズを変更する方法について。（Sassのみです） 色の追加やボタンサイズの変更は変数設定でできます。（Buttonsの設定ファイルは「scss/partials」フォルダの中にある_opt…
[Grunt]CSScombの整形に任意の設定を使う方法
CSSのプロパティ順を並び替えたり、特定のコーディング規約に則ったソースコードに整形してくれるCSScombはとても便利です。自分はこれをGruntで動かしてるのですが、しかしデフォルトの整形結果が好ましくない。 じゃあ自分で好きなように整形方法を設定しようと…
血肉となる。読めばCSSのコーディング/設計力が上がる良書3つ プラスα
Webサイトを作っているとどうしてもCSSのコーディングが汚くなりがちになって、手を加えるたびにソースコードがずさんになっていくのが私の悩みです。 このままではアカン！ということで、数が少ないCSSについての本を3冊読んでみた所どれも血となり肉となる良書だった…
CompassのVertical Rhythmがrem単位に対応していたので、軽い使い方について
Vertical Rhythmを実装する機能は元々Compassにあったのですが、rem単位への対応がイマイチでした。 rem単位はIE8以下には対応できず、同時にpx指定も必要なのですが、CompassのVertical Rhythm機能にそれらしいものは無…
最近のコメント