Google Adsenseでレスポンシブタイプの広告ユニットは、デフォルトではスマホ版で表示した際に、横幅が100%になります。 だったら<div>で囲ってpaddingを指定...
サイトのロゴやサイドバーのタイトルなどに、Google FontsでWebフォントを読み込み文字を装飾することがあるかと思います。 しかし、そのフォントを一箇所でしか使わないという場合は、S...
サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。 半分お遊びですね。 デ...
目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。 今回はボタンクリックで開閉するシンプルなドロップダウンメニューを、HTML...
最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。 よく見るブログカードは、サムネイルや投稿日時などのメタデータが盛り込まれていて...
HexoにはURL出力関連の変数がたくさん用意されているのですが、種類がたくさんあってあまりにも煩雑なので整理してみます。 変数を一度に出力してみる<div> config....
昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのと...
Hexoで作成したブログで、記事の公開日だけでなく更新日も表示できるようにする方法のメモ。Netlifyで公開したときに更新日がおかしくなる問題も解決します。 Gitで管理したときの問題H...
サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。 しかしメディアクエリを書くのは、たとえSassやStylusのmixinを...
記事タイトルが長くなって折り返され、２行になってしまっている…だけど、文字サイズを小さくしてでも１行にきっちり収めたい…！！Webサイトをデザインしているときに、そんな場面に遭遇したことはありま...
HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。 <...
Googleが提供しているツールに、構造化データ テストツールというのがあり、URLを入力するだけでサイトの構造化マークアップを簡単にチェックすることができます。 そのままでも十分お手軽です...
Chromeでいよいよ画像の遅延読み込みがネイティブでサポートされました。 imgタグにloading=”lazy”属性を指定するだけで、ライブラリなどを使わずとも画像が遅延読み込...
Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが…。 というのはさておき、このブログで画像拡大プラグインを導入するにあたり、Photoswipeが候補に挙がったので...
このブログのドメインはお名前.comで取得していたのですが、先日ドメインを更新しようとしたら、netドメインが1,480円（1年）へ値上がりしていました。 最安値でドメインを取得できるという...
Hexoでブログを書いていると、記事ごとにCSSやJavaScriptを書いて読み込みたいと思うことがよくあります。 しかし記事中にインラインで記述するとごちゃごちゃになるので、style....
このブログはNetlifyという静的サイトホスティングサービスを使って運用しているのですが、サイドバーに設置しているカテゴリー一覧の英字を含んだカテゴリーをクリックしたとき、毎回301リダイレク...
HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォ...
今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。 CSSだけでクリックイベントを扱うには、主にtargetを使う方法とチェックボックスを使う方法がありま...
Hexoのアーカイブページの設定方法のまとめです。アーカイブページはhexo-generator-archiveというプラグインで生成されています。 hexo-generator-archi...