8/13

ブログ風テンプレートを作ろう！

こんにちは！　絶賛割烹で活躍中の夕月です！

ふと我に返って、作ったテンプレートを眺めるといったい私は小説家になろうで何をやっているんだろうと思ってしまいますね。

というか今まで作った作品を眺めてもそう思ってしまったり。

小説家になろう……？

……小説？

どうしてこうなった。

はい、ということで今回からテンプレート作りをしていきます。

□　□　テンプレートの説明　□　□

今回はブログ風テンプレートです。

ブログでよく使われるパーツについてそれぞれ紹介していきます。

■見出し　

まずブログといえば見出しでしょう。

どんなことが書いてあるのかを効果的に使える手段ですね。

基本的に、見出しは背景とフォントサイズを変えて表現することが多いです。

あとは枠を付けたりして他と区別したりしますね。

なのでそれを作っていきましょう。

例によってあまり詳しくは説明しませんが、活動報告に貼り付けて遊んでみてください。

1.　背景色を変えた見出し

<div style="background:#E0F8F7;padding: 0.5em;font-size: 1.5em;">背景色を変えた見出し</div>

<div style="background:#F8E0E0;padding: 0.5em;font-size: 2em;font-weight:bold;">背景色を変えた見出し</div>

・background　色指定（background-colorでも可）

・padding 枠内間隔

・font-size　フォントの大きさ

・font-weight　太字設定

それぞれのパラメータをいじってみてください。

2.　線を使った見出し

<div style="background:#E0F8F7;padding: 0.5em;font-size: 2em;font-weight:bold;border-bottom:solid 3px #81F7F3;">線を使った見出し</div>

<div style="background:#E0F8F7;padding: 0.5em;font-size: 2em;font-weight:bold;border-left:solid 7px #81F7F3;">線を使った見出し</div>

<div style="padding: 0.5em;font-size: 2em;font-weight:bold;border-top:solid 3px black;border-bottom:solid 3px black;">線を使った見出し</div>

<span style="padding: 0.5em;font-size: 2em;font-weight:bold;border-top:solid 3px black;border-bottom:solid 3px black;">線を使った見出し</span>

・border-top, border-left, border-right, border-bottom

実は枠は4カ所別々に指定できます。

それぞれ好きなところに線を引くことができます。線の種類を変えても面白いですね。

・divタグではなくspanタグを使うと見出し文字のところまで装飾されます。

それぞれのパラメータをいじってみてください。

3.　刺繍風見出し

<div style="padding:5px;background:#F5D0A9;"><div style="color:#000000;padding:15px;background:#F5D0A9;border:2px dashed #FFFFFF;font-size:18pt;font-weight:bold;">刺繍風見出し</div></div>

<div style="padding:10px;background:#BCF5A9;"><div style="color:#000000;padding:15px;background:#BCF5A9;border-top:2px dashed #FFFFFF;border-bottom:2px dashed #FFFFFF;font-size:18pt;font-weight:bold;">刺繍風見出し</div></div>

<div style="padding:10px;background:#D8D8D8;"><div style="color:#000000;padding:10px;background:#D8D8D8;border:3px dashed #FFFFFF;font-size:18pt;font-weight:bold;text-align:center;">刺繍風見出し</div></div>

タグを2つ使います。

・始めのタグで外側を設定。paddingで内側ボーダーの間隔を設定しています。

・内側で文字の装飾を行っています。

・text-alignで文字の位置を設定してます。

それぞれのパラメータをいじってみてください。

4.背景画像で塗る

<div style="padding: 0.5em;font-size: 2em;font-weight:bold;background-image: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i362082/);">背景画像を使った見出し</div>

背景画像を使います。みてみんなどに背景素材をアップロードしてください。

こんな感じで

・background-image: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i362082/)

で背景画像を使うことができます。urlのところにアップロードしたURLを書いてください。

なお、グラデーション（linear-gradient）や角を丸くする（border-radius）タグは使えませんでした。

