HTMLのレイアウト
念頭＝ヘッダー、メイン、フッター、という構成
< div >要素で構成。
・division
・要素をグループ化するもの。
< div class="header" >----ヘッダーの< div >要素
< /div >
< div class="main >-------メインの< div >要素
< /div >
< div class="footer" >----フッターの< div >要素
< /div >
※タグ名→tadキー→で終了タグまで自動入力できる。
■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の公式コードを使用する（違うコードにすると規約違反になることがある）
③著作権
HTMLの全体構造
■headとbody
head要素→ページに関する情報。ブラウザに表示されない。
body要素→実際に表示する内容
■構造の概要
< !DOCTYPE html >--------------HTMLのバージョン宣言。
< html >
< head >----------------------WEBページの設定に関するする情報。必ず3項目ある。
< meta charset="utf-8" >---------------------------①文字コード
< title>Progate---------------------------②ページのタイトル名（ブラウザのタブに表示）
< link rel="stylesheet"href="stylesheet.css" >-----③CSSの読み込み指示
< /head >
< body >
< h1 >岡 裕美さん< /h1 >
< p >すてきなアナウンサーです< /p >
< /body >
< /html >
※①文字コード（meta charset）
指定することで文字化けを防ぐことができる。
UTF-8はHTMLで推奨されているコード。
①先に、元の画像のサイズをピクチャーで調べる
・縦長の画像の場合はブログルサーバ上のサイズに統一することにする。
・横向き：幅600、縦向き：幅400
・標準のままアップすると画像にグレーの外枠ができてしまう。
・サイズを小さくしていくとグレーの枠がなくなるが画像が小さくなる。
・なので、枠を気にせず、400，600に統一することにする。
②画像をGooleDriveにアップ
③共有しリンクを取得する。
・https--。これを一旦テキストにコピペ。
④画像を入れたい位置に以下の構文をコピペ。
< iframe src="https://drive.google.com/file/d/★/preview" width="600" height="400" >< /iframe >
★に①のIDを貼り付ける。
IDは、①の、「～id=/********/view?」の**の部分（/と/の間）
サイズは①にあわせる。
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;
}
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ
