Hexoでショートコードを使ってAmazonの商品リンクを簡単に挿入する方法のメモ。 以前から収益以前にただAmazonの商品の画像をパク…お借りしたいと思っていて、Amazonアソシエイ...

CSSアニメーションはロード直後に0%から開始するが、ページを開いていつも同じ場所から始まるのはつまらないのでJavaScriptで開始位置をランダムにしてみる。 デモ15秒周期でグラデー...

Twitterの検索はfrom:ユーザー名とすれば特定のユーザーのツイートに限定したり、until:YYYY-MM-DDとすれば期間を指定したりできる。これらのコマンドを使いやすくするブックマー...

Hexoにはpage.categoryという変数が用意されていて、カテゴリーページでカテゴリーの名前を出せるのですが、カテゴリーを階層化させているときに、そのカテゴリーが属する親カテゴリーの名前...

複数のテキストファイル（バイナリファイルの反対の意）に含まれる文字列を他の文字列に一括で置き換えたい場面って偶にありますよね。 自分の場合は、過去に書いたブログ記事のとあるソースを修正したく...

CSSを動的にセットしたいときに便利なJavaScriptの関数の雛形です。 動的にセットしたいという際には、<style>タグの中に書いたCSSをhead間に差し込みたいときと...

サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。 半分お遊びですね。 デ...

目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。 今回はボタンクリックで開閉するシンプルなドロップダウンメニューを、HTML...

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

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

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

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

Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。 このライブラリで縦横比を保ったままウインドウ幅いっぱい + レシスポンシブ対応のスライドをつくる方法のメモ。 ...