サイト構築

Cover Image for サイト内の絵文字を Twemoji にする

サイト内の絵文字を Twemoji にする

絵文字、好きです。🤗

テキストだけでは伝わらない微妙な心情を表現できる絵文字ですが、

Microsoft のは線画が太く、Apple のはリアル、Google のはふんわり、といった具合に、

プラットフォームによって表示が変わってしまうのが悩みどころです。 …

Cover Image for 【Netlify】サブディレクトリにページをデプロイする方法

【Netlify】サブディレクトリにページをデプロイする方法

例えばexample.comという URL を持っていたとして、

example.com/subdirというサブディレクトリの URL にデプロイしたいときに

どうすればいいのかというお話です。

Netlify での場合を説明しています。 …

Cover Image for 【HTML】これがやりたい!一問一答

【HTML】これがやりたい!一問一答

この記事では、「HTML でこういうことがやりたいけど、何を使えばいいのかわからない」という方へ向けて、

一問一答形式で方法を書いていきます。

調べたら出てきそうなことよりも、ちょっと手の届かなさそうなかゆいところを中心にご紹介します。

それでは参りましょう! …

Cover Image for 【Hugo】ショートコードで複雑な HTML を簡潔に

【Hugo】ショートコードで複雑な HTML を簡潔に

Hugoではショートコードという機能があり、

これを使うことで複雑な HTML 構造も簡潔な形でマークダウン(.md)ファイルの中に記述することができるようになります。

今回は、ショートコードの使い方について書いていきます。 …

Cover Image for 【Hugo】print・printf の使い方

【Hugo】print・printf の使い方

Hugo のテンプレート文にたびたび出現するprint関数とprintf関数について、

その使い方を詳しく解説していきます。


print関数の使い方

print関数は、与えられた引数をそのまま返します。 …

Cover Image for 【Hugo】Forestry.io を試してみた

【Hugo】Forestry.io を試してみた

Hugo のような静的サイトジェネレータにも、CMS を導入することができます。

今回は静的サイトジェネレータ用 CMS のひとつである Forestry を少し試してみたので、…

Cover Image for ウェブサイトに WebP を導入する方法

ウェブサイトに WebP を導入する方法

次世代画像フォーマット WebP は、JPEG や PNG と比べると、画像の品質の割にはかなりファイルサイズを小さくできます。

しかし、ブラウザによっては対応していない場合もあるので、対応していない場合の処理の記述も必要となってきます。

今回は、

  • ウェブページ内で WebP を使う方法
  • Hugo での画像ショートコード例

についてお話します。 …

Cover Image for 画像を最適化してウェブページの表示速度を上げよう

画像を最適化してウェブページの表示速度を上げよう

ウェブページの表示速度が遅いと、ユーザの離脱率の増加につながります。

ウェブページの表示速度に大きく関与するのは、テキストよりもファイルサイズが大きくなりがちな画像や動画です。

画像を適切な形で配信することで、ページの表示速度が上がることが期待できます。 …

Cover Image for 【初心者向け】サイトのカスタマイズ方法

【初心者向け】サイトのカスタマイズ方法

ある程度完成した状態のウェブサイトを、自分好みにカスタマイズしたいと感じることは少なくありません。

しかし、どこにどんなコードを書けば思った通りに反映されるのか、具体的な方法がわからない方もいると思います。

今回は、サイトをカスタマイズする方法についてお話します。 …

Cover Image for 静的サイトジェネレータとは?WordPress との違いは?

静的サイトジェネレータとは?WordPress との違いは?

2010年代半ばから、静的サイトジェネレータというものが現れ始め、

2020年4月現在、HugoGatsbyJSNuxt.jsNext.jsなど、多くのフレームワークが開発されています。

今回は、

  • 静的なサイト生成とは何か
  • WordPress などの動的なサイト生成と異なる点は何か
  • 静的サイトのメリット・デメリット
  • 静的サイトはどんな場面に向いているか

についてお話します。 …

