JavaScriptでモーダル表示する方法【プラグイン、jQuery不使用】
jQueryやJavaScriptプラグインを使用せず、モーダル表示する方法です。 複雑な表示演出や切替等を行わず、シンプルにモーダル表示させる時に使えます。 CSSの記述例 ※必要に応じて書き換えてください。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic P […]
【コピペ可】CSSだけで矢印が繰返し動くアニメーション
- 2021.06.25
- アニメーション
JavaScriptを使わず、CSSだけで矢印が繰返し動くアニメーション作る方法です。 テキストのアテンションに使えます。 CSSの記述 ※cssの「animation」と「keyframes」を使って矢印を動かしてます。必要に応じて書き換えてください。 <style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro&q […]
初心者用HTML・CSS・JSスケルトンファイル【テンプレート#1】
初心者向けにHTML・CSS・JSスケルトンファイルを用意しました。 参考書やプログラミングスクールで勉強するのも一つですが、ベースとなるhtmlファイルを自分で更新・編集して実際にどうなるのかやりつつ覚える方が良いと思ってます。 色々やってみたうえでわからないところを参考書やプログラミングスクールで教えて貰う方が良いのではと考えてます。 そのためのHTML・CSS・JSスケルトンファイル第一弾を […]
CSSで角丸と円を作る方法【border-radius】
- 2021.06.22
- 角丸
CSSを使って角丸と円を作ってみました。 その昔border-radiusが無かった時代は角丸を作るために、上下左右に角丸の画像を作って表示してました。 角丸と円のCSS記述 ※サイズ・色等は必要に応じて書き換えてください。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku G […]
ページURLを取得し、URLに指定文字列が含まれている場合と無い場合で判定して処理する方法【PHP】
- 2021.06.18
- URL判定
現在のページURLを取得し、取得したURL内に指定文字列が含まれている場合と含まれて無い場合で判定して処理を分ける方法です。 サイトの階層ページによってページタイトルや読み込むjsファイルを変えたりする際に使える便利なPHP判定方法です。 CSSの記述例 ※ここは重要では無いので、必要に応じて書き換えてください。 <style type="text/css"> &l […]
投稿記事のタイトル文字数に制限を掛けて表示する方法【WordPress】
- 2021.06.17
- 文字数制限
WordPressの投稿記事一覧のタイトル文字数に制限を掛けて表示する方法です。 TOPページに新着情報として数件だけ記事のタイトルリンクを表示させることがありますが、タイトルの文字量が多い投稿記事は2行になったりします。それを全て指定の文字数以下に制限して、1行に収めます。 固定ページの記述 固定ページ用のテンプレート ファイル名 : page-ttlmozi.php Template Name […]
WordPressのカテゴリー表示順番を変更する方法【プラグイン】
WordPressでカテゴリーの一覧を表示した際、並び順を変更するプラグインをご紹介します。 前回「カテゴリー毎の最新投稿記事一覧を取得する方法【WordPressプラグイン無し】」で表示させた「カテゴリー毎の最新記事一覧」ページを使って並び順が変更できるか試してみました。 「Category Order and Taxonomy Terms Order」プラグイン 「WordPressカテゴリー […]
カテゴリー毎の最新投稿記事一覧を取得する方法【WordPressプラグイン無し】
WordPressで投稿記事のカテゴリー一覧とカテゴリー毎の最新投稿記事1つを取得して表示する方法です。 WordPressを使用したブログで記事の一覧を表示するのは良く見られますが、カテゴリーの一覧かつそのカテゴリー毎の最新記事を取得して表示させてみました。 固定ページの記述 固定ページ用のテンプレート ファイル名 : page-catlist.php Template Name : カテゴリー […]
while文を使ってループ回数分タグ要素を追加する方法【HTMLタグ反復処理】
JavaScriptのwhile文を使ってループし、ulタグ内にliタグを追加する方法です。 前回の記事（for文を使ってループ回数分タグ要素を追加する方法【HTMLタグ簡略化】）とほぼ同じ処理をやってます。 規則的に増えるリスト(li)や画像(img)タグを並べて表示させる時等、HTMLタグを直接ハードコーディングするのでは無く、JavaScriptのwhile文を使ってタグ要素を反復処理で出力 […]
for文を使ってループ回数分タグ要素を追加する方法【HTMLタグ簡略化】
JavaScriptのfor文を使ってループし、ulタグ内にliタグを追加する方法です。 規則的に増えるリスト(li)や画像(img)タグを並べて表示させる時等、HTMLタグを直接ハードコーディングするのでは無く、JavaScriptのfor文を使ってタグ要素をループ回数分追加出力しマークアップの簡略化や効率化ができます。 CSSの記述例 ※ここは重要では無いので、必要に応じて書き換えてください。 […]