ブログデザインリニューアル 2026年9月
ブログのデザインを再度リニューアルしました。
すべての記録
88件2026
-
-
足の指を骨折した
昨日の夜に椅子に座ってウトウトしていて、立ち上がって一歩踏み出したときに、なぜか足の中指が変な方向を向いていて、そこからバランスを崩し、指に全体重が乗ってしまった。あまりの痛さに10分くらい悶絶した後、ロキソニンを飲んでなんとか就寝。
-
ブログをAstroでリニューアル
気づけば1年半ぶりの更新になってしまいました。この度、ブログをAstroでリニューアルしました。
2024
-
HexoのテーマでTailwind CSSを利用する
HexoのテーマにTailwind CSSを利用する方法の覚え書き。
2023
-
AutoHotkeyでキーラベルからキーの名前に変換
気づけば今年は一度もブログを書けていなかったので、大晦日に悪あがきでブログを更新...。ここ数日、ノートテイキングアプリをObsidianへの移行作業をしており、Markdownで文章を書く環境が整いつつあるので、来年は頻度を上げて更新できるかもしれません。
2022
-
AutoHotkeyのGUIでボタンを隠す
AutoHotkeyのGUIでSubmitボタンを隠す方法。
-
ブログを書きたい欲
このブログを開設して3年ほど経ち、未だ満足に記事を書けていないが、ここ最近ブログを書きたい欲が高まっている。
-
AutoHotkeyでEclipseの左ペインにフォーカス
Eclipseはエディタ部分にフォーカスするショートカットキーがF12に割り当てられているが、プロジェクト・エクスプローラーなどが配置されている左側のペインにフォーカスするショートカットがデフォルトでは存在しない。
-
GsonでjsonのタイムスタンプをDate型に変換
以下のようなResultsetのgetTimestamp()で取得したようなタイムスタンプを含むjsonを、GsonでDate型のフィールドを持つオブジェクトに変換する。
-
SQLiteのSQL文メモ
タイムスタンプのカラム名にはcreatedatという名前をつけるという命名規約があるらしい。
-
AutoHotkeyでホームポジションから離れずにカーソルを移動
AutoHotkeyでホームポジションから指を離さずにカーソルを移動するショートカット。無変換キーとの組み合わせで文字編集が簡単になる。
-
AutoHotkeyでCapsLock(F13)とAltとjの組み合わせが特定のキーボードで動かない
ChangeKeyやレジストリの直接編集でCapsLockをF13に割り当てているとき、CapsLock(F13) + Alt + jの組み合わせが反応しないという事象に遭遇しました。
-
AutoHotkeyでWindows10をダークモードへ切り替える
Windows10はシステムレベルでのダークモードに対応していますが、 設定>個人用設定>色>カスタム>既定のアプリモードを選択します>ダーク
-
Cloudflare Pagesでビルド環境のタイムゾーンを変更
当ブログのホスティング先をGitHub PagesからCloudflare Pagesへ移行して、記事のパーマリンクを乱数ベースから日付時刻ベースへ変更したのですが、ローカル環境とCloudflareのタイムゾーンが違うせいでURLがずれてしまうので、Cloudflare Pag…
-
初めてのメカニカルキーボードにLogicool K835を買った感想
今までキーボードにこだわりがなく、LogicoolのK295という安い静音タイプのメンブレンキーボードを使っていました。
-
AutoHotkeyでウィンドウを最前面に固定+トースト通知
Windowsでウィンドウを最前面に固定する機能をAutoHotkeyで実現します。
-
AutoHotkeyでエクスプローラーの左側と右側にフォーカスする
Windowsエクスプローラーではナビゲーションウィンドウ（左ペイン:フォルダ一覧）とコンテンツウィンドウ（右ペイン:ファイルが表示される場所）を移動するショートカットが割り当てられておらず、キーボードで操作するのが大変です。これをAutoHotkeyで解決します。
-
AutoHotkeyでEscでアドレスバーからフォーカスを外す
Chrome等のブラウザでは、アドレスバーにフォーカスした後Escでアドレスバーを離れることができないので、それをAutoHotkeyで解決する方法を紹介します。
-
AutoHotkeyでブラウザのカーソルブラウジングを完全に無効化する
ChromeやBraveなどのブラウザには、カーソルブラウジングという機能が備わっており、F7キーで有効にすると、点滅するキャレットを使ってブラウザを操作できます。
2021
-
高解像度デイスプレイでEclipseのUIを大きくする
前回の更新から5ヶ月以上...もはや自分のブログの存在すら忘れていた...年末にかけて再始動していきたい。
-
Zoomで誤爆しないために確認すべき設定
Zoomでの授業や会議で誤爆しないためにチェックしておくべき設定項目のまとめ。
-
『超雑談力』を読んだ感想 ― 気持ちをやり取りするべし
{% amazon 4799325787 '超雑談力 人づきあいがラクになる 誰とでも信頼関係が築ける (五百田達成の話し方シリーズ) | 五百田 達成 |本 | 通販 | Amazon' %}
-
Tribit XSound Go (Bluetoothスピーカー) を2ヶ月使った感想
Tribit XSound Go Bluetooth スピーカー IPX7完全防水 24時間再生 16W Bluetooth5.0 TWS対応 低音強化
2020
-
ブログをNetlifyからGitHub Pagesへお引越し
今までNetlifyでホスティングしていたのをGitHub Pagesへ乗り換えました。作業時間は1～2時間ほどです。
-
Feedly・Inoreaderの購読ページのURLを生成
FeedlyとInoreaderの購読ページのURLを生成するツールです。ページ先ではログインなしでそれぞれの購読者数を確認することもできます。
-
旧愛生会病院HPをCSSアニメーションで再現するサンプル4種
サイケデリックで目の痛いデザインで有名な旧愛生会病院のホームページをCSSアニメーションで再現してみるサンプル。
-
HexoのショートコードでAmazonアソシエイトリンクを挿入
Hexoでショートコードを使ってAmazonの商品リンクを簡単に挿入する方法のメモ。
-
昔ながらの個人サイトを探せる検索エンジンを作った
昨今のトレンドブログしか出ない検索画面にうんざりしているので、Googleカスタム検索で昔ながらの個人サイト（訪問者カウンターやキリ番報告所があるようなサイト）を探せる検索エンジンを作ってみた。
-
RAREWAVES-JP(Amazonマーケットプレイス)でCDを買った
AmazonマーケットプレイスでRAREWAVES-JPという海外の会社からCDを買った。名前にJPがつくので国内に支社がありそうだが、ロンドンから届いた。
-
画像のtitle属性をキャプションとして利用する
下のサイトで紹介されているtitle属性をキャプションに変換するアイデアが素晴らしかったので、参考にさせていただいた。
-
記事内で使えるアラート表示のテンプレート3種
このブログの記事内で使っているアラート表示の装飾。ブログ記事作成に役立つ。
-
CSSアニメーションの開始位置をランダムにする
CSSアニメーションはロード直後に0%から開始するが、ページを開いていつも同じ場所から始まるのはつまらないのでJavaScriptで開始位置をランダムにしてみる。
-
CSS Gridでcodeブロックがある場合に横幅をはみ出してしまう現象の解決策
CSSのGridでレイアウトを組んでいて、グリッドアイテムにcodeブロックが含まれている場合に、横幅がGridの横幅をはみ出し制御できなくなる現象を解決する方法。
-
Gitで日付をコミットメッセージにして自動でリモートへプッシュする
Gitでステージングから、コミット、リモートまでの流れをPowerShellで自動化してみる。ゲームのセーブデータなどを保管するのに役立つ。
-
調和数列の文字サイズをCSS変数で再現
このブログの文字サイズはすべて調和数列に基づいて設定している。これについては下記のサイトで提言されているものを参考にした。
-
Twitterでユーザーのツイートを検索しやくするブックマークレット
Twitterの検索はfrom:ユーザー名とすれば特定のユーザーのツイートに限定したり、until:YYYY-MM-DDとすれば期間を指定したりできる。これらのコマンドを使いやすくするブックマークレットを作った。
-
リセットCSSで消え去ったselectのスタイルを元に戻す
リセットCSSといえば、destyle.cssとかnormalize.cssとかress.cssなどいろいろあります。
-
Hexoで記事本文を抜粋表示する
トップページなどで、記事タイトルの下に本文冒頭の数十文字が抜粋表示されているアレをHexoでも表示させる方法。
-
Hexoのカテゴリーページで親カテゴリーを配列で取得する
Hexoにはpage.categoryという変数が用意されていて、カテゴリーページでカテゴリーの名前を出せるのですが、カテゴリーを階層化させているときに、そのカテゴリーが属する親カテゴリーの名前やURLを出す変数がありません。
-
Hexoにテキストリンクのシェアボタンを設置する
Hexoのブログの記事下にシェアボタンを設置する方法。
-
Hexoで記事の属するカテゴリー名を表示する
Hexoでは記事の属するカテゴリー情報がpage.categoriesに格納されています。この変数からカテゴリー名とURLを取り出しリンクを表示させる方法のメモ。
-
PC版Twitterの右カラム(トレンド、おすすめユーザー)を消すCSS
Twitterは公式アカウントを情報収集目的で見るくらいで、他人の反応とかトレンドとか1ミリも興味ねえよ！って方向けの、PC版Twitterをカスタマイズする記事です。
-
複数のファイルを横断して文字列を一括で置き換えたい
複数のテキストファイル（バイナリファイルの反対の意）に含まれる文字列を他の文字列に一括で置き換えたい場面って偶にありますよね。
-
pointer-events:noneするとcursorプロパティが効かないのを回避する
このブログのトップページのページャーで、disabledになっているボタンにhoverしたとき、cursorをnot-allowedにしようとしたらうまく適用されず、気になって調べたことのメモ。
-
Hexoのtitleタグを最適化する
ブログのtitleタグをどのページとも被らないように設定するのは、カテゴリー・タグページやそれぞれの2ページ目などを加味していくと、意外に大変だったりします。
-
JavaScriptでCSSを動的にセットする方法2種 (styleタグ、style属性)
CSSを動的にセットしたいときに便利なJavaScriptの関数の雛形です。
-
Hexoの月別アーカイブをプルダウン式(select要素)にする
Hexoでプルダウン式の月別アーカイブをサイドバーに置く方法。
-
uBlacklist用のリスト購読URLを公開しました
Google Chromeに「uBlacklist」という拡張機能があり、指定したドメインのサイトをGoogleの検索結果から排除することができます。
-
highlight.jsのスタイルをダークモードに応じて切り替える
ページ上のコードにシンタックスハイライトを適用するのに、highlight.jsというプラグインがあります。
-
Hexoのmarkdon-itが脚注で出力するHTMLを整える
Hexoのプラグイン、hexo-renderer-markdown-itでMarkdownをレンダリングした際、脚注の部分に下のようなHTMLがはき出されます。
-
Hexoでmarkdown-itを導入して記事内に脚注を書く
HexoでMarkdownについていろいろ調べてみると、デフォルトで入っているhexo-renderer-markedの代わりにhexo-renderer-markdown-itを導入しているブログが多いようなんですね。
-
40年前と現在の航空写真を比較できるサービスでタイムスリップしてみる
新型コロナウイルスによる外出自粛が続いていますが、そんな中自宅でのおすすめの過ごし方のご提案。
-
Hexoでパンくずリストの構造化マークアップをする
(2020-07-30) コードを書き直しました。こちらをご覧ください。
-
Hexoでプラグインを使わずパンくずリストを表示する
(2020-07-30) コードを書き直しました。こちらをご覧ください。
-
Google Adsenseが読み込まれる前にローディングアニメーションを表示する
Google Adsenseは広告が表示されるまでに時間がかかります。空白の部分にいきなり広告が現れるとなんかびっくりするというか...
-
スマホ表示時のGoogle Adsenseで左右に余白(padding)を適用する
Google Adsenseでレスポンシブタイプの広告ユニットは、デフォルトではスマホ版で表示した際に、横幅が100%になります。
-
サイトに適用しているWebフォントを画像編集ソフトGIMPでSVG化する
サイトのロゴやサイドバーのタイトルなどに、Google FontsでWebフォントを読み込み文字を装飾することがあるかと思います。
-
SE215のリケーブルにはYinyooのYYX4849がおすすめ
普段私はイヤホンに、SHUREのSE215というイヤホンをかれこれ5年愛用しているのですが、ここ１年ほど右耳の耳掛け部分が断線しかかっていて、とても煩わしかったのです。
-
CSS変数とJavaScriptでページを開く度に色をランダムに変える
サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。
-
クリックで開閉するドロップダウンメニューをCSSとJavaScriptで作ってみよう
目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。
-
aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる
最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。
-
HexoのURL関連のテンプレート変数まとめ
HexoにはURL出力関連の変数がたくさん用意されているのですが、種類がたくさんあってあまりにも煩雑なので整理してみます。
-
OSでもWebサイト側でも切り替えられるダークモードを実装する
昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのときのメモ。
-
HexoでGitとNetlifyを使っていても記事の更新日を表示できるようにする
Hexoで作成したブログで、記事の公開日だけでなく更新日も表示できるようにする方法のメモ。Netlifyで公開したときに更新日がおかしくなる問題も解決します。
-
出来るだけメディアクエリを書かずにレスポンシブに対応させるためのTips
サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。
-
2行以上の長いタイトルでも１行に収まるように文字サイズをJavaScriptで調整する
記事タイトルが長くなって折り返され、２行になってしまっている...だけど、文字サイズを小さくしてでも１行にきっちり収めたい...！！
-
Hexoのカテゴリーリストにcurrentクラスを付けて現在地をハイライト表示する
HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。
-
開いているページの構造化マークアップを簡単にチェックするブックマークレット
Googleが提供しているツールに、構造化データ テストツールというのがあり、URLを入力するだけでサイトの構造化マークアップを簡単にチェックすることができます。
-
Hexoで画像にloading="lazy"を自動で追加して画像を遅延読み込みする
Chromeでいよいよ画像の遅延読み込みがネイティブでサポートされました。
-
クリックで画像を拡大するプラグイン(Lightbox)をjQueryなしで自作してみる
Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが...。
-
30分で完了！お名前.comのドメインをGoogle Domainsへ移管する
このブログのドメインはお名前.comで取得していたのですが、先日ドメインを更新しようとしたら、netドメインが1,480円（1年）へ値上がりしていました。
-
自分流コンマのつく大きい数字の簡単な読み方まとめ
以前からコンマのつく大きい数字を読むのが苦手で、そのような数字を目の当たりにしたときには、いつも一の位から一、十、百、千、...と数えて読んでいました。
-
コンマのつく大きい数字を読む練習ツール
ブラウザ上でケタの大きい数字を読む練習ができるツールです。10万から100億までの数字をランダムで表示します。
-
Hexoで記事ごとに適用するCSSやJSファイルをFront-matterから自動で読み込む
Hexoでブログを書いていると、記事ごとにCSSやJavaScriptを書いて読み込みたいと思うことがよくあります。
-
Netlifyは大文字URLが使えない件とHexoを運用する上で確認すべき設定
このブログはNetlifyという静的サイトホスティングサービスを使って運用しているのですが、サイドバーに設置しているカテゴリー一覧の英字を含んだカテゴリーをクリックしたとき、毎回301リダイレクトが挟まることに気づきました。
-
【明るい廃墟】奇跡の再生を遂げたピエリ守山の過去の寂れた姿【写真集】
.jpg)
-
contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる
HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォームもこの属性が使われています。
2019
-
CSSだけで文章を折りたたむ（続きを読む）その1
今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。
-
Hexoのアーカイブページの設定まとめ
Hexoのアーカイブページの設定方法のまとめです。アーカイブページはhexo-generator-archiveというプラグインで生成されています。
-
AndroidのMarkdownエディタをいろいろ試してみる
静的サイトジェネレーターだとWordPressのように管理画面がないので、スマホからは更新できないのですが、外出先でたまに記事を書きたいことがあるので、スマホでも記事を書けるように、Androidのテキストエディタを比較してみます。
-
CSSとChrome拡張機能でGoogle Adsenseの自クリックを防止する【全サイト対応】
Google Adsenseは自分で運営しているサイトに貼り付けた広告をクリックすることは規約で禁止しており、クリックするとペナルティを受けてしまいます。
-
CSSのみでクリックで画像を拡大する（Lightboxもどき）
画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなものです。
-
HTMLだけでコンテンツを開閉できるdetailsタグを試してみる
タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。
-
【Swiper.js】縦横比を保ったまま横幅いっぱいのスライダーをつくる
Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。
-
Netlify Managed DNSでGoogle Search Consoleの認証をする
Google Search Consoleではドメイン単位でサイトを追加する際にDNSにTXTレコードを追加して、ドメインの所有権を確認する必要があります。
-
CSSアニメーションだけでタイマーを作ってみた
CSSの限界に挑戦ということで、CSS3のアニメーションとCSS変数（カスタムプロパティ）を駆使して、キッチンタイマーを作ってみました。
2017
-
【簡単】ドクターグリップで痛シャーペンを作ろう！
今回はドクターグリップで痛シャーペンを作る方法を紹介します。みんなで痛シャーペンを作って、新学期に自分のアイデンティティをアピールしよう！！
-
記事内要素のデザイン確認用サンプル
記事本文で使う要素を一通り並べたデザイン確認用のサンプルです。見出しの階層、段落の余白、リスト、表、コードブロックなどの見た目を、この1ページで確認できるようにしています。