魂を揺さぶるヨ!

ブログを通じて「魂を揺さぶり情熱を燃やせる何か」を探し人生を楽しみたいと考えている30代の男です。 アウトドア、インドア、なんでも好きです。哲学や心理学にも興味があります。

【図解あり!】はてなブログのブログカードの高さと幅を変更する方法

スポンサーリンク


f:id:soul-vibration:20171022132524j:plain

こんにちはユレオです。

 

はてなブログを運営していると記事にリンクを張ることがあるかと思います。

 

その時普通にブログカードを張り付けると、以下のようになるかと思います。

f:id:soul-vibration:20171022114909j:plain

 

ブログカードは便利なのですが、いくつか気になるところがありました。

 

  • 画面右側に無駄な領域が生まれる。
  • タイトルが折り返しで2行になってしまう。
  • ブログカードを複数枚設置するとかなり画面を占めるので高さを詰めたい。

 

これを何とかできないかと考えてカスタムした結果、以下のようになりました。

f:id:soul-vibration:20171022113527j:plain

 

幅を増やして画面センターに合わせて、高さも抑えています。

 

これはブログカードを複数枚並べた時に特に効果がわかります。f:id:soul-vibration:20171022114851j:plain

  

カスタム前の「①」では画面に2枚のブログカードを表示していた領域で、カスタム後の「②」では3枚弱のブログカードを表示できました。

 

今日はブログカードの不要な右側の領域を無くして高さを詰めるカスタムについてご紹介したいと思います。 

 

はじめに

ブログカードはブログの編集画面の「リンクの挿入」や「過去記事張り付け」、またはURLのペーストで設置することが出来ます。

 

f:id:soul-vibration:20171022120107j:plain

 

f:id:soul-vibration:20171022120117j:plain

 

今回はCSSを編集するので、導入にあたってはいつでも戻せるように注意しながら進めてください。

 

設定手順1 デザインCSSの設定

1:はてなブログの デザイン→カスタマイズ→デザインCSS を開きます。

f:id:soul-vibration:20170717092235j:plain

 

 2:デザインCSSに以下のコードをコピーします。

/*ブログカードサイズ変更*/
iframe.embed-card{
  transform:scale(0.9);
  transform-origin:center;
  -o-transform:scale(0.9);
  -o-transform-origin:center;
  -webkit-transform:scale(0.9);
  -webkit-transform-origin:center;
  -moz-transform:scale(0.9);
  -moz-transform-origin:center;
  -ms-transform:scale(0.9);
  -ms-transform-origin:center;
}

 

今回はブログカードのサイズについて「0.9」倍のスケールをかけています。

 

サイズや見え方については好みに合わせて調整してみてください。

  

設定手順2 ブログカードのHTML編集する

デザインCSSですべてまとめて変更出来れば一番良いのですが、私はそのやり方がわからなかった為、ブログカードを設置する際に少しだけブログカードのHTMLを編集しています。

 

1:記事にブログカードを設置します。

ブログカードの設置は「リンクの挿入」や「過去記事張り付け」、またはURLのペーストで設置する等、どの方法でも構いません。

f:id:soul-vibration:20171022123121j:plain

 

2:編集を「見たまま」から「HTML編集」に切り替えて編集を行います。

f:id:soul-vibration:20171022124854j:plain

 

編集するところは3か所で「max-width: 500px」、「margin: 10px」、「</iframe><cite class="hatena-citation"> ~ </cite>」です。

 

  • 「max-width: 500px」は「max-width: 760px」に変更(*)
  • 「margin: 10px」は「margin: 0px」に変更
  • 「<cite class="hatena-citation"> ~ </cite>」は削除

*「max-width」についてはブログのテーマにより変わるので、調整してみてください。 

 

この編集を加えると以下のようになります。

f:id:soul-vibration:20171022134606j:plain

   

設定手順3 プレビューでの確認

1:プレビューを押してブログカードの見え方を確認します。

問題が無ければそのまま記事を保存してください。

f:id:soul-vibration:20171022125858j:plain

  

以上で終了です。

 

ブログカードはリンクを張るのに便利ですが、並べて配置するとかなり無駄な領域があるので、そうした部分を何とかしたいと思い対応方法を備忘録としてまとめてみました。

 

どうぞご参考ください。 

 

 

合わせてお読みください。 

スポンサーリンク