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...
Gmailにはフィルタと呼ばれる便利な機能があります。フィルタの一例として、重要なメールを見逃さない、もしくはそれ以外のメール(ノイズ)を受信トレイに残さないことで、受信トレイを大きく整理できるでしょう。ただ、フィルタを使用して以下のような経験をされたことはありませんか。 「受信トレイをスキップ」をフ...
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています...
Macでブログを書くとき、文字入力の補助としてスニペット展開アプリであるTextExpanderを使用してきました。しかし、そろそろ最新版以外のサポートの打ち切りが見えてきたため、将来性を鑑みスニペットを移行することとしました。弊サイトにおいても、こちらでご紹介したように、TextExpanderに...
App Storeで配布されているiPhoneのアプリのURLスキームを使用すれば、たとえばSafariなどの外部ソフトウェアからそのアプリを簡単に呼び出すことができるため便利です。たとえば、iOS版の1Passwordでウェブページの登録から使い方まで徹底解説! – OTTAN.XYZでご紹介しているように...
Docker For Macを使用すると、あらかじめ用意されたイメージ(テンプレート)を使用して、簡単にWordPress環境を構築できます。ローカルの開発環境の場合、インターネット接続環境であれば、ものの数分でWordPress環境を作成できます。また、イメージのダウンロードは初回のみで、次回以降は数秒でWordP...
Mac のターミナルを使用すれば、bash や zsh を駆使して簡単にスクリプトを組むこともできれば、各種便利なコマンドを使用することで、Automator に組み込み作業を自動化することなど、GUI のみではなかなか実現できないことを簡単に実行できます。たとえば、Finder の右クリックメニュー、キーボードショート...
2016 年 2 月から導入された Google 検索結果に適用される AMP(Accelerated Mobile Pages)プロジェクト。スマートフォンなどのモバイルデバイスにおける検索結果表示を高速化するためのプロジェクトです。しかし、このプロジェクト開始当初は柔軟なカスタマイズが不可能であり、逆にユーザビリティの低下に繋がる可能性...
過去に、WordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにする – OTTAN.XYZという記事を書きました。横着したかっただけなのですが、意外とご好評いただいているようです。今回は、これを応用して、内部リンク、外部リンクの URL を WordPress の本文に貼り付けるだけで、オシャ...
システム環境設定をターミナル(defaultsコマンド)から設定する方法(一般) – OTTAN.XYZに引き続き、defaultsコマンドシリーズです。今回は、「Mission Control」編です。ニッチな機能、追求するのがムダな機能は割愛しています。 システム環境設定をターミナルから設定する(Mis...
先日、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の勉強も兼ねて自力で作成してみました。 サンプル サンプルをご用意しました。サンプルについては後ほど詳...
Twitter Bootstrapを用いたWordPressテーマは数多く配信されています。その中からピックアップしてカスタマイズしても良いのですが、それでは面白味がありませんので、極力そういった類いのツールは借りず、自作に近い形でテーマを作成したいと思います。 簡単にレスポンシブに対応したデザインが作成できる「I...