注意事項の※がついたリストのコードメモ
いつも書くのがめんどくさいのと、beforeだからって「display: block;」や「top: 0;」など、余計なコードを書かなくていいようにコピペ用にメモしておく。
HTML・CSSHTML・CSS
HTML・CSSHTML・CSS特定のクエリ文字列（パラメータ付きURL)のみリダイレクト処理するとき困ったからメモしとく。
特定のページIDのパラメータがついたもののみリダイレクト処理して別ページへ遷移させたいとき困ったのでメモしておく。 特定のクエリ付きURLのリダイレクト処理 例えば、特定のクエリ付きURLのページ「サイトURL/blog...
HTML・CSSAmazonや楽天の商品ページへのリンクボタンを作ってみた。
読んだ本の紹介リンク、テキストでリンク貼りつけたりしていませんか？例えばこんな感じに。 革命のファンファーレ 現代のお金と広告 これだと本の写真がないし、どんな本かわからないし、クリックする人がamazonでよく買う人な...
HTML・CSSSVGでクリッカブルマップ！リンクをつける方法
こんにちは、yukipanです。 サイト制作で地図やイラスト上でピンポイントにリンクを付けるとき、<map>タグと<area>タグでクリッカブルマップ〜という手法があったそうな。だけどレスポンシブ...
HTML・CSSCSSのみで実装。アコーディオンメニュー
こんにちは、yukipanです。「Q&A」や、長い項目がたくさんある時に見たいところだけ開いて見れる、ユーザーにも優しいアコーディオンメニュー。よくあるJSやjQueryでつくるアコーディオンメニューもいいけれど...
HTML・CSSswiper.js 4.3.3でトップスライドと記事一覧の調整したコードメモ。
swiper.jsでかんたんに画像のスライダーが設置できる。オプションも豊富だし、便利よね〜。ただ、Ver5はIE11で使えないんだとか。。。IE対応しなくても・・・って思うけど、まだ使ってる人もいるし、もう少しは対応し...
HTML・CSSswiper.js Ver.5.4.5で簡単にスライダー設置（ナビ・ページネーション調整済）
swiper.jsでかんたんに画像のスライダーが設置できる。オプションも豊富だし、便利よね〜。汎用的に使えるバージョンでオプションを追加したコードをメモメモ。 スライドショーのサンプルはこちら→swiperスライダー H...
HTML・CSS【WordPress】画像パスをショートコードで便利に
固定ページにコーディングしたデータをカスタムHTMLにコピペする時、画像で、「サイトのURL/wp-content/themes/テーマ/画像までのディレクトリ/画像名」って入力するの、めっちゃめんどくないですか？「sr...
HTML・CSStableレイアウト（レスポンシブ対応・HTML・CSS・SCSS）
tableレイアウトを組むときにいつもどうだったっけ？ってなるので何パターンかメモしとく。とりあえずまずは1つ。 table1 サンプルはこちら HTML CSS SCSS 変更しやすいようにSCSSバージョンもアップし...
HTML・CSS【脱・jQuery】JavaScriptでシンプル上に戻るボタン(スクロールするとふわっと出てくる仕様)
シンプルな上に戻るボタンのメモ。スクロールするとふわっと表示される仕様。サンプルは「↑」のテキストを入れているけど、画像やfontawesome、CSSで作った図形など好きに変更できる。hoverするとちょっとだけ上に動...