note｢記事 見出し画像｣｢ヘッダー画像｣素材《HTML/CSS》
はじめに
noteで使える｢記事 見出し画像｣｢ヘッダー画像｣のHTML素材を紹介しています。
当ページの一番上に表示されているような画像や、この段落の右下に表示されているような画像を作成できます。
《 もくじ 》
■ ｢記事 見出し画像｣の例
■ ｢記事 見出し画像｣のHTML
■ ｢記事 見出し画像｣のCSS
■ ｢記事 見出し画像｣のHTMLサイト例
■ ｢マガジン ヘッダー画像｣の例
■ ｢マガジン ヘッダー画像｣のHTML
■ ｢マガジン ヘッダー画像｣のCSS
■ ｢マガジン ヘッダー画像｣のHTMLサイト例
■ HTML素材を使って画像を作る方法
■ 使用例
■ ｢記事 見出し画像｣の例
■ ｢記事 見出し画像｣のHTML
<div id="css_1">
<div id="css_2">
<div id="css_3">
<div id="css_4">
<div id="logo"><img alt="note" src="data:image/png;base64,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"></div>
<div id="title">記事のタイトル</div>
<div id="description">記事の説明</div>
<div id="readMore">記事を読む</div>
</div>
</div>
</div>
</div>■ ｢記事 見出し画像｣のCSS
/* リセットCSS */
html,body,div,img{box-sizing:border-box;margin:0;padding:0;border:0;border-collapse:collapse;list-style:none;vertical-align:baseline;overflow-wrap:break-word;word-wrap:break-word;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;font-size:calc(1280px / 1.618 / 100);font-weight:normal;line-height:1;letter-spacing:0.04em;-webkit-text-size-adjust:100%;}
html{margin:16px;}
/* 全体サイズ、外側の余白、外側の黒線 */
#css_1{
width:1280px;
height:670px;
padding:16px;
border:solid 1px #000000;
}
/* 外枠の角丸、外枠の影、外枠の背景色 */
#css_2{
display:table;
width:100%;
height:100%;
border-radius:16px;
box-shadow:0 1px 6px 0 rgb(0,52,102), 0 0 0 1px rgb(0,62,112);
background-color:rgb(0,62,112);
}
/* 内側の余白、内側の角丸、内側の背景色 */
#css_3{
display:table;
width:calc(100% - 16px - 16px);
height:calc(100% - 16px - 16px);
margin:16px;
border-radius:8px;
background-color:rgb(248,248,248);
}
/* 上下左右中央寄せ、内側の角丸 */
#css_4{
display:table-cell;
vertical-align:middle;
text-align:center;
border-radius:inherit;
background-color:inherit;
}
/* note */
#logo{
float:left;
padding-left:48px;
font-size:0;
}
#logo img{
height:34px;
}
/* 記事のタイトル(サイズ･下線の設定)、左右の余白、上下の余白 */
#title{
display:inline-block;
width:calc(100% - 48px - 48px);
padding-top:calc(63px + 40px + 38px + 32px - 34px);
/* #readMoreのmargin-top + #readMoreのpadding-top + #readMoreのpadding-bottom + #readMoreのfont-size - #logoの画像のheight */
background:linear-gradient(transparent calc(100% - 16px), rgb(196,228,255) calc(100% - 16px));
font-size:calc(100% * 8.0);
/* 記事のタイトルが長くて改行される場合は｢8.0｣の数字を小さくする */
/* １文字～16文字…8.0 */
/* 17文字…7.7 */
/* 18文字…7.4 */
/* 19文字…7.1 */
font-weight:bold;
letter-spacing:0.04em;
}
/* 記事の説明 */
#description{
padding-top:32px;
font-size:calc(100% * 8 / 2);
letter-spacing:0.04em;
}
/* 記事を読むボタン */
#readMore{
display:inline-block;
margin-top:63px;
padding:40px 40px 38px 40px;
border-radius:16px;
background-color:rgb(0,62,112);
color:rgb(255,255,255);
font-size:32px;
letter-spacing:0.06em;
}■ ｢記事 見出し画像｣のHTMLサイト例
サンプルページ
https://text.sakura.ne.jp/note-sample/image-midashi.html
■ ｢マガジン ヘッダー画像｣の例
■ ｢マガジン ヘッダー画像｣のHTML
<div id="css_1">
<div id="css_2">
<div id="css_3">
<div id="title">マガジンのタイトル</div>
</div>
</div>
</div>■ ｢マガジン ヘッダー画像｣のCSS
/* リセットCSS */
html,body,div,img{box-sizing:border-box;margin:0;padding:0;border:0;border-collapse:collapse;list-style:none;vertical-align:baseline;overflow-wrap:break-word;word-wrap:break-word;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;font-size:calc(1280px / 1.618 / 100);font-weight:normal;line-height:1;letter-spacing:0.04em;-webkit-text-size-adjust:100%;}
html{margin:16px;}
/* 全体サイズ、外側の黒線、背景色 */
#css_1{
width:1280px;
height:670px;
border:solid 1px #000000;
background:linear-gradient(0deg, rgb(0,47,97), rgb(0,62,112) 50%, rgb(0,47,97));
}
/* 白線の位置 */
#css_2{
display:table;
width:100%;
height:calc(100% - 16px - 16px);
margin:16px 0 16px 0;
}
/* 白線の設定、上下左右中央寄せ */
#css_3{
display:table-cell;
border-top:double 4px rgba(252,252,252);
border-bottom:double 4px rgba(252,252,252);
vertical-align:middle;
text-align:center;
}
/* マガジンのタイトル(色･サイズ) */
#title{
color:rgba(252,252,252);
font-size:calc(100% * 6.4);
font-weight:bold;
letter-spacing:0.04em;
}■ ｢マガジン ヘッダー画像｣のHTMLサイト例
サンプルページ
https://text.sakura.ne.jp/note-sample/image-header.html
■ HTML素材を使って画像を作る方法
《 使うもの 》
パソコン、HTMLファイル、ブラウザ、画像編集ツール(例:ペイント)
① HTMLファイルを作る(***.html)
② HTMLファイル内にHTML素材(HTML/CSS)をコピーペーストする
③ タイトルと説明の部分を書き換える
④ HTMLページをスクリーンショットで撮影
⑤ 画像編集ツールで黒い枠線の外側を削除
⑥ できあがった画像を.pngなどの拡張子で保存
■ 使用例
見出し画像#とは / ヘッダー画像#とは / #noteの書き方
（text）
◇ ◇ ◇
《 過去に作成したnoteの記事リスト 》
https://note.com/text_sakura/n/na2cd73291236
《 記事についてのお問い合わせ先 》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。
この記事が気に入ったらサポートをしてみませんか？