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

CSSだけで流れるテキストを実装してみた

その昔…「marquee」というHTMLがありました。
このタグを使うと、さながら電光掲示板のように、流れるテキストを実装できたのですが。

このタグは「Internet Explorer」の独自要素で、現在は非推奨のタグです。
HTML5では廃止されゆくタグなのですが、流れるテキストはたまに要望があります。

JSでもありますけど、今回はこれもCSSで実装してみました。
CSS3は便利なのです。

“CSSだけで流れるテキストを実装してみた” の続きを読む