WordPress

グローバルナビゲーションをカスタマイズする[WP]

word pressのグローバルナビゲーションをカスタマイズする際に必要となる、wp_nav_manu() とカスタムウォーカーの使い方について実例込みで説明しています。全般的なナビゲーションやコンテナ出力についてはwp_nav_menu関数で指定し、子要素以下の細部の設定はカスタムウォーカー(walkerオプション)で指定していく、という流れになります。
css

font-sizeはclamp()関数で指定するのが良さそう

これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
css

CSS:text-decorationでできること

text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line(線の位置) text-decoration-style(線の形) text-decoration-color(線の色) text-decoration-thickness(線の厚み)
スポンサーリンク
JavaScript

slick.jsのオプション設定をPC / モバイルで切り替える

slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。
css

サイトをダークモードに対応させる

長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。身近になったダークモードですが、ブラウザやOSが自動...
HTML

option名が長すぎて表示できない問題にはoptgroup

optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
css

疑似クラス nth-child の使い方いろいろ

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違...
JavaScript

slickスライドをドットの代わりにサムネイル連動にする

slick sampleまれに質問があるので、スライダー系JQuery「slick」をサムネイルスライダーと連動させる方法について書いておきます。slickが優...
HTML

schemaに関する備忘録

随時追加itemtype="〜WebPage"をより具体的に指定する場合。以下の値を使用できる。ItemPageContactPageFAQPageQAPage...
Linux

削除してしまったファイルを復元する【Linux】

誤って削除してしまったファイル。上書きで消してしまったファイル。しかし、まだ救い出せるかも知れません。ext4magic を利用した救出方法をメモ。ext4ma...
css

cssで作るイメージギャラリー

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたの...
css

iPhoneでaタグが動作しない不具合が予想外の方法で直った話

何かと独特な不具合が出がちなiOS。今回、サイト製作中に起きたのが、「ナビゲーションメニューのリンクが全く反応しない(ただしiPhoneに限る)」というものでし...