CSS ページ内のリンク位置の調整方法
headerをfixedにしてしまうと、ページ内リンクのTOPがheaderの下に隠れてずれてしまうため、リンク先ボタンを押したときに表示がおかしくなってしまう現象を経験したことはないでしょうか？ 検索してみるとこのページに回答がありました...
web制作
CSS PHP WordPressの数値をカンマ付きにする
カスタムフィールドで数値入力したものを、カンマ付きにする場合、こちらの number_format() という関数を使うと簡単でした。 詳細はこちらのサイトに記載があったのでご参照ください。 結論から言うと、下記コードで表示できます。 <?...
web制作 formまわりのカスタマイズ
お問い合わせ等で利用するformですが、ブラウザのcssが適応されるのでデザインに合わせてCSSでカスタマイズするサイトをいろいろ集めてみました。 下記サイトで大体のデザイン変更が可能かと思います。 まとめて記載 フォーム周りで覚えておくと...
web制作 z-indexが効かない時
先日、z-indexが効かずに調べていると、こちらのサイトにて試してみてくださいとあったpositonの指定をしてみたところ、表示されるようになりました。 psitonの属性はstatic以外ということです。 とても単純ですが、なかなかと躓...
web制作 アコーディオンのCSSをいろいろ集めてみた
制作を早くするために、独自でHTMLやCSSをパーツごとに保存している方も多いと思いますが、以下のようなサイトでデザインに合わせて修正する手もあります。新しい手法も見ることができますし、自分と違う作り方の勉強にもなります。また、いろんなデザ...
web制作 ブラウザサイズ変更時の挙動
サイト制作中にレスポンシブの確認でブラウザのサイズを変えることがありますが、jsの関係か画像サイズがレスポンシブについてこれいないという現象に直面。通常、あまりブラウザのサイズを変えたりすることはないと思われますがちょっと気持ち悪いので、何...
web制作 クリッカブルマップ（イメージマップ）をレスポンシブ対応にする
あまり必要な場面はないかもしれませんが、今回必要になったので覚書として。 まずはDreamweaverなどでも座標を簡単に作成することが出来ますが、サイトでも簡単に作成できます。 私が利用しているのはこちらのサイト。 他にも同じようなサイト...
web制作 YouTubeの埋め込み設定
iframeを使う方法 簡単で手軽な方法です。YouTubeのプレイヤーのしたの共有ボタンを押すとリンクの共有の中に「埋め込み」という項目があります。こちらをクリックするとiframeのタグが表示されるので埋め込みたい部分にコピペすればOK...
web制作 pxをvwに変換する計算方法
cssにはcalc機能がついているので、デザインから画像サイズ等々をvwに計算する計算方法を見つけたのでメモ。 px÷画面サイズ×100＝vw 上記で計算できるようです。いろんなサイトを見て、色んな方法があるようですが、こちらが簡単だったの...
web制作 ACFのデイトピッカーの出力フォーマット
ACFのデイトピッカーをいろんな出力フォーマットに変換する方法です。(ACFとはWordpressでよく使われている、Advanced Custom Fieldsというプラグインの略です） <?php $date = date_create...