flex

サイズ不明要素のposition:absolute;で親要素の角への配置方法
position:absolute;を用いて親要素の中央や角に位置指定する場合、子要素の「サイズ(幅、高さ)」がわかっていれば問題はありません。 一方、子要素のサイズが可変で固定値を指定することが難しい場合はtransf...
WordPressのパスワード保護投稿の入力フォームをカスタマイズ
普段あまり使うことがない機能ですが、WordPressには投稿にパスワードを入力しないと表示されない、「パスワード保護投稿」という機能があります。 この機能を有効にすると、 のようなメッセージとパスワード入力フォームが表...
Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法
Amazonや楽天など、多くのショッピングサイトで実装されている★数を選択して評価するフォーム。 複数の選択肢から1つの値を選択するフォームとしては、セレクトフォームとラジオフォームがありますが、今回はラジオフォームとF...
BootstrapのPopoverにテーマカラーを反映させるSASS設定
Bootstrapで吹き出しを作ることを想定した場合、既にBootstrapの中で設定されているpopoverのスタイルを継承して使用するのが手軽だと思います。 PopoverはJSと連携して、対象ボタンを押すと吹き出し...
BootstrapのSASSコンパイル時にはブラウザーリストも確認
これまで特に何も考えず、Visual Studio Code + Live Sass Compilerを使用して、BootstrapのSASSファイルを編集してCSSにコンパイルしていました。 で、Bootstrap 4...
Bootstrapのパンくずリストを1行表示にして、超過分は省略する。
bootstrapのパンくずリスト。 bootstrapでパンくずリストのスタイルは、 と、display: flex;を使用する前提で定義されています。 これを、1行表示するためには、ol要素に新しく以下のように定義し...
【CSS】FlexboxとPositon:Fixedを使って要素を中央固定表示する方法
CSSである要素を中央に固定して表示するには、表示したい要素の高さ分をtopから差し引く、という方法が良く用いられます。 しかし、これは要素の高さを予め決定しておく必要があります。 もし高さが可変する場合はjQueryを...
もしかしたらdisplayflex;にはアドセンスが表示されないかもしれない。
Flexでレイアウトを作るのが便利なので、多様しているのですが一点不可解な現象を確認しました。 それは、 「Flexで作成したボックスの中にGoogleアドセンスのレスポンシブ広告を配置しても表示されない」 ことです。 ...
FlexsliderのDestroy処理
http://flexslider.woothemes.com/ Flexsliderでスライダー処理を設定した後、やっぱりやめよう、という時にスライダーの設定を無効化(Destroy)したい。 そんな時には・・・ [j...
WordPressサイト内検索プラグインをSearchWPからRelevanssi(Premium)に変更
これまでSearchWPをサイト内検索に使用していましたが、ひとつ問題が発生。 それは 「fire」 で検索出来ないと。 妙なバグですが(ひょっとしたら他にもあるのかもしれません)、実際検索出来ないのです。 fireは ...
1