こんにちは、greenです。9月1日からブログをはじめて3か月と16日目です。読者数300人を達成しました。おー、パチパチ👏。みなさま読者登録ありがとございます。今まで、読者が100名増えるごとに、勝手に撮影会を実施していました。読者数100人達成時は記念キャプチャー、読者数200人達成時はGIF動画で読者のみなさまと撮影しました。
今回の読者数300人達成では、タイトルに書きましたように、記念画像としてHTMLタグを利用しました。ぜひ、読者の人は読んでいただきたいと思います。
記事の内容としては、記念の画像はどうする？、HTMLタグのお勉強、読者数300名達成記念イメージとなります。
記念の画像はどうする？
読者100名達成時に利用したプロフィールの読者一覧は、100名しか表示されないので、今回は使えない。
読者200名達成時に利用したダッシュボードの読者一覧は、加工が大変なのでやりたくない。
ちなみに、ダッシュボードから読者一覧を見る手順は下の画像(①～④)です。
さあ、どうしよう。。。。。。。。。。。。。。🤔
考えた結果、プロフィールの読者一覧と同じように、300名分のHTMLを書くことにしました。
HTMLタグのお勉強
まずは、読者一覧を表示するためのＨＴＭＬの記載方法を確認します。操作として、プロフィールの読者一覧を開き、ブラウザ上で右クリックをして「ページのソース表示」を選び、画像を表示している箇所のHTMLを確認しました。
<a href="リンク先"><img src="画像"/></a> の書き方でリンク先と画像を指定していることが分かりました。これを読者数分用意すれば良い。
【参考）書き方】※URLの情報などは、私のものに変換しています。
①リンク先のURLを書く(開始)
<a href="https://blog.hatena.ne.jp/greenupf/" rel="nofollow" >
②表示するイメージと大きさなどを指定
<img class="profile-image" src="https://cdn.profile-image.st-hatena.com/users/greenupf/profile.png" alt="greenupf" title="greenupf" width="16" height="16" />
③リンク先のURLを書く(終了)
</a>
読者数300名達成記念の画像
「とりますよ、はーーい」(カシャ)👀📷✨
読者数300人達成！
引き続き、記事を書いていきたいと思いますので、よろしくお願いします。
