HTMLでnoteの記事の見出し画像を作ってみた
01. はじめに
noteの記事ごとに写真を用意するのは大変なので、文字を入力するだけで見出し画像が出来上がるHTMLを作ってみました。
02. 画像の例
03. HTML･CSSソースコード
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title></title>
<style type="text/css">
/* [内容] 文字フォント */
html,body,div{
margin:0;padding:0;border:0;background:none;
font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,sans-serif;
font-size:16px;line-height:1;
}
/* [内容] スクリーンショットを撮った後で切り抜きやすいように外側に余白を追加 */
html{
padding:10px;
}
/* [内容] 画像の全体サイズ、外枠の太さ＆色、背景に表示させたい画像 */
#css-1{
box-sizing:border-box;
width:1280px;height:670px;
border:solid 2px rgb(230,230,230);border-right:solid 3px rgb(230,230,230);
background-image:url('背景に表示させたい画像');
background-position:center center;
background-repeat:no-repeat;
background-size:50% auto;
}
/* [内容] 上下左右中央寄せの設定、背景の画像を薄くする */
#css-2{
display:table;width:100%;height:100%;
background-color:rgba(255,255,255,0.9);
}
/* [内容] 上下左右中央寄せの設定 */
#css-3{
display:table-cell;vertical-align:middle;text-align:center;
}
/* [内容] 記事タイトル、下線、｢記事を読む｣の表示位置を調節 */
#pageTitle{
display:inline-block;
padding-top:calc(24px + 24px + 22px + 24px);border-bottom:dashed 4px rgb(34,34,34);
font-size:350%;font-weight:bold;letter-spacing:0.04em;
color:rgb(34,34,34);
}
/* [内容] 記事の説明文 */
#pageOutline{
padding-top:24px;
font-size:175%;letter-spacing:0.04em;
color:rgb(34,34,34);
}
/* [内容] ｢記事を読む｣ボタン */
#pageRead{
display:inline-block;
margin-top:24px;padding:24px 24px 22px 24px;border-radius:6px;
background-color:rgb(44,182,150);color:rgb(255,255,255);
font-size:24px;font-weight:bold;letter-spacing:0.04em;
}
</style></head><body>
<div id="css-1">
<div id="css-2">
<div id="css-3">
<div id="pageTitle">記事のタイトル</div>
<div id="pageOutline">記事の説明</div>
<div id="pageRead">記事を読む</div>
</div>
</div>
</div>
</body></html>04. 使い方
① コード内の『記事のタイトル』と『記事の説明』の部分を書き換える
② ブラウザで表示
③ ブラウザ画面のスクリーンショットを撮影
④ 画像編集ソフト(ペイントなど)を起動
⑤ グレー色のボーダーラインの外側を削除
⑥ PNG形式などで保存
⑦ 記事の見出し画像が完成
(text)
◇ ◇ ◇
《 過去に作成したnoteの記事リスト 》
https://note.com/text_sakura/n/na2cd73291236
《 記事についてのお問い合わせ先 》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。
この記事が気に入ったらサポートをしてみませんか？