手帳とふたり

手帳でふたり暮らしをていねいにととのえる

はてなブログカスタマイズ 「過去記事貼り付け」に枠と「あわせて読みたい」をつけるHTML・CSS

この記事をシェアする

はてなブログのPC版のエディタには「過去記事貼り付け」という機能があります。

その機能を使うとこのように記事を貼ることができます。

 

 

mizu-note.hatenadiary.jp

 

見やすくてレスポンシブデザインでとてもよいのですが、ちょっとシンプルすぎませんか?

今回はこの「過去記事貼り付け」のカスタマイズをしていきます。

 

 

枠線を変えたい、けど……?

「過去記事貼り付け」をするとこのようなHTMLになっています。

 

mizu-note.hatenadiary.jp

 


    <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タグで枠を作っていきます。

コードはこちらのサイトを参考にしました。

 

saruwakakun.com

デザインは太い線の枠に内側に「あわせて読みたい」の文字をいれたものにします。色は水色にしてみましょう。

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ボックスの中に「あわせて読みたい」を入れてみると?

あわせて読みたい

mizu-note.hatenadiary.jp

 

前途多難ですね。

 

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に「あわせて読みたい」の文字列分だけ足しました。

しかしこの中に入れてみるとこのようになってしまいます。

 

 

あわせて読みたい

mizu-note.hatenadiary.jp

 

 

どうしたら枠にフィットしてくれるでしょうか。

 

「過去記事貼り付け」のタグも変える必要あり

今度はHTML側の調整です。

まず要らない要素をそぎ落とします。下部の文字リンク列と、前後のpを削りました。

そしてiflame内も変更します。marginがあらかじめ設定されているため枠がフィットしなかったのです。なので0pxに変更します。

変更後、こう表示されました。

 

 

あわせて読みたい

 

やっとぴったりフィットの枠が完成しました。

しかもちゃんとレスポンシブデザインです。

 

貼り付け方

  • Divタグで囲う
  • pと下部のリンクを消す
  • marginを0pxにする

 

 

 

この3工程で「あわせて読みたい」リンクができあがるようになりました。

これから過去記事さかのぼって色々貼ってみますね。

 

 

あわせて読みたい