サイト内の絵文字を Twemoji にする
絵文字、好きです。
テキストだけでは伝わらない微妙な心情を表現できる絵文字ですが、
Microsoft のは線画が太く、Apple のはリアル、Google のはふんわり、といった具合に、
プラットフォームによって表示が変わってしまうのが悩みどころです。 …
サイト構築
【Netlify】サブディレクトリにページをデプロイする方法
例えばexample.comという URL を持っていたとして、
example.com/subdirというサブディレクトリの URL にデプロイしたいときに
どうすればいいのかというお話です。
Netlify での場合を説明しています。 …
【HTML】これがやりたい！一問一答
この記事では、「HTML でこういうことがやりたいけど、何を使えばいいのかわからない」という方へ向けて、
一問一答形式で方法を書いていきます。
調べたら出てきそうなことよりも、ちょっと手の届かなさそうなかゆいところを中心にご紹介します。
それでは参りましょう！ …
【Hugo】ショートコードで複雑な HTML を簡潔に
Hugoではショートコードという機能があり、
これを使うことで複雑な HTML 構造も簡潔な形でマークダウン（.md）ファイルの中に記述することができるようになります。
今回は、ショートコードの使い方について書いていきます。 …
【Hugo】print・printf の使い方
Hugo
のテンプレート文にたびたび出現するprint関数とprintf関数について、
その使い方を詳しく解説していきます。
print関数の使い方
print関数は、与えられた引数をそのまま返します。
…
【Hugo】Forestry.io を試してみた
Hugo のような静的サイトジェネレータにも、CMS を導入することができます。
今回は静的サイトジェネレータ用 CMS のひとつである Forestry を少し試してみたので、…
ウェブサイトに WebP を導入する方法
次世代画像フォーマット WebP は、JPEG や PNG と比べると、画像の品質の割にはかなりファイルサイズを小さくできます。
しかし、ブラウザによっては対応していない場合もあるので、対応していない場合の処理の記述も必要となってきます。
今回は、
- ウェブページ内で WebP を使う方法
- Hugo での画像ショートコード例
についてお話します。 …
画像を最適化してウェブページの表示速度を上げよう
ウェブページの表示速度が遅いと、ユーザの離脱率の増加につながります。
ウェブページの表示速度に大きく関与するのは、テキストよりもファイルサイズが大きくなりがちな画像や動画です。
画像を適切な形で配信することで、ページの表示速度が上がることが期待できます。 …
【初心者向け】サイトのカスタマイズ方法
ある程度完成した状態のウェブサイトを、自分好みにカスタマイズしたいと感じることは少なくありません。
しかし、どこにどんなコードを書けば思った通りに反映されるのか、具体的な方法がわからない方もいると思います。
今回は、サイトをカスタマイズする方法についてお話します。 …
静的サイトジェネレータとは？WordPress との違いは？
【Hugo + Netlify + GitHub Actions】静的サイトジェネレータで予約投稿する
Hugo は WordPress などの動的なサイト生成ツールとは異なり、予約投稿機能がありません。
しかし、Netlify と GitHub Actions を使って予約投稿を実現できたので、その方法をご紹介します。
ほとんどはこちらのサイトと同じことをやっているのですが、
マークダウンファイル側や git まわりの準備も含めてお話したいと思います。 …
【Hugo】findRE・replaceRE の使い方
【Hugo】コードブロック内にファイル名を表示する
Hugo機能があって、
マークダウンファイル内に指定の書式で書くだけで、コードブロックをページに表示させることができます。
特定の行をハイライト表示したり、行番号を非表示にしたりいろいろとできるのですが、
ファイル名を表示することができません。 …
【Hugo】ブログにマウスオーバーでふわっと表示する吹き出しを追加
このブログでは、プログラミングの用語など、少し専門的な言葉が出てくることがよくあります。
そのときに、いちいち言葉の意味を解説すると、
書き手としても、その分野の用語をよく知っている読み手としても、くどくなってしまいます。
かといって解説を書かないのも初学者に不親切です。
そのため、その言葉の意味を知らない人はマウスオーバー（スマホやタブレットならタップ）で …
【Hugo + Netlify】デプロイ時に CSS, JS が適用されない場合の対処法
Hugo でデプロイ（公開）した際に、
ローカルホスト（hugo server）ではうまく動いていた CSS/SCSS や JS が動なくなってしまうことがあります。
考えられる原因はいろいろあるので、トラブルシューティングとしてお読みいただければと思います。 …
【Hugo】.Scratch とは？
【Hugo】.TableOfContents が使えないけど目次を追加したいときの対処法
Hugo には、記事内の h タグから自動で目次を出力してくれる機能があり、
通常は.TableOfContentsで呼び出すことができます。
しかし、テーマによっては何らかの事情で.TableOfContentsが使えない可能性があるので、
今回は Hugo のテンプレート文だけでがんばって実装してみたいと思います。 …
【Hugo】ブログの記事ページのサイドバーに固定目次を追加
こちらの記事で、ブログにサイドバーを追加しました。
今回はこのサイドバーに目次を追加していきます。
完成イメージ
機能的には、
- クリックしたらリンクしてその項目に飛ぶ
- スクロールしてもついてきてくれる
- 必要ない時には隠れる
ぐらいが欲しい。…
【Hugo】ブログにサイドバーを追加/レスポンシブデザイン
過去にブログを Hugo で作っていて、テーマはもともとサイドバーがついていないものだったのですが、
サイドバーが欲しかったので付け加えてみました。…