こんにちは。紫のバラの人です。

🌹マニュアル🌹WEB🌎HTMLのレイアウト

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

HTMLのレイアウト



念頭＝ヘッダー、メイン、フッター、という構成



要素で構成。

・division

・要素をグループ化するもの。



----ヘッダーの要素





-------メインの要素





----フッターの要素











※タグ名→tadキー→で終了タグまで自動入力できる。

🌹マニュアル🌹著作権

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

■Bloguruの方針



ブログルの著作権、肖像権についての回答



applications@pspinc.com

9月28日(水) 8:09 (23 時間前)

To 自分



お問合せいただいた件につきましての弊社の回答は

D）運営会社は関与せず。あくまでも開設者の自己責任

でございます。



著作権、肖像権につきましてはご自身でご確認、ご判断の上

ご使用下さい。

運営としては一切の責任を負いかねますのであらかじめご了承くださいますよう

お願い申し上げます。



ブログルサポート



■サイトから



YouTubeの動画を共有する際は、埋め込み用のコードを取得してください。

この埋め込みコードを利用して紹介したい動画を掲載すれば、基本的にはすべてのYouTube動画を著作権を害する事なくアップロードできます。



理由は「貼り付けたのはURLやHTMLコードであり、著作物である動画自体を掲載したわけではない」という前提ができるためです。YouTubeも、動画をアップロードしたユーザーも、動画を拡散されることにメリットがあると考えられるため、動画共有サイトを経由しての動画掲載は問題無いと言えます。



しかし、YouTubeなどにアップロードされている動画をダウンロードして、自分のブログやWebサイトに掲載する事はNGです。自分が最初にアップロードした動画ではなくても、違法アップロードを斡旋している事になるため、著作権侵害につながってしまいます。



よって、動画共有サイトから動画を掲載する際は埋め込みコードを利用して掲載する、自らWebページに動画をアップロードする際は自分が作成した動画だけ掲載して良いと考えておくのが良いでしょう。



■リンクを貼ることについて



リンクは著作物ではないので、著作権の許諾はいらない。

リンク貼り付け禁止の表記があれば違反。



リンク先が違法の場合、著作権侵害のほう助になる



■BGM

JASRAC管理下のBGMは許諾契約が必要。

背景でBGMとして流れていても違反になる



個人サイトで非営利の場合、サイト運営者が許諾を取っていれば

個人の許諾は必要なし

https://www.jasrac.or.jp/info/network/pickup/blog.html



事業目的の場合はだめ。



■ダンス

・ダンスにも著作権がある



■Twitter



＜リツイート＞

・著作者人格権の侵害にあたる

・スクショの引用は侵害にあたる。

・埋め込みは許可されている。

　「ツイートの引用について。コンテンツを他の媒体やサービスで配給、放送、

　　配信、リツイート、プロモーションまたは公表することを目的として、

　　その他の企業、組織または個人に提供する権利が含まれていることに同意する

　　ものとします」。

・ただし独自で禁止しているアカウントもあるので注意

　（カメラマン、画家、出版物など注意）



＜ツイートを埋め込む手順＞



※パソコンで操作可能、スマホからは不可。



通常モードの場合（白い背景）

ツイートの右上の「…」

→「ツイートを埋め込む」

→コードが表示されるので「CopyCode」

→ブログで表示させたいところで貼り付け。



ダークモードにしたい場合（黒い背景）

ツイートの右上の「…」

→「ツイートを埋め込む」

→コードが表示されるが、「set customization options」.

→標準がLightになっている→Darkに変更

→Update

→コードが表示されるので「CopyCode」

→ブログで表示させたいところで貼り付け。



※注意点

①表示速度が遅くなる

②Twitterの公式コードを使用する（違うコードにすると規約違反になることがある）

③著作権

🌹マニュアル🌹WEB🌎HTMLの全体構造

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

HTMLの全体構造



■headとbody



　head要素→ページに関する情報。ブラウザに表示されない。

　body要素→実際に表示する内容



■構造の概要



--------------HTMLのバージョン宣言。



----------------------WEBページの設定に関するする情報。必ず3項目ある。

---------------------------①文字コード

Progate---------------------------②ページのタイトル名（ブラウザのタブに表示）

-----③CSSの読み込み指示





岡　裕美さん

すてきなアナウンサーです











※①文字コード（meta charset）



指定することで文字化けを防ぐことができる。

UTF-8はHTMLで推奨されているコード。













title>

🌹マニュアル🌹画像項目の目次ページ

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

🌹画像🤵個人情報の削除

https://jp.bloguru.com/love/455304/web

🌹画像🤵サイズ

https://jp.bloguru.com/love/455305/2022-11-05

🌹画像🤵自由な位置に表示

