参考: Simplicityを少し改造してみた 番外編 part20 cssのfloatの弊害をブログカードで説明する

サンプル: blog-cardで見るfloatの弊害テスト(スマホサイズまでリサイズしてみて下さい)

うほう、投稿してもた。
サンプル: blog-cardで見るfloatの弊害テスト(スマホサイズまでリサイズしてみて下さい)

上記ページで、ソースコードとリザルトの境界をマウスでドラッグしてリザルト画面を狭めてください。
ソースコードが画面上部にある場合は、画面右上にあるchange viewより一番下にあるeditor viewから左右どちらかを選択すれば境界線が移動できるようになります。

オリジナルはブログカードフッタ部分がはみ出すと思いますが、それ以外の例ははみ出さないと思います。
オススメは、flex修正版ですが、はてブの部分がどうなるかはこの画面からはわからないので、微調整が必要かも知れません。

cssはscssで書いてありますので、css欄の下向き三角よりview compiledを押し、cssに変換されたものを利用してもらえれば良いですが、3つあるので.test2が入っているのがflex修正版です。

サイドバーに入れるのであれば、
#sidebar .blog-card…のようなセレクタの指定に修正が必要になります。全体的に適用するのであれば、例えば.test2 .blog-card部分をまずコピペして、.test2を取り除けば全体適用になります。

サンプルに何か問題があれば、修正します。

ブログカードは
「サイドバーウィジェット」に「テキスト」内
http://xxx.com
と記入してます

＜カスタマイザーの設定＞
外部ブログカード「ブログカード（独自キャッシュ）」設定
　→サイドバーからはみ出る（500px？）
外部ブログカード「はてなカード」に変更
　→サイドバー内に300pxで表示されました！（サムネイルが変わる）

外部＆内部カード共通
「カード幅を広げる 」に設定すると
　→サイドバー内に収まる！但し、幅が狭い（250pxぐらい）

バージョンアップ前は
「カード幅を広げる 」設定なしで
サイドバー内に300pxでカードが表示されていました

＜是正＞
<a href="http://xxx.com">http://xxx.com</a>

＜報告＞
「エントリーカード全体をリンク化」の
チェックをはずしたら
カード幅を広げなくても
以前の表示に戻りました

共存できないのでしょうか？