基本的なタグ・プロパティ


ご注意!

CSSやHTMLに関するお問い合わせはサポート対象外となります。
カスタマイズにつきましては上級者向けの機能となりますので、CSSやHTMLなどの詳細な使用方法やご不明な点などは、書籍やネット記事などをご参照いただき、お客さまの責任のもと、ご利用いただきますようお願いいたします。

ウェブリブログの記事やフリースペースでは、HTMLタグを利用し画像やリンクの掲載などを行うことができます。
また、CSSをご利用いただくことで、ブログのデザインを変更することもできます。
CSSの編集を行う際は、変更前のCSSのバックアップをお勧めいたします。

●CSS・HTMLの編集方法 ※注意書きあり
https://support.at.webry.info/201907/article_design_004.html


【1】基本的なHTMLタグ
HTMLとはウェブページを作るための最も基本的な言語の1つで、ほとんどのウェブページがHTMLで作成されています。
ここでご紹介するHTMLタグは、記事作成画面のタグ入力補助ボタンでできるものもありますが、フリースペースで使用する際に必要となりますのでご活用ください。

リンク
HTML

<a href="リンク先のURL" target="_blank">表示される文字</a>


記述例

HTML

<a href="../../" target="_blank">クリックするとウェブリブログのトップページが開きます</a>


リンク集の作成について

サイドバーやフリースペースにてリンク集を作成する場合は、下記ページをご参照ください。

●リンク集の作成方法
https://support.at.webry.info/201907/article_sonota_014.html


画像
HTML

<img src="画像のURL">


記述例

HTML

<img src="https://~.jpg">

表示例
画像.png


リスト
HTML

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>


記述例

HTML

<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>パイナップル</li>
</ul>

表示例

  • リンゴ
  • バナナ
  • パイナップル


リンク集の作成について

サイドバーやフリースペースにてリンク集を作成する場合は、下記ページをご参照ください。

●リンク集の作成方法
https://support.at.webry.info/201907/article_sonota_014.html


改行
HTML

<br> または </br>


記述例

HTML

改行します。<br>改行します。

表示例
改行します。
改行します。


見出し(フリースペース)
HTML

<h2></h2>


記述例

HTML

<h2>プロフィール</h2>

表示例
見出し(フリースペース).png


【2】基本的なCSS(プロパティ)
CSSはHTMLと組み合わせて使用する言語です。
CSSを使用することで、HTMLが定義したウェブページの各要素などに対し、装飾を指定することができるので、デザインの変更などを行うことができます。

CSS

デザインが変更されるHTMLタグ→ p {
デザインを変更するための命令→ color: #000000;
}


上記のように記載した場合、pタグで囲んだ文字の色が黒(#000000)で表示されます。

文字色
CSS

* {
color: カラーコード;
}


記述例

CSS

p {
color: #cc0000;
}

表示例
pタグで囲まれた文字の色が赤になります。


ご参考

#FF0000 #FF8000 #FFFF00 #BFFF00 #00FF00 #00BFFF
#0040FF #BF00FF #FF0080 #848484 #000000 #FFFFFF


文字サイズ
CSS

* {
font-size: 文字サイズ;
}


記述例

CSS

p {
font-size: 16pt;
}

※「pt」の数値を変更して文字サイズを調整してください。

表示例
pタグで囲まれた文字のサイズが16ptになります。


フォント
CSS

* {
font-family: フォント名;
}


記述例

CSS

p {
font-family: "游明朝",YuMincho;
}

表示例
pタグで囲まれた文字列が游明朝で表示されます。
ご利用の端末に游明朝が入っていない場合は、他の文字と同じフォントで表示されます。


行揃えの位置
CSS

* {
text-align: 位置;
}


記述例

CSS

↓左寄せの場合↓
p {
text-align: left;
}
↓中央揃えの場合↓
p {
text-align: center;
}
↓右寄せの場合↓
p {
text-align: right;
}

表示例

左寄せ

中央揃え

右寄せ


背景色
CSS

* {
background-color: カラーコード;
}


記述例

CSS

p {
background-color: #cc0000;
}

表示例
pタグで囲まれた部分の背景色が赤になります。


ご参考

#FF0000 #FF8000 #FFFF00 #BFFF00 #00FF00 #00BFFF
#0040FF #BF00FF #FF0080 #848484 #000000 #FFFFFF


背景画像
CSS

* {
background-image: url("画像のURL");
}


記述例

CSS

p {
background-image:
url("https://~.jpg");
}

表示例
pタグで囲まれた部分の背景が画像になります。


横幅
CSS

* {
width: サイズ;
}


記述例

CSS

img {
width: 100px;
}

※「px」の数値を変更してサイズを調整してください。

表示例
画像の横幅が100pxになります。
画像.png


高さ
CSS

* {
height: サイズ;
}


記述例

CSS

img {
height: 200px;
}

※「px」の数値を変更してサイズを調整してください。

表示例
画像の高さが200pxになります。
画像.png



関連リンク

●画像を横並びで表示する方法
https://support.at.webry.info/202010/article_design_019.html
●掲載画像のサイズ変更方法
https://support.at.webry.info/202009/article_design_018.html
●背景の変更方法
https://support.at.webry.info/202011/article_design_021.html
●ブログタイトル位置の変更方法
https://support.at.webry.info/202010/article_design_020.html
●ブログタイトル背景画像の変更方法(CSS編集)
https://support.at.webry.info/202011/article_design_022.html
●ブログの更新内容が反映されません
https://support.at.webry.info/201907/article_settei_019.html

問合せ.png 問題が解決できない場合

操作方法で問題が解決できない場合は、こちらからご連絡ください。
※CSSやHTMLに関するお問い合わせはサポート対象外となります。