temp13 ソースコード

・イラスト展示用のブログ機能になります。追記機能はありません。
・色を変えたい場合は、「ここだけ変えたらとりあえずOK」な箇所にHEAD内で★印をつけたので参考にしてください。
・自動改行「しない」で作成しています。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）
・「上部表示テキスト」など、触らなくていい箇所（空白で問題ない箇所）は記載していません。

（画像のあげ方）
記事を書く＞画像のアップロードから画像をupして、「アップロードされた画像」の下の「#img●#」という文字列を本文に直接貼り付けてください。「#timg●#」にするとサムネイル表示もできます。

（4/26 20:55）HEADのソースコードを修正しました。見た目上変わりはありませんが、不要な記述を１行消しています。

HEAD内（共通）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #262626;/* ★全体の文字色 */
font-size: 12px;
font-weight: 200;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
height: 100vh;
background-color: #E0B731;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 600px;
padding: 0;
overflow: hidden;
margin: 0 auto;
}

/* リンク文字 */
a{
border-bottom: 1px solid #262626;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
color: #E0B731;/* ★リンク文字をホバーした時の文字色 */
border-bottom: 1px solid #E0B731;/* ★リンク文字をホバーした時の下線の色 */
}

/* 強調文 */
strong{
color: #CC103B;/* ★強調文の文字色 */
border-bottom: 2px solid #CC103B;/* ★強調文の下線の色 */
}

/* サイトタイトル */
h1{
font-family: 'Viaoda Libre', 'Noto Sans JP', serif;/* ★タイトルのフォント */
font-size: 50px;/* ★見出しの文字サイズ */
margin-bottom: -30px;
}

/* メインコンテンツ */
.top,main{
width: 100%;
margin: 40px auto 0;
padding: 10px 50px 40px;
text-align: center;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #FAF2D8;/* ★コンテンツの背景色 */
background-image : linear-gradient(to right, #E0B731, #E0B731 4px, transparent 4px, transparent 10px);/* ★点線の色と設定 */
background-size: 10px 1px;/* ★点線の長さと太さ */
background-repeat: repeat-x;
}

.top{
background-position: bottom;
}

main{
margin: 0 auto;
padding: 50px 50px 30px;
background-position: top;
}

.top p{
font-family: 'Viaoda Libre', cursive;
font-size: 20px;
}

.intro{
padding-bottom: 30px;
}

.ttl+.ttl{
margin-left: 15px;
}

.page,.page a{
font-family: 'Viaoda Libre', cursive;
font-size: 16px;
text-align: center;
padding-top: 50px;
}

/* 角を丸く切り抜いている部分のスタイリング（ここは触らない方が良いかも） */
.top:before,.top:after,main:before,main:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #E0B731;
left: -30px;
width: 60px;
height: 60px;
}

.top:before,main:before{
top: -30px;
}

.top:after,main:after{
bottom: -30px;
}

.top-inner:before,.top-inner:after,.main-inner:before,.main-inner:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #E0B731;
right: -30px;
width: 60px;
height: 60px;
}

.top-inner:before,.main-inner:before{
top: -30px;
}

.top-inner:after,.main-inner:after{
bottom: -30px;
}

/* カテゴリ絞り込みフォーム */
form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 250px;
gap: 15px;
vertical-align: top;
position: relative;
}

select,input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;/* ★フォームの背景色（透明） */
border-radius: 0;
color: #262626;/* ★フォームの文字色 */
border: 1px solid #262626;/* ★フォームの枠線の色 */
width: 30em;
height:30px;
padding: 0 5px;
position: relative;
margin: 0;
font-size: 12px;
}

select:focus{
outline: none;
height:30px;
background: #FFF;/* ★フォームをフォーカスした時の背景色 */
}

form:after{
content: "▼";
position: absolute;
font-size: 10px;
right: 78px;
top: 2px;
width: 10px;
height: 10px;
pointer-events: none;
}

input[type="submit"]{
width: auto;
background-color: #262626;/* ★Filterボタンの背景色 */
border: none;
color: #FFF;/* ★Filterボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
font-family: 'Viaoda Libre', cursive;
font-size: 13px;
letter-spacing: 0.15em;
line-height: normal;
}