Cover Image for 【Hugo + Netlify + GitHub Actions】静的サイトジェネレータで予約投稿する

【Hugo + Netlify + GitHub Actions】静的サイトジェネレータで予約投稿する

Hugo は WordPress などの動的なサイト生成ツールとは異なり、予約投稿機能がありません。

しかし、NetlifyGitHub Actions を使って予約投稿を実現できたので、その方法をご紹介します。

ほとんどはこちらのサイトと同じことをやっているのですが、

マークダウンファイル側や git まわりの準備も含めてお話したいと思います。 …

Cover Image for 【Hugo】findRE・replaceRE の使い方

【Hugo】findRE・replaceRE の使い方

今回は、 Hugo で記事のマークダウンファイルや HTML 内の特定の内容を探し出したり書き換えたりするのに便利な

findREreplaceREについてご紹介したいと思います。


正規表現を使って探索・置換するための関数

この2つの関数の語尾についている RE というのは Regular Expression(正規表現)のことです。 …

Cover Image for 【Hugo】コードブロック内にファイル名を表示する

【Hugo】コードブロック内にファイル名を表示する

Hugo機能があって、

マークダウンファイル内に指定の書式で書くだけで、コードブロックをページに表示させることができます。

特定の行をハイライト表示したり、行番号を非表示にしたりいろいろとできるのですが、

ファイル名を表示することができません。 …

Cover Image for 【Hugo】ブログにマウスオーバーでふわっと表示する吹き出しを追加

【Hugo】ブログにマウスオーバーでふわっと表示する吹き出しを追加

このブログでは、プログラミングの用語など、少し専門的な言葉が出てくることがよくあります。

そのときに、いちいち言葉の意味を解説すると、

書き手としても、その分野の用語をよく知っている読み手としても、くどくなってしまいます。

かといって解説を書かないのも初学者に不親切です。

そのため、その言葉の意味を知らない人はマウスオーバー(スマホやタブレットならタップ)で …

Cover Image for 【Hugo + Netlify】デプロイ時に CSS, JS が適用されない場合の対処法

【Hugo + Netlify】デプロイ時に CSS, JS が適用されない場合の対処法

Hugo でデプロイ(公開)した際に、

ローカルホスト(hugo server)ではうまく動いていた CSS/SCSS や JS が動なくなってしまうことがあります。

考えられる原因はいろいろあるので、トラブルシューティングとしてお読みいただければと思います。 …

Cover Image for 【Hugo】.Scratch とは?

【Hugo】.Scratch とは?

Hugo
のテンプレート文を眺めていると、

結構な頻度で.Scratchというものがでてきます。

この.Scratchが果たしている役割についてお話したいと思います。 …

Cover Image for 【Hugo】.TableOfContents が使えないけど目次を追加したいときの対処法

【Hugo】.TableOfContents が使えないけど目次を追加したいときの対処法

Hugo には、記事内の h タグから自動で目次を出力してくれる機能があり、

通常は.TableOfContentsで呼び出すことができます。

しかし、テーマによっては何らかの事情で.TableOfContentsが使えない可能性があるので、

今回は Hugo のテンプレート文だけでがんばって実装してみたいと思います。 …

Cover Image for 【Hugo】ブログの記事ページのサイドバーに固定目次を追加

【Hugo】ブログの記事ページのサイドバーに固定目次を追加

こちらの記事で、ブログにサイドバーを追加しました。

今回はこのサイドバーに目次を追加していきます。


完成イメージ

機能的には、

  • クリックしたらリンクしてその項目に飛ぶ
  • スクロールしてもついてきてくれる
  • 必要ない時には隠れる

ぐらいが欲しい。…

Cover Image for 【Hugo】ブログにサイドバーを追加/レスポンシブデザイン

【Hugo】ブログにサイドバーを追加/レスポンシブデザイン

過去にブログを Hugo で作っていて、テーマはもともとサイドバーがついていないものだったのですが、

サイドバーが欲しかったので付け加えてみました。…