複数の画像リンク（バナー等）をフェード効果で切り替えるjavascript

アフィリエイト広告などのバナーを複数設置し、自動で切り替える方法。 下記はレクタングルバナー（300px x 250px）を表示するサンプルコードです。サイズが異なる場合は、拡大（または縮小）して範囲

• #Javascript
• #サンプルコード

画像をランダムに表示するJavaScript（外部ファイル化）

複数の画像から指定する数の画像を表示するjavascript（以下、js）。 下記HTMLを表示したいところに設置。 ※jsのパスは自分の環境に合わせる。※スタイルは省略。任意で設定してください。 j

• #Javascript
• #サンプルコード

CSSで三角形をつくる

CSSで簡単な三角形を作るコード。 下向きの三角形CSS（border） 上向きの三角形CSS（border） 下向きの三角形（背景グラデーション） clip-path: polygon(…) で下向

• #CSS

固定ページで投稿記事一覧を表示する方法

固定ページのスラッグが”allpost”の時、自動的に使用されるテンプレート。専用テンプレートを作成しない方法。 post-allpost.phpを作成し、上記コードを記述。 管理画面 ＞ 固定ページ

• #WordPressカスタマイズ

CSSファイルの読み込みパスにタイムスタンプを追加する

WordPressでCSSファイルを追加で読み込み時にタイムスタンプ（キャッシュバスターというらしい）を追加する方法。下記は、”style-plus.css”を追加で読み込む例。 header.php

• #WordPressカスタマイズ

Flexboxのjustify-content:space-betweenで3列または4列表示時、コンテンツが足りない場合に左詰めにする方法

3列表示時 4列表示時

• #CSS

奇数行毎、または偶数行毎に背景色を設定する

リストの行の背景色を交互に変える 上記例は、偶数行毎に背景色を変更。・奇数行は :nth-child(odd) または :nth-child(2n+1)・偶数行は :nth-child(even) ま

• #CSS

positonを使った中央配置

※親ボックス”.box”のwidth, height の指定必要※translate(X軸方向の距離, Y軸方向の距離)

• #CSS
• #サンプルコード

ウィンドウの高さよりコンテンツ量が少ない時にフッターをブラウザ最下端に設置する方法

ブラウザの高さよりコンテンツ量が少ないページで、フッターの内容を最下端で表示したい場合のコード display:flexを使う場合 または、下記 display:gridを使う場合 5行目：メインの部

• #CSS

CSSでボックスのアスペクト比を固定する（レスポンシブ対応）

基本的なコード 疑似要素（::before）を使用したケース ※アスペクト比によってpadding-topを変更する4：3・・・・padding-top: 75%;16：9・・・・padding-to

• #CSS
• #サンプルコード

PC・タブレット表示時に電話番号リンク（”tel:”）を無効化

電話番号を表示をスマートフォンではタップできるリンク、PC・タブレットではリンクを無効化する。 ※メディアクエリ（@media）の幅はスマートフォンを基準に。 上記は幅600px以上でリンクを無効化。

• #CSS