input[type="submit"]:hover{
height:30px;
background-color: #E0B731;/* ★Filterボタンをホバーした時の背景色 */
color: #262626;/* ★Filterボタンをホバーした時の文字色 */
}

/* 記事ページ */
.title{
font-size: 16px;
}

.cate{
display: inline-block;
border: 1px solid #E0B731;/* ★カテゴリーの囲み線の色 */
padding: 0px 4px;
color: #E0B731;/* ★カテゴリーの文字色 */
font-size: 11px;
}

.cate:empty {
display: none;
}

.date{
padding-top: 10px;
font-size: 11px;
}

.content{
width: 100%;
margin: 40px auto 0;
line-height: 1.8em;
}

.content img{
max-width: 100%;
height: auto;
margin-bottom: 5px;
}

.content a{
border: none;
}

/* フッター */
footer{
font-family: 'Viaoda Libre', cursive;
text-align: center;
margin: 50px auto 30px;
font-size: 14px;
width: 100%;
}

.back{
font-family: 'Viaoda Libre', cursive;
font-size: 14px;
}

footer a:hover{
color: #FAF2D8;/* ★フッターのリンクをホバーした時の文字色 */
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin: 20px 20px;
}

.top{
margin-top: 0;
}

main{
padding: 50px 30px 30px;
}

h1{
font-size: 40px;
margin-bottom: -20px;
}

form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 220px;
gap: 15px;
vertical-align:baseline;
position: relative;
}

select{
margin-bottom: 0;
}
}

</style>

全体レイアウト

<div class="wrap">

<div class="top"><div class="top-inner">
<h1>Page Title</h1>
<p>by XXX</p>
#fld_filter#
</div></div>

<main><div class="main-inner">
<p class="intro">説明など入れたい場合はここに入れてください。（←↑new）</p>
#blog#
</main></div>

<footer>
<a class="back" href="■戻り先URL">back to top</a>
<br><br>
Template by <a class="back" href="https://nanos.jp/mellow100/">mellow.</a>
</footer>

</div>

一覧画面レイアウト：一覧部分

<a class="ttl" href="#v_url#">#title#</a>

一覧画面レイアウト：下部表示テキスト

<div class="page">#prev_prev_prev# | #next_next_next#</div>

記事画面レイアウト

<style type="text/css">
.top,.intro{
display: none;
}
main{
background-image: none;
margin-top: 20px;
}
</style>

<div class="title">#title#</div>
<div class="cate">#fld#</div>
<div class="date">#date# #time#</div>
<div class="content">#text#</div>
<div class="page">#prev_←_←#　   　#next_→_→#</div>

HEAD内：モノトーンver

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #262626;/* ★全体の文字色 */
font-size: 12px;
font-weight: 200;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
height: 100vh;
background-color: #E8E8E8;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 600px;
padding: 0;
overflow: hidden;
margin: 0 auto;
}

/* リンク文字 */
a{
border-bottom: 1px solid #262626;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
color: #ACACAC;/* ★リンク文字をホバーした時の文字色 */
border-bottom: 1px solid #ACACAC;/* ★リンク文字をホバーした時の下線の色 */
}

/* 強調文 */
strong{
color: #CC103B;/* ★強調文の文字色 */
border-bottom: 2px solid #CC103B;/* ★強調文の下線の色 */
}

/* サイトタイトル */
h1{
font-family: 'Monoton', 'Noto Sans JP', serif;/* ★タイトルのフォント */
font-size: 40px;/* ★見出しの文字サイズ */
margin-bottom: -20px;
}

/* メインコンテンツ */
.top,main{
width: 100%;
margin: 40px auto 0;
padding: 10px 50px 40px;
text-align: center;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #FFF;/* ★コンテンツの背景色 */
background-image : linear-gradient(to right, #E8E8E8, #E8E8E8 4px, transparent 4px, transparent 10px);/* ★点線の色と設定 */
background-size: 10px 1px;/* ★点線の長さと太さ */
background-repeat: repeat-x;
}

.top{
background-position: bottom;
}

main{
margin: 0 auto;
padding: 50px 50px 30px;
background-position: top;
}

.top p{
font-family: 'Monoton', 'Noto Sans JP', serif;
font-size: 20px;
}

.intro{
padding-bottom: 30px;
}

.ttl+.ttl{
margin-left: 15px;
}

.page,.page a{
font-family: 'Monoton', 'Noto Sans JP', serif;
font-size: 16px;
text-align: center;
padding-top: 50px;
}

/* 角を丸く切り抜いている部分のスタイリング（ここは触らない方が良いかも） */
.top:before,.top:after,main:before,main:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #E8E8E8;
left: -30px;
width: 60px;
height: 60px;
}

