web制作

CSS

ページ内のリンク位置の調整方法

headerをfixedにしてしまうと、ページ内リンクのTOPがheaderの下に隠れてずれてしまうため、リンク先ボタンを押したときに表示がおかしくなってしまう現象を経験したことはないでしょうか? 検索してみるとこのページに回答がありました...
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...