はてなブログで使う「過去記事貼り付け」のリンクのデザインを調整する

はてなブログで「過去記事を貼り付け」したときのデザインが気に入らないので、手直しします。

気に入らない場所

はてなブログは便利なのですが、ちょいちょい気に入らないところがあります。

今回は、過去記事貼り付けでできるこの部分です。

デフォルトの状態

真ん中の四角の枠です。分かりやすくするため、前後の文章を残しています。

不満がある箇所はこの2か所です。

１．右側のスペースができる部分

初期状態だと、過去記事のカード部分の右側にスペースができてしまいます。。これはちょっと不格好です。

この空白を取っ払います。

２．カードの外にURLが表示される

初期状態だと、カードの外にリンク先のURL（ドメインのみ）が表示されます。URLが枠の外に出ているために、次の文章に紛れてしまいます。なんで枠の中にいれなかったんだろうか、謎、謎。

このURLの部分を消してしまいましょう。

改善後の画面（PCブラウザ）

修正すると、こんな感じになりました。。前より見やすいと思う。

変更箇所と説明

デザイン設定のカスタマイズのデザインCSSに以下のCSSを追加します。

/** カード部分の表示指定 **/
iframe.embed-blogcard{
   display: block; width: 100%; height: 190px; margin: 10px 0px;
   max-width:98% !important;
}

/** カード下のURLの表示指定 **/
cite.hatena-citation{
    display:none;
}

説明

カード横の空白部分

1つ目は<iframe>タグのembed-blogcardクラスを上書きしています。
1行目ははてなブログの初期値をそのままコピーしています。変更しない場合はこの1行は不要なので消しても大丈夫です。

2行目が変更箇所です。
右側にある空白をどれくらい埋めるのかは、max-widthの値で調整します。個別に指定した値が使われるように!importantの指定を行います。
max-width:98% !important;

何も設定していない場合、iframeのmax-widthは500pxで設定されてます。2カラム構成で全体幅が 700px なので、約200pxの空白ができています。これが空白の正体です。
1カラムデザインの場合も同じく500pxなので、結構な空白ができていると思います。

サンプルは％表記で幅設定をしています。親要素の98％の幅で表示されるようになります。

URL部分

こっちは単純
<cite>タグのcitationクラスに対して、非表示の指定をしているだけです。これでURL部分は消えます。
文字サイズの変更や表示位置の調整だけをしたい場合は、この中に書くとよいです。

最後に

CSSはミスすると、サイト全体の見栄えが壊れることもあります。
失敗しても元に戻せるように、デザイン設定のCSSはバックアップして試してください。何かあったときの責任は負いかねます。

もっとよいやり方があったら、コメントかTwitterで教えてください。