利用者:.旻/署名のカスタマイズ

出典: へっぽこ実験ウィキ『八百科事典(アンサイクロペディア)』
移動先: 案内検索

--XANA.png.旻 (TalkHist) 2015年7月23日 (木) 15:33 (JST)

署名の一般的なカスタマイズについては、利用者:POLM/署名講座このページに詳しく書いてあります。

これは普通のカスタマイズに満足できない人たちに向けたカスタマイズです。

スタイル[編集]

  • 太さ
[[User:Example|<span style="font-weight: 900">Example</span>]]
Example
font-wight には、100、200、300 〜 900 までの数値、normal(標準)、bold(太字)、
bolder(親要素に対して太く)、lighter(親要素に対して細く) が指定できます。


  • 大きさ
[[User:Example|<span style="font-size: 80%">Example</span>]]
Example
font-size の指定の仕方は、長さ、パーセント、
ワード指定 (xx-large, x-large, large, medium, small, x-small, xx-small)、
larger smaller (親要素に対して大きく、小さく) があります。


small 要素を使う方法もあり。


  • フォント (非推奨)
[[User:Example|<span style="font-family: monospace">Example</span>]]
Example
font-family: "フォント名1", "フォント名2", "フォント名3"
のように指定してください。
ただし、" フォント名を囲む場合、span 要素の style= は、' でくくるように。
フォント名を囲む以外にも、
sans-serif … ゴシック体系のフォント
serif … 明朝体系のフォント
cursive … 筆記体系のフォント
fantasy … 装飾系のフォント
monospace … 等幅系のフォント
が使えます。
※注意 OS によってフォントがインストールされていないので、希望通り表示されない場合があります。


  • スモールキャピタル(おすすめ)
[[User:Example|<span style="font-variant: small-caps">Example</span>]]
Example
ご覧の通り、小文字が大きさを保ちつつ大文字になります。

[編集]

[[User:Example|<span style="text-decoration: overline underline">Example</span>]]

Example

線の種類は、以下のものがあります。

  1. none 無し
  2. overline 上線
  3. underline 下線
  4. line-through 取り消し線 (del要素と同じようなもの)
  5. blink 点滅 (超超超非推奨 ・・・ すごくうざいので絶対やめよう。というか最近のブラウザはこれが機能しない。)

アウトライン[編集]

[[User:Example|<span style="outline-style: solid; outline-width: 1px; outline-color: #0000ff;">Example</span>]]

もしくはまとめて、

[[User:Example|<span style="outline: solid 1px #0000ff">Example</span>]]

Example

outline-style[編集]

オーバーラインのスタイルのプロパティです。

  1. none 無し。ノーマル。
  2. solid 一本。
  3. double 二本。
  4. groov 立体的にくぼませる。
  5. ridge 立体的に隆起させる。
  6. inset 上と左のアウトラインが暗く、下と右のアウトラインが明るく表示される。
  7. outset 上と左のアウトラインが明るく、下と右のアウトラインが暗く表示される。
  8. dashed 破線
  9. dotted 点線

outline-width[編集]

数値 + px で指定するか、

thin (細い)、 medium (普通)、 thick (太い)

で指定できます。

outline-color[編集]

カラーコードもしくはカラーネームで指定。

ボーダー[編集]

アウトラインよりほんの少し高機能。

[[User:Example|<span style="border-style: dotted; border-width: 1px; border-color: #0080a0">Example</span>]]

それかまとめて、

[[User:Example|<span style="border: dotted 1px #0080a0">Example</span>]]

Example

border-style、border-width、border-color、はそれぞれ基本的には、outline-style、outline-width、outline-color、と同じです。

ボーダーの上下左右の設定[編集]

ボーダーは上下左右を設定できます。

[[User:Example|<span style="border-top: dotted 3px #000000; border-bottom: solid 6px #c00000; border-left: double 6px #00c000; border-right: dashed 3px #4080f0;">Example</span>]]

Example

角丸[編集]

[[User:Example|<span style="border:solid 10px blue; border-radius: 10px;">Example</span>]]

Example

角丸についての説明は面倒くさいので、このページでも見てください。

傾き・回転・歪み[編集]

注意! 傾け過ぎると文字が重なってしまいます。怒られても知りません。というか私が怒られました。

注意:少し古いブラウザでは動作できていないことがあり、ブラウザによってまちまちです。それでも使いたいという方だけどうぞ。

[[User:Example|<span style="transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; display: inline-block;">Example</span>]]

Example

ただし、やりすぎて、

[[User:Example|<span style="transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; display: inline-block;">Example</span>]]

Example

重なってしまうし、うざいので、注意してください。

rotate(角度deg) で角度指定です。

transform-origin は回転の中心を決めます。

(left, right, centerのどれか) (top, bottom, centerのどれか) で指定できます。

歪み

[[User:Example|<span style="transform: skew(20deg); -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -ms-transform: skew(20deg); transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; display: inline-block;">Example</span>]]

Example

斜体と同じじゃんとか言ってはいけない。

あとはめんどくさいので、ここでも見てください。