26/27

(╹▽╹)＜その他いろいろですってお父様！

お父様だけちょっと雑。

まぁ大体基本的なことは説明したので、あとは既存のテンプレートを使って装飾しておきましょう。

割烹エディターのいくつかのテンプレートはそのまま使えます。

基本タグの中に入れて遊んでみてください。

改行したいところでは<br />タグを忘れずに

枠線なし基本タグ

この中にタグを入れる。

</div></div></div>

以下、実例+コピペ用

※画像を使うものはうまく動きません。使う場合はimgのタグに widthを明示的に書く必要があります。（max-widthがあれば楽だったんですけどね……）

■レビュー欄っぽい物

<div style="font-size:20px;padding:.5em;text-align:center;background:#f2f2f2;">レビュー欄</div>

<div style="padding:15px;border:solid 1px #aabbbb;background:#ffffff;line-height:1.5;font-size:15px;color:#6b6b6b;"><div style="text-align:center;color:#663300;center;font-size:18px;font-weight:bold;">タイトルをここに</div><div style="text-align:right;color:#0033cc;">レビュー者</div><div style="border-bottom:solid 0.1px #aabbbb;border-top:solid 0.1px #aabbbb;padding:0.5em 0 0.5em 0;margin:0.5em 0 0.5em 0;color:#6b6b6b;">ここに本文を入力<br />

ここに本文を入力<br />

ここに本文を入力<br /></div><div style="color:#fe7643;text-align:center;">作品名</div></div>

</div></div></div>

■ランキング風

<div style="font-size:20px;padding:.5em;text-align:center;background:#f2f2f2;">ランキング風</div>

<div style="font-size:14px;"><div style="font-size:1.5em;color:rgb(253,103,52);font-weight:bold;margin:0 0 .5em 0;">タイトルをここに</div><div>作者：<span style="color:rgb(42,84,212);">作者名</span><div style="font-size:1.1em;font-weight:bold;"><span style="color:rgb(238,51,51);">1,000</span> pt</span></div><div class="opentab" style="font-size:1em;background-color:rgb(230,250,250);padding:8px;margin:.5em 0 .5em 0;">あらすじ等</div><div style="font-size:0.9em;border:1px dashed rgb(91,187,187);padding:5px;margin:.5em 0 .5em 0;">あらすじ</div>キーワード：<span style="color:rgb(116,209,181);font-weight:bold;">キーワード</span></div>

</div></div></div>

■マーカー

<div style="font-size:20px;padding:.5em;text-align:center;background:#f2f2f2;">マーカー風</div>

</div></div></div>

■区切り

<div style="font-size:16px;line-height:1;text-align:center;"><span style="color:#000000;background:#ffffff;margin:10px;">✂キリトリセン✂<div style="margin-top:-8.5px;border-top:1px dashed #000000;">　</div></div>

</div></div></div>

■カード風なあれ。

カードに基づいて作成した、カードのコンテンツを構成する簡単なサンプルテキストですよ。

</div>

・・

最後にはこれを置いてください。

フロートを付けているのでタイル状に並べることもできます。そうすると今時のWebサイトって感じですよね。Wordpressっぽいな……。ただ欠点は左に寄っちゃうことですね。まぁ仕様だからしかたないかな。

PC画面

スマホ画面

258pxにしているのは280px内に収めるためでマージンを10px取ってるから。

258px + 2px(border分) + 20px(margin分) = 280px

これでスマホだと縦に並んで、PCだと横に並ぶレスポンシブデザインになります。（とはいえPCだと若干見にくいかな？　10個くらいカードが並ぶとよさそうです）

カードにリンク付ければいい感じかな？ imgをaで囲っておくといいかと思います。

一応サンプルはランキングタグに置いておくので参考にしてみてください。どんな風に見えるか確かめてみてください。

装飾の仕方は基本的に活動報告と同じなのでまぁ詳しく説明はしませんが。

違うのは横幅くらいですかね。一番外枠を適切に設定していればそれほど難しくはないでしょう。

では、自分なりのテンプレートを見つけてみてくださいね。

ちなみにチャット風は画像にwidth:100%を指定したら使えるようになります。

(*╹▽╹*)＜その他いろいろですってお父様！

(╹▽╹)＜その他いろいろですってお父様！