キレイなトイレ調査研究所

外出先で使えるキレイで安心トイレの調査をやってるブログ。おすすめ商品や心の保ち方、映画レビューなどを書いてます。

はてなのカード式内部リンクが重い? 文字リンクで「あわせて読みたい」に変更した

ブログが重いようです。

Google Search Consoleでも指摘されました。

画像は圧縮をかけているので、負担は大きくはないはず。

ほかにも原因はいろいろ考えられるのですが、「過去記事」の内部リンクのブログカードが影響しているのではと考えました。


確かに見やすくて誘導しやすいし、SEOの評価も高いそうですが、他の方のブログを見るとテキストと使い分けているブログを見かけるので気になっていたのです。


ということで今回は、ブログカードを囲みの文字リンクに変更してみました。

 

 

 参考にさせていただいたのはこちらのブログです。

saruwakakun.com

 


CSSコードを貼り付ける


 

こちらのブログはデザインが充実していてすごいです。
とても見やすくきれいで感動します。

さて、使いたいデザインのCSSコードを選びコピペさせていただきます。

 

今回選んだのはこちらです。
枠上に文字が入るタイプのデザインです。

 

先にお見せしますが、出来上がりはこうなりました。

f:id:noji_rei:20200527162735j:plain

 

HTML

<div class="box27"> 
  <span class="box-title">ここにタイトル</span>   
<p>ここに文章</p></div>
</div>

 

CSS

.box27 {
    position: relative;   
 margin: 2em 0;   
 padding: 0.5em 1em; 
 border: solid 3px #62c1ce;
}
.box27 .box-title {   
  position: absolute;   
  display: inline-block;   
  top: -27px;
     left: -3px;   
  padding: 0 9px;   
  height: 25px;   
  line-height: 25px; 
  font-size: 17px; 
   background: #62c1ce;   
  color: #ffffff; 
     font-weight: bold;   
        border-radius: 5px 5px 0 0;
}
.box27 p {   
        margin: 0;    
        padding: 0;
}

 

CSSのコードはてなブログの画面左側にある、デザイン  → カスタマイズ → デザインCSSに貼り付けます。

そして忘れずに「変更を保存」します。

  


記事内の作業

 

CSSにコードを貼ったら、次は記事内での作業です。

下書き用の記事を用意。
そこに上記のHTMLコードを貼ります。

次はリンクを付けたい記事のURLをコピーします。

 

f:id:noji_rei:20200527153550j:plain

 

コピーしたら下書きの画面に戻ります。
そこで画面上にある、リンクボタンを押して、表示された画面に先ほどコピーしたURLを貼り付けます。

f:id:noji_rei:20200527162317j:plain



するとリンクの形態を聞いてくるので、タイトルを選びます。

f:id:noji_rei:20200527161038j:plain



編集見たままモードで確認してみましょう。

f:id:noji_rei:20200527161648j:plain

 

これでリンクができました。

画面をHTML編集にして、先ほどのコードのHTML<p>ここに文章</p>にペーストします。

  <span class="box-title">ここにタイトル</span>のところは、あわせて読みたいとしました。  

 

f:id:noji_rei:20200527204549p:plain

 

f:id:noji_rei:20200527162735j:plain 

 


まとめ

 

はてなブログのユーザーにとって、カード式リンクは簡単で見た目もいいのですが、表示時間も気になるところ。

 

検証によると、あまり変らないという結果もあるようです。

 

www.galapagosta.com

 

いずれにしても見た目はすっきりして見えるので、記事によって使い分けてみようと思いました。


それではまた。

のじれいか でした。