@oceantの技術ブログ

Bootstrapでgridの間隔を変更する方法

新規にBootstrapベースでサイトを作ることも少なくなってきたとは思いますが、既存のWordPressテーマをカスタマイズする際に必要となることは多くあると思います。 Bootstrapで最も利用頻度が高いのがgridシステムで...

CSSだけで点線の吹き出しを作る方法

吹出口まで含め、枠が点線となる吹き出しをCSSだけで作れます。 完成イメージ コード <div class="balloon"> <p>ここにテキストが入ります。</p> &l...

【WordPress】キャプション付きの画像を追加する際にwidthを指定させない方法

WordPressで記事を投稿するとき、「メディアを追加」ボタンからキャプション付きの画像を挿入しようとすると、思っていたより画像の横幅が大きくなってしまうことがあります。 原因はcaptionのショートコードでstyle属性にwi...

WordPressでカスタムフィールドの値を元に自然順っぽく並び替えする方法

注意 厳密な自然順の並び替え(ナチュラルソート)ではありません。WordPressで利用されているMySQL自体にナチュラルソートの機能がないようなので、あくまで擬似的なものと捉えてください。上手くいかないパターンもあると思います。...

slickでafterChange内でslickGoToを使う場合の対処方法

普通にやるとうまく動作しないので、その対処方法です。いわゆるバッドノウハウ。 6枚くらいスライドがあって、初回以外は最後の3つだけ繰り返したい、といったときに使えます。 結論 オプションに waitForAnimate: fal...

複数行でtext-overflow: ellipsis;みたいなことをしたいときの対処法

たぶんこれが決定版。 特徴 ・CSSのみ ・マルチブラウザ対応 ・指定行数に満たない場合は省略記号が表示されない ・最終行の途中でテキストが終わる場合も省略記号は表示されない 唯一の欠点 ・背景が画像やグラデーションのと...

checkboxをCSSでスタイリング

デフォルトのcheckboxはdisplay: none;で隠しつつ、::beforeで四角の枠を、::afterでチェックマークを付けていきます。 radioの場合はborder-radius: 50%; で円を作れば良さそうです...

Googleフォームで投稿があった際に任意のメールアドレスに通知を飛ばす方法

Googleフォームのスクリプトエディタに登録することで、フォームからの投稿があった際に管理者のGmail以外へメール通知を飛ばすことができます。 function sendForm(e){ // メール送信先 var ...

Googleフォームを独自デザインで埋め込みajaxで送信させる方法

やりたいこと・方針 Googleフォームで手軽にお問い合わせフォームを作りたい デザインはオリジナルがいい 送信後もサイトから移動したくない(Googleフォームに移動したくない) jQuery使っちゃう 手順 1...