Bloguruでは、画像を差し込むと記事の上に割り込んでしまう。
新しい画像を差し込むと後ろについてしまう。
記事の後に画像を出す方法。
①画像をアップロードする
管理画面→「ファイルアップロード」→画像をアップロード
②ファイルのURLをコピー
③画像を入れたい箇所に以下の構文をコピペ。
< div class="text-center" >< img src="★" >< /div >
※Bloguruサーバの容量制限
・一度に10MBまで、全部で50MBまで。
ピクチャ上のサイズ変更で変更。
縦も横も幅400がちょうどいいぐらい。
解像度を上げたければ幅1,000。 それ以上は重くなる。
ただしスマホからの閲覧では表示サイズは同じ。
アップの前に。
EXif：画像に仕込まれた個人情報の削除をする。
画像で右クリック→プロパティ→詳細→「プロパティ→個人情報を削除」→OK
全体を赤にする
HTML
< ul >
< li >萬澄枝さん< /li >
< li >モアメタルちゃん< /li >
< li >永尾まりあちゃん< /li >
< /ul >
CSS
li{
color:red;
}
---------------------------------
↓
萬澄枝さんだけ赤にする
該当の文字をclass（指定範囲）として任意の名前を付けて、
そこだけにCSSを反映させる。
HTML
< ul >
< li class="selected">萬澄枝さん< /li >
< li >モアメタルちゃん< /li >
< li >永尾まりあちゃん< /li >
< /ul >
CSS
.selecteｄ{ ← 頭に.がつく。
color:red;
}
li{
color:#444;
}
■背景色を変える→「background-colorプロパティ」
その行の色の変更
HTML
< h1 >大見出し< /h1 >
< p >段落< /p >
大見出し
段落
↓
CSS
h1{
background-color:#dddddd;
}
p{
background-color:#ffd800;
}
■背景色の幅、高さを変える＝width、heightプロパティをPXで指定。
HTML
< h1 >大見出し< /h1 >
< img src="https://prog-8.com/images/wanko.jpg" >
大見出し
↓
CSS
h1{
width:500px;
height:80px;
background-color:#9de8ea:
}
imag{
width:500px;
height:200px;
}
■文字の大きさを変える→「font-sizeプロパティ」を使う
< h1 >赤で10px< /h1 >
< p >青で40px< /p >
↓
HTML
赤で10px
青で40px
CSS
h1{
color:#ff0000:
font-size:10px:
}
p{
color:#0000ff;
font-size:40px;
}
■文字の種類を変える→「font-familyプロパティ」を使う
HTML
< h1 >hello< /h1 >
< p >hello< /p >
↓
CSS
h1｛
fomt-fa,ily:serif:
}
p{
fomt-size:"Avenir Next";
}
※明朝体：serif、YuMincho
※ゴシック体：sans-serif、"Lucida Grande"
■要素の一部にだけ反映させる→< span >を使う。
メイン部分の構造
3つの要素で構成されいてる
copy-container-------タイトルバナー部
contents-------------メニュー部
contact-form---------記述部
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ
