New Article

画像のリサイズ・トリミング可能な自作ショートコード

画像のリサイズ・トリミング可能な自作ショートコード

 Saltの使い方
 2021-09-11
このテーマ内で画像のリサイズ・トリミングができる「custom-figure」というショートコードを作成しました。 使い方 Hugo標準のfigureショートコードの機能をそのまま使えます HugoのImage Processingで使えるResize、Fit、Fillが使えます Image Processingについてはこちらをチェック Image Processing Resize, crop, rotate, filter, and convert images. {{< custom-figure src="image.png" title="Resize スイカ" Resize="320x180" >}} {{< custom-figure src="image.png" title="Fit スイカ" Fit="320x180" >}} {{< custom-figure src="image.png"
Hugo標準のショートコード表示サンプル

Hugo標準のショートコード表示サンプル

 サンプル
 2021-09-11
Hugoで用意されているショートコード使用時の表示サンプルです figure スイカの画像 gist highlight <section id="main"> <div> <h1 id="title">{{ .Title }}</h1> {{ range .Pages }} {{ .Render "summary"}} {{ end }} </div> </section> instagram Instagramのdeveloperアカウントが必要です。自前で用意する必要あり tweet Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC — San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 vimeo youtube
マークダウン表示サンプル

マークダウン表示サンプル

 サンプル
 2021-09-11
マークダウンで記事作成時の表示サンプルです Block Elements Headers 見出し 先頭に#をレベルの数だけ記述します。 # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 見出し1 見出し2 見出し3 見出し4 見出し5 見出し6 Block 段落 空白行を挟むことで段落となります。 段落1 (空行) 段落2 段落1 段落2 Br 改行 改行の前に半角スペース を2つ記述します。 hoge fuga(スペース2つ) piyo hoge fuga piyo Blockquotes 引用 先頭に>を記述します。ネストは>
小さいサムネイル記事

小さいサムネイル記事

 サンプル
 2021-09-10
小さいサムネイルの場合の記事です 120x120です
タグとカテゴリーなしの記事

タグとカテゴリーなしの記事

 2021-09-10
タグとカテゴリーが設定されていない場合の記事です
サムネイルなしの記事

サムネイルなしの記事

 サンプル
 2021-09-10
サムネイルが設定されていない場合の記事です