ブログでスタイルシート
ブログでスタイルシート
トップ
> ブログでスタイルシート
- 枠付きボックスで注目
- 幅いっぱいのボックス
- ボックスを右に表示
- ボックスの中に色をつける
- タイトル付ボックス
- タイトル付ボックス
- ボックスを右に寄せる
- ボックスを２つ並べる
- フォトスタンド風画像わく
- 画像に枠を付ける
- 中央に寄せて表示する
- ２つ横に並べる
注意事項
現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ（BRタグ）が付加されます。
テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。
見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。
ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし（<BR>タグで指定）」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです（楽天ブログではこれができません）。
文字を中央に寄せる
サンプルHTML
<div style="text-align:center">このように
書くと
各行が中央に
移動します。</div>
書くと
各行が中央に
移動します。</div>
ブラウザ表示
このように
書くと
各行が中央に
移動します。
書くと
各行が中央に
移動します。
文字を右に寄せる
サンプルHTML
<div style="text-align:right">このように
書くと
各行が右に
移動します。</div>
書くと
各行が右に
移動します。</div>
ブラウザ表示
このように
書くと
各行が右に
移動します。
書くと
各行が右に
移動します。
おまけ
文章の好きなところで文字の位置を変えることができます。
サンプルHTML
ふるいけや
<div style="text-align:center">かわずとびこむ</div>
<div style="text-align:right">みずのおと</div>
ブラウザ表示
ふるいけや
かわずとびこむ
みずのおと
真ん中にいきなりデカく色付きで表示するにはこんな感じ。
サンプルHTML
今日食べたケーキ
<div style="text-align:center;font-size:48pt;color:red">ちょ～うま～</div>
でした。
注）48ptの数字を変えるとサイズは変わります。大きさはほどほどに...
ブラウザ表示
今日食べたケーキ
ちょ～うま～
でした。
Copyright© 2006 finky. All Rights Reserved.
ジャンル別一覧
人気のクチコミテーマ
-
-
- しんくぱっど
- ファンエラーで起動できないT510を復…
- (2024-03-17 22:52:44)
-
-
-
- 私のPC生活
- iPad 用スタンドの補修 2024.6
- (2024-06-15 18:20:56)
-
-
-
- 花、風景の写真を撮るカメラとレンズ
- NICON 1 J1のレンズの故障。
- (2024-04-08 21:21:48)
-
© Rakuten Group, Inc.
