Bloggerでウィジェットを作ってみました。
テーマの設定上、「注目の投稿」がブログ内に一個しか置けないので、あのChatGPTさんから「注目の投稿」の代わりになるウィジェットをなんとか作成してもらいました。
タイトルや画像、要約文は好きに設定できます。
細かいCSSの変更はChatGPTさんに何度も頼んで直してもらいました。
HTMLとCSSの知識が地味についてきたかも。
以下はその最終結果。
- <div class='custom-featured-post'>
- <a href='URL_TO_YOUR_PAGE' class='post-link'>
- <img src='URL_TO_YOUR_IMAGE' alt='Your Title' class='image'/>
- <h3 class='post-title'>Your Title</h3>
- <p class='post-summary'>Your summary goes here.</p>
- </a>
- </div>
- <style>
- .custom-featured-post {
- background-color: #FFFFFF; /* 背景色 */
- padding: 10px; /* 内側の余白 */
- margin-bottom: 20px; /* 下の余白 */
- border: 1px solid #ddd; /* 枠線 */
- }
- .custom-featured-post .image {
- width: 100%; /* 画像の幅 */
- height: auto; /* 画像の高さを自動調整 */
- margin-bottom: 10px; /* 画像の下部の余白 */
- }
- .custom-featured-post .post-title {
- font-size: 1.2em; /* タイトルのフォントサイズ */
- margin: 0; /* タイトルの余白を削除 */
- padding: 0; /* タイトルのパディングを削除 */
- }
- .custom-featured-post .post-summary {
- font-size: 0.9em; /* サマリーのフォントサイズ */
- margin: 0; /* サマリーの余白を削除 */
- padding: 0; /* サマリーのパディングを削除 */
- }
- .custom-featured-post .post-link {
- text-decoration: none; /* リンクの下線を削除 */
- color: inherit; /* リンクの色を親要素に合わせる */
- }
- </style>
.png)
