レスポンシブでもできる！？画像にマップつけて【ImageMap】リンク飛ばす【クリッカブルマップ】

画像内で、「この画像のこの部分をクリックしたらリンクに飛ばしたい」ってことはありませんか？

今回はレスポンシブでもできるクリッカブルマップについてご紹介します。

レスポンシブ広告ユニットで横幅いっぱいになる全幅表示が気に入らないので修正しました

AdSenseでレスポンシブ広告を選択するのが推奨とされているかと思います。

ただその広告を選択するとどうしても画面いっぱい横幅が広がって広告が占める範囲があまりにも大きいのではないか…と思い今回はそちらのサイズを修正しました。

Google Search Consoleからメール。「モバイルファーストインデックスが有効」とは？

Googleから謎のメールが届きました。

なんか注意とか改善が必要かと思ってめっちゃ怖かったけど、どうやらそういうわけじゃなかったらしいので、詳細をお伝えしますね。

【簡単】ついにはてなブログ独自ドメインを、HTTPSに変更しました

ずっと対応しないかなーと思っていながら、対応になった際にも結局しばらく躊躇って何もしていませんでしたが…

ついにはてなブログをHTTPSに変更しました。

ファビコン・ウェブクリップアイコンを一瞬で作成して簡単に設置する技

ファビコンの設定には様々諸説ありますが私は最低限のことしかしていません。。

なぜならあまり困らなかったから。。（そんなことでいいのか…）

要素が下のリンクを適応させクリックできるようにする方法

下の要素がリンクで、その上に画像をあわせたりした場合などに、リンクが効かなくなる問題を解消します。

 
最近私が躓いた部分なのですが、あまりにも簡単に解決できて驚いたので、もし、、、万が一・・・悩んでる方がいたらぜひお試しください。 

PNG画像を簡単に圧縮して軽くするにはOptimizillaを使おう！

PNG画像ってめっちゃきれいですよね。

フラットデザインが普及して、よりPNG画像を使う機会は増えたのではないでしょうか。

でも、画像が綺麗な分、重くなってしまいがち。

今回はそんなPNG画像を簡単に軽くする方法をご紹介します！

スマホでスクロールがうまくできない！！対処法は簡単一行追加するだけ！

スマホサイトを作成していると、意外とよく起こるのが・・・


「スクロールがうまくできない！！」


という問題。
今回はこの対処法をご紹介します。一瞬で終わりますが…。

ブラウザによってフォントサイズが変わる問題の対処法

またWEBの記事です。
レスポンシブ関連で最近は書いてきましたが、備忘録としてスマホ含めてたまにあったフォントサイズへの対処法をご紹介します。

名作「宇宙よりも遠い場所」見た【よりもいアニメ感想】

父親がいつの間にかアニメ好きになっててすごいおすすめされたから見た。

そしたらすごい面白かった。

AdSenseで自動広告をやめたら収益がグンと上がった。

正確に言えば、自動広告配信してない頃に戻った、という感じでしょうか…。

よく、自動広告で収益が上がるみたいなお話を聞いたので、私の場合のお話をしますね。

スマホとPCで要素の表示順番を入れ替えるには？flexbox「order」を使ってレスポンシブデザインに最適化！

レスポンシブデザインを簡単に説明すると、１つのHTMLを使って、スマホ版やPC版など画面サイズによってデザインを切り替えることを指します。


ですので、レスポンシブデザインで制作していく上で
HTMLの構造は変えたくないけど、見栄えの表示したい順番は変えたい・・・
ということが起こります。


今回は１つのHTMLで、表示順を入れ替える方法をご紹介します。

SVG画像を活用して、どんなデバイスでも綺麗に画像を表示！ベクター画像でレスポンシブ対応

前回ご紹介した記事では、アイコン作るならpng画像よりWEBアイコンフォントだ！というご紹介をしました。
www.misallychan.com


ただ、png画像の代わりにもう一つ、レスポンシブでも活用できる画像があります。
それが、SVG画像です。

WEBフォントを使って、どんなデバイスでも綺麗にアイコンを表示！？レスポンシブで使える！

最近はずっとレスポンシブについて書いていますね。

レスポンシブサイトの基本設定！？メディアクエリでブレイクポイントを作って簡単スマホ対応！ - misallychan.comwww.misallychan.com
レスポンシブで%指定したいけど…３分割は割り切れない問題を解決するclac()！！ - misallychan.comwww.misallychan.com
レスポンシブサイトで、PCだけ表示・スマホだけ表示ってできるの？【PCとスマホで改行位置や画像を切替える方法】 - misallychan.comwww.misallychan.com
レスポンシブでも使える！「clearfix」と「box-sizing」style.cssやcommon.css、reset.cssやnormalize.cssなどに追加したい初期設定 - misallychan.comwww.misallychan.com

今回ご紹介するのはアイコンのWEBフォントです！！
わざわざ画像でアイコンを作らなくても、WEBフォントなら管理も楽ちん！
しかも大きさも気にしなくて良いので、レスポンシブデザインにも最適です。

レスポンシブでも使える！「clearfix」と「box-sizing」style.cssやcommon.css、reset.cssやnormalize.cssなどに追加したい初期設定

最近はレスポンシブデザインについて書いていましたね！！









今回はそんなレスポンシブデザインでも役立つ初期設定をご紹介します。