ハンバーガメニュー今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]Tech Blog
技術ブログ
68 entries
Page 3 / 3
ハンバーガメニュー今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]
WordPressカスタムナビゲーション今回は管理画面で編集できるグローバルメニューをカスタマイズします。 グローバルメニュー 管理画面 メニュー項目を管理画面でカスタマイズすることができます。 1.functions.phpにregister_nav_men […]
フィードカスタマイズフィードにカスタム投稿タイプの更新を含める デフォルトではフィードにはカスタム投稿タイプは表示されないので下記を追加します。 フィードのauthorを変更 dc:creatorに表示される内容はログインのときのIDと同じ […]
ログインフォームカスタマイズWordPressのログインフォームのカスタマイズします。 手順 フック「login_enqueue_scripts」で外部スタイルシートを読み込み 外部スタイルシートでロゴを変更 ロゴのリンク先を変更 1.フック「lo […]
CSSでスクロールスナップを実装できるscroll-snap-type要素ごとにスクロールするスクロールスナップをCSSで実装 実装結果 HTML 各要素A、B、C、D、Eを囲む要素を用意します。 CSS 囲った要素wrapにはscroll-snap-type: y mandatory; […]
要素の背後にぼかしなどの効果を加えるbackdrop-filterスタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。 実装結果 backdrop-filter HTML Style Sheet backdrop-filt […]
要素に連番を与えるcounter-incrementolタグで連番を与えることはできますが、それ以外の要素でも与えることができます。 HTML html構造としては連番を与えたい要素を囲みます。クラス「list」「item」はユニークな文字列でOKです。 Style Sh […]
行数を指定して文末を「…」で省略するline-clampCSSにはテキストを省略することができるtext-overflow: ellipsis;がありますが、1行しか省略することができません。 HTML text-overflow: ellipsis; 東京五輪の開会式を走る […]