MRKなんでも記録

MRKなんでも記録 〜 好奇心・チャレンジ → synapse 増やそう

MRKなんでも記録

MENU

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

スポンサーリンク

f:id:r2okarain:20190707170342p:image

 

↓ 突発に成功例がこれ

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

 

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

     f:id:r2okarain:20190320204405j:image

 

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

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

f:id:r2okarain:20190320204529j:image

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

 

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

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

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

 

www.mrk-blog.com これが綺麗で簡単 

 

 

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

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

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

おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ | SHIROMAG

 

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

  

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

f:id:r2okarain:20190320210029j:image

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

f:id:r2okarain:20190320205500j:image

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

 

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

 

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

 

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;
}

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

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

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

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

 

 

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

 

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

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