サンプル ステッチ系？
- カテゴリ：タウン
- 2018/10/25 18:09:20
仮想タウンでキラキラを集めました。
2018/10/25
| 集めた場所 | 個数 |
|---|---|
| 展望広場 | 15 |
| 教会広場 | 6 |
●● ●● ●● ●● ●● ●● ●● ●● ●● ●● ●● ●● ●
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
●● ●● ●● ●●●
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
◆ここに内容を書く◆
囲み枠のサイズを変える方法もあるかもだけど
とりあえず
文字数に合わせて長さを変える方法は
使いたい囲み枠のコードに「display:inline-block; 」を追加するらしい。
例えば、、、
<div style="background:linear-gradient(transparent 0,#ee7 2px,transparent 5px) 0 0/5px 5px,linear-gradient(90deg,#ff8 0,#ee7 2px,#ff8 5px) 0 0/5px 5px;margin:1em auto;padding:1em;box-shadow:1px 1px 2px rgba(0,0,0,0.3);border-radius:10px;"><div style="color:#333;background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #ddd;border-radius:5px;padding:10px">◆ここに内容を書く◆</div></div></div>
をHTML編集すると、、、
〇〇
◆ここに内容を書く◆
になるんだけど、冒頭部分にさっきのコードを入れると、、
<div style="display:inline-block;background:linear-gradient(transparent 0,#ee7 2px,transparent 5px) 0 0/5px 5px,linear-gradient(90deg,#ff8 0,#ee7 2px,#ff8 5px) 0 0/5px 5px;margin:1em auto;padding:1em;box-shadow:1px 1px 2px rgba(0,0,0,0.3);border-radius:10px;"><div style="color:#333;background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #ddd;border-radius:5px;padding:10px">◆ここに内容を書く◆</div></div></div>
<div style="display:inline-block;background:linear-gradient(transparent 0,#ee7 2px,transparent 5px) 0 0/5px 5px,linear-gradient(90deg,#ff8 0,#ee7 2px,#ff8 5px) 0 0/5px 5px;margin:1em auto;padding:1em;box-shadow:1px 1px 2px rgba(0,0,0,0.3);border-radius:10px;"><div style="color:#333;background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #ddd;border-radius:5px;padding:10px">◆ここに内容を書く◆</div></div></div>
こんな感じね！
これをHTML編集すると、、、
〇 〇 〇 〇
◆ここに内容を書く◆
〇 〇 〇 〇
こうなりまーす⭐彡
〇 〇 〇 〇
文字数で
〇 〇
サイズが変わるから
タイトル向き？？
ちなみに、行内で改行する時は
Shift + ENTERで
自由に改行できます。
〇 〇
サイズが変わるから
タイトル向き？？
ちなみに、行内で改行する時は
Shift + ENTERで
自由に改行できます。
更に真ん中に合わせたいとか
右側にずらすとかも
センター
<div align= "center"> ここにコード入れる </div>
右寄せ
<div align="right"> ここにコード入れる </div>
で出来るみたい～
〇 〇〇 〇
◆ここに内容を書く◆
これ右寄せ
●●
◆ここに内容を書く◆
これはセンター寄せ
自分で作ってみたい気持ちは少しあるんだけど
あまりよく分かっていないので、今はまだまだ無理っぽいです^_^;
ニコタの日記もあまり小まめに書く方じゃなかったんだけど
ちょっと楽しくなりました
ありがとうございました
なるほどなるほど！！
これでやりたかったセンター寄せ・中央のやり方がわかりますた！(｡◕д◕｡)✿
タイトルだけ囲みたいことが多かったので♫♦*ﾟ¨
これで日記がちょっとグレードUPできるような気がして
凄く嬉しい～～～！！(。>ᴗ<。)☆.。.:*・゜
ばしをさん、丁寧に教えて下さりありがとうございましたぁ～～～！！！
因みにいろいろアメブロで色の種類を研究してみたです✿
自分で作った色も色々使えるみたいですね♫♦*ﾟ¨
色々遊べて楽しいっす(*´艸`)☆
わぁ～♫♦*ﾟ¨
ステッチも可愛い！！！(。>ᴗ<。)
これ、このままコピーさせてもらおうかな✿
ぼんやり系で作ったページの中にとっても映えそう(｡◕д◕｡)
ぼんやり系は全色、
私も自分用に非公開の日記で一覧になったマテリアルページ作ってみたです！
けど…ほか、チェック柄とかハート柄、水玉柄のも作ろうとしたけど
ニコではどうやら表示できないみたい(^_^；)
色んなの他もどんどん試してみたいかもです♫♦*ﾟ¨
あと、この枠って範囲の横幅の短いものはあるのかなぁ？？？
枠IN枠とかも面白そうだけど
まだ私にはそこまで使いこなせないかもｗ
こしパイセンも研究してるようで…！！
今後の日記が楽しみ～～♪(*´艸`)！！