はてなブログのリンク貼り付け色々、これは見やすくて分かりやすい

引っ越しして来ました
リンク修正前です

---------------------------------------------

↓ 突発に成功例がこれ

簡単そうに見える？
いやいや、なかなか大変だった

ブログの選択時に出る左側のマークを押し、引用ストック

編集見たまま画面で右のサイドバーから引用貼り付け→選択→下段のアイテムを貼付

しかしこれだと、こんな感じ

コンマリ流に言うと「ときめかない」

皆んなのブログによく出てくる

アイコン・タイトル・文面が四角に囲まれてるリンク貼り付けがしたいと調べまわった

リンクをコピーする
編集見たまま画面の上段の鎖の様なマークをクリック
リンクをペーストする→プレビュー
3種類が表示されるので、埋め込みを選択
下のリンク挿入ボタンを押す

href="https://www.mrk-blog.com/entry/2019/03/19/231225" sl-processed="1">www.mrk-blog.com これが綺麗で簡単

もう一つはシンプルで場所を取らないリンク貼り付けがしたい

タイトルとURLだけに枠を付けたくて、コピペ出来るサイトを探し回った

以下のサイトを参考にしました

上の表示だと味気ないので、このリンクを枠で囲んで案内テキストも入れたい

ミスによる失敗を繰り返し、出来るようになった

出来上がりを、最初見た時、感無量。
大げさよね。でもチョ〜初心者にすればドヤ顔もの

しかし・・・
リンク枠の前の空白が大きすぎる
あれこれ、やってみるが、変わりなし

まっ
いっか
諦めて、次に進もう

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

3.25 追記

「リンクを枠で囲う」に再挑戦、角を丸くbackgroundの色を薄くした

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #274a78;
border-radius: 10px;
width: 95%;
background-color: #f0f8ff;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "参考にさせて頂きました";
border-radius: 10px;
background-color: #274a78;
color: #fff;
font-weight: bold;
}

上をデザインCSSにペースト
囲みたいリンクを「見たまま編集」にコピペ
「タイトルを選択」して「選択した形式でリンク挿入」
「HTML編集」に切り替える
class="emphasize-link" を頭のPの後ろに張り付けて「見たまま編集」に戻り更新する

何度も失敗するのは、pの後にスペースが無かったり、link"のダッシュが無かったりが原因みたい

<p class="emphasize-link">p ><a href="http://

classの前のスペース・link"の後ろをよくよく見ること

https://www.notitle-weblog.com/entry/2017/01/16/205403

リンク選択(上)だと上手く出来るが、タイトル選択(下)だと・・失敗が多い

border-radius: 10px; 角を丸く
width: 95%;　　　　枠の長さ
font-weight: bold;　文字の太さ太字(細字は lighter)

希望通りに出来た
やれやれ、時間がかかったが嬉しくて万々歳