スポンサーリンク
【はてなブログのブログカード】私が気になった点
はてなブログのブログカードはすごくいい機能で、私もよく利用しています。
ただ、ちょっとデザインがアンバランスのような･･･。
例えば、ブログカードを連続で貼り付ける場合は下記のようになります。www.posityblog.com
私が気になる点は２つ。
①の「www.posityblog.com」は正直いらない。
②の余白がいらない。
これは好みの問題だね。
もし、同じ悩みを抱えている方がいたら、ぜひ活用してみて下さいね。
①がいらない理由
①がある為、ブログカードが画面に占める割合が多くなってしまい、スクロールの手間がかかってしまいます。
実は、このスクロール、読者のストレスの一因にもなります。
ストレスになるということは、読むのをやめてしまうということになり、ブログ滞在時間が減ってSEO的にもよくありません。
アフリエイトブログをされている方は、ここは特に気を付けたいところ。
なので、少しでもブログカードの幅を狭くする為に削除することにしました。
スポンサーリンク
②の余白がいらない理由
これはもう、好みの問題です。
カード型だからこの形がいいという方もいらっしゃると思いますが、私は余白はいらない派です。
重心が左に来てしまい、なんか嫌なんですよね。
特に囲み枠の中にブログカードを入れると謎の余白が目立つ。
この囲み枠に対して左寄りになってしまうのがどうしても気になってしまいます･･･。
スマホで見て頂いている方はわかりずらいので画像でご紹介します。
これをCSSを使わずに下記のような感じに直していきたいと思います。
完成形はこちら。
スポンサーリンク
CSSを使わずにブログカードをスタイリッシュに変更する方法
それでは早速CSSを使わずにブログカードをスタイリッシュにする方法をご紹介！
簡単３ステップで解決です！
①の「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」から「680」へ変更
青字の「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: 680px; 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: 680px; margin: 0px 0px;"></iframe></p>
実際のブログカードで見てみましょう。
このようにどのような囲み枠を使てっても大丈夫だと思います。
スポンサーリンク
まとめ：はてなブログカードをスタイリッシュに変更して滞在時間を伸ばそう！
今回ははてなブログカードをWordPress風にスタイリッシュに変更する方法を記事にしました。
スクロール時間を少なくすると滞在時間も増える傾向にありあす。
スクロールって意外とストレスだもんね。
料理や旅行、お店の紹介など、写真をメインにしているブログは別ですが、ノウハウ系のブログは、時にブログカードは読者の邪魔になります。
なので、じっくり読んでほしい時は、テキストリンクがおすすめです。
読む時にいきなりブログカードが出てくるとちょっとスクロールが面倒です。
逆に、「ここでどうしてもこの記事を読んでもらいたい！」というところで、「合わせて読みたい」などの囲み枠付きでブログカードを挿入すると効果的です。
メリハリが必要ですね。
HTML編集になれていない方は最初はちょっと怖いかもしれませんが、慣れると意外に簡単に操作できます。
コツは、
- <cite class ～ </cite>までを削除
- 青字の「margin」を赤字の「1」を削除（つまり10pxから0pxへ変更）
- 青字の「max-width」を赤字の「500」から「680」へ変更
と、HTMLの後ろから変更していくのがいいかと思います。
これ、CSSを入れておけば、ポチれば勝手に変更されない？
実はググれば、CSSでの変更方法がでてきます。
でも、CSSを入れると、スマホのスピードが遅くなるので今回はHTMLへの変更方法をご紹介しました！
良かったらぜひチャレンジしてみてくださいね。
ブログを素敵にする方法としてオリジナルのアイコンも効果的です。
オリジナルアイコンはココナラ 
で「プロ級の作品をアマチュア価格」で作ることができます。
＼ 無料登録で300ポイントがもらえる！ ／
