Google Adsenseが読み込まれる前にローディングアニメーションを表示する
Google Adsenseは広告が表示されるまでに時間がかかります。空白の部分にいきなり広告が現れるとなんかびっくりするというか...
カテゴリー 67件
技術メモ
-
-
スマホ表示時のGoogle Adsenseで左右に余白(padding)を適用する
Google Adsenseでレスポンシブタイプの広告ユニットは、デフォルトではスマホ版で表示した際に、横幅が100%になります。
-
サイトに適用しているWebフォントを画像編集ソフトGIMPでSVG化する
サイトのロゴやサイドバーのタイトルなどに、Google FontsでWebフォントを読み込み文字を装飾することがあるかと思います。
-
CSS変数とJavaScriptでページを開く度に色をランダムに変える
サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。
-
クリックで開閉するドロップダウンメニューをCSSとJavaScriptで作ってみよう
目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。
-
aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる
最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。
-
HexoのURL関連のテンプレート変数まとめ
HexoにはURL出力関連の変数がたくさん用意されているのですが、種類がたくさんあってあまりにも煩雑なので整理してみます。
-
OSでもWebサイト側でも切り替えられるダークモードを実装する
昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのときのメモ。
-
HexoでGitとNetlifyを使っていても記事の更新日を表示できるようにする
Hexoで作成したブログで、記事の公開日だけでなく更新日も表示できるようにする方法のメモ。Netlifyで公開したときに更新日がおかしくなる問題も解決します。
-
出来るだけメディアクエリを書かずにレスポンシブに対応させるためのTips
サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。