はじめに断っておくと、私個人の力では限界があり、今回はいつも以上に他の方の記事を参考にさせていただき、リンクを貼らせて頂いています。(´-｀*)
- はてなブログのブログカードとは
- ブログカードを横にのばす
- web-card にするとどうなる？
- class="embed-card embed-blogcard" を制御したらよいのかもしれない
- iframe 内の CSS を変更するためにはJavaScript を利用する必要があった
- オリジナルブログカードを作る方法
- 最後に
- おまけ
はてなブログのブログカードとは
はてなブログって、ブログカードを簡単に貼り付けることができるんですよね。便利。
実際は、こんな感じになりますね。
ただ、時々思うのが、これってアレンジできないのかなと。
このブログカードの部分、デフォルトで貼り付けると、HTMLでは以下のようになっています。
最後の<cite class="～">～</cite>の部分はいらないので、意図的に削除させていただいて…
inframe内はこうなっています。
なんかちょっといじって、簡単に表示を変えたりできないのかな？
ブログカードを横にのばす
style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" とあるから、ここを触ったら、見え方が変わりそうですね。
試しに、max-width を変えてみます。
max-widht を 500px→700pxにした結果
わっ。簡単に横にのびた。
max-width を 500px→900pxにした結果
このブログでは、枠をはみ出して表示されることはなかったけれど、テーマによっては崩れてしまうこともあるかもしれないですね。一応確認しておいた方が無難かと思います。
web-card にするとどうなる？
はてなブログに、はてなブログ以外のサイトをはりつけると、こうなります。
はてなブログを貼り付けるときも、このくらいシンプルな表示にしたいなあ…。
HTMLはこうなっています。
<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fsonaeru.mikanusagi.com%2Fbigblue-28w-solar-charger%2F" title="持ち運びできるソーラーパネル BigBlue 28W Solar Charger | 備える防災・減災" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe></p>
はてなブログのブログカードと大きく異なるのは、 class="embed-card embed-webcard" ここの部分かもしれません。
ということで、
class="embed-card embed-blogcard" を class="embed-card embed-webcard" に変えてみましたが…
何も変わりませんでした。(´-｀*)
class="embed-card embed-blogcard" を制御したらよいのかもしれない
現時点でHTMLで表示されているものの中で、ブログカードの骨格を作っているのは、class="embed-card embed-blogcard" の部分のように思います。
ちなみにclass セレクタについてはこちらに少し書いています。
もう一度ブログカードを確認します。
例えば、このブログカード。
中を見てみると、こうなっていました。
classで指定されている内容を書き換えたら、なんとかなりそうな気がする。。
embed-blogcard を書き換えてみる
こちらの記事 【はてなブログ】カード型埋め込みリンクのカスタマイズ方法 - (O+P)utを参考に、このページのHTMLに以下を試しに追記してみます。
<style>.embed-blogcard {
background-color:blue;
}</style>
その結果こうなりました。
ちなみに、こっちは embed-webcardなので、特に影響は受けていませんでした。
ブログカードの骨格は触ることができるってことか…。idとか消せるんじゃないの…？無理かな…？
idを消してみたい
id のところはこうなっています。
.embed-header .blog-user のところ。
試しに、適当にこんな感じで書いてみましたが、何も反応しません。
iframe 内の CSS を変更するためにはJavaScript を利用する必要があった
ここは先人の知恵に頼りたいと思います。
【JavaScript】iframe内の要素にCSSでレイアウトを変更する方法 | IRODORI DESIGN
JavaScript｜iframe内の要素にCSSを適用させる方法 | Mucca Code
CSSでiframe内の要素を上書きする方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
なんと。。iframe内は単純にCSSを変更するだけではダメなようです。
ということで、いろいろ試してみたのですが、JavaScriptの基礎知識がないため、試した案はいずれも動いてくれませんでした…。（一応、はてなブログの「編集 見たまま」以外で操作はしたのですけどね…。）
ここまで読んでくださったのにごめんなさい。私のやり方が悪いのか、はてなブログ自体iframe内の部分は変更できない仕様なのか分かりませんが（多分前者）…できませんでした…。気が向いたらまたやってみます…。
オリジナルブログカードを作る方法
そんなわけで自力でどうにかすることは断念しましたが、こちらの方が、オリジナルのブログカードを作る方法を提案してくださっていました。
かわいいです。ぜひ。(*´▽｀*)
最後に
ということで今回は、はてなブログのブログカードをアレンジしたい話でした。
ブログカードのサイズなどは変更できましたが、内部の記載変更については力及ばずでした。。
でも、オリジナルのカードデザインを作る方法があるようでしたので、いつか試してみたいと思っています。（今回は、もう力尽きた…）
今回はこのへんで。(*'ω'*)/
おまけ
今回<style>タグを記事内のHTMLに記載することで、この記事のみに追加したCSSを反映させることができていますが、サイト内全てに反映されてしまうケースもあるようです。
その場合の対処法について、以下の記事でまとめてくださっていたので、リンクを貼らせて頂きます。
はてなブログで記事ごとに違うCSSを適用させたい https://www.ba… - 人力検索はてな
