記事検索

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

https://jp.bloguru.com/love

フリースペース

🌹マニュアル🌹WEB🌎HTML🌎ヘッダー

スレッド




  • 萬澄枝さん

  • モアメタルちゃん

  • 岡裕美さん





  • ---------

    < div class="header" > ヘッダー部を入力するよ
    < div class="header-logo" >Progate< /div > ヘッダーロゴはProgate
    < div class="header-list" > ヘッダーリストは、
    < ui > 箇条書きで、
    < li >萬澄枝さん< /li >
    < li >モアメタルちゃん< /li >
    < li >岡裕美さん< /li >
    < /ui > 箇条書き終わり
    < /div > ヘッダーリストの部分終わり
    < /div > ヘッダーの部分終わり

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

    横並びにする→cssで「float:left;」
    ・liにかければli要素のみ
    ・header-logoにかければロゴとli要素が並ぶ

    ただし、そのままだとフッターにもかかってしまう。
    ヘッダーだけでよい場合は、「.float-list□ li{

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

    一般的には
    < header >< /header >
    < footer >< /footer >
    #html #ヘッダー #マニュアル

    ワオ!と言っているユーザー

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

    スレッド
    HTMLのレイアウト

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

    < div >要素で構成。
    ・division
    ・要素をグループ化するもの。

    < div class="header" >----ヘッダーの< div >要素
    < /div >

    < div class="main >-------メインの< div >要素
    < /div >

    < div class="footer" >----フッターの< div >要素
    < /div >




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


    #HTML #マニュアル #レイアウト

    ワオ!と言っているユーザー

    🌹マニュアル🌹著作権

    スレッド

    ■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の全体構造

    スレッド
    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で推奨されているコード。






    #HTML #WEB #マニュアル #全体構造

    ワオ!と言っているユーザー

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

    スレッド
    #マニュアル #画像

    ワオ!と言っているユーザー

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

    スレッド
    ①先に、元の画像のサイズをピクチャーで調べる
    ・縦長の画像の場合はブログルサーバ上のサイズに統一することにする。
    ・横向き:幅600、縦向き:幅400
    ・標準のままアップすると画像にグレーの外枠ができてしまう。
    ・サイズを小さくしていくとグレーの枠がなくなるが画像が小さくなる。
    ・なので、枠を気にせず、400,600に統一することにする。

    ②画像をGooleDriveにアップ

    ③共有しリンクを取得する。
    ・https--。これを一旦テキストにコピペ。

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

    < iframe src="https://drive.google.com/file/d/★/preview" width="600" height="400" >< /iframe >

    ★に①のIDを貼り付ける。
    IDは、①の、「~id=/********/view?」の**の部分(/と/の間)

    サイズは①にあわせる。

    #Goole #マニュアル #画像

    ワオ!と言っているユーザー

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

    スレッド
    Bloguruでは、画像を差し込むと記事の上に割り込んでしまう。
    新しい画像を差し込むと後ろについてしまう。
    記事の後に画像を出す方法。

    ①画像をアップロードする
    管理画面→「ファイルアップロード」→画像をアップロード
    ②ファイルのURLをコピー
    ③画像を入れたい箇所に以下の構文をコピペ。
    < div class="text-center" >< img src="★" >< /div >

    ※Bloguruサーバの容量制限
    ・一度に10MBまで、全部で50MBまで。
    #マニュアル #位置 #画像

    ワオ!と言っているユーザー

    🌹マニュアル🤵サイズ

    スレッド
    ピクチャ上のサイズ変更で変更。
    縦も横も幅400がちょうどいいぐらい。
    解像度を上げたければ幅1,000。 それ以上は重くなる。
    ただしスマホからの閲覧では表示サイズは同じ。
    #サイズ #マニュアル #画像

    ワオ!と言っているユーザー

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

    スレッド
    アップの前に。
    EXif:画像に仕込まれた個人情報の削除をする。

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


    #マニュアル #個人情報 #画像

    ワオ!と言っているユーザー

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

    スレッド
    🌹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 #マニュアル

    ワオ!と言っているユーザー

    • ブログルメンバーの方は下記のページからログインをお願いいたします。
      ログイン
    • まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
      新規ユーザー登録へ
    ハッピー
    悲しい
    びっくり