.top:before,main:before{
top: -30px;
}

.top:after,main:after{
bottom: -30px;
}

.top-inner:before,.top-inner:after,.main-inner:before,.main-inner:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #E8E8E8;
right: -30px;
width: 60px;
height: 60px;
}

.top-inner:before,.main-inner:before{
top: -30px;
}

.top-inner:after,.main-inner:after{
bottom: -30px;
}

/* カテゴリ絞り込みフォーム */
form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 250px;
gap: 15px;
vertical-align: top;
position: relative;
}

select,input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;/* ★フォームの背景色（透明） */
border-radius: 0;
color: #262626;/* ★フォームの文字色 */
border: 1px solid #262626;/* ★フォームの枠線の色 */
width: 30em;
height:30px;
padding: 0 5px;
position: relative;
margin: 0;
font-size: 12px;
}

select:focus{
outline: none;
height:30px;
background: #FFF;/* ★フォームをフォーカスした時の背景色 */
}

form:after{
content: "▼";
position: absolute;
font-size: 10px;
right: 102px;
top: 2px;
width: 10px;
height: 10px;
pointer-events: none;
}

input[type="submit"]{
width: auto;
background-color: #262626;/* ★Filterボタンの背景色 */
border: none;
color: #FFF;/* ★Filterボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
font-family: 'Monoton', 'Noto Sans JP', serif;
font-size: 13px;
letter-spacing: 0.15em;
line-height: normal;
}

input[type="submit"]:hover{
height:30px;
background-color: #E8E8E8;/* ★Filterボタンをホバーした時の背景色 */
color: #262626;/* ★Filterボタンをホバーした時の文字色 */
}

/* 記事ページ */
.title{
font-size: 16px;
}

.cate{
display: inline-block;
border: 1px solid #ACACAC;/* ★カテゴリーの囲み線の色 */
padding: 0px 4px;
color: #ACACAC;/* ★カテゴリーの文字色 */
font-size: 11px;
}

.cate:empty {
display: none;
}

.date{
padding-top: 10px;
font-size: 11px;
}

.content{
width: 100%;
margin: 40px auto 0;
line-height: 1.8em;
}

.content img{
max-width: 100%;
height: auto;
margin-bottom: 5px;
}

.content a{
border: none;
}

/* フッター */
footer{
text-align: center;
margin: 50px auto 30px;
font-size: 14px;
width: 100%;
}

.back{
font-family: 'Monoton', 'Noto Sans JP', serif;
font-size: 14px;
}

footer a:hover{
color: #ACACAC;/* ★フッターのリンクをホバーした時の文字色 */
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin: 20px 20px;
}

.top{
margin-top: 0;
}

main{
padding: 50px 30px 30px;
}

h1{
font-size: 26px;
margin-bottom: -20px;
}

form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 220px;
gap: 15px;
vertical-align:baseline;
position: relative;
}

select{
margin-bottom: 0;
}
}

</style>

HEAD内：パステルver

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #262626;/* ★全体の文字色 */
font-size: 12px;
font-weight: 200;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
height: 100vh;
background-color: #D3DFE5;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 600px;
padding: 0;
overflow: hidden;
margin: 0 auto;
}

/* リンク文字 */
a{
border-bottom: 1px solid #262626;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
color: #70A4BE;/* ★リンク文字をホバーした時の文字色 */
border-bottom: 1px solid #70A4BE;/* ★リンク文字をホバーした時の下線の色 */
}

/* 強調文 */
strong{
color: #CC103B;/* ★強調文の文字色 */
border-bottom: 2px solid #CC103B;/* ★強調文の下線の色 */
}

