note｢トップページヘッダー画像｣素材《HTML/CSS》

text.sakura.ne.jp【公式】

2024年4月22日 19:30

はじめに

noteで使える｢トップページ ヘッダー画像｣のHTML素材を紹介しています。
当noteのトップページ(クリエイターページ)に表示されているような画像を作成できます。

《もくじ》
■ ｢トップページヘッダー画像｣の例
■ ｢トップページヘッダー画像｣のHTML
■ ｢トップページヘッダー画像｣のCSS
■ ｢トップページヘッダー画像｣のHTMLサイト例
■ HTML素材を使って画像を作る方法
■ 使用例

■ ｢トップページヘッダー画像｣の例

トップページに表示される画像例

アップロードする画像例

■ ｢トップページヘッダー画像｣のHTML

<div id="css_1">
<div id="css_2">
<div id="css_3">
<div id="left"><img alt="ロゴ画像" src="ロゴ画像のURL"></div><div id="space"></div><div id="right"><span id="title">タイトルのサンプル</span><span id="tag">ここには｢noteの紹介文｣または｢ハッシュタグ｣を書く</span></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 #000;
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABESURBVEhLY/wPBAx0AExQmuZg1CKywahFZINRi8gGoxaRDUYtIhuMWkQ2GF4WXbx4kX4+Yrxw4QJdmlt0adfRMegYGAAUjxB/NcNmuwAAAABJRU5ErkJggg==");
background-position:left top;
background-repeat:repeat;
background-position:3.0px -14.4px;
}
/* 背景画像の濃度(濃い:0.00～1.00:薄い) */
#css_2{
display:table;
width:100%;
height:100%;
background:rgba(255,255,255, 0.25);
}
/* 上下左右中央寄せ */
#css_3{
display:table-cell;
vertical-align:middle;
text-align:center;
}
/* 左側(ロゴ画像用の丸い円) */
div#left{
display:inline-block;
vertical-align:middle;
text-align:center;
width:156px;
height:156px;
border-radius:50%;
background:rgb(7,7,7);
box-shadow:0 0 4px 0 rgb(206,206,206), 0 0 0 0.5px rgb(216,216,216);
}
/* 左側(ロゴ画像) */
div#left img{
display:inline-block;
width:134px;
height:auto;
margin:46px auto 0 auto;
}
/* 中間(ロゴ画像とタイトルの間のスペース) */
div#space{
display:inline-block;
width:16px;
}
/* 右側(上に｢タイトル｣、下に｢紹介文・ハッシュタグ｣) */
div#right{
display:inline-block;
vertical-align:middle;
font-size:calc(100% * 10.0);
font-weight:bold;
}
/* 右側(タイトル) */
div#right > span#title{
display:block;
margin:27px 0 0 0;
padding:0 16px 0 16px;
background:linear-gradient(120deg, rgba(235,186,254, 0.30) 25%, rgba(190,211,254, 0.30) 50%, rgba(161,228,253, 0.30) 75%, rgba(196,250,250, 0.30) 100%);
background-repeat:no-repeat;
background-position:0 100%;
background-size:100% 40%;
font-family:"Courgette",cursive;
font-style:normal;
font-weight:bold;
letter-spacing:0.04em;
font-family:"Courgette",cursive;
}
/* 右側(紹介文・ハッシュタグ) */
div#right > span#tag{
display:block;
margin:21px 0 14px 0;
font-size:calc(100% * 0.25);
font-weight:bold;
letter-spacing:0.02em;
}

ロゴ画像のサンプル (213px×105px)

data:image/png;base64,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

■ ｢トップページヘッダー画像｣のHTMLサイト例

サンプルページ

https://text.sakura.ne.jp/note-sample/image-toppage-header.html

■ HTML素材を使って画像を作る方法

《使うもの》
パソコン、HTMLファイル、ブラウザ、画像編集ツール(例:ペイント)

① HTMLファイルを作る(***.html)
② HTMLファイル内にHTML素材(HTML/CSS)をコピーペーストする
③ ロゴとタイトルと紹介文の部分を書き換える
④ HTMLページをスクリーンショットで撮影
⑤ 画像編集ツールで黒い枠線の外側を削除
⑥ できあがった画像を.pngなどの拡張子で保存

■ 使用例

タイトル部分の文字フォントは、Googleフォントの『Courgette』を使用しました。

ヘッダー画像#とは / #noteの書き方

（text）

◇　　◇　　◇

《過去に作成したnoteの記事リスト》
https://note.com/text_sakura/n/na2cd73291236

《記事についてのお問い合わせ先》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。

この記事が参加している募集

#とは

59,484件

#noteの書き方

31,454件

この記事が気に入ったらサポートをしてみませんか？

note｢トップページ ヘッダー画像｣素材《HTML/CSS》