はてなブログのPC版のエディタには「過去記事貼り付け」という機能があります。
その機能を使うとこのように記事を貼ることができます。
見やすくてレスポンシブデザインでとてもよいのですが、ちょっとシンプルすぎませんか?
今回はこの「過去記事貼り付け」のカスタマイズをしていきます。
枠線を変えたい、けど……?
「過去記事貼り付け」をするとこのようなHTMLになっています。
<p>
<iframe class="embed-card embed-blogcard"
style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"
title="記事のタイトル - ブログ名"
src="記事のURL"
frameborder="0"
scrolling="no"></ iframe>
<cite class="hatena-citation"><a href="記事のURL">サイトのID-ドメイン</a>
</p>
僕はまずp要素から試しましたがダメでした。
次にilrameと付属のstyleから試しました。少しはできるものの自由ではありません。
それにできるなら中央表示にしたいし「あわせて読みたい」の文字も付けたい。
僕は次の方法に出ました。
Divタグで囲う
以前、僕は「記事編集はなるべく楽をしたいからCSSだけで済ませたい」と書きました。
しかし僕が過去記事を貼るのはPCからのみです。なのでPCでついでに作業する分には手間ではないという判断です。
早速Divタグで枠を作っていきます。
コードはこちらのサイトを参考にしました。
デザインは太い線の枠に内側に「あわせて読みたい」の文字をいれたものにします。色は水色にしてみましょう。
HTMLはこちら
<div class="box1">
<div class="box-title">あわせて読みたい</div>
記事リンク</div>
CSSはこちら
.box1 {
margin: 2em 0;
background: #ffffff;
border: solid 3px #5fb3f5;
}
.box1 .box-title{
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box1 p {
padding: 15px 20px;
margin: 0;
}
このDivボックスの中に「あわせて読みたい」を入れてみると?
前途多難ですね。
CSSを調整する
.box2 {
width: 80%;
margin: 0 auto;
max-width: 500px;
height:220px
;
background: #ffffff;
border: solid 3px #5fb3f5;
}
.box2 .box-title{
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box2 p {
padding: 0;
}
まず枠の中央配置。
それと「あわせて読みたい」のHTMLを参考に幅と高さを調整しました。
高さは元々固定の190pxに「あわせて読みたい」の文字列分だけ足しました。
しかしこの中に入れてみるとこのようになってしまいます。
どうしたら枠にフィットしてくれるでしょうか。
「過去記事貼り付け」のタグも変える必要あり
今度はHTML側の調整です。
まず要らない要素をそぎ落とします。下部の文字リンク列と、前後のpを削りました。
そしてiflame内も変更します。marginがあらかじめ設定されているため枠がフィットしなかったのです。なので0pxに変更します。
変更後、こう表示されました。
やっとぴったりフィットの枠が完成しました。
しかもちゃんとレスポンシブデザインです。
貼り付け方
- Divタグで囲う
- pと下部のリンクを消す
- marginを0pxにする
この3工程で「あわせて読みたい」リンクができあがるようになりました。
これから過去記事さかのぼって色々貼ってみますね。