2018-07-08 (Sun) 23:35 ✎
その他の箇所のカスタマイズ(^-^;です。
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。
１） 薄く透過されている大枠の背景
２） 丸みを帯びた角を直角に戻す。
３） 記事掲載時に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"><iframe 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"><iframe width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。
以上、［al_responsive〇c］のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
最終更新日 : 2019-11-30
名無し 様へ
名無し 様、初めまして。テンプレートのご利用、誠に有難うございます。m(__)mスマホ等表示時のドロワーメニュー幅ですが、CSSの変更の他HTMLの変更箇所が有ります。
CSSでの変更箇所は、スタイルシート変更枠上から1/4程の所
（3カラム）
/* メニューボタン */ の #btn1, #btn2 の width:230px;
/* メニュー */ の nav の width:230px;, left:-230px;
/* メニュー */ の aside の width:230px;, right:-230px;
（2カラム）
/* メニューボタン */ の #btn1 の width:230px;
/* メニュー */ の nav の width:230px;, left:-230px;
上記の部分をご希望の数値に変更し、
HTML編集枠随分下の方の数有る <script>～</script> の中から下記の部分を探し出し、
（3カラム）
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("aside").animate({top:"0",right:"-230px"} と、
{$("nav").animate({top:"0",left:"-230px"} という部分の数値を変更する
（2カラム左 2c-l）
$(function(){$("#nav_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("nav").animate({top:"0",left:"-230px"} という部分の数値を変更する
（2カラム右 2c-r）
$(function(){$("#nav_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("nav").animate({top:"0",right:"-230px"} という部分の数値を変更する
これでキレイに格納できると思います。（変更するCSSとHTMLは同じ数値にして下さい。）
また、幅を変えると右メニュー（2.3カラム共）の×印がズレてしまうので、気になる方は
/* メニューボタン */
#aside_close の padding-left:185px; （3カラム）
#nav_close の padding-left:190px; （2カラム右）
この部分も変更して下さい。（数値が増えると右に寄る）
javascript部分は、表示を早くするためにコードの圧縮化しているので大変読み難くなっております。
上記の部分を探す際は、ブラウザの画面を開いたまま『Ctrl＋Fキー』を押すと文字列を検索できる小窓が表示されますのでご活用下さいませ。
他にもご不明な点がございましたら何なりとお声掛け下さい。
不勉強で素人回答ですが頑張ってお返事出来るように致します。(^^;)
今後とも末永くお付き合い下さいます様、宜しくお願い致します。
aki URL [ 返信 * 編集 ]
▼ ▲