HexoにはURL出力関連の変数がたくさん用意されているのですが、種類がたくさんあってあまりにも煩雑なので整理してみます。 変数を一度に出力してみる<div> config....

昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのと...

Hexoで作成したブログで、記事の公開日だけでなく更新日も表示できるようにする方法のメモ。Netlifyで公開したときに更新日がおかしくなる問題も解決します。 Gitで管理したときの問題H...

サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。 しかしメディアクエリを書くのは、たとえSassやStylusのmixinを...

記事タイトルが長くなって折り返され、２行になってしまっている…だけど、文字サイズを小さくしてでも１行にきっちり収めたい…！！Webサイトをデザインしているときに、そんな場面に遭遇したことはありま...

HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。 &lt...

Googleが提供しているツールに、構造化データ テストツールというのがあり、URLを入力するだけでサイトの構造化マークアップを簡単にチェックすることができます。 そのままでも十分お手軽です...

Chromeでいよいよ画像の遅延読み込みがネイティブでサポートされました。 imgタグにloading=”lazy”属性を指定するだけで、ライブラリなどを使わずとも画像が遅延読み込...

Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが…。 というのはさておき、このブログで画像拡大プラグインを導入するにあたり、Photoswipeが候補に挙がったので...

このブログのドメインはお名前.comで取得していたのですが、先日ドメインを更新しようとしたら、netドメインが1,480円（1年）へ値上がりしていました。 最安値でドメインを取得できるという...

以前からコンマのつく大きい数字を読むのが苦手で、そのような数字を目の当たりにしたときには、いつも一の位から一、十、百、千、…と数えて読んでいました。 そんな自分が、３ケタ区切りの数字を簡単に...

ブラウザ上でケタの大きい数字を読む練習ができるツールです。10万から100億までの数字をランダムで表示します。 答えをみる .number-disp...

Hexoでブログを書いていると、記事ごとにCSSやJavaScriptを書いて読み込みたいと思うことがよくあります。 しかし記事中にインラインで記述するとごちゃごちゃになるので、style....

このブログはNetlifyという静的サイトホスティングサービスを使って運用しているのですが、サイドバーに設置しているカテゴリー一覧の英字を含んだカテゴリーをクリックしたとき、毎回301リダイレク...

今更ではありますが、パソコンの中の写真を整理していたら面白いのが出てきたので。滋賀県は琵琶湖大橋の東詰に位置するショッピングモール、ピエリ守山をご存知ですか。 現在はたくさんの人で賑わうシ...

HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォ...

今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。 CSSだけでクリックイベントを扱うには、主にtargetを使う方法とチェックボックスを使う方法がありま...

Hexoのアーカイブページの設定方法のまとめです。アーカイブページはhexo-generator-archiveというプラグインで生成されています。 hexo-generator-archi...

スマホでブログを書きたい静的サイトジェネレーターだとWordPressのように管理画面がないので、スマホからは更新できないのですが、外出先でたまに記事を書きたいことがあるので、スマホでも記事を書...

Google Adsenseは自分で運営しているサイトに貼り付けた広告をクリックすることは規約で禁止しており、クリックするとペナルティを受けてしまいます。 自分のサイトは管理をしていく上で頻...