JavaScriptで複数セクションの背景色をランダムに変えるアニメーションの作り方

前回の記事に引き続き、JavaScriptを使用して複数のセクションにランダムな背景色を適用する方法を紹介しま

JavaScriptで簡単！ランダムに変わる背景色アニメーションの作り方

今回はJavaScriptを使用して定期的に背景色をランダムに変更する方法を紹介します。少し変わったwebサイ

GSAPを使って横スクロールとセクションのアニメーションを実装する方法

近年、ウェブデザインにおいて動きやインタラクティブな要素を取り入れることが増えています。今回は、GSAP（Gr

初心者向け！簡単に作れるお絵かきツール

今回はwebサイトの作成にはあまり役に立たないかも知れませんが、ちょっとおもしろいコードを作ってみましたので紹介したいと思います。 かなり簡単なコードで出来ているので、何かの約に立つかもしれませんので興味がある方は是非！

WordPressでファビコン（サイトアイコン）を設定する方法

WordPressでのファビコン（サイトアイコン）の設定は、サイトのブランディングとユーザーエクスペリエンス向上に不可欠です。この記事では、手順と重要性について詳しく解説します。初めての方でも簡単に設定できる方法を紹介しますので、ぜひ参考にしてください。

Swiperを利用してのスライダーの実装とカスタマイズ方法

今回は、ウェブサイトに画像スライダーを追加する方法を紹介します。ここでは、人気のライブラリ「Swiper」を使用して、基本的なスライダーの設置手順を初心者向けに説明します。

[初心者向け]CSSでテキストアニメーションを作ろう

テキストアニメーションでウェブサイトに動きと魅力を追加しましょう。この記事では、CSSで実装できる4つの基本的なテキストアニメーションを紹介します。興味がある方はぜひご覧ください！

スムーズスクロールとセクションナビゲーションの実装方法とその利点[CSS+javascript]

こちらは、ウェブサイトでのスムーズスクロールとセクションナビゲーションを実現するJavaScriptの実装方法を解説しています。ページ内のセクションごとに異なる背景色を設定し、直感的なページ内ナビゲーションを実現します。

CSSとJavaScriptを使った初心者向けスライドショーの作り方

今回はCSSとJavaScriptを使って、簡単にスライドショーを作成する方法をご紹介します。

スクロールインジケーターを使ってページ内ナビゲーションを実装しよう！

ファーストビューに「SCROLL↓」のインジケーターを設置して、下にコンテンツがあることをアピールする方法をご紹介！矢印がアニメーションで動き、視覚的にわかりやすいんです。さらに、ファーストビューを離れると自動的に消えるので、便利な機能になっています✨ #Webデザイン #UIUX #Web制作

テキストが円形に回転しながら点滅するアニメーションを作成しよう！[CSS + JavaScript]

今回は、JavaScriptとCSSを使って、テキストが円形に回転しながらランダムに点滅するアニメーションを作成する方法をご紹介します。サイトのロード画面や、ちょっと目を引きたいところに設置すると面白いと思うので、興味のある方は是非！

初心者向け！CSSアニメーションで回転するボックスを作ろう

こんにちは！今回は、CSSを使ってシンプルなアニメーションを作成する方法を紹介します。具体的には、回転するボッ

[超簡単]CSSだけでOK！テキストリンクにアニメーションを追加する方法

今回は私がサイトを作成する時によく使用するリンクのアニメーション2つを紹介したいと思います。 非常に簡単なコードでアニメーションできるので初心者の方でも簡単に設置できますし、カスタムすることも可能です！

[CSS]横スクロールするループアニメーション

今回はCSSを使っての横にスクロールするループアニメーションを作る方法をご紹介します。 HTMLとCSSのみ横スクロールするループアニメーションが簡単に作れますので、サイトに掲載したいとお考えの方はぜひご参照ください。

[CSS]ドロップダウンメニューを作る[CSS + JavaScript]

Webのドロップダウンメニューとは、ユーザーがクリックするかホバー（マウスを重ねる）すると表示される選択肢のリストを提供するインターフェース要素です。 このメニューは通常、ページのナビゲーションバーやフォームの入力フィールドに組み込まれており、限られたスペースで多くの選択肢を提供するために使用されます。

ハンバーガーメニューのアイコンが動くアニメーションを作りたい。[CSS+JavaScript]

今回はハンバーガーメニューが動くスタイルシートをご紹介したいと思います。 マウスオーバーのみのアニメーション、クリックをしてのアニメーションに加えて、スタイルシートとJavaScriptを使ったちょっとしたメニューを作ってみましたのでご参考ください。

備忘録 フォントサイズをウィンドウサイズに合わせて可変させるCSS

