tag: PaperMod

既定のレイアウトは、画像を中央に横幅100%で配置されていますが、 少し大きいなと感じることがあったため、画像をタイトルの下に周り込ませて、 横幅を150px程度に変更してみました。 ファイルの変更箇所は下記のとおりとなります。 blank.css 余白や画像のサイズ、テキストの表示行を変更するために、blank.cssに下記の記述を追加します。 .entry-content { -webkit-line-clamp: 4; } .entry-footer { text-align: right; } .entry-cover { margin-bottom: initial; text-align: center; } .entry-cover img { border-radius: 4px; display: inline; max-width: 100%; } .post-meta { display: block; text-align: right; } post-entry.css blank.css側で定義を削除できなかったので、post-entry.cssに下記の場所を1行削除します。 .entry-cover img { border-radius: var(--radius); pointer-events: none; /* width: 100%; */ ← この行を削除 height: auto; } list.html 画像の配置を変更するために、list.htmlの下記箇所を変更しました。 <article class="{{ $class }}"> <!-- {{- $isHidden := (site.Params.cover.hidden | default site....

はじめに PaperModテーマはTwitter Cardに対応しています。 ただし、Twitter Cardの設定は、config.tomlまはた各記事の*.mdのヘッダ情報に記述する必要があります。 各記事とconfig.tomlの両方に設定した場合は、各記事のヘッダ情報が優先されます。 設定方法 config.toml config.tomlには、[params]の下に、imagesという項目を追加します。 imagesには、Twitter Cardに表示する画像のパスを記述します。 画像をstaticフォルダに配置する場合は、ファイル名だけの指定でOKです。 [params] images = ["twitter_card.jpg"] フォルダ構成 root │ config.toml (ココに記述) ├─content │ └─posts │ └─記事フォルダ │ │ index.md (ココに記述) │ └─images │ cover.png (ココに配置) └─static twitter_card.jpg (ココに配置) 各記事のヘッダ情報 各記事のヘッダ情報には、coverの配下にimageという項目を追加します。 relativeをtrueにすると、記事の*.mdからの相対パスで指定できます。 cover: image: "images/cover.jpg" relative: true 記事の上部には表示させたくない場合 記事の上部にカバー画像を表示させたくない場合は、coverの配下にhiddenという項目を追加てtrueに設定します。 cover: image: "images/cover.jpg" relative: true hidden: true 画像のサイズについて 現状のPaperModの仕様でTwitter Cardのサイズは、summary_large_imageのみ対応しているようです。 summary_large_imageの適切なサイズ（解像度）は、諸説ありますが800 x 418（画像比1.91:1）あたりがよさそうです。 参考サイト1 参考サイト2 できれば、画像サイズをリサイズして投稿することをおすすめします。 設定の確認方法 Twitter Cardの設定を確認するには、Twitter Card Validatorを利用します。 ただし、私の環境ではうまくプレビューが表示されなかったため、もしプレビューが表示が表示されない場合は非公開のアカウント等を使って投稿前に一度確認しておくことをおすすめします。

PaperModテーマの配色を変更しました。変更方法は下記を参考にしました。 https://github.com/adityatelange/hugo-PaperMod/discussions/645 CSSのパスは下記になります。 themes/PaperMod/assets/css/extended/blank.css :root { --entry: #fbf7ef; --primary: rgba(113, 103, 91, 1.00); --secondary: rgba(113, 103, 91, 0.95); --tertiary: rgba(113, 103, 91, 0.50); --content: rgba(113, 103, 91, 0.85); --hljs-bg: #34231B; --code-bg: #ebe4d7; --border: #fdfaf5; --theme: #fbf7ef; } .dark { } ダークはいったん変更なしです。