なのでもしそれらを実現するならこうやって背景として設定するのが無難ですかね。

まぁアップロードとかする手間を考えると面倒ですが。

手間をかけるんであればそれでもよさそうですね。

あと本来見出しはhタグを使うんですけど、小説家になろうのcssの設定でPC版とスマホ版で差異が出てしまい意図しない装飾になるので、気にされる方はdivやspanを使うの方がいいと思います。

たとえば同じスタイル設定でタグを使ったとします。

<h2 style="background:#E0F8F7;padding: 0.5em;font-size: 2em;font-weight:bold;border-bottom:solid 3px #81F7F3;">h2タグを使ってみるぞい</h2>

<div style="background:#E0F8F7;padding: 0.5em;font-size: 2em;font-weight:bold;border-bottom:solid 3px #81F7F3;">divタグを使ってみるぞい</div>

こんな風に見る媒体で異なって見えます。

（こうなるのはなろう側が設定しているフォント設定が見出しタグに適用されるからです。なおスマホ版とPC版で装飾が異なる模様+ブラウザにも影響されます）

なので閲覧媒体で変化しないように装飾するのであれば、本来の用途の見出しタグよりもdiv,spanを使うといいかなぁと思います。

とりあえず見出しは以上です。

続きましてボックスです。

目次の作成や、引用、まとめなんかに使われます

まぁ基本装飾パラメータは同じです。

見出しより余白を多めにとったり段落を付けたり、枠の幅を大きくしたりして使います。

また複数段に分かれるため行幅を大きくとったりします。

■ボックス

1.　囲み

<div style="background:#f1f1f1;padding:1em;font-size: 2em;font-weight:bold;bold;border:solid 3px gray;line-height: 2.5em;">・目次1

・目次2

・目次3

</div>

<div style="color: #58FA82;background: #EFFBEF;padding:1em;font-size: 1.5em;font-weight:bold;border: dashed 2px #58FA82;line-height: 2em;padding:1em">・目次1

・目次2

・目次3

</div>

<div style="padding:5px;background:#F5D0A9;"><div style="color:#000000;padding:15px;background:#F5D0A9;border:2px dashed #FFFFFF;font-size:18pt;font-weight:bold;">・目次1

・目次2

・目次3

</div></div>

line-height:で行間指定

padding:で余白の指定

・見出し付き

見出しタイトル

<div style="font-size:14pt;font-weight:bold;color:#5d627b;line-height:24px;background:#F8ECE0;">・目次1

・目次2

・目次3

</div></div>

・途中でフォントサイズを変える

<span style="font-size:28pt;background:#F6CEE3;">見出し</span>タイトル

<div style="font-size:14pt;font-weight:bold;color:#5d627b;line-height:24px;background:#EFF8FB;">・目次1

・目次2

・目次3

</div></div>

箱を2つ用意して内側の色を変えています。

spanを途中で挟むことでフォントサイズや色なんかも変えられます。

・レビュー欄ぽいもの

<div style="font-size:18pt;font-weight:bold;text-align:center;line-height:24px;">レビュータイトル</div>

<div style="font-size:14pt;text-align:right;">レビュワー：レビュワー名</div>

レビュー本文

・

</div>

それぞれの領域でフォント設定を変えています。

もう少しシンプルにしてもよさそうです。

区切りはborder-top:によって作ってます。

文字にリンク貼ってもいいですね。

こんな感じでボックスを作れます。

■ボタン

では最後にボタンです。

HTMLにはボタンを作るタグもあるのですが、残念ながら活動報告においてはボタンタグは使えません。

なので実現する場合はリンクタグ+画像を使います。

・ボタンの作り方

ボタンは自分で作ってもいいですし、フリー素材を利用してもいいですね。

こんな感じで自分でボタン風の画像を用意します。

それにリンクを張ります。

そんな感じでボタンを実現します。

フリーのボタン素材やジェネレーターなんかもありますので、ボタンを作れない人は『ボタン　フリー』とかで検索してみてください。

