Posts

calendar

@font-faceのfont-display記述子について

@font-faceのfont-display記述子について
@font-faceとは @font-faceは、CSSでWebフォントを指定するためのルールです。 @font-face { font-family: ExampleFont; src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; } Webフォントはインターネット上から読み込んで利用するフォントのことで、ユーザーがフォントをインストールしていなくても、指定したフォントを表示させることができます。
calendar

HugoのテンプレートをPrettierでフォーマットできるようにする

HugoのテンプレートをPrettierでフォーマットできるようにする
HugoのテンプレートをPrettierでフォーマット HugoのテンプレートをPrettierでフォーマットすると、テンプレートの変数や関数が認識されず、うまくフォーマットされません。 prettier-plugin-go-templateを導入すると、HugoのテンプレートをPrettierでフォーマットできるようになります。
calendar

VS CodeのPrettierでファイルをフォーマットから除外する方法

VS CodeのPrettierでファイルをフォーマットから除外する方法
Prettierでファイルをフォーマットから除外する 無視リストの作成 プロジェクトのルートディレクトリに.prettierignoreファイルを作成します。 プロジェクト/ └── .prettierignore 特定のファイルを除外 /css/sample.cssを除外する場合は、.prettierignoreにファイルのパスを記載します。
calendar

HugoでJavaScriptやCSSを圧縮する方法

HugoでJavaScriptやCSSを圧縮する方法
はじめに HugoでJavaScriptやCSSを圧縮する方法のメモです。 Hugoでは、組み込み関数のresources.Minifyを使用することでJavaScriptやCSSを圧縮する事ができます。 JavaScriptやCSSを圧縮する手順 アセットディレクトリの作成 resources関数で扱うアセットはアセットディレクトリ(/assets)に保存する必要があります。
calendar

カスタムフォントをアップロードしてCSSで表示させる方法

カスタムフォントをアップロードしてCSSで表示させる方法
はじめに フリーフォントなどをサーバーにアップロードしてWeb表示に使用する方法のメモです。 カスタムフォントを使用する CSSの@font-faceを使用すると、カスタムフォントをWeb表示に使用できるようになります。 以下、/fontsディレクトリーにカスタムフォント(customfont.woff2、customfont.woff)をアップロードして表示に使用するサンプルです。