/* サイトタイトル */
h1{
font-family: 'Dancing Script', cursive;/* ★タイトルのフォント */
font-size: 40px;/* ★見出しの文字サイズ */
margin-bottom: -20px;
}

/* メインコンテンツ */
.top,main{
width: 100%;
margin: 40px auto 0;
padding: 10px 50px 40px;
text-align: center;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #F8F8F8;/* ★コンテンツの背景色 */
background-image : linear-gradient(to right, #D3DFE5, #D3DFE5 4px, transparent 4px, transparent 10px);/* ★点線の色と設定 */
background-size: 10px 1px;/* ★点線の長さと太さ */
background-repeat: repeat-x;
}

.top{
background-position: bottom;
}

main{
margin: 0 auto;
padding: 50px 50px 30px;
background-position: top;
}

.top p{
font-family: 'Dancing Script', cursive;
font-size: 20px;
}

.intro{
padding-bottom: 30px;
}

.ttl+.ttl{
margin-left: 15px;
}

.page,.page a{
font-family: 'Dancing Script', cursive;
font-size: 16px;
text-align: center;
padding-top: 50px;
}

/* 角を丸く切り抜いている部分のスタイリング（ここは触らない方が良いかも） */
.top:before,.top:after,main:before,main:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #D3DFE5;
left: -30px;
width: 60px;
height: 60px;
}

.top:before,main:before{
top: -30px;
}

.top:after,main:after{
bottom: -30px;
}

.top-inner:before,.top-inner:after,.main-inner:before,.main-inner:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #D3DFE5;
right: -30px;
width: 60px;
height: 60px;
}

.top-inner:before,.main-inner:before{
top: -30px;
}

.top-inner:after,.main-inner:after{
bottom: -30px;
}

/* カテゴリ絞り込みフォーム */
form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 250px;
gap: 15px;
vertical-align: top;
position: relative;
}

select,input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;/* ★フォームの背景色（透明） */
border-radius: 0;
color: #262626;/* ★フォームの文字色 */
border: 1px solid #262626;/* ★フォームの枠線の色 */
width: 30em;
height:30px;
padding: 0 5px;
position: relative;
margin: 0;
font-size: 12px;
}

select:focus{
outline: none;
height:30px;
background: #FFF;/* ★フォームをフォーカスした時の背景色 */
}

form:after{
content: "▼";
position: absolute;
font-size: 10px;
right: 80px;
top: 2px;
width: 10px;
height: 10px;
pointer-events: none;
}

input[type="submit"]{
width: auto;
background-color: #262626;/* ★Filterボタンの背景色 */
border: none;
color: #FFF;/* ★Filterボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
font-family: 'Dancing Script', cursive;
font-size: 13px;
letter-spacing: 0.15em;
line-height: normal;
}

input[type="submit"]:hover{
height:30px;
background-color: #D3DFE5;/* ★Filterボタンをホバーした時の背景色 */
color: #262626;/* ★Filterボタンをホバーした時の文字色 */
}

/* 記事ページ */
.title{
font-size: 16px;
}

.cate{
display: inline-block;
border: 1px solid #70A4BE;/* ★カテゴリーの囲み線の色 */
padding: 0px 4px;
color: #70A4BE;/* ★カテゴリーの文字色 */
font-size: 11px;
}

.cate:empty {
display: none;
}

.date{
padding-top: 10px;
font-size: 11px;
}

.content{
width: 100%;
margin: 40px auto 0;
line-height: 1.8em;
}

.content img{
max-width: 100%;
height: auto;
margin-bottom: 5px;
}

.content a{
border: none;
}

/* フッター */
footer{
text-align: center;
margin: 50px auto 30px;
font-size: 14px;
width: 100%;
font-family: 'Dancing Script', cursive;
}

.back{
font-family: 'Dancing Script', cursive;
font-size: 14px;
}

footer a:hover{
color: #70A4BE;/* ★フッターのリンクをホバーした時の文字色 */
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin: 20px 20px;
}

.top{
margin-top: 0;
}

main{
padding: 50px 30px 30px;
}

h1{
font-size: 40px;
margin-bottom: -20px;
}

form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 220px;
gap: 15px;
vertical-align:baseline;
position: relative;
}

select{
margin-bottom: 0;
}
}

</style>

source code