Bloggerでリンクをサムネイル・ブログカードで表示する方法見つけたよ。オジサン向けでGOOD!

2022/03/11

blog blogger

t f B! P L

 


こんばんは。カズパパ@下町(@GuyTangerine)です。

今はBlogeerでどんな風にブログを見せていこうかなーって考えているのですが、参考になったサイトやブログを紹介するときのリンクを少しでもキレイに見せる方法を調べてしました。サムネイルやブログカードというような呼び方をするらしいですね。

まずは一番シンプルな形を。

■Blogger*ブログカードを表示する簡単な方法

https://moca-memo.blogspot.com/2019/11/blogger-blogcard.html

こんな感じで表題(記事のタイトル)をコピペして、次にURLをコピペしてリンク形式にします。Bloogerの投稿画面ではクリップのアイコンですね、リンクを作成するのは。

この記事を参考にして、自分のブログの記事で紹介したいサイトやブログ記事のURLをオシャレに表示(サムネイルで表示、ブログカードで表示)してみます。

おお!簡単でオシャレ!素晴らしい。

方法はこの記事を参照して頂きたいのですが、以下のHTMLをコピーします。そしたら、Bloggerの投稿画面のメニュー(タイトルのしたのメニュー)の一番左の鉛筆?ボールペン?のアイコンをクリックして「HTMLビュー」にします。そうすると、今、投稿しようと書いている記事がコード(HTML)で表示されるので、貼り付け・ペーストします。

「リンク先のアドレスをコピペします」のところに、リンクを貼り付けたいURLをコピペします。


<iframe class="hatenablogcard" style="display:block;width:100%;height:155px;margin:12px 0;

max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?

url=リンク先のアドレスをコピペします" frameborder="0" scrolling="no"></iframe>


そして「HTMLビュー」のメニューの一番左の「<>」をクリックして鉛筆?ボールペン?の作成ビューに戻します。

編集画面(作成ビュー)では正方形グレーの真ん中に再生ボタンがある怪しい画像が挿入されていますが…プレビューしてみると、あら、オシャレなブログカード形式じゃない♪

HTMLを多少分かっていればCSSを知らなくたって出来ちゃうのがオジサン向け(笑)シンプルにコピペする。これ最強。HTMLビューにして貼り付けるので、ちょっとハードルが高いのですが、ブログをやっていこうって人はこのくらい出来ても良いのかもね。Webサイトでは、ブログも含めてHTMLは避けて通れません。

というか、WordPressみたいにゴリゴリの動的な作りで、いろんなプラグインにお任せ~!で複雑怪奇なブログに陥るより、静的なHTMLでクリアできるのであればシンプルで良いとシステム屋は思います。コピペ、最強。

ちょっとですが感覚を取り戻してきました。こうやって少し手をかけるとブログに愛着が湧くってものですね。

それでは、また。

プロフィール・SNS

自分の写真
コロナ時代にブログ再始動
写真やカメラ、旅、ガンプラが好きな二児のパパ

カズパパ@下町のSNSへ(lit.link)

このブログを検索

ブログ アーカイブ

プライバシーポリシー・お問い合わせ先・プロフィール

「プライバシーポリシー」「お問い合わせ」は、こちらのページへ。簡単なプロフィールも

カヅパパ@下町Twitter

ブログランキング

QooQ