web

SVGスプライトをgulpやIcoMoonを使わず作成する方法
複数のSVGファイルを一つのSVGファイルに統合して利用するSVGスプライトを作成するために、簡易的な方法を考えました。 📝 ポイント 元のSVGファイルはAffinity Desingerで複数のアートボードを一括でエ...
サイズ不明要素のposition:absolute;で親要素の角への配置方法
position:absolute;を用いて親要素の中央や角に位置指定する場合、子要素の「サイズ(幅、高さ)」がわかっていれば問題はありません。 一方、子要素のサイズが可変で固定値を指定することが難しい場合はtransf...
スクロールバーのカスタマイズはプラグインに頼らずjQueryで自作
目的はたった一つ。 ブラウザ標準のスクロールバーのデザインをカスタマイズすることです。 つまり、 マウススクロールにより、コンテンツがスムーズに移動 スクロールバーのトグルをドラッグアンドドロップでコンテンツが移動 他フ...
BootstrapのSASSコンパイル時にはブラウザーリストも確認
これまで特に何も考えず、Visual Studio Code + Live Sass Compilerを使用して、BootstrapのSASSファイルを編集してCSSにコンパイルしていました。 で、Bootstrap 4...
WordPressでカスタムフィールドの値で並べ替え出来るようにする
例えば投稿の表示件数をカスタムフィールド「post_view」に保存するように設定しているとします。 今回は、アーカイブページで並べ替えソート用のフォームを設置して、そこに「人気記事順」を追加する方法です。 まずはソート...
Bootstrapのパンくずリストを1行表示にして、超過分は省略する。
bootstrapのパンくずリスト。 bootstrapでパンくずリストのスタイルは、 と、display: flex;を使用する前提で定義されています。 これを、1行表示するためには、ol要素に新しく以下のように定義し...
facebookのイベントを埋め込むことは出来ないけど、イベントページを埋め込むことは出来る。
facebookの各投稿には「埋め込み」コードを発行して、ホームページにその投稿を単体で埋め込む事ができますが、「イベント」に関しては出来ないようです。 それでも、facebookのページプラグインを使って、ページのイベ...
webkit系のブラウザならスクロールバーのデザインが簡単に。
幅広くてデザイン的にちょっと頂けないブラウザのスクロールバー。 これをカスタマイズするにはjQueryのプラグインjQuery custom content scrollerをよく使うのですが、 webkit系のブラウザ...
Chromeのマウスジェスチャー拡張を変更
どうも最近、Chrome使用時にマウスカーソルが「スカ」る。 マウスの調子が悪いのか、スクロールの反応が鈍い。 と言っても、他のソフトでは特に問題も無いので、やはりこれはChrome特有の問題の様子。 Chrome本体に...
京都天皇陵散策
今回、京都市内を周遊するためにレンタサイクルをすることに。 選んだお店はこちら。 http://kyotoyuruchariclub.web.fc2.com/jp/index.html 借りた自転車はこちら。 フレームが...
123