言語

言語 カテゴリー記事(更新日順)

  1. 【WordPress】自分のサイトのURLが勝手に変換される場合の対応策
    カテゴリ: HTML, 知識
    作成日:
    ちょっとしたことだが,困ったことがあって解決したので備忘録として書いておく. WordPress は自分のサイトのURLをそのまま記述すると勝手に Aタグ で囲ってしまう仕様のようだ. これはビジュアルモードを使っていて […]
  2. 【CSS】レスポンシブ対応縦スライダーテーブル(表)
    カテゴリ: CSS, HTML, ホームページ
    作成日:
    レスポンシブ対応のホームページの制作で面倒なものの一つに表がある. 以前,横に長いテーブルを左端を固定してスクロール(スライド)させるテーブルの作り方は紹介したが,今度は縦に長いテーブルで上端を固定して縦にスクロール(ス […]
  3. LCP (Largest Contentful Paint) について
    カテゴリ: CSS, HTML, ホームページ, 知識
    作成日:
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み ウェブフォント読み込み中の全テキストの表示 次世 […]
  4. CLS (Cumulative Layout Shift) の改善
    カテゴリ: HTML, ホームページ
    作成日:
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み ウェブフォント読み込み中の全テキストの表示 次世 […]
  5. 「オフスクリーン画像の遅延読み込み」への対策
    カテゴリ: HTML, ホームページ
    作成日:
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三 […]
  6. 【CSSのみ】レスポンシブな多階層ハンバーガーメニューの実装方法(サンプル付き)
    カテゴリ: CSS, HTML
    作成日:
    ハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから […]
  7. 【CSS】z-index が効かない場合の注意点
    カテゴリ: CSS, HTML
    作成日:
    z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。 以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]
  8. 【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    カテゴリ: CSS, HTML
    作成日:
    javascript無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポン […]
  9. 【wordpress】投稿の一覧ページにリセットされない連番を振る方法
    カテゴリ: CSS, php
    作成日:
    概要 wordpressで検索結果一覧を表示したいときや、人気度に応じてランキング形式で表示したいときなど、投稿タイトルの先頭に連番を振りたい場面があると思います。 しかし、1ページ目は問題なく番号が表示されますが、次ペ […]
  10. 上部に固定メニューがある場合にページの途中にジャンプする方法
    カテゴリ: CSS, HTML
    作成日:
    ページジャンプの方法 ページ内の特定の場所に飛ぶ方法は昔は a タグの name 属性を使っていたが,今は id で飛ぶ方法をとることが多い. つまり,以前は <a href="#jump"&g […]
  11. CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法
    カテゴリ: CSS
    作成日:
    リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると押すと別サイト(外部リンク)に行くことが分かりやすいので親切である. なぜ,このようなリンクアイコンを設けるのかという必要性の観点からすると「クリックすると […]
  12. 【CSS】レスポンシブ対応縦横ヘッダ固定テーブル(縦横スクロール)
    カテゴリ: CSS, HTML, ホームページ
    作成日:
    スマホ表示の時に画面からはみ出る table をスライドさせる方法に関して以前に書いたが,それらは IE11 で動くようにするために面倒くさいことをしていた. しかし,もうサポートも終了するので,IE11 は無視してもよ […]
  13. table(テーブル・表)で absolute を使うとセルの枠がずれる
    カテゴリ: CSS, 知識
    作成日:
    原因不明の表のズレ px なのに小数点表記 とある案件でスライダー表(【CSS】レスポンシブ対応横スライダーテーブル(表)参照)を作成したときのことです。 この表は一番左の列を position:absolute にして […]
  14. 【WordPress】リッチリザルト対応の自動パンくずリスト生成
    カテゴリ: HTML, php, 知識
    作成日:
    このところ,リッチリザルトの投稿が続いている. そこで今更ではあるが「パンくずリスト」についても書いてみる. 折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう. プラグイ […]
  15. Google タグマネージャーで独自スクリプトを設定する方法
    カテゴリ: HTML, 知識
    作成日:
    Google タグマネージャーで独自のスクリプトを設定する方法を説明する. タグマネージャーの設定は既に紹介したページを参照してください. タグマネージャーでスクリプトを設定 タグマネージャーにログインする. 左メニュー […]
  16. Hタグ(見出しタグ)とHTML5 アウトライン
    カテゴリ: HTML, 知識
    作成日:
    本記事は HTML Standard のサイトの説明に基づいている. アウトラインとは,「概要,あらまし,輪郭」などと辞書にあるが,まさにその通りで見出し(heading content)ごとに文章をグループ(secti […]
  17. リッチリザルト への BlogPosting での対応
    カテゴリ: HTML, 知識
    作成日:
    リッチリザルトとは リッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス(Google 検索など)での検索結果です。 引用: リッチリザルトテスト(google) つまり,より情報量の多い豊か […]
  18. リッチリザルトの ロゴ への対応
    カテゴリ: HTML, 知識
    作成日:
    引き続き,リッチリザルトへの対応の記事. Google ではロゴ | Google 検索セントラル | Google Developersで記述方法を説明している. ロゴと言っても https://schema.org/ […]
  19. 【WordPress】リッチリザルト対応サイト内検索設置方法
    カテゴリ: HTML, php, 知識
    作成日:
    サイト内検索を設定したのだが,ついでにリッチリザルト対応のサイトリンク検索ボックスにもしたので,役に立つこともあるだろうと備忘録としてまとめておく. サーチコンソールに現れるサイトリンク検索ボックス リッチリザルト対応の […]
  20. CSSでHTMLのタグを書き換える
    カテゴリ: CSS, HTML, 知識
    作成日:
    CSSでタグを書き換えることはできない CSSに触りなれていないと、CSSでHTMLのタグを書き換えたいと思うことがあるかもしれません。しかし、CSSではタグを書き換えることはできません。 実際に<CSS タグ 書き換え […]
Pagetop