ということでブログ素材について説明が終わりました。ということでこの次にテンプレートを用意しているので使ってみてくださいね。

コピペ用テンプレート

1.　背景色を変えた見出し

<div style="background:#E0F8F7;padding: 0.5em;font-size: 1.5em;">背景色を変えた見出し</div>

<div style="background:#F8E0E0;padding: 0.5em;font-size: 2em;font-weight:bold;">背景色を変えた見出し</div>

・background　色指定（background-colorでも可）

・padding 枠内間隔

・font-size　フォントの大きさ

・font-weight　太字設定

2.　線を使った見出し

<div style="background:#E0F8F7;padding: 0.5em;font-size: 2em;font-weight:bold;border-bottom:solid 3px #81F7F3;">線を使った見出し</div>

<div style="background:#E0F8F7;padding: 0.5em;font-size: 2em;font-weight:bold;border-left:solid 7px #81F7F3;">線を使った見出し</div>

<div style="padding: 0.5em;font-size: 2em;font-weight:bold;border-top:solid 3px black;border-bottom:solid 3px black;">線を使った見出し</div>

<span style="padding: 0.5em;font-size: 2em;font-weight:bold;border-top:solid 3px black;border-bottom:solid 3px black;">線を使った見出し</span>

・border-top, border-left, border-right, border-bottom

実は枠は4カ所別々に指定できます。

それぞれ好きなところに線を引くことができます。線の種類を変えても面白いですね。

・divタグではなくspanタグを使うと見出し文字のところまで装飾されます。

3.　刺繍風見出し

<div style="padding:5px;background:#F5D0A9;"><div style="color:#000000;padding:15px;background:#F5D0A9;border:2px dashed #FFFFFF;font-size:18pt;font-weight:bold;">刺繍風見出し</div></div>

タグを2つ使います。

・始めのタグで外側を設定。paddingで内側ボーダーの間隔を設定しています。

・内側で文字の装飾を行っています。

・text-alignで文字の位置を設定してます。

それぞれのパラメータをいじってみてください。

4.背景画像で塗る

<div style="padding: 0.5em;font-size: 2em;font-weight:bold;background-image: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i362082/);">背景画像を使った見出し</div>

・background-image: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i362082/)

で背景画像を使うことができます。urlのところにアップロードしたURLを書いてください。

5.　囲みボックス

<div style="background:#f1f1f1;padding:1em;font-size: 2em;font-weight:bold;bold;border:solid 3px gray;line-height: 2.5em;">・目次1

・目次2

・目次3

</div>

<div style="color: #58FA82;background: #EFFBEF;padding:1em;font-size: 1.5em;font-weight:bold;border: dashed 2px #58FA82;line-height: 2em;padding:1em">・目次1

・目次2

・目次3

</div>

<div style="padding:5px;background:#F5D0A9;"><div style="color:#000000;padding:15px;background:#F5D0A9;border:2px dashed #FFFFFF;font-size:18pt;font-weight:bold;">・目次1

・目次2

・目次3

</div></div>

line-height:で行間指定

padding:で余白の指定

6.見出し付きボックス

見出しタイトル

<div style="font-size:14pt;font-weight:bold;color:#5d627b;line-height:24px;background:#F8ECE0;">・目次1

・目次2

・目次3

</div></div>

・途中でフォントサイズを変える

<span style="font-size:28pt;background:#F6CEE3;">見出し</span>タイトル

<div style="font-size:14pt;font-weight:bold;color:#5d627b;line-height:24px;background:#EFF8FB;">・目次1

・目次2

・目次3

</div></div>

箱を2つ用意して内側の色を変えています。

spanを途中で挟むことでフォントサイズや色なんかも変えられます。

7.レビュー欄ぽいもの

<div style="font-size:18pt;font-weight:bold;text-align:center;line-height:24px;">レビュータイトル</div>

<div style="font-size:14pt;text-align:right;">レビュワー：レビュワー名</div>

レビュー本文

・

</div>

それぞれの領域でフォント設定を変えています。

