その他の箇所のカスタマイズ(^-^;です。
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。
１） 薄く透過されている大枠の背景
２） 丸みを帯びた角を直角に戻す。
３） 記事掲載時にYouTube等の動画をレスポンシブで埋め込む
１） 薄く透過されている大枠の背景
［al_responsive〇c］のスタイルシート編集枠をほんの少し下げた所に有る
#wrapper{ という部分の背景色を変更します。
RGBAとは、ディスプレイ画面で色を表現するために用いられる、red・green・blueにalphaが加わったものです。alphaは色の透明度です。
RGBAカラーモデルで色を指定する際は、今まで16進数カラーコード（#339966等）を指定していた箇所に、カンマ（,）で区切った3つの数値でRGBの色を指定した後に、数値で透明度を指定します。
rgba(R赤,G緑,B青,Aアルファ値);
RGBの色は0-255、または0%-100%で指定し、透明度は0（完全に透明）～1（完全に不透明）の数値で指定します。
（rgbでは255,255,255, は白、0,0,0, は黒になります。）
この #wrapper の background-color: のrgba値を変更すると
カラーコード、カラーネームについては↓コチラ
web material *Essence（当方素材サイト） ColorCode ColorName
RGBAカラーモデル変換ツールは↓コチラをご利用下さい。
web material *Essence RGBA color model
２） 丸みを帯びた角を直角に戻す。
記事を取り囲んでいる枠や、タイトルの背景などの角に丸みを持たせております。
スタイルシート枠内上から
〈セレクタ名： blockquote, h2, .topimg, .menu_title, .menu3, .menu3_title, .con2(3c), .con1(2c), .entry_state, .trackback_waku, #pagenavi a,#pagenavi span, #pagetop,#pagebottom, header, #copyright 〉
に使用している、
３） 記事掲載時にYouTube等の動画をレスポンシブで埋め込む。
YouTubeの埋め込みしたい動画の下にある共有をクリックし、ウィンドウが表示されたら埋め込むをクリックします。
埋め込みコードが表示されるのでオプションを設定しコピーをクリックします。
コピーしたコードをブログなどにペーストして完了です。が、レスポンシブで表示するためにもう一つ。
下記のようなスタイルシートを用意してありますので、動画掲載時にご利用下さい。
/* 動画サイズレスポンシブ用（iframeをdiv class="player"で括る） */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}
スタイルシート内にも書いてありますが、埋め込みコードを div class="player" で括ると、モバイル端末でも表示サイズが可変するようになります。
<div class="player"><frame width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。
以上、［al_responsive〇c］のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。
１） 薄く透過されている大枠の背景
２） 丸みを帯びた角を直角に戻す。
３） 記事掲載時にYouTube等の動画をレスポンシブで埋め込む
１） 薄く透過されている大枠の背景
［al_responsive〇c］のスタイルシート編集枠をほんの少し下げた所に有る
#wrapper{ という部分の背景色を変更します。
RGBAとは、ディスプレイ画面で色を表現するために用いられる、red・green・blueにalphaが加わったものです。alphaは色の透明度です。
RGBAカラーモデルで色を指定する際は、今まで16進数カラーコード（#339966等）を指定していた箇所に、カンマ（,）で区切った3つの数値でRGBの色を指定した後に、数値で透明度を指定します。
rgba(R赤,G緑,B青,Aアルファ値);
RGBの色は0-255、または0%-100%で指定し、透明度は0（完全に透明）～1（完全に不透明）の数値で指定します。
（rgbでは255,255,255, は白、0,0,0, は黒になります。）
この #wrapper の background-color: のrgba値を変更すると
カラーコード、カラーネームについては↓コチラ
web material *Essence（当方素材サイト） ColorCode ColorName
RGBAカラーモデル変換ツールは↓コチラをご利用下さい。
web material *Essence RGBA color model
２） 丸みを帯びた角を直角に戻す。
記事を取り囲んでいる枠や、タイトルの背景などの角に丸みを持たせております。
スタイルシート枠内上から
〈セレクタ名： blockquote, h2, .topimg, .menu_title, .menu3, .menu3_title, .con2(3c), .con1(2c), .entry_state, .trackback_waku, #pagenavi a,#pagenavi span, #pagetop,#pagebottom, header, #copyright 〉
に使用している、
詳しくはこちらへ→MDN web docs
３） 記事掲載時にYouTube等の動画をレスポンシブで埋め込む。
YouTubeの埋め込みしたい動画の下にある共有をクリックし、ウィンドウが表示されたら埋め込むをクリックします。
埋め込みコードが表示されるのでオプションを設定しコピーをクリックします。
コピーしたコードをブログなどにペーストして完了です。が、レスポンシブで表示するためにもう一つ。
下記のようなスタイルシートを用意してありますので、動画掲載時にご利用下さい。
/* 動画サイズレスポンシブ用（iframeをdiv class="player"で括る） */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}
スタイルシート内にも書いてありますが、埋め込みコードを div class="player" で括ると、モバイル端末でも表示サイズが可変するようになります。
<div class="player"><frame width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。
以上、［al_responsive〇c］のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
スポンサーサイト