ぼく達の飼い主の【ポジティぶろぐ】

お金とペットの悩みを解決するブログ

ぼく達の飼い主の【ポジティぶろぐ】

はてなブログのブログカード【CSSなしで簡単】スタイリッシュに!

記事タイトル
 URLをコピー

はてなブログのブログカード【CSSなしで簡単】スタイリッシュにする方法

 

 

 スポンサーリンク 

 

 

【はてなブログのブログカード】私が気になった点

はてなブログのブログカードはすごくいい機能で、私もよく利用しています。

ただ、ちょっとデザインがアンバランスのような・・・。

例えば、ブログカードを連続で貼り付ける場合は下記のようになります。www.posityblog.com

www.posityblog.com

 

私が気になる点は2つ。

私がどうしても気になる点2点の提示

私が気になる点

①の「www.posityblog.com」は正直いらない。

②の余白がいらない。

これは好みの問題だね。

もし、同じ悩みを抱えている方がいたら、ぜひ活用してみて下さいね。

①がいらない理由

①がある為、ブログカードが画面に占める割合が多くなってしまい、スクロールの手間がかかってしまいます。

実は、このスクロール、読者のストレスの一因にもなります。

ストレスになるということは、読むのをやめてしまうということになり、ブログ滞在時間が減ってSEO的にもよくありません。

アフリエイトブログをされている方は、ここは特に気を付けたいところ。

なので、少しでもブログカードの幅を狭くする為に削除することにしました。

スポンサーリンク

 

 

②の余白がいらない理由

これはもう、好みの問題です。

カード型だからこの形がいいという方もいらっしゃると思いますが、私は余白はいらない派です。

重心が左に来てしまい、なんか嫌なんですよね。

特に囲み枠の中にブログカードを入れると謎の余白が目立つ。

合わせて読みたい

www.posityblog.com

この囲み枠に対して左寄りになってしまうのがどうしても気になってしまいます・・・。

スマホで見て頂いている方はわかりずらいので画像でご紹介します。

囲み枠の中のブログカード

囲み枠の中のブログカード

これをCSSを使わずに下記のような感じに直していきたいと思います。

完成形はこちら。

合わせて読みたい

 

スポンサーリンク

 

 

CSSを使わずにブログカードをスタイリッシュに変更する方法

それでは早速CSSを使わずにブログカードをスタイリッシュにする方法をご紹介!

簡単3ステップで解決です!

①の「www.posityblog.com」を消す方法

ブログカードを貼りつけたら、「HTML編集」タブをクリックして下さい。

そうすると下記のようなHTMLが出てきます。

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.posityblog.com%2Fentry%2Fcoconala-3" title="【ココナラはひどい】評判は本当?|多数購入経験者が実体験を元に分析 - ぼく達の飼い主の【ポジティぶろぐ】" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https.://www.posityblog.com/entry/coconala-3">www.posityblog.com</a></cite></p>

赤字の<cite class ~ </cite>までを削除して下さい。

削除するとこんな感じですね。

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.posityblog.com%2Fentry%2Fcoconala-3" title="【ココナラはひどい】評判は本当?|多数購入経験者が実体験を元に分析 - ぼく達の飼い主の【ポジティぶろぐ】" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></p>

実際のブログカードを見ると下記のようになります。

①の部分が消えました。

スポンサーリンク

 

②の右空白を埋める方法

①の続きから作業してみましょう。(①は残して②だけ作業する時はこの作業だけして下さい。)

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.posityblog.com%2Fentry%2Fcoconala-3" title="【ココナラはひどい】評判は本当?|多数購入経験者が実体験を元に分析 - ぼく達の飼い主の【ポジティぶろぐ】" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></p>

青字の「max-width」を赤字の「500」から「760」へ変更

青字の「margin」を赤字の「1」を削除(つまり10pxから0pxへ変更)

変更するとこんな感じですね。

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.posityblog.com%2Fentry%2Fcoconala-3" title="【ココナラはひどい】評判は本当?|多数購入経験者が実体験を元に分析 - ぼく達の飼い主の【ポジティぶろぐ】" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 760px; margin: 0px 0px;"></iframe></p>

実際のブログカードを見ると下記のようになります。

これで②の部分の余白がなくなりました。

「max-width」とは、最大幅です。

ほとんどのテーマはこの数値で大丈夫だとは思いますが、この数値でもまだ左寄りになるようなら数値を大きくしてみて下さい。(逆に折り返しになるようであれば数値を小さくして下さい。)

「margin」とは、余白という意味です。0を指定したので余白なしになります。

高さをもう少し低くしたい場合は、「height: 190px」の部分の数字を小さくすればなりますが、はてなの仕様でここの数字を小さくすると、四角の枠の下の線が消えてしまうのでおすすめできません。

囲み枠にはてなブログカードを入れる場合は?

囲み枠に入れるときは、赤字の部分の<p>と</p>を削除し、囲み枠のHTMLに挿入しましょう。

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.posityblog.com%2Fentry%2Fcoconala-3" title="【ココナラはひどい】評判は本当?|多数購入経験者が実体験を元に分析 - ぼく達の飼い主の【ポジティぶろぐ】" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 760px; margin: 0px 0px;"></iframe></p>

実際のブログカードで見てみましょう。

合わせて読みたい

合わせて読みたい

 

あわせて読みたい

 

あわせて読みたい

このようにどのような囲み枠を使てっても大丈夫だと思います。

スポンサーリンク

 

 

まとめ:はてなブログカードをスタイリッシュに変更して滞在時間を伸ばそう!

今回ははてなブログカードをWordPress風にスタイリッシュに変更する方法を記事にしました。

スクロール時間を少なくすると滞在時間も増える傾向にありあす。

スクロールって意外とストレスだもんね。

料理や旅行、お店の紹介など、写真をメインにしているブログは別ですが、ノウハウ系のブログは、時にブログカードは読者の邪魔になります。

なので、じっくり読んでほしい時は、テキストリンクがおすすめです。

読む時にいきなりブログカードが出てくるとちょっとスクロールが面倒です。

逆に、「ここでどうしてもこの記事を読んでもらいたい!」というところで、「合わせて読みたい」などの囲み枠付きでブログカードを挿入すると効果的です。

メリハリが必要ですね。

HTML編集になれていない方は最初はちょっと怖いかもしれませんが、慣れると意外に簡単に操作できます。

コツは、

  • <cite class ~ </cite>までを削除
  • 青字の「margin」を赤字の「1」を削除(つまり10pxから0pxへ変更)
  • 青字の「max-width」を赤字の「500」から「760」へ変更

と、HTMLの後ろから変更していくのがいいかと思います。

これ、CSSを入れておけば、ポチれば勝手に変更されない?

実はググれば、CSSでの変更方法がでてきます。
でも、CSSを入れると、スマホのスピードが遅くなるので今回はHTMLへの変更方法をご紹介しました!

良かったらぜひチャレンジしてみてくださいね。

 

スポンサーリンク