2020年

54件

2020.11.29
ブログをNetlifyからGitHub Pagesへお引越し

今までNetlifyでホスティングしていたのをGitHub Pagesへ乗り換えました。作業時間は1～2時間ほどです。
2020.11.19
Feedly・Inoreaderの購読ページのURLを生成

FeedlyとInoreaderの購読ページのURLを生成するツールです。ページ先ではログインなしでそれぞれの購読者数を確認することもできます。
2020.11.18
旧愛生会病院HPをCSSアニメーションで再現するサンプル4種

サイケデリックで目の痛いデザインで有名な旧愛生会病院のホームページをCSSアニメーションで再現してみるサンプル。
2020.11.15
HexoのショートコードでAmazonアソシエイトリンクを挿入

Hexoでショートコードを使ってAmazonの商品リンクを簡単に挿入する方法のメモ。
2020.11.13
昔ながらの個人サイトを探せる検索エンジンを作った

昨今のトレンドブログしか出ない検索画面にうんざりしているので、Googleカスタム検索で昔ながらの個人サイト（訪問者カウンターやキリ番報告所があるようなサイト）を探せる検索エンジンを作ってみた。
2020.11.11
RAREWAVES-JP(Amazonマーケットプレイス)でCDを買った

AmazonマーケットプレイスでRAREWAVES-JPという海外の会社からCDを買った。名前にJPがつくので国内に支社がありそうだが、ロンドンから届いた。
2020.11.09
画像のtitle属性をキャプションとして利用する

下のサイトで紹介されているtitle属性をキャプションに変換するアイデアが素晴らしかったので、参考にさせていただいた。
2020.11.09
記事内で使えるアラート表示のテンプレート3種

このブログの記事内で使っているアラート表示の装飾。ブログ記事作成に役立つ。
2020.11.08
CSSアニメーションの開始位置をランダムにする

CSSアニメーションはロード直後に0%から開始するが、ページを開いていつも同じ場所から始まるのはつまらないのでJavaScriptで開始位置をランダムにしてみる。
2020.11.08
CSS Gridでcodeブロックがある場合に横幅をはみ出してしまう現象の解決策

CSSのGridでレイアウトを組んでいて、グリッドアイテムにcodeブロックが含まれている場合に、横幅がGridの横幅をはみ出し制御できなくなる現象を解決する方法。
2020.10.08
Gitで日付をコミットメッセージにして自動でリモートへプッシュする

Gitでステージングから、コミット、リモートまでの流れをPowerShellで自動化してみる。ゲームのセーブデータなどを保管するのに役立つ。
2020.09.06
調和数列の文字サイズをCSS変数で再現

このブログの文字サイズはすべて調和数列に基づいて設定している。これについては下記のサイトで提言されているものを参考にした。
2020.09.06
Twitterでユーザーのツイートを検索しやくするブックマークレット

Twitterの検索はfrom:ユーザー名とすれば特定のユーザーのツイートに限定したり、until:YYYY-MM-DDとすれば期間を指定したりできる。これらのコマンドを使いやすくするブックマークレットを作った。
2020.08.30
リセットCSSで消え去ったselectのスタイルを元に戻す

リセットCSSといえば、destyle.cssとかnormalize.cssとかress.cssなどいろいろあります。
2020.08.26
Hexoで記事本文を抜粋表示する

トップページなどで、記事タイトルの下に本文冒頭の数十文字が抜粋表示されているアレをHexoでも表示させる方法。
2020.07.30
Hexoのカテゴリーページで親カテゴリーを配列で取得する

Hexoにはpage.categoryという変数が用意されていて、カテゴリーページでカテゴリーの名前を出せるのですが、カテゴリーを階層化させているときに、そのカテゴリーが属する親カテゴリーの名前やURLを出す変数がありません。
2020.07.24
Hexoにテキストリンクのシェアボタンを設置する

Hexoのブログの記事下にシェアボタンを設置する方法。
2020.07.16
Hexoで記事の属するカテゴリー名を表示する

Hexoでは記事の属するカテゴリー情報がpage.categoriesに格納されています。この変数からカテゴリー名とURLを取り出しリンクを表示させる方法のメモ。
2020.07.15
PC版Twitterの右カラム(トレンド、おすすめユーザー)を消すCSS

Twitterは公式アカウントを情報収集目的で見るくらいで、他人の反応とかトレンドとか1ミリも興味ねえよ！って方向けの、PC版Twitterをカスタマイズする記事です。
2020.07.10
複数のファイルを横断して文字列を一括で置き換えたい

複数のテキストファイル（バイナリファイルの反対の意）に含まれる文字列を他の文字列に一括で置き換えたい場面って偶にありますよね。
2020.07.04
pointer-events:noneするとcursorプロパティが効かないのを回避する

このブログのトップページのページャーで、disabledになっているボタンにhoverしたとき、cursorをnot-allowedにしようとしたらうまく適用されず、気になって調べたことのメモ。
2020.06.21
Hexoのtitleタグを最適化する

ブログのtitleタグをどのページとも被らないように設定するのは、カテゴリー・タグページやそれぞれの2ページ目などを加味していくと、意外に大変だったりします。
2020.05.07
JavaScriptでCSSを動的にセットする方法2種 (styleタグ、style属性)

CSSを動的にセットしたいときに便利なJavaScriptの関数の雛形です。
2020.05.06
Hexoの月別アーカイブをプルダウン式(select要素)にする

Hexoでプルダウン式の月別アーカイブをサイドバーに置く方法。
2020.05.01
uBlacklist用のリスト購読URLを公開しました

