lt

Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。 完成版 メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。 検索したキーワードにヒットした記事が表示されます。 最低限の実装です。テーマに合わせた検索結果の表示...
Google Search Consoleに追加された新たな指標値 Google Search Consoleに新たな指標が追加されました。すべて、ウェブに関する主な指標レポートに記載の通りです。必ずしも早急な対処が必要なものではありません。ただし、これらの指標に対応することで、必然的にUI/UXの向上が期待できます。 LCP (Largest Contentful Paint) FID (Fist Input Delay) CLS (Cumulative Layout Shift) LCP (Largest Contentful...
CSSフレームワークの「Bulma: Free, open source, and modern CSS framework based on Flexbox」のcolumnsクラスの挙動がおかしい、というお話です。 Columns responsivenessは、Flexboxをベースとしたレスポンシブなレイアウトを簡単に定義できます。ところが、以下のシンプルなコードをみてください。 <html> <body> <div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div>...
静的サイトの悩みの種、サイト内検索をNetlify Functions+Hugoで実装してみました。ポイントは、以下の通りです。 クライアントであるブラウザにとって負荷の低い実装方法とする 記事の更新の都度、インデックス等の更新にかかる運用が発生しないようにする(自動的に行う) Hugoの機能、ある程度の月...
HugoのMarkdownで数式組版ライブラリであるKaTeXをサポートするで、Hugoに\(KaTeX\)を組み込みました。\(KaTeX\)は、MathJaxより高速にレンダリングできる、ブラウザで動作する数式組版ライブラリです。 今回は、Netlify CMSのプレビューで、リアルタイムで\(Ka...
Hugoで、\(KaTeX\)というブラウザで数式を表現するためのライブラリをサポートする方法です。Hugo 0.70.0(Extended)で正常に表示されることを確認していますが、今後のバージョンアップ等により、以下の方法がサポートされなくなる可能性がありますので、ご注意ください。特に、Markd...
Hugoは静的サイトジェネレーターですが、テンプレート(Go Template)を使用することで、比較的自由にカスタマイズ可能です。このブログも以前はWordPressを使用していましたが、現在はHugoを使用しています。 WordPressからHugoへ移行する場合、色々考慮点はあると思いますが、頭を...
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています...
WordPressでは、無料・有料問わず多数のテーマが公開されています。公開されているテーマでそのまま運用することも可能ですが、テーマをカスタマイズして使用したい場合があります。しかし、カスタマイズするために、公開されているテーマのファイルを直接編集してしまうと、テーマのアップデートを行う都度、カス...
Macでブログを書くとき、文字入力の補助としてスニペット展開アプリであるTextExpanderを使用してきました。しかし、そろそろ最新版以外のサポートの打ち切りが見えてきたため、将来性を鑑みスニペットを移行することとしました。弊サイトにおいても、こちらでご紹介したように、TextExpanderに...
App Storeで配布されているiPhoneのアプリのURLスキームを使用すれば、たとえばSafariなどの外部ソフトウェアからそのアプリを簡単に呼び出すことができるため便利です。たとえば、iOS版の1Passwordでウェブページの登録から使い方まで徹底解説!でご紹介しているように、Safariで閲覧...
Docker For Macを使用すると、あらかじめ用意されたイメージ(テンプレート)を使用して、簡単にWordPress環境を構築できます。ローカルの開発環境の場合、インターネット接続環境であれば、ものの数分でWordPress環境を作成できます。また、イメージのダウンロードは初回のみで、次回以降は数秒でWordP...
2016 年 2 月から導入された Google 検索結果に適用される AMP(Accelerated Mobile Pages)プロジェクト。スマートフォンなどのモバイルデバイスにおける検索結果表示を高速化するためのプロジェクトです。しかし、このプロジェクト開始当初は柔軟なカスタマイズが不可能であり、逆にユーザビリティの低下に繋がる可能性...
WordPress のテーマ開発、ブログの執筆作業を効率化する方法のまとめでもご紹介している「PopClip」ですが、拡張機能を使用する事で、さまざまな用途に用いる事のできる、1 回使うと離れられない便利ツールです。 WordPressのテーマ開発、ブログの執筆作業を効率化する方法のまとめ 上記記事でもご紹介している通り、...
過去に、WordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにするという記事を書きました。横着したかっただけなのですが、意外とご好評いただいているようです。今回は、これを応用して、内部リンク、外部リンクの URL を WordPress の本文に貼り付けるだけで、オシャレなリンクをいとも簡...
システム環境設定をターミナル(defaultsコマンド)から設定する方法(一般)に引き続き、defaultsコマンドシリーズです。今回は、「Mission Control」編です。ニッチな機能、追求するのがムダな機能は割愛しています。 システム環境設定をターミナルから設定する(Mission Contro...
先日、WordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにするで、App Store の URL を WordPress の本文に貼り付けるだけで、アフィリエイトリンクを作成する方法をご紹介しましたが、今回は Amazon 版です。 Amazon の商品情報を取得するためには、Amazon Product Advertising API を使用します。この API の制約の 1 つ...
WordPressのショートコードとは、いわゆる「ショートカット」のように機能します。たとえば、代表的なショートコードとして[[gallery]]がありますが、これは記事中に[[gallery]]と記述することで、簡単にイメージファイルのサムネイルを呼び出すことができるものです。今回は、ショートコー...
MarsEdit は、macOS で動作する WordPress や MovableType などの主要な CMS に対応しているエディターで、とくにリアルタイムプレビューや AppleScript との連携は非常に便利です。 弊サイトでも、過去にMarsEdit をより便利に高速に活用するためのスクリプト集や、Alfred と連携したWordPress の過去記事参照に!Alfred から記事を検索...
プラグインを使用せずにソーシャルネットワークからシェア数を取得する方法のサンプルです。WordPressにはさまざまなプラグインが用意されており、また公式ボタンを使用した方が簡単です。今回はjQueryの勉強も兼ねて自力で作成してみました。 サンプル サンプルをご用意しました。サンプルについては後ほど詳...