jQuery 指定した位置までスクロールすると追従になるヘッダー
指定した位置までスクロールすると追従になるヘッダーの作り方を紹介します。比較的よく使うテクニックなので、覚えておいて損はないと思います。サンプルサンプルページHTML<header class="header"> <div class="h...
jQuery 
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: ...
HTML/CSS 【CSS】吹き出しを作る
CSSで吹き出しを作る方法を紹介します。キャラクター等の画像と組み合わせることによって会話風にしたり、目立たせたい箇所に使用するとちょっとしたアクセントになります。サンプル 吹き出しのサンプルです。吹き出しのサンプルです。吹き出しのサンプル...
HTML/CSS 【CSS】文字にマーカー風のラインを引く
CSSで文字にマーカー風のラインを引く方法を紹介します。ブログ等の文章内の強調したい箇所に使用すると、アクセントになると思います。サンプルマーカーのサンプルです。.marker { background:linear-gradient(tr...
HTML/CSS 【CSS】文字を縦書きにする方法
CSSで文字を縦書きにする方法を紹介します。見やすさを考えると、基本的にWebサイトの文章は横書きで作ると思うので、あまり使用頻度は高くないかもしれませんが、見出し等にアクセントを付けたいときなどに使用することがあります。サンプルCSSで文...
HTML/CSS 【CSS】くの字型アイコンの作り方
CSSでくの字型アイコンを作る方法を紹介します。矢印の代わりなど、何かと使う機会が多いです。右向きくの字型アイコン<span class="arrow-right"></span>.arrow-right { display: block;...
HTML/CSS 【CSS】×( バツ)マークを作る
CSSで×( バツ)マークを作る方法を紹介します。モーダルやハンバーガーメニューの閉じるボタンなどで使用することが多いと思います。サンプル<div class="cross-1"></div>.cross-1 { position: rel...
HTML/CSS 【CSS】三角形を作る方法
CSSで三角形を作る方法を紹介します。ちょっとしたアイコン等、何かと使用する機会は多いと思います。サンプル1 上向きHTML<div class="triangle1"></div>CSS.triangle1 { width: 0; hei...
HTML/CSS 【CSS】丸を作る方法
CSSで丸を作る方法を紹介します。中に数字を入れて丸数字にしたり、文字を入れたものをいくつか並べて図のようにしたりと、何かと使用する機会があります。サンプルコードHTML<div class="circle"></div>CSS.circl...