【87日目】関連記事をおしゃれに表示させたい！-1
Posted: Last Update:
昨日までの1週間ちょっとで時間はかかりつつも日記のアーカイブページを完成させることができました！今日からはまた、やりたいことリストを消化していきたいと思いまず！
やりたいことリスト
やりたいことリストも短くなってきました。今残っているのが7個です。初めは14個あったので半分になりました。
- 人気投稿の準備として、アクセス解析をするPHPを作成する
- 関連記事用のパーツを作る
- mainフォルダをmenuフォルダに書き換える
- RSSの内容を共通仕様から入れ込む
- サイトマップをGoogleとBingに送信する手順を作る
- 記事にカテゴリーを入れ込む
- Google Lighthouseに指摘された内容に対応する
今日は「関連記事用のパーツを作る」をやりたいです。だんだんと記事が増えていくにつれ、テキストだけでの紹介は寂しく感じるようになりました。
関連記事用のパーツ
イメージとしては、ツイッターに表示されるような、画像と文字が入った物が作りたいです。下記は自分のツイートですが、下の方にブログのリンクがあります。画像と文章が入っていておしゃれです。こんなのを作りたい！
自作サイトにリンクをおしゃれに表示できる「Twitterサマリーカード」を装備したので自慢させてください！
— 亀の子 (@kamenokoki) November 14, 2020
リンクは検索するだけで遊べるGoogleのミニゲームを紹介しています。遊んでみてね。三目並べがお気に入りです。#自作サイト #Twitterカードhttps://t.co/7vcQcYIWYl
とりあえず作ってみる
とりあえず、リンクのスタイルだけ作ってみることにします。とりあえず、箱を作って、絵を適当に引っ張って来て…。
時間切れ…
ここで時間切れです！全然進んでないけど…。
ちなみに、今のところのHTMLとCSSがこんな感じです。画像をきちんと表示させたいですね。
HTML
<div id="bloglink">
<div id="bloglinkimg"><img src="/images/20201124002.webp" alt="テスト"></div>
<div id="bloglinktext">
<b>タイトル</b><br>
説明文説明文説明文説明文説明文説明文説明文説明文
</div>
</div>
CSS
<div id="bloglinkimg"><img src="/images/20201124002.webp" alt="テスト"></div>
<div id="bloglinktext">
<b>タイトル</b><br>
説明文説明文説明文説明文説明文説明文説明文説明文
</div>
</div>
#bloglink{
max-width: 600px;
border: 1px solid silver;
border-radius: 20px;
display: grid;
grid-template-rows: 1 1fr;
grid-template-columns: 110px auto;
}
#bloglinkimg{
width: 100px;
border: 1px solid silver;
border-radius: 20px;
}
max-width: 600px;
border: 1px solid silver;
border-radius: 20px;
display: grid;
grid-template-rows: 1 1fr;
grid-template-columns: 110px auto;
}
#bloglinkimg{
width: 100px;
border: 1px solid silver;
border-radius: 20px;
}
続きはまた明日！
おまけのロードマップ
サイト作成がどのくらい進んでいるかロードマップで進捗を確認すると、ここまで進んでいます。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする ←完了！
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