Google Chromeに「uBlacklist」という拡張機能があり、指定したドメインのサイトをGoogleの検索結果から排除することができます。
2020.04.30
highlight.jsのスタイルをダークモードに応じて切り替える

ページ上のコードにシンタックスハイライトを適用するのに、highlight.jsというプラグインがあります。
2020.04.29
Hexoのmarkdon-itが脚注で出力するHTMLを整える

Hexoのプラグイン、hexo-renderer-markdown-itでMarkdownをレンダリングした際、脚注の部分に下のようなHTMLがはき出されます。
2020.04.28
Hexoでmarkdown-itを導入して記事内に脚注を書く

HexoでMarkdownについていろいろ調べてみると、デフォルトで入っているhexo-renderer-markedの代わりにhexo-renderer-markdown-itを導入しているブログが多いようなんですね。
2020.04.27
40年前と現在の航空写真を比較できるサービスでタイムスリップしてみる

新型コロナウイルスによる外出自粛が続いていますが、そんな中自宅でのおすすめの過ごし方のご提案。
2020.04.26
Hexoでパンくずリストの構造化マークアップをする

(2020-07-30) コードを書き直しました。こちらをご覧ください。
2020.04.25
Hexoでプラグインを使わずパンくずリストを表示する

(2020-07-30) コードを書き直しました。こちらをご覧ください。
2020.04.23
Google Adsenseが読み込まれる前にローディングアニメーションを表示する

Google Adsenseは広告が表示されるまでに時間がかかります。空白の部分にいきなり広告が現れるとなんかびっくりするというか...
2020.04.22
スマホ表示時のGoogle Adsenseで左右に余白(padding)を適用する

Google Adsenseでレスポンシブタイプの広告ユニットは、デフォルトではスマホ版で表示した際に、横幅が100%になります。
2020.04.21
サイトに適用しているWebフォントを画像編集ソフトGIMPでSVG化する

サイトのロゴやサイドバーのタイトルなどに、Google FontsでWebフォントを読み込み文字を装飾することがあるかと思います。
2020.04.19
SE215のリケーブルにはYinyooのYYX4849がおすすめ

普段私はイヤホンに、SHUREのSE215というイヤホンをかれこれ5年愛用しているのですが、ここ１年ほど右耳の耳掛け部分が断線しかかっていて、とても煩わしかったのです。
2020.04.18
CSS変数とJavaScriptでページを開く度に色をランダムに変える

サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。
2020.04.17
クリックで開閉するドロップダウンメニューをCSSとJavaScriptで作ってみよう

目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。
2020.04.16
aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる

最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。
2020.04.15
HexoのURL関連のテンプレート変数まとめ

HexoにはURL出力関連の変数がたくさん用意されているのですが、種類がたくさんあってあまりにも煩雑なので整理してみます。
2020.04.14
OSでもWebサイト側でも切り替えられるダークモードを実装する

昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのときのメモ。
2020.04.13
HexoでGitとNetlifyを使っていても記事の更新日を表示できるようにする

Hexoで作成したブログで、記事の公開日だけでなく更新日も表示できるようにする方法のメモ。Netlifyで公開したときに更新日がおかしくなる問題も解決します。
2020.04.11
出来るだけメディアクエリを書かずにレスポンシブに対応させるためのTips

サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。
2020.04.08
2行以上の長いタイトルでも１行に収まるように文字サイズをJavaScriptで調整する

記事タイトルが長くなって折り返され、２行になってしまっている...だけど、文字サイズを小さくしてでも１行にきっちり収めたい...！！
2020.03.30
Hexoのカテゴリーリストにcurrentクラスを付けて現在地をハイライト表示する

HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。
2020.03.17
開いているページの構造化マークアップを簡単にチェックするブックマークレット

Googleが提供しているツールに、構造化データテストツールというのがあり、URLを入力するだけでサイトの構造化マークアップを簡単にチェックすることができます。
2020.03.16
Hexoで画像にloading="lazy"を自動で追加して画像を遅延読み込みする

Chromeでいよいよ画像の遅延読み込みがネイティブでサポートされました。
2020.02.11
クリックで画像を拡大するプラグイン(Lightbox)をjQueryなしで自作してみる

Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが...。
2020.02.10
30分で完了！お名前.comのドメインをGoogle Domainsへ移管する

このブログのドメインはお名前.comで取得していたのですが、先日ドメインを更新しようとしたら、netドメインが1,480円（1年）へ値上がりしていました。
2020.02.01
自分流コンマのつく大きい数字の簡単な読み方まとめ

以前からコンマのつく大きい数字を読むのが苦手で、そのような数字を目の当たりにしたときには、いつも一の位から一、十、百、千、...と数えて読んでいました。
2020.01.31
コンマのつく大きい数字を読む練習ツール

ブラウザ上でケタの大きい数字を読む練習ができるツールです。10万から100億までの数字をランダムで表示します。
2020.01.30
Hexoで記事ごとに適用するCSSやJSファイルをFront-matterから自動で読み込む

Hexoでブログを書いていると、記事ごとにCSSやJavaScriptを書いて読み込みたいと思うことがよくあります。
2020.01.29
Netlifyは大文字URLが使えない件とHexoを運用する上で確認すべき設定

このブログはNetlifyという静的サイトホスティングサービスを使って運用しているのですが、サイドバーに設置しているカテゴリー一覧の英字を含んだカテゴリーをクリックしたとき、毎回301リダイレクトが挟まることに気づきました。
2020.01.28
【明るい廃墟】奇跡の再生を遂げたピエリ守山の過去の寂れた姿【写真集】

.jpg)
2020.01.27
contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる

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