「CSSだけで特定要素内でのみ画面にFIXさせたい」…を応用して、FIXするボタンをつけてみる

よく見かける、色々な条件を指定して検索する条件検索のフォーム。
指定できる項目が多く、検索ボタンがページの下の方になってしまって、いちいち下までスクロールしないといけない事に…

ページの下までスクロールしなくても、検索ボタンがわかるように出来ないかとと考えていたところ、
前回「CSSだけで特定要素内でのみ画面にFIXさせたい」の記事でご紹介した、特定要素内だけでFIXさせるCSSを応用して、検索用フォームの個所にだけ、うまい事ボタンを表示できるのでは!
と思い至った次第です。

無論、JavaScriptは使わず、CSSだけで実現しちゃいます。

“「CSSだけで特定要素内でのみ画面にFIXさせたい」…を応用して、FIXするボタンをつけてみる” の続きを読む

CSSだけで特定要素内でのみ画面にFIXさせたい

繁忙期につき、ご無沙汰しておりましたが、またブログを更新していきたいと思います!m(_ _)m

そんな繁忙期中に、サイドナビをFIXさせたい要望がありました…が、フッターの領域にはFIXナビを被らせたくない。

↓こんなイメージ(Sideの領域内のみ、画面FIXさせたい)

JavaScriptを使えば、まあ出来る事ではあるのですが、どうせならCSSだけでお手軽に出来ないかと調べてみました。

結構簡単に実装出来ちゃいますので、なかなかおススメですよ! “CSSだけで特定要素内でのみ画面にFIXさせたい” の続きを読む

CSSで画像をトリミングして表示したい

管理画面で画像を登録して、システムで吐き出す。
こういう形を取っていると、どうしても画像のサイズにばらつきが出やすいです。

SNSなどで、投稿時に編集してトリミング…できればいいのですが、予算的にもそういった機能の追加が厳しかったり。

CSSで何とか出来ないものかと調べていたら、どうやら方法があるようでしたので、ご紹介します!

“CSSで画像をトリミングして表示したい” の続きを読む

iPhoneで見たら、このフォントだけ大きくない…?となった時は

レスポンシブデザインでサイトを構築する事もすっかり多くなっている今日この頃です。
構築したサイトをiPhoneで見てみると…

「あれ、ここだけフォントサイズ大きくない?」

といった事がちょくちょくあります。

“iPhoneで見たら、このフォントだけ大きくない…?となった時は” の続きを読む

ワードプレスのSSL対応(リダイレクトさせたい時は…)

7月24日予定ののアップデート以降、google ChromeがSSL対応していないサイトに対して警告を出すようになりますね。

非SSLサイトだと、ブラウザ画面上部のURLバーに「保護されていません」とはっきり表示されてしまいます。

レンタルサーバーでも無料SSL利用可能なサーバーも増えてきて、一気にSSL化が進んでいるようです。

そんな流れの中、以前ワードプレスで作成したサイトでも、SSL対応を行ったりしているのですが、WPサイトの場合、htaccessを使ってリダイレクトをかけようとすると、中ページがうまくリダイレクトしてくれない場合があります。

“ワードプレスのSSL対応(リダイレクトさせたい時は…)” の続きを読む

モバイルファーストインデックス

Googleが発表したモバイルファーストインデックス(MFI)とはこれまで、パソコンサイトを軸にインデックスされていたものが、モバイルサイトをメインにインデックスし、検索に表示させるというもの。
ウェブマスター向け公式ブログはこちら

https://webmaster-ja.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html

つまり、簡単に説明すると、
パソコン対応しかしていないWebサイトは、検索に非常に不利にはたらくというもの。

これは、スマートフォンやタブレット端末から閲覧するユーザーが
パソコンから検索する比率を超えたのが対応の原因です。

まだ、スマートフォン対応されていない企業様や、ショップサイトなどは対応をお考えください。
ちなみに、以下のサイトでモバイルに適しているかが判別できます。

モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly