自分でデザインするTOP

自分でデザインするページ

自分でページをレイアウトしたいけれどユーザーテンプレからの改変は難しい、だけど公式テンプレだと味気無いし見難い。
そんな人向けの個別カスタマイズを前提としたテンプレートです。
タグの勉強を始めたばかりという人にも。

ナノの仕様上分かり難いと思われる『HEAD・HTML詳細』の『HEAD内』は出来る限り抑えています。(やっていることは結局同じですが……)
『全体レイアウト』で好きにデザインしてみて下さいな。
見本のようなトップであれば下記のタグのサンプルをコピペする程度で製作可能かと。
背景画像、リンク色なども自分で好きな色に変えられるようになっています。

文字レイアウト(span)

文章の中において、その一部だけに変更を行いたい場合はspanを利用します。
下記のdivを使用すると勝手に改行が入ってしまいます。
大体そんなイメージを持って下さると分かり易いかと。

・文字スタイル変更
　例えば下線を引いたり
　文字色を変更してみたり
　機種によっては表示できないけれど太文字だとか
　こうやって背景色を変えてみたり
　更には背景に画像を使うなんて事も

・文字サイズ変更
　文字(x-small)
　文字(small)
　文字(medium/標準)
　文字(large)
　文字(x-large)
最初からx-smallまたはsmall程度の小さい文字で表示されます。
環境によっては差が生じなかったりなので、使うのはlargeかx-largeを推奨します。

・上記二つを組み合わせる(style=""に複数入れて行けば良い)
　文字(large)+色の変更

文字のレイアウト(div)

見出しを作る場合はdivを利用して下さい。

・文字の位置

左側に表示

真ん中に表示

右側に表示

・文字スタイルを変えて位置も変える

中央+下ライン+サイズ(large)+文字色

・今までの総まとめとして

こんな見出しがつくれます

同じ要領で『border-left』や『border-right』『border-bottom』『border-top』を指定すれば

こんな見出しや

こんな見出しも

ライン

↓標準的な奴

↓太さを太くした

↓標準的な奴を波線にした

↓二重線にした(3px以上必須)

↓色を変えて2pxのドット線にした

蛇足ともろもろ

<div class="all">ここに本文</div>
上記のタグで囲えばガラケーだと横幅が95%、スマホだと90%、PCだと550pxで表示されるようにしています。
なのでガラケーから見れば綺麗だけど、PCではデザインが崩れて見難いなんて事もある程度防げるかと。貼りつけた画像サイズの幅が大きいとデザインが崩れる事もありますが。

・文字サイズについて
個人的には<font size="1">文字</font>といったタグは避ける方が無難かなと思います。特にサイズ1や2。
ガラケーでは良くてもPCスマホでは文字が小さすぎて見難いなんて事も。

背景画像はデコヤ様から
見本のお花とお花の輪は自作。一応透過しておりますので使いたければどうぞ。