はてなブログ レスポンシブ youtube

はてなブログのレスポンシブテーマのときにyoutubeをレスポンシブにする

cssに

.movie-wrap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

記事はhtml編集で

<div class="movie-wrap">
ここにYouTubeの埋め込みコードを貼る

</div>

 

見出しに下線

ｃｓｓに

/* -----見出し下線---- */
.entry-content h3 {
padding: 4px 10px;
color: #111;
border-bottom: 4px solid #2d70a4;
}

.entry-content h4 {
padding: 4px 10px;
color: #111;
border-bottom: 4px solid #2d70a4;
}

• ああああああああああホーム

記事タイトルの背景色

ｃｓｓに

/* -----記事タイトルの背景色---- */
.entry-title {
font-weight: bold;
font-size: 20px;
padding: 15px 10px;
background-color: #ddd;
border-radius: 15px;
}