ブログが重いようです。
Google Search Consoleでも指摘されました。
画像は圧縮をかけているので、負担は大きくはないはず。
ほかにも原因はいろいろ考えられるのですが、「過去記事」の内部リンクのブログカードが影響しているのではと考えました。
確かに見やすくて誘導しやすいし、SEOの評価も高いそうですが、他の方のブログを見るとテキストと使い分けているブログを見かけるので気になっていたのです。
ということで今回は、ブログカードを囲みの文字リンクに変更してみました。
参考にさせていただいたのはこちらのブログです。
CSSコードを貼り付ける
こちらのブログはデザインが充実していてすごいです。
とても見やすくきれいで感動します。
さて、使いたいデザインのCSSコードを選びコピペさせていただきます。
今回選んだのはこちらです。
枠上に文字が入るタイプのデザインです。
先にお見せしますが、出来上がりはこうなりました。
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をコピーします。
コピーしたら下書きの画面に戻ります。
そこで画面上にある、リンクボタンを押して、表示された画面に先ほどコピーしたURLを貼り付けます。
するとリンクの形態を聞いてくるので、タイトルを選びます。
編集見たままモードで確認してみましょう。
これでリンクができました。
画面をHTML編集にして、先ほどのコードのHTMLの<p>ここに文章</p>にペーストします。
<span class="box-title">ここにタイトル</span>のところは、あわせて読みたいとしました。
まとめ
はてなブログのユーザーにとって、カード式リンクは簡単で見た目もいいのですが、表示時間も気になるところ。
検証によると、あまり変らないという結果もあるようです。
いずれにしても見た目はすっきりして見えるので、記事によって使い分けてみようと思いました。
それではまた。
のじれいか でした。