今回はスタイルシート（CSS）を利用してフォントサイズの最小値と最大値を指定し、ウィンドウサイズに合わせて自動で文字の大きさが変更される方法の紹介となっております。

WordPressのREST APIについて

以前、WordPressのREST APIの記事を紹介させていただきましたが、今回は少し特殊なREST APIの使い方を紹介いたします。 お試しの場合はREST APIを利用するので、必ずバックアップを取ってから対応してください。

ブロックエディターのみでアーカイブ（日付）一覧を固定ページ等に表示させる方法

今回は前回、前々回に引き続きブロックエディターの機能を利用しアーカイブ（日付）一覧を掲載していきたいと思います。 前回はタグ一覧の表示方法をご紹介させていただきましたが、今回はアーカイブ（日付）一覧を表示させる方法をご紹介したいと思います。

プラグイン「Jetpack」を利用してInstagramのタイムラインをサイトに表示させてみた。

今回は、Instagramのタイムラインをサイトに表示させる方法をご紹介させていただきます。 プラグイン「Jetpack」を利用しての方法となりますので、誰での比較的簡単に表示させることができると思いますのでInstagramのタイムライン表示でお悩みの方はご一読ください。

ブロックエディターのみでタグクラウド（タグ一覧）を固定ページ等に表示させる方法

今回は前回に引き続きブロックエディターの機能を利用していきたいと思います。 前回はカテゴリー一覧の表示方法をご紹介させていただきましたが、今回はタグ一覧を表示させる方法をご紹介したいと思います。

ブロックエディターのみで、カテゴリー一覧を固定ページ等に表示させる方法

今回はプラグインを利用せずに「カテゴリー一覧」を表示させる方法をご紹介します。 デフォルトの機能を使うため、あまり装飾などすることは出来ませんが、まずはプラグイン無しで表示させたいという初心者の方向けとなっております。

REST API へのアクセスを制限するためのソースで躓いた話[WordPress]

今回はWordPressのREST APIで躓いたので、今後同じようなことがないように備忘録として紹介させていただきます。

WordPressでbodyタグにクラスを追加、または削除する方法[備忘録]

WordPressサイトでのbodyタグにクラスを追加・削除する方法をご紹介します。便利な手法ですが、必要性は少ないかもしれません。しかし、特定のページのデザインを微調整したいときに役立ちます。ぜひ試してみてください！

Contact Form7を更にカスタムして管理を簡単にしよう！

今回は前回紹介させていただきました、Contact Form7とGoogleスプレッドシートと連携できる「CF7 Google Sheets Connector」と、以前ご紹介させて頂きました、お問い合わせ番号を連番で管理することができるプラグイン「Contact Form 7 Serial Numbers」を更に連携させたので、そちらの備忘録となります。

Contact Form7とGoogleスプレッドシートが連携できるプラグインが便利すぎた！

今回はContact Form7とGoogleスプレッドシートが連携できるプラグイン「CF7 Google Sheets Connector」を紹介させていただきました。 お問い合わせを管理するプラグインの中でもかなり便利な機能を持っていると思うので、お問い合わせの管理でお悩みの方は是非ご検討ください！

WordPressで人気の記事を掲載することができるプラグイン「WordPress Popular Posts」

WordPress Popular Postsは、WordPressサイトに導入することで、訪問者にとって興味深いコンテンツを素早く発見できるようにするための便利なプラグインです。この記事では、WordPress Popular Postsプラグインの概要、機能、そして導入方法について詳しく説明します。

ムームードメインから新サービスが登場。その名も「ムームーサーバー」

あのドメイン取得サービスで有名な企業が、ついにレンタルサーバー事業に参入しました。このニュースを聞いて、私は興味津々でサーバーの性能や機能を調査しました。今回は、私の個人的な感想を率直に述べたいと思います。

Contact Form 7に通し番号を追加する「Contact Form 7 Serial Numbers」が便利！

今回はContact Form7で通し番号（連番）やタイムスタンプを追加できるプラグイン「Contact Form 7 Serial Numbers」を導入させて頂きました。

無料で写真素材が使用できるフリー素材サイト3選

サイトやブログを彩る写真やイラストは重要ですね。テキストだけではユーザーの興味を引き付けるのが難しいことも。そんな時に便利なのが無料のフリー素材サイトです！利用規約を確認して、魅力的なコンテンツを提供しましょう！

一部のテキストサイズを変更することができるプラグイン Snow Monkey Editor

今回はブロック内の一部のテキストの文字を大きくしたり装飾したりできるプラグイン「Snow Monkey Editor」を紹介。

BackWPupで「10秒間応答しません。」というエラーが出た時の対処法

BackWPupでバックアップを取ろうとしたところ「ジョブ"ファイルバックアップ"が開始されましたが、10秒間応答しません。インフォメーションを確認してください。」と表示されたので、その時に対処した方法を備忘録として紹介させていただきます。

