先日紹介した「記事一覧で一番最初の記事だけ違うデザインにしたいときに使う記述」はすごく便利でぜひ多用したい条件分岐です。 ただ、1ページ目はそれでよくても2ページ目以降はまた違ったデザインにしたいということもありますよね。 というわけで、1ページ目と2ページ目以降で違うものを表示する「is_paged」という条件分岐タグをご紹介します。
WordPressで1ページ目と2ページ目以降で違うものを表示する「is_paged」 | delaymania
先日紹介した「記事一覧で一番最初の記事だけ違うデザインにしたいときに使う記述」はすごく便利でぜひ多用したい条件分岐です。 ただ、1ページ目はそれでよくても2ページ目以降はまた違ったデザインにしたいということもありますよね。 というわけで、1ページ目と2ページ目以降で違うものを表示する「is_paged」という条件分岐タグをご紹介します。
Advanced Custom Fieldsでチェックボックスの値を表示させたい - ド素人のWordPressカスタマイズ日記
Advanced Custom Fieldsを使っています。 チェックボックスで設定した値を出力する方法・色々です。 カスタムフィールドの設定 設定ページ green:みどり red:あか black:くろ 記事投稿ページ □ みどり ☑ あか ☑ くろ ↑ こんな感じで設定して、 チェックした項目を表示させたいのです。 やり方１：シンプルにカンマ区切りで表示させる テンプレに書くコード 赤文字は書き換えてくださいませ。 <?php the_field('field_name'); ?> 表示結果 red, black やり方２：チェックした項目をアイコンにして表示させたい テンプレに書くコード 赤文字は書き換えてくださいませ。 <?php $cfcb = get_field_object('field_name'); $cfcbId = get_post_meta($post->ID,'
Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita
CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード | 9ineBB
リンクには既定値で、最初からアンダーラインが表示されるようになっています、逆にマウスオーバーすることで表示させるっていう使い方も結構されます。今回のコードは、text-decorationを使ったものではなく 擬似要素を使って線を表現しています、そのことによってより柔軟な表現が可能になります コードの解説と実装方法 アンダーラインの部分は a の擬似要素 after を使って作られています。 それを transition で変化させています 変化する基準は scaleです。 scaleは拡大縮小を行うことが出来ます このコードでは、X軸に対して拡大縮小します。つまり横方向のみに伸びたり縮んだりして見えるようになります これをマウスオーバーすることで動作するようにしています。 コード SCSS版 a { position: relative; display: inline-block; p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
