[{"data":1,"prerenderedAt":125},["ShallowReactive",2],{"site-info":3,"posts-tech-3":7},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"items":8,"pagination":121},[9,25,35,48,67,77,90,101,111],{"ID":10,"title":11,"post_type":12,"post_type_label":13,"url":14,"date":15,"modified":16,"thumbnail":17,"thumb":17,"tag":18,"slug":23,"excerpt":24},210,"ページ内スクロール","tech","Tech Blog","\u002Ftech\u002F210\u002F","2021.09.09","2022.10.10","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F09\u002Fimg_page-scroll-1.png",[19],{"name":20,"slug":21,"url":22},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F","%e3%83%9a%e3%83%bc%e3%82%b8%e5%86%85%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab","今回はページ内スクロールのリンクとページトップへのスクロールボタンを作成します。 ページ内スクロール HTML CSS ページトップボタン HTML CSS JavaScript 解説 a[href^=”#& […]",{"ID":26,"title":27,"post_type":12,"post_type_label":13,"url":28,"date":29,"modified":16,"thumbnail":30,"thumb":30,"tag":31,"slug":33,"excerpt":34},201,"ハンバーガメニュー","\u002Ftech\u002F201\u002F","2021.08.29","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_hamburger-menu-1.png",[32],{"name":20,"slug":21,"url":22},"%e3%83%8f%e3%83%b3%e3%83%90%e3%83%bc%e3%82%ac%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc","今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]",{"ID":36,"title":37,"post_type":12,"post_type_label":13,"url":38,"date":39,"modified":16,"thumbnail":40,"thumb":40,"tag":41,"slug":46,"excerpt":47},195,"WordPressカスタムナビゲーション","\u002Ftech\u002F195\u002F","2021.08.28","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_custom-navigation-1.png",[42],{"name":43,"slug":44,"url":45},"WordPress","wordpress","\u002Ftag\u002Fwordpress\u002F","wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","今回は管理画面で編集できるグローバルメニューをカスタマイズします。 グローバルメニュー 管理画面 メニュー項目を管理画面でカスタマイズすることができます。 1.functions.phpにregister_nav_men […]",{"ID":49,"title":50,"post_type":12,"post_type_label":13,"url":51,"date":52,"modified":53,"thumbnail":54,"thumb":54,"tag":55,"slug":65,"excerpt":66},168,"フィードカスタマイズ","\u002Ftech\u002F168\u002F","2021.08.12","2023.05.30","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_feed-1.png",[56,60,61],{"name":57,"slug":58,"url":59},"RSS","rss","\u002Ftag\u002Frss\u002F",{"name":43,"slug":44,"url":45},{"name":62,"slug":63,"url":64},"フィード","feed","\u002Ftag\u002Ffeed\u002F","%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba","フィードにカスタム投稿タイプの更新を含める デフォルトではフィードにはカスタム投稿タイプは表示されないので下記を追加します。 フィードのauthorを変更 dc:creatorに表示される内容はログインのときのIDと同じ […]",{"ID":68,"title":69,"post_type":12,"post_type_label":13,"url":70,"date":71,"modified":16,"thumbnail":72,"thumb":72,"tag":73,"slug":75,"excerpt":76},156,"ログインフォームカスタマイズ","\u002Ftech\u002F156\u002F","2021.08.11","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fwp-loginform-1.png",[74],{"name":43,"slug":44,"url":45},"%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba","WordPressのログインフォームのカスタマイズします。 手順 フック「login_enqueue_scripts」で外部スタイルシートを読み込み 外部スタイルシートでロゴを変更 ロゴのリンク先を変更 1.フック「lo […]",{"ID":78,"title":79,"post_type":12,"post_type_label":13,"url":80,"date":81,"modified":16,"thumbnail":82,"thumb":82,"tag":83,"slug":88,"excerpt":89},143,"CSSでスクロールスナップを実装できるscroll-snap-type","\u002Ftech\u002F143\u002F","2021.08.02","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F08\u002Fimg_scroll-snap-type.png",[84],{"name":85,"slug":86,"url":87},"CSS","css","\u002Ftag\u002Fcss\u002F","css%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%b9%e3%83%8a%e3%83%83%e3%83%97%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%a7%e3%81%8d%e3%82%8bscroll-snap-type","要素ごとにスクロールするスクロールスナップをCSSで実装 実装結果 HTML 各要素A、B、C、D、Eを囲む要素を用意します。 CSS 囲った要素wrapにはscroll-snap-type: y mandatory;  […]",{"ID":91,"title":92,"post_type":12,"post_type_label":13,"url":93,"date":94,"modified":95,"thumbnail":96,"thumb":96,"tag":97,"slug":99,"excerpt":100},108,"要素の背後にぼかしなどの効果を加えるbackdrop-filter","\u002Ftech\u002F108\u002F","2021.07.27","2026.06.02","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F07\u002Fthumbnail_108-1200x662.jpg",[98],{"name":85,"slug":86,"url":87},"%e8%83%8c%e6%99%af%e3%81%ab","スタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。 実装結果 backdrop-filter HTML Style Sheet backdrop-filt […]",{"ID":102,"title":103,"post_type":12,"post_type_label":13,"url":104,"date":105,"modified":16,"thumbnail":106,"thumb":106,"tag":107,"slug":109,"excerpt":110},83,"要素に連番を与えるcounter-increment","\u002Ftech\u002F83\u002F","2021.07.25","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F07\u002Fimg_counter-increment-1.png",[108],{"name":85,"slug":86,"url":87},"%e8%a6%81%e7%b4%a0%e3%81%ab%e9%80%a3%e7%95%aa%e3%82%92%e4%b8%8e%e3%81%88%e3%82%8bcounter-increment","olタグで連番を与えることはできますが、それ以外の要素でも与えることができます。 HTML html構造としては連番を与えたい要素を囲みます。クラス「list」「item」はユニークな文字列でOKです。 Style Sh […]",{"ID":112,"title":113,"post_type":12,"post_type_label":13,"url":114,"date":115,"modified":95,"thumbnail":116,"thumb":116,"tag":117,"slug":119,"excerpt":120},43,"行数を指定して文末を「…」で省略するline-clamp","\u002Ftech\u002F43\u002F","2021.07.23","https:\u002F\u002Filr.jp\u002Fuploads\u002F2021\u002F07\u002Fimg_line-clamp-1.png",[118],{"name":85,"slug":86,"url":87},"%e8%a1%8c%e6%95%b0%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%9d%e3%82%8c%e4%bb%a5%e9%99%8d%e3%82%92%e3%80%8c%e3%80%8d%e3%81%a7%e7%9c%81%e7%95%a5%e3%81%99%e3%82%8bline-clamp","CSSにはテキストを省略することができるtext-overflow: ellipsis;がありますが、1行しか省略することができません。 HTML text-overflow: ellipsis; 東京五輪の開会式を走る […]",{"page":122,"per_page":123,"total":124,"total_pages":122},3,30,69,1785309431570]