2018-07-08 (Sun)
23:35
✎
その他の箇所のカスタマイズ(^-^;です。
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。
1) 薄く透過されている大枠の背景
2) 丸みを帯びた角を直角に戻す。
3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む
1) 薄く透過されている大枠の背景
[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
2) 丸みを帯びた角を直角に戻す。
記事を取り囲んでいる枠や、タイトルの背景などの角に丸みを持たせております。
スタイルシート枠内上から
〈セレクタ名: blockquote, h2, .topimg, .menu_title, .menu3, .menu3_title, .con2(3c), .con1(2c), .entry_state, .trackback_waku, #pagenavi a,#pagenavi span, #pagetop,#pagebottom, header, #copyright 〉
に使用している、
3) 記事掲載時に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"><iframe width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。
以上、[al_responsive〇c]のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。
1) 薄く透過されている大枠の背景
2) 丸みを帯びた角を直角に戻す。
3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む
1) 薄く透過されている大枠の背景
[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
2) 丸みを帯びた角を直角に戻す。
記事を取り囲んでいる枠や、タイトルの背景などの角に丸みを持たせております。
スタイルシート枠内上から
〈セレクタ名: 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
3) 記事掲載時に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"><iframe width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。
以上、[al_responsive〇c]のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
- 関連記事
-
- ct_responsive のカスタマイズ(エントリー全文表示) (2018/10/27)
- al_responsive のカスタマイズ(CSS変更・その他) (2018/07/08)
- al_responsive のカスタマイズ(トップ画像変更) (2018/07/06)