- Hashtag "#マニュアル" returned 37 results.
BloguruにYOUTUBE動画をリンクさせる
※変更点
以前は、記事の欄にコードを埋め込めばよかったがこれが廃止された。
↓
<>ボタンからソースを貼らないとできなくなった。
記事欄全体を、ソースコードの中で更新しなければならなくなった。
↓
既存サイトに動画を追加する場合も、<>から編集するようになった。
※そうすると、画像ボタンから差し込んだ画像は編集しずらい。
画像もソースコード上で反映させるないと、後で編集できない（？）
同じページに記事を追加していくにはソースコード上でするしかない（？）
１／Youtubeでソースを取得
・動画上で右クリック→埋め込みコードをコピー
２／Bloguruにコピー
・記事欄で、<>を選択
・１をペースト
・保存ボタン
・反映まで30秒ぐらいかかる。
３／サイズ変更する場合
・youtube動画の場合
デフォルトだとw789*h444になる。
サイズ変更はできない（？）
・ショート動画
デフォルトだとw424*h753ぐらいになる
w600*h336ぐらいがちょうどよい。
横長ウインドウで左右がスクリーンの状態で表示。
左右のスクリーンなしで小さめに、はできない。
４／関連動画にジャンプさせない方法
アップの後、動画の上で右クリック→ループ再生
コンテンツ部分
< div class^"contents" > → コンテンツ部分をやるよ
< h3 >学べるレッスン< /h3 > → コンテンツ部分の見出し
< div class=" contents item”> → コンテンツアイテムひとつめ（左端とか）
< img src="https--- " > → 画像はここにある
< P >HTML&CSS < /p > →画像の下のコメント
:
＜/div >
■文字に色を付ける
青にする
< h5 style="color:blue" >文字青< /h5>
文字青
■文字サイズを変える
h1のサイズ
h3のサイズ
h6のサイズ
フォントサイズを5にする
< p >< font size="5" >font size="5"< /font >< /p >
font size="5"
フォントサイズを7にする
< p >< font size="7" >Hello< /font >< /p >
font size="7"
https://www.sejuku.net/blog/83918
■太文字にする
< b >太文字< /b >
太文字
HTMLを装飾するもの
HTMLコードがあって、どのように装飾するかをCSSで指定する。
HTMLとCSSは別ファイルに記述する。
HTML＝index.html
< h1 >Progate< /h1 >
CSS＝stylesheet.css
h1{
color:red;
}
--------------------
htmlとcssの関連付け
< link rel="stylesheet"href="style.css" >
---------------
< html >
< head >
< title >< /title >
< link rel="stylesheet" type="text/css"
href="flex1.css" >
< /head >
< li >
ListItem
箇条書きしたいことばそれぞれを< li >と< /li >で囲む
< ul >で囲む→中黒。
unordered list:順序がないリスト
< ol >で囲む→数字の連番。
ordered list:順序があるリスト
----------------
リスト表示で中黒ありとなし
中黒あり
< ul >
< li >萬澄枝さん< /li >
< li >岡 裕美さん< /li >
< li >高石ひかりちゃん< /li >
< /ul >
中黒なし
li{
list-style:none;
}
------------------
< ul >
< li >HTML< /li >
< li >PHP< /li >
< li >Ruby< /li >
< /ul >
内容は字下げする（インデントでずらす。tab）
↓
■レギュラーとショート
データによって、勝手にショートにかわる。
・縦横比が縦長～正方形まで
・60秒未満
■Youtube動画をブログに表示
①Youtube動画のウインドウの下の「共有」→「埋め込む」
→「動画の埋め込み」で出てきた構文をコピー
②ブログで表示させたい箇所で、貼り付け。
※※ショートではなく通常のサイトを見る
共有→埋め込む→を押すと、コードが出てくる
ここで見えるのは最初からembed
これを丸ごとコピペ。
→通常サイトのサイズで表示される
■ループ再生
動画の上で右クリック→「ループ再生」にチェック
■再生リスト
動画再生のプレイリストを作ることができる。
最初のリストの作成
動画を選択→右下の「保存」→「+新しい再生リストを作成」
リストの編集（ﾘｽﾄに動画を追加）
追加したい動画を選択→右下の「保存」→再生リストを選択し、右上の×
■コメントを不可にする
「アカウント」→「Youtube studio」→左の「コンテンツ」→無効にしたい動画を選択（サムネイルを選択）
→画面下の「すべて表示」→「コメントと評価」→「コメントを無効にする」→「保存」
■いいねを無効にする
「アカウント」→「Youtube studio」→左の「コンテンツ」→無効にしたい動画を選択（サムネイルを選択）
→画面下の「すべて表示」→「この動画を高く評価した視聴者の数を表示する」のチェックを外す→「保存」
■タグをつける
「アカウント」→「Youtube studio」→左の「コンテンツ」→動画を選択（サムネイルを選択）
→左の「詳細」→「説明」の欄に入力（#**）→「保存」
■クリエイターツール
廃止。youtube studioに変更になっている。
表示させることはできそう。
■属性
fontよりstyleよりclass
style属性＝
指定範囲を直接的に装飾する。
同じ装飾を複数箇所させたいときに都度同じ記述をしなければならず、微調整をしたい場合、すべてを書き直す必要がある。
class属性＝
装飾内容はCSSファイルに記述されているので、HTML等のファイル中での記述が少なく、
修正があった場合CSSファイル内の記述を書き換えれば全てに適用される。
整理と効率化のために一般にはCSSファイルに集約して、class等で指定することが多い。
HTML5以降ではclass属性がよい。
ただし、部分的な装飾だけでいい場合は、cssの方が手間なのでstyle属性で十分。
■CSS
https://udemy.benesse.co.jp/design/web-design/what-is-css.html
Cascading Style Sheets
HTMLのサイトの、見た目（文字色、大きさ、拝啓、配置など）を設定する言語。
コードごとに直接反映させるのではなく、複数のHTMLファイルに一貫したデザインを適用できる。
「CSSでスタイル適用する」。
簡単なアニメーションの記述も可能
・マウスを置くとボタンの色を変更。
・クリックに合わせてラジオボタンの表示
・数秒ごとに画像切り替え
（本格的な動的サイトはjavascriptが必要）。
■余白調整
-----------------
上下左右に値を反映させる
CSSで、padding:値; → 上下左右にその値の余白ができる。
HTML
< div class="logo1" >
Progate
< /div >
CSS
.logo1{
padding: 20px;
}
---------------
特定の方向にのみ値を反映させる
HTML
< div class="logo1" >
Progate
< /div >
CSS
.logo1{
padding-top: 20px;
}
上＝top
下＝bottom
左＝left
右＝right
--------------
方向別に値を変える
書き方１）上下左右をきちんと表記する
.logo1 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
書き方２）省略計。上右下左（時計回り）で適用される
.logo1{
padding: 20px 10px 20px 10px;
}
書き方３）上下セットと左右セットとして表記する
.logo1{
padding: 20px 10px;
---------
< 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 >
- If you are a bloguru member, please login.
Login
- If you are not a bloguru member, you may request a free account here:
Request Account
