lt

Hugo + Algolia + Instantsearch.jsで静的サイトに全文検索を導入

Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。検索したキーワード

HugoでSearch Consoleに追加された「ウェブに関する主な指標レポート」(CLS)の問題に対応する

Google Search Consoleに新たな指標が追加されました。すべて、 ウェブに関する主な指標レポート に記載の通りです。必ずしも早急な対処が必要なものではありません。ただし、これらの指標に対応することで、必然的にUI/UXの向上

Netlify Functions + Hugoで簡単サイト内検索

静的サイトの悩みの種、サイト内検索をNetlify Functions+Hugoで実装してみました。ポイントは、以下の通りです。有名どころでは、 Lunr: A bit like Solr, but much smaller and not

CSSフレームワーク「Bulma」の「columns」クラスに関する挙動について

CSSフレームワークの「 Bulma: Free, open source, and modern CSS framework based on Flexbox 」の columns クラスの挙動がおかしい、というお話です。Columns

Netlify CMSのプレビューでHightlight.js + KaTeX(LaTeX)をサポートする

HugoのMarkdownで数式組版ライブラリであるKaTeXをサポートする で、Hugoに(KaTeX)を組み込みました。(KaTeX)は、MathJaxより高速にレンダリングできる、ブラウザで動作する数式組版ライブラリです。今回

HugoのMarkdownで数式組版ライブラリであるKaTeXをサポートする

Hugoで、(KaTeX)というブラウザで数式を表現するためのライブラリをサポートする方法です。Hugo 0.70.0(Extended)で正常に表示されることを確認していますが、今後のバージョンアップ等により、以下の方法がサポートされ

HugoでMarkdownのランダムな位置にGoogle AdSenseのコードを挿入する

Hugoは静的サイトジェネレーターですが、テンプレート(Go Template)を使用することで、比較的自由にカスタマイズ可能です。このブログも以前はWordPressを使用していましたが、現在はHugoを使用しています。WordPress

Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説

Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。Hugo には

WordPressの親テーマの「header.php」を変更せずに子テーマにFaviconを追加する方法

WordPressでは、無料・有料問わず多数のテーマが公開されています。公開されているテーマでそのまま運用することも可能ですが、テーマをカスタマイズして使用したい場合があります。しかし、カスタマイズするために、公開されているテーマのファイル

スニペット展開アプリのTextExpanderの代替アプリとしてDashを使用する

Macでブログを書くとき、文字入力の補助としてスニペット展開アプリである TextExpander を使用してきました。しかし、そろそろ最新版以外のサポートの打ち切りが見えてきたため、将来性を鑑みスニペットを移行することとしました。弊サイト

iPhoneの任意のアプリのURLスキームを調べる方法

App Storeで配布されているiPhoneのアプリのURLスキームを使用すれば、たとえばSafariなどの外部ソフトウェアからそのアプリを簡単に呼び出すことができるため便利です。たとえば、 iOS版の1Passwordでウェブページの登

Docker ComposeでWordPress環境をもっと楽に管理しよう!

Docker For Mac を使用すると、あらかじめ用意されたイメージ(テンプレート)を使用して、簡単にWordPress環境を構築できます。ローカルの開発環境の場合、インターネット接続環境であれば、ものの数分でWordPress環境を作