Copilotに聞いてみた！WordPresに入れた方が良いプラグイン5選！！

Microsoftが開発したAI「Copilot」の助けを借りて、WordPressサイト構築におすすめのプラグイン5つを紹介。各プラグインの特徴と役立つ機能について解説しています。セキュリティ、バックアップ、スパム対策、機能拡張、SEO強化が可能です。 Xで投稿するための文字数にしてください。

Copilotで作ったAIイラストをブログのアイキャッチに利用してみよう！

Microsoftが開発したAIツール「Copilot」を使ってアイキャッチ用のイメージ画像を作成してもらったので、その方法などを紹介しております。

1つのサーバーで複数のサイトを運営する方法[エックスサーバー]

エックスサーバーを使って複数サイト運営する方法について紹介。マルチドメインとMySQLが無制限の場合、スペック等に注意しながら運営すれば、コストダウンにも繋がります！

[WordPress]ブロックエディター（Gutenberg）の上手な利用方法。

ブロックエディター（Gutenberg）に慣れない方のために、不要なブロックの非表示にする方法とパターン化により使い勝手を改善する方法をご紹介します。

プラグイン「Code Snippets」が便利過ぎた！

本記事ではWordPress用の便利なプラグイン「Code Snippets」を紹介します。functions.phpを編集せずにコードを追加・管理でき、HTMLやCSS、JavaScriptの入力、ショートコード化も可能にします。実際のコード追加方法を示し、記事数表示コードのショートコード化も説明されています。WordPressのカスタマイズを容易にするこのプラグインは、特に初心者に適しています。

ユーザーのプロフィール情報が改行されないときに試した2つのこと。

ユーザーのプロフィール情報に改行を入れる2つの方法を紹介。1つ目はfunction.phpにコードを追加し、プロフィールに手動でを入れる方法。もう1つは、wpautop関数を含むテンプレートタグを使う方法で、これにより自動で改行される。環境に合わせた方法を選ぶことが推奨される。

• #wordpress
• #ワードプレス
• #functions.php

WordPressでアップした画像が自動で縮小される問題を解決方法 – 備忘録

今回はWordPressにアップロードした画像がなざか縮小された。という相談を頂いたので備忘録として解決方法を紹介したいと思います。

• #wordpress
• #ワードプレス

Instagramのタイムラインをwebに表示させる方法 – Lightwidget編

今回はInstagramのタイムラインをWEBサイトに表示させる方法 第2弾のお話となります。 LightwidgetというWEBサービスを利用しての方法となりますので、初心者から中級者の方向けかと思います。 APIに困っている方は1度検討してみてはいかがでしょうか？

• #インスタグラム
• #Instagram

備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法

CSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。

• #HTML&CSS
• #CSS

RSSフィードを確認する簡単な方法

RSSフィードの取得とWordPressでの表示方法について解説しています。BeRSS.comを利用し簡単にフィードのURLを取得することができ、プラグイン不要でWordPressにRSSブロックを追加して表示可能です。

• #wordpress
• #ワードプレス

Googleカレンダーをサイトに表示させる方法。-その1-デフォルトタイプ

今回はGoogleカレンダーをサイトに表示させたいというご要望を頂きましたので、マニュアル代わりに記事として公開させて頂きたいと思います。

• #HTML&CSS
• #Googleカレンダー

一時的にサイトをメンテナンスモードにするプラグイン「LightStart」を使ってみた話。

今回はWordPressで運営しているサイトを一時的にメンテナンスモードにするプラグイン「LightStart」を紹介したいと思います。 関係者は現在作成している状態を表示し、関係者以外はメンテナンスモードで表示されるので、サイトを用意中だったりサイトをリニューアルする際にとても便利なプラグインです。

• #wordpress
• #ワードプレス
• #WordPressプラグイン

WordPressの外部リンクでnoreferrerを削除する方法[アフェリエイト]

今回はリンクで「新しいタブを開く」を設定した時にソース上に追加されてしまう「noreferrer」を削除する方法を備忘録として公開させていただきました。

• #wordpress
• #ワードプレス
• #アフェリエイト

WordPressのサイトアドレス（URL）を変更した話。

今回はWordPressのサイトアドレス（URL）を変更しましたのでそちらの備忘録となります。 URLを変更したいってあまりないかもしれませんが、サブディレクトリにインストールしてしまった場合などに役立つかと思います。

• #wordpress
• #ワードプレス

WordPressでサイトを新規作成するときに注意している基本的な5つのこと[備忘録]

今回は私がWordPressを使用して、サイトを作成するときに注意している下記の5つを備忘録として記事にしたいと思います。

• #wordpress
• #ワードプレス