実装

実装タグ記事(更新日順)

  1. タグ: , , ,
        【CSS】目のマークでパスワードの表示を切り替える実装方法
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  2. タグ: , , , , ,
        【WordPress】アイキャッチ画像を設定しないでもサムネイルを表示する方法
    WordPress でいちいちアイキャッチ画像を設定するのは面倒くさいと思ったことはないだろうか. ただ,テーマによっては様々な場所でアイキャッチ画像がサムネイルとして使われている. この画像があるのとないのとでは見栄え […]
  3. タグ: , , , ,
        【JavaScript】目のマークでパスワードの表示を切り替える実装方法
    目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 以下に動かせるサン […]
  4. タグ: , , , , , , , , , , ,
        【比較】Prism.js と highlight.js と google-code-prettify のどれを使えばいい?
    今回は wordpress のソースコード表示用ライブラリを選ぶときに一度は目にするであろう Prism.js、highlight.js、google-code-prettify について書きました。 上記3つは軽量のラ […]
  5. タグ: , , , , , ,
        【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
    (2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表がある. 横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分からなくなる. […]
  6. タグ: , , , ,
        【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […]
  7. タグ: , , , , , , , , ,
        「オフスクリーン画像の遅延読み込み」への対策
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三 […]
  8. タグ: , , , , , ,
        Youtube の動画の複数埋め込みをしたページの高速化
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. オフスクリーン画像の遅延読み込み 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三者コードの影響を抑えて […]
  9. タグ: , , , , , ,
        【CSSのみ】レスポンシブな多階層ハンバーガーメニューの実装方法(サンプル付き)
    ハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから […]
  10. タグ: , , , , , , , , , ,
        【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    javascript無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポン […]
  11. タグ: , , ,
        CSSで円を描き,内側にテキストを入れる
    円をかいて,中に文字を入れるとはこのような絵のこと. 上左中央右下 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: relative と相対指定にして,中の文字は position: […]
  12. タグ: , , , , ,
        【レスポンシブ対応】メガメニューをCSSのみで作成
    【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので,メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする. (2020 […]
  13. タグ: , , , , , , , ,
        【WordPress】リッチリザルト対応の自動パンくずリスト生成
    このところ,リッチリザルトの投稿が続いている. そこで今更ではあるが「パンくずリスト」についても書いてみる. 折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう. プラグイ […]
  14. タグ: , , , ,
        リッチリザルトの ロゴ への対応
    引き続き,リッチリザルトへの対応の記事. Google ではロゴ | Google 検索セントラル | Google Developersで記述方法を説明している. ロゴと言ってもhttps://schema.org/O […]
  15. タグ: , , , , , , , ,
        【WordPress】リッチリザルト対応サイト内検索設置方法
    サイト内検索を設定したのだが,ついでにリッチリザルト対応のサイトリンク検索ボックスにもしたので,役に立つこともあるだろうと備忘録としてまとめておく. サーチコンソールに現れるサイトリンク検索ボックス リッチリザルト対応の […]
  16. タグ: , ,
        【JavaScript】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    パスワードを入力する機会が増えた昨今では必須の機能と言える、パスワード表示ボタンのクリックでテキストの表示・非表示をjavascriptを使って切り替える方法を紹介します。 今回のサンプルコードではパスワード入力欄を作成 […]
Pagetop