HTML/CSS 斜めに伸びる要素を実現するCSSアニメーション
こんにちは！今回は、CSSアニメーションを駆使して、斜め方向に伸びるオブジェクトを作成する方法をご紹介します。このアニメーションは、ユーザーの注目を引くデザインや動的なインタラクションに活用できます。初学者の方でも簡単に取り組めるように、コ...
HTML/CSS 
WordPress WordPressで絞り込み検索機能を実装する方法：セレクトボックスとチェックボックスの2例を紹介！
WordPressで絞り込み検索機能を実装する方法を紹介します。WordPressで絞り込み検索機能を実装するためには、検索フォームにフィールドを追加し、pre_get_postsアクションフックを使用して、検索結果をフィルタリングする必要...
WordPress WordPressでカテゴリ一覧に記事数を表示する方法：functions.phpを編集せずに任意のカテゴリにも対応！
WordPressのカテゴリ一覧ページに、記事数を表示する方法を紹介します。訪問者がサイト内のカテゴリを探しやすくするために、記事数をカテゴリ名の隣に表示することができます。これにより、どのカテゴリが最も人気があるかを素早く把握することがで...
WordPress ワードプレスで簡単に実現！記事一覧ページに連番を振る方法とは？｜初心者でも分かる手順解説
今回はワードプレスの一覧ページやカテゴリー内で記事に連番を振る方法についてご紹介します。複数の記事を書いていると、読者にとってはどの記事から読めばいいのか迷ってしまうことがありますよね。そこで、記事に連番を振ることで読者がスムーズに記事を辿...
WordPress 【WordPress】投稿記事をスライドで表示する方法
サイトのトップページなどにおすすめ記事や新着記事をスライドでかっこよくおしゃれに表示したい際に便利な投稿記事をスライドで表示する方法を紹介します。記事のサムネイル画像をいくつか並べて横にスッとスライドして切り替えが可能です。自動再生機能を使...
WordPress 【WordPress】一覧ページで記事をランダムに表示する
WordPressの一覧ページで記事をランダムに表示する方法を紹介します。通常のブログサイトだともしかしたらあまり出番はないかもしれませんが、固定の表示順にしたくない場合などに使用することがあります。メインループを使用する記事表示用ファイル...
HTML/CSS CSSで片側だけ画面幅いっぱいに広げる方法
CSSで片側だけ画面幅いっぱいに広げる方法を紹介します。片側だけ画面いっぱいに広げることでアクセントを付けるデザインはよく見るので、覚えておくと便利かもしれません。サンプルサンプルページHTML<section class="content...
jQuery 指定した位置までスクロールすると追従になるヘッダー
指定した位置までスクロールすると追従になるヘッダーの作り方を紹介します。比較的よく使うテクニックなので、覚えておいて損はないと思います。サンプルサンプルページHTML<header class="header"> <div class="h...
HTML/CSS CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタン
CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタンの作り方を紹介します。CSSのみでjsは未使用なので簡単・軽量です。サンプル<a href="/contact/" class="contact-btn slidei...
WordPress Contact Form 7で設置したフォームのformタグに任意のclassやidを設定する方法
「Contact Form 7」は、WordPressに簡単にフォームを設置できる便利なプラグインです。今回はContact Form 7で設置したフォームのformタグ部分に任意のclassやidを設定する方法を紹介します。classやi...
HTML/CSS 【CSS】背景色だけ透過させる方法 中に表示する画像やテキストはそのまま表示させたい
画像やテキストなどは通常表示で背景色だけを透過させる方法を紹介します。原因背景を透過させようとしたら画像やテキストなども全て透過されてしまいました。一体何が原因なのでしょうか。結論から言うとopacityを使用していたのが原因でした。背景だ...
Webサイト全般 サーチコンソールで所有権の確認を行ったらサブドメインだけアクセスができなくなった話
先日サブドメインを使用しているサイトだけアクセスができないという現象が発生しました。同じようなことで困っている方もいると思うので、原因と対処方法を記載しておきます。原因はDNSレコードサブドメインではない、メインのドメインのほうでは普通にア...
jQuery jQueryでスムーススクロール機能付きのトップに戻るボタンを作る
jQueryでスムーススクロール機能付きのトップに戻るボタンを作る方法を紹介します。コピペで簡単に実装できるサンプルを用意したので、自分好みにカスタマイズしてみてください。サンプルサンプルページHTML<div class="btn-top...
Webサイト全般 エックスサーバーの管理画面から.htaccessを編集する方法
エックスサーバーの管理画面から.htaccessを編集する方法を紹介します。エックスサーバーの管理画面から.htaccessを編集する手順1.エックスサーバーのサーバーパネルにログインする2.サーバーパネル画面にログインしたら、左側のメニュ...
Webサイト全般 .htaccessを編集してhttpからhttpsに自動的にリダイレクトさせる
.htaccessを編集してhttpからhttpsに自動的にリダイレクトさせる方法を紹介します。サイトをSSL化した際には必ず設定しておきましょう。.htaccessとは？そもそも.htaccessって何？って話ですよね。読み方はドットエイ...
WordPress WordPressのfaviconを管理画面から簡単に設定する方法
WordPressのfaviconを管理画面から簡単に設定する方法を紹介します。私も実は今まで普通にFTPでアップロードしたりしていたのですが、とても楽だったのでこれからは管理画面から設定すると思います。WordPressのfavicon設...
Cocoon Cocoonでカテゴリーのアイキャッチ画像を設定する方法と表示されない際の対処法
Cocoonテーマ使用時の、カテゴリーごとにアイキャッチ画像を設定する方法と、設定したアイキャッチ画像がうまく表示されない際の対処法を紹介します。カテゴリーのアイキャッチ画像設定手順WordPressの管理画面から投稿→カテゴリーを選択。カ...
オフコン 富士通オフコンPRIMERGY 6000 ASP 調査記録まとめ
仕事で富士通製のオフコンについて調べる機会があったのですが、ググってもほとんど情報が出てこず困ったため、個人的に調査した結果をコツコツまとめていきます。同じような境遇の方のヒントになれれば幸いです。注意点個人的に調べた内容をメモ的に記載して...
HTML/CSS 【CSS】追従ヘッダーの作り方
CSSのみで簡単に実装可能な追従ヘッダーの作り方を紹介します。ヘッダーにメニューを載せてスクロール時も追従させることにより、サイト内の他のページにもアクセスしてもらいやすくします。サンプルサンプルページHTML<header class="...
HTML/CSS 【CSS】ボタンを作る
CSSで作るボタンを紹介します。リンクを目立たせたい場合などに使用すると便利です。サンプルボタンサンプルHTML<a href="#" class="button-1">ボタンサンプル</a>CSS.button-1 { display: ...