もう少しシンプルにしてもよさそうです。

区切りはborder-top:によって作ってます。

文字にリンク貼ってもいいですね。

8.ボタン

HTMLにはボタンを作るタグもあるのですが、残念ながら活動報告においてはボタンタグは使えません。

なので実現する場合はリンクタグ+画像を使います。

リンクタグaと画像タグimgをそれぞれ変えてください。

9.色サンプル（ブログっぽい色合い）

・薄い色合い

<span style="background-color:#F8E0E0;">　　　　　　　　　　</span> #F8E0E0

<span style="background-color:#F8ECE0;">　　　　　　　　　　</span> #F8ECE0

<span style="background-color:#F7F8E0;">　　　　　　　　　　</span> #F7F8E0

<span style="background-color:#E6F8E0;">　　　　　　　　　　</span> #E6F8E0

<span style="background-color:#E0F8F1;">　　　　　　　　　　</span> #E0F8F1

<span style="background-color:#E0F2F7;">　　　　　　　　　　</span> #E0F2F7

<span style="background-color:#E0E6F8;">　　　　　　　　　　</span> #E0E6F8

<span style="background-color:#ECE0F8;">　　　　　　　　　　</span> #ECE0F8

<span style="background-color:#F8E0F7;">　　　　　　　　　　</span> #F8E0F7

<span style="background-color:#F2F2F2;">　　　　　　　　　　</span> #F2F2F2

・濃い色合い

<span style="background-color:#F78181;">　　　　　　　　　　</span> #F78181

<span style="background-color:#F7BE81;">　　　　　　　　　　</span> #F7BE81

<span style="background-color:#F2F5A9;">　　　　　　　　　　</span> #F2F5A9

<span style="background-color:#D0F5A9;">　　　　　　　　　　</span> #D0F5A9

<span style="background-color:#A9F5D0;">　　　　　　　　　　</span> #A9F5D0

<span style="background-color:#81DAF5;">　　　　　　　　　　</span> #81DAF5

<span style="background-color:#A9BCF5;">　　　　　　　　　　</span> #A9BCF5

<span style="background-color:#BCA9F5;">　　　　　　　　　　</span> #BCA9F5

<span style="background-color:#F5A9F2;">　　　　　　　　　　</span> #F5A9F2

<span style="background-color:#A4A4A4;">　　　　　　　　　　</span> #A4A4A4

サンプルはブログ風テンプレート置き場です

HTML参考エッセイ
1.	小説の背景を華やかにしませんか？ついでにコピペで使えるHTMLタグテンプレ作ってみた！
2.	「小説家になろう」におけるＨＴＭＬタグの使い方について
3.	【割烹を彩る】需要があるみたいなので作ってみました
4.	検索機能と活動報告の活用　～新作発見の効率化を目指して～活動報告で使えるHTMLタグについて　１回目活動報告で使えるHTMLタグについて　２回目活動報告で使えるHTMLタグについて　３回目活動報告で使えるHTMLタグについて　４回目活動報告で使えるHTMLタグについて　５回目活動報告で使えるHTMLタグについて　６回目活動報告のテキスト配置について　１回目活動報告のテキスト配置について　２回目
5.	挿絵のつけかた
6.	【活動報告から小説へアクセスできるようにしたい】
7.	ランキングタグとかHTMLとか何だか全然分かんないって作者ちょっと来てみ。一番簡単なことだけ教えるから
8.	活動報告で試してみよう
9.	小説を書くルール、活動報告リンクタグ、画像挿入について　～必要最小限のメモ～
10.	リンクタグの作成・作者のリンク・みてみんの画像関係
11.	カラーコードを知らない作者へ（作者退会）

割烹参考
1.	割烹芸人になろう
2.	割烹サンプル1
3.	みてみん割烹サンプル2
4.	割烹サンプル3
5.	割烹サンプル4
6.	割烹サンプル5
7.	ブログ風テンプレート置き場
8.	チャット風テンプレート置き場
9.	バトン参考置き場