https://jp.bloguru.com/love/455306/2000-01-01

🌹画像🤵GoogleDriveの画像を表示

https://jp.bloguru.com/love/455307/googledrive

🌹マニュアル🌹画像🤵GoogleDriveの画像を表示

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

①先に、元の画像のサイズをピクチャーで調べる

・縦長の画像の場合はブログルサーバ上のサイズに統一することにする。

・横向き：幅600、縦向き：幅400

・標準のままアップすると画像にグレーの外枠ができてしまう。

・サイズを小さくしていくとグレーの枠がなくなるが画像が小さくなる。

・なので、枠を気にせず、400，600に統一することにする。



②画像をGooleDriveにアップ



③共有しリンクを取得する。

・https--。これを一旦テキストにコピペ。



④画像を入れたい位置に以下の構文をコピペ。







★に①のIDを貼り付ける。

IDは、①の、「～id=/********/view?」の**の部分（/と/の間）



サイズは①にあわせる。

🌹マニュアル🌹画像🤵自由な位置に表示

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

🌹マニュアル🤵サイズ

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

ピクチャ上のサイズ変更で変更。

縦も横も幅400がちょうどいいぐらい。

解像度を上げたければ幅1,000。 それ以上は重くなる。

ただしスマホからの閲覧では表示サイズは同じ。

🌹マニュアル🌹画像🤵個人情報の削除

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

アップの前に。

EXif：画像に仕込まれた個人情報の削除をする。



画像で右クリック→プロパティ→詳細→「プロパティ→個人情報を削除」→OK

🌹マニュアル🌹WEB項目の目次ページ

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

🌹WEB🌎html.cssの基本

https://jp.bloguru.com/love/456731/webhtmlcss

🌹WEB🌎文字を書く

https://jp.bloguru.com/love/455162/web

🌹WEB🌎文字配置

https://jp.bloguru.com/love/455350/web

🌹WEB🌎改行、行間

https://jp.bloguru.com/love/456041/web

🌹WEB🌎アンダーライン

https://jp.bloguru.com/love/456043/web

🌹WEB🌎線を引く

https://jp.bloguru.com/love/455119/web

🌹WEB🌎枠線をつける

https://jp.bloguru.com/love/454852/web

🌹WEB🌎タグ

https://jp.bloguru.com/love/455204/web

🌹WEB🌎リンクを貼る（別ページ）

https://jp.bloguru.com/love/456736/web

🌹WEB🌎リンクを貼る（同一ページ）

https://jp.bloguru.com/love/456905/web

🌹WEB🌎画像を表示

https://jp.bloguru.com/love/456738/web

🌹WEB🌎コード、構造

https://jp.bloguru.com/love/455318/web

🌹WEB🌎リスト表示

https://jp.bloguru.com/love/456779/web

🌹WEB🌎CSS

https://jp.bloguru.com/love/456780/webcss

🌹WEB🌎CSS🌎文字を変える（サイズ、種類）

https://jp.bloguru.com/love/457012/webcss

🌹WEB🌎CSS🌎背景色と、背景色の縦横サイズ変更

https://jp.bloguru.com/love/457013/webcss

🌹WEB🌎CSS🌎特定の要素にCSSを適用する（箇条書きの一部のみなど）

https://jp.bloguru.com/love/457017/webcsscss

🌹WEB🌎HTML🌎全体構造

https://jp.bloguru.com/love/457022/webhtml

🌹WEB🌎HTML🌎レイアウト

https://jp.bloguru.com/love/457027/webhtml

🌹WEB🌎HTML🌎ヘッダー

https://jp.bloguru.com/love/457107/webhtml

🌹WEB🌎HTML🌎フッター

https://jp.bloguru.com/love/458282/html

🌹WEB🌎HTML🌎メイン部分

https://jp.bloguru.com/love/458907/html

🌹WEB🌎HTML🌎コンテンツ部分

https://jp.bloguru.com/love/458910/html

🌹WEB🌎HTML🌎レクチャー

https://jp.bloguru.com/love/459423/webhtml

🌹マニュアル🌹WEB🌎CSS🌎特定の要素にCSSを適用する（箇条書きの一部のみなど）

1月

1日

• コメント(0) |
• コメントを書く |
• 固定リンク

全体を赤にする



HTML



萬澄枝さん

モアメタルちゃん

永尾まりあちゃん





CSS

li{

color:red;

}



---------------------------------

↓

萬澄枝さんだけ赤にする

該当の文字をclass（指定範囲）として任意の名前を付けて、

そこだけにCSSを反映させる。



HTML



萬澄枝さん

モアメタルちゃん

永尾まりあちゃん





CSS

.selecteｄ{　　←　頭に.がつく。

color:red;

}

li{

color:#444;

}