人気記事一覧

以前に以下の記事で「特定のページごとに背景色を変更する方法」を解説しました。 しかし、中には 「ページごと」っていう細かい括りじゃなくて、「固定ページ」、「投稿ページ」って感じでもっと大きな枠ごとに設定したいんだよな という方もいらっしゃる...

Web制作学習シリーズの第3回目です！ 今回は、本格的なWebサイトの完成に向けて、ナビゲーションメニューを追加します！ホバー効果でインタラクティブな体験を提供しつつ、Flexboxによる初めての横並び実装を体験してみましょう。 前回（第2回）の記事を完...

この記事ではHTMLへのCSS読み込み方法を「３つ」解説していきます！  この記事でわかること CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み） CSSをHTMLファイルに直接書き込む方法 各読み込み方法のメリット・デメリット CSSとは？ CS...

現在のページのカテゴリーに紐づいたタグ一覧を表示したいけど方法がわからない……！ 今回はこのようなお悩みをお持ちの方に向けて WordPressで特定ページのカテゴリーに紐づくすべてのタグ一覧を出力する方法 をご紹介します。 ページ種別に関わらずすべて...

SWELLでは投稿ページのタイトルとアイキャッチ画像の並び順がデフォルトで決まっています。（タイトル→アイキャッチの順番） しかし、SWELLはWordPressテーマ使用数No.1を誇っているだけあり、「デザインの差別化」を図りたいと考える方もいらっしゃるかと...

WordPressを使用しているとログイン画面を開く機会がちょこちょこあるかと思います。 そんな中、 （見た目にちょっと飽きてきたな……） このように感じたことはないでしょうか。 今回はそのような方のために WordPressのログイン画面の見た目をCSSでカスタ...

Web制作をしていると実装を求められることがある「ページトップへ戻るボタン」 今回はそのソースコードをコピペ可能な形で丸っとご紹介します。   この記事で紹介する「ページトップへ戻るボタン」 常に画面の右下に表示されている 一定量スクロールすると...

Webサイトのアイコン要素を魅力的でインタラクティブにするアイコンアニメーションを5カテゴリ・26種類完全網羅！ 各カテゴリから厳選した代表的なアニメーションをCodePenデモ付きで紹介し、詳細な実装方法は各専門記事で詳しく解説しています。 アイコン...

テキストが動くボタンホバーアニメーションを実装したい…… テキストに魅力的な効果を与えたい…… 今回はこのようなお悩みをお持ちの方へ向けて Web制作において人気の高いアニメーション効果テキスト系ボタンホバーアニメーション をご紹介します。 7種類の...

お問い合わせフォームのコーディングするの大変だな…… パーツだけサクッとコピーして使いたいな…… このようなお悩みにお応えするため、Webサイトのフォーム作成ですぐご活用いただけるレイアウトパターンをご紹介！   紹介するフォーム要素 テキストフォー...