レスポンシブテンプレートの使い方（CSS変更・その他）

その他の箇所のカスタマイズ(^-^;です。
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。

１）　薄く透過されている大枠の背景
［al_responsive〇c］のスタイルシート編集枠をほんの少し下げた所に有る
#wrapper{　という部分の背景色を変更します。

何も加工が無ければ
←こんな感じです。（クリックで大きく表示）
#wrapper の下記の部分が透過背景色です。
background-color:rgba(255,255,255,0.7);
これは『白の透過度70％』

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値を変更すると

カラーコード#9ACD32透過度0.3（30％）のRGBAカラーモデル、
rgba(154,205,50,0.3)
←ではこんな感じです。（クリックで大きく表示）

カラーコード#000080透過度0.2（20％）のRGBAカラーモデル、
rgba(0,0,128,0.2)
←ではこんな感じです。（クリックで大きく表示）

カラーコード、カラーネームについては↓コチラ
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 〉
に使用している、

-moz-border-radius:〇px;
-webkit-border-radius:〇px;
border-radius:〇px;
を削除すると角の丸みが無くなります。
←（クリックで大きく表示）

詳しくはこちらへ→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