ブログカードについての疑問
rifublog.hatenablog.com
↑この埋め込み形式のリンクが「ブログカード」とよばれているのですが、このブログカードについて
「んん・・・？なんかブログによって違わない？」という疑問がわきました。
はてなブログとWordPressで違うのはわかるけれど、同じはてなブログでも違うよね？
「入力補助ツールバーでのリンク挿入」と「過去記事貼り付け」の違いかなー？とか思いながらも調べてみました。
あっさりと答えはでました。
私が違和感を感じていた「ブログカード」の下についているURLは後から:citeコード？を削除すると↑上記のように外せてすっきりさせることが出来ます。
横幅いっぱいの長さにしたり影つきなどの「ブログカード」はカスタマイズで出来るようです。
それから、はてなブログカードの読込みは遅いのでブックマークレットで作っているという方もいました。
ページの読み込み速度は気になるし、私も見習いたいところですがちょっと大変そうだし、まだあまりリンクを使用してない初心者の私はまた今度でいいかな・・・。
今は「ブログカード」の下についているURLの変更だけにしておきます。
では、変更の仕方について詳しく説明していきます。
まずは通常のブログカードを表示させます。
「ブログカード」の表示方法
ブログ編集画面で、入力補助ツールバーの「リンク」ボタンをクリックすると「リンクを挿入」ウィンドウが開きます。
URLを入力して【プレビュー】をクリックすると・・・
リンクの形式が選択できるようになります。
プレビューで選択できるリンクの形式について
プレビューで選択できるリンクの形式は以下の通りです。表示される形式はURLの種類等で異なります。
YouTube、Twitter、Instagram、ニコニコ動画、SoundCloud、pixivなど、さまざまなサイトを手軽に貼り付けられるリンク挿入機能を強化しました - はてなブログ開発ブログ
形式 説明 http記法のオプション URL URLをそのまま挿入します。 なし タイトル ページのタイトルを自動取得し、テキストリンクとして挿入します。 :title 選択範囲 編集画面の本文を選択している場合、選択範囲にリンクを挿入します。 :title=selected text 画像 指定されたURLが画像の場合、画像（img）要素として挿入します。 :image 埋め込み 動画や音楽などを、サイトごとに最適化された形式で挿入します。 :embed
色々ありますが、今回は「ブログカード」を表示させたいので埋め込み形式を選択します。
「ブログカード」の下にあるURLの削除方法
「はてな記法」編集では
https://rifublog.hatenablog.com/:embed:cite]と編集画面で表示されます。
最後の:cite部分を削除すれば「ブログカード」の下にあるURLは消えます。
「みたまま編集」では
リンクを挿入した後に「HTML編集」で見ると下記のように表示されます。
- <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Frifublog.hatenablog.com%2F" title="みにまる。" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://rifublog.hatenablog.com/">rifublog.hatenablog.com</a></cite></p>
citeから始まる赤字部分を削除します。
- <cite class=”hatena-citation”> 〜 </cite>
手動での削除が面倒な場合は
「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」に下記のコードを記載します。
- .hatena-citation{
- display:none;
- }
これで終わりです！
でもこの削除したURLについてですが・・・。
リンク先が存在しなくなると、URL参照先がわからなくなるので
ブログカード下のURLを記事タイトル入りのリンクに書き換えたりした方がわかりやすいだとか
ブログカード＝リンクだと認識せずに、広告だと思う人もいるらしいとか
そういう意見もあるんだなと思ったらあった方がいいのかも・・・？と迷ったけれど、「いや、ない方がすっきりするだろう！」という気持ちの方が勝ったのでなくす方針でいくことにします。
ところでこのブログのホーム画面をプレビューするとアイキャッチの表示がないのに今回気づきました。
アイキャッチ作りはまだ下手なので、とりあえず一時的に詳細設定のアイキャッチに「ブログアイコン」を設定してみました。
でも「んん・・・？反映されない？」
サイズの問題なのか時間の問題なのか・・・。
とりあえず・・・様子見で！
