*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  カスタマイズ >  レスポンシブテンプレートの使い方(CSS変更・その他)

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

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

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

rgba-w.jpg何も加工が無ければ
←こんな感じです。(クリックで少し大きく表示)
#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値を変更すると

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

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

カラーコード、カラーネームについては↓コチラ
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
に使用している、
b-radius.jpg-moz-border-radius:〇px;
-webkit-border-radius:〇px;
border-radius:〇px;

を削除すると角の丸みが無くなります。
←(クリックで少し大きく表示)

詳しくはこちらへ→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"><frame width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。

以上、[al_responsive〇c]のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
まゆたん 様へ * by aki
まゆたん様、初めまして♪
数あるテンプレートの中から見つけて頂き、且つ永くご利用頂きまして有難うございます。m(__)m

貴殿ブログ、拝見致しました。
可愛く・素敵にカスタマイズして頂き、とても嬉しい限りです。(^-^)
記事も沢山更新されていて 読み応えありそうですね♪
また、記事中(7月下旬の夜間救急のお話)で弊ブログのテンプレートをご紹介及びお褒め頂き、嬉しいやら恥ずかしいやらで…誠に有難うございます。
その後お身体の具合は如何ですか?大事が無ければ良いのですが…。

この度、レスポンシブのテンプレートを作成するにあたり、不勉強なHTML5やCSS3(MediaQueries)、JavaScript(jQuery)等々、あれやこれや弄繰り回して何とか形にしております。
きちんとした学習も無く、本やNet情報を頼りに作っているため不具合が無いかと心配しております。
もし、何かお気付きの点などがございましたら 何なりとお申し出下さいませ。

素敵なデザインテンプレートは(難しくて作れないので^^;)他の方にお任せして、相も変わらず昔ながらの(ブログです!的な)レガシーテンプレートですが、是非是非、末永くお付き合い下さいます様 今後とも宜しくお願い致します。m(__)m

ありがとうございます! * by まゆたん
はじめまして!
いつも素敵なテンプレートをありがとうございます。
ブログ開設時よりテンプレートを使わせてもらってまして、特に「lace-al2」が大変気に入ってましたので、いちばん長期にわたり利用させてもらいました。
今回さらに「al_responsive2c-r」に惚れこんでしまいまして、スマホにもキレイに対応されますし本当に嬉しかったです!
こちらのサイトを参考に最初は全文にして…また要約に戻したり、あちこちカスタマイズしまして自己満足ではありますが、近年にないほどの大満足の完成度です(笑)
嬉しさのあまり唐突にコメントしてしまいましたが…これからも大切に使わせていただきます!
ありがとうございました(*'ω' *)

ゆきゆず 様へ * by aki
こちらこそ初めまして♪テンプレートのご利用 、誠に有難うございます。
早速ヘッダーの画像が猫ちゃん達になっていましたね。(^^)
当方のウサギの飼育歴は20年超有るのですが、猫に関しては20年位前に実家の祖父母が飼っていた程度で、あんまり手出しが出来ず知識がそれ程有りません。(^^;
夜鳴き(声がデカくて遠吠えに近い^^;)に悩み、トイレハイに戸惑い、マーキングの臭さと後始末に翻弄され、たった一匹の猫に悪戦苦闘の日々なので、ゆきゆず様宅の猫生活がどんなにか凄い事なのかと、ホントに感嘆しきりです。
でも、なんだかんだ言って 大変ながらも楽しいですよね。
うちの旦那さんは『元野良・成猫・雄(6キロ!)』という初めての猫が可愛くて仕方ないようです。
何歳なのか不明で どれ位一緒に居られるか分からないですが、素敵な出会いを大事に、末永く暮らせたら良いなと思っております。(^^)
分からない事は 是非是非、教えて下さいませね♪

テンプレート共々、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m

はじめまして * by ゆきゆず
はじめまして!
こちらのテンプレートお借りしています。
とても可愛くてお気に入りになりました。
ありがとうございます!!
にゃんこさんの記事読みました♫
まるで私を見ているみたいでした笑
我が家も同じような経緯ではや9匹。
勝手に親近感です笑
毎日暑いですがにゃんことうさちゃんと
お元気にお過ごしください。
まずはお礼まで。
ありがとうございました。

名無し 様へ * by aki
いえいえこちらこそ。(^-^;
運営、頑張って下さい。陰ながら応援しています。

No Subject * by 名無し
何度もお手数かけてすいませんでした。
おかげで多くのスマホサイズに対応できるようになりました。
本当にありがとうございます。

また何かあったらよろしくお願いします。

名無し 様へ * by aki
テンプレート共々、無事表示できるようになって良かったです。(^^)
hr は、HTML4.01で非推奨だった size属性、width属性、align属性、とnoshade属性がHTML5で廃止されました。
この度のテンプレートはHTML5ですので、今後はCSSを使って記述して下さいませ。
それと一つご提案なのですが、当方のiPhoneSEで拝見するとブラウザサイズ(ベース解像度)が568×320なので、メニュー幅340pxでは右メニューの左端が欠けて表示されてしまいます。
iPhoneの最少幅が5やSEの320pxなので、このサイズに合わせればほぼどのスマホでも欠ける事無く表示できると思います。
修正箇所を下記に記しておきますので、是非改変をご検討下さい。
(現行の表示確認が出来ます。貴殿URLを入れてみて下さい。修正後の確認にもどうぞ。http://html5-lab.jp/checker/

/* メニューボタン */
#btn2 の width: 340px; を width: 320px;
#aside_close の padding-left: 295px; を padding-left: 265px;

/* メニュー */
aside の width: 340px; を width: 320px;
     right: -340px; を right: -320px;

HTML編集枠下のscript
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("aside").animate({top:"0",right:"-340px"} を $("aside").animate({top:"0",right: "-320px"}

以上です。ご面倒でなければ、です。m(__)m

この度は(説明下手なもので)何度もお手数をお掛けして 申し訳ございませんでした。
また何かご不明な点がございましたら、何なりとお声掛け下さいませ。
今後とも末永くお付き合いの程、宜しくお願い致します。
p.s. 因みに関係無いですが、私のカラオケでの十八番は『syncopation』です。踊れませんが。(^-^;

No Subject * by 名無し
返事が遅れてすいませんでした。ご説明の通りしたら出来ました。
今までhtmlで
<hr size="2" color="#000000" width="100%">
のような単純な方法でラインを引いていたので今回は出来なかったようです。

今後も何か分からないことがあったら質問すると思いますので、その時はよろしくお願いします。



名無し 様へ * by aki
hr のスタイル変更ですが、記事投稿・編集の画面で『水平線(旧画面)』若しくは『横罫線(新投稿画面)』のボタンを使っていませんか?
ボタンを使って hr を入れると、そのままテンプレートのスタイルシートに設定されている線になります。
スタイルを変える方法は幾つか有るのですが、投稿画面(HTML)で直接タグを入れる方法が一番簡単です。
ボタンは使わずに、そのまま記事を書く画面にタグを入れて下さい。
例)<hr style="border-top: 1px dashed #3366ff;margin-right:100px;">
この例では右に100pxの余白を持った1pxの青い破線が出るはずです。(プレビューでも確認できます。)
幾つかスタイルシートに設定を作っておいて、その都度選んで hr を挿入したい場合は、テンプレートのスタイルシート編集枠内(できれば hr の下辺りに入れるとPCもモバイルも反映します)に数種類作っておいて、

hr.style1{
border-top: 1px solid #9900ff; /* 1px 直線 紫 */
}
hr.style2 {
border-top: 1px dashed #ff6600; /* 1px 破線 オレンジ */
}
hr.style3{
border-top: 1px dotted #ff69b4; /* 1px 点線 ピンク */
}

記事を書く際に入力画面(HTML)で
<hr class="style1">
とだけ入れれば、その部分に 1pxのsolidな紫線が表示されます。(プレビュー確認)
一度試してみて頂けますか?

No Subject * by 名無し
『✖』印は余白部分に移動しました。ありがとうございます。

それと、ライン(hr)の件ですが、cssの
h4{
margin:0 10px;
font-size:1.0em;
font-weight:normal;
color:#15adb3;
border-bottom:1px dotted #999;
}

の下にある
hr{
margin:10px 0;
border-top:dashed 1px #f0bdbd;
height:1px;
}

が影響してか、全てのラインがdashedになり、ここをsolidに変えると全てのラインがsolidになり、記事書き込み欄のhtml編集では線の太さも色も調整できません。

私の知識不足のせいだと思いますが、どうか教えていただけたらありがたいです。

名無し 様へ * by aki
こちらこそ、何度もスミマセン。m(__)m
×印の位置は前出のresで書いた箇所、CSSの /* メニューボタン */
#btn1#btn2
top:180px; を、5px(位で良いと思う^^;微調が必要ならそのように修正を。)に書き換えて下さい。

…レスポンシブチェッカー(http://html5-lab.jp/checker/)やブラウザのデベロッパーツールを使って確認しても、実際は広告枠等が入ったりするため、実機(iOSとAndroid)での確認をしてみると異なる表示になったりするので困りものです。(^-^;
色々とお手数をお掛けして申し訳ございません。

それとhr等の調整ですが、直接記事内にスタイルを指定する事ができます。
新規投稿(若しくは過去記事の編集)をHTML表示ができる画面にして、タグに直接記述します。
例)<hr style="border-top: 1px dashed #ff33cc;margin-right:100px;">

テンプレートのCSS以外のスタイルが欲しい場合は直接投稿・編集画面をHTMLにして記述するのが早いです。
的外れな回答?でしたらご指摘下さい。m(__)m

No Subject * by 名無し
何度もありがとうございます。

修正しましたところ閉じるための『✖』印が下がってしまいます。
下がった『✖』印を最上部の余白部分に戻すにはどうすればいいのか教えていただけるとありがたいです。

それと、これは別件ですが、ライン(hr)やテーブルラインを記事記入欄で調整することは出来ないのでしょうか?

名無し 様へ * by aki
名無し様、もう一点、修正箇所がございましたっっ!
この部分を直して頂かないと、iPhoneで左右のメニューボタンが表示されないもので…(^-^;

CSS編集枠1/4程の
/* メニューボタン */
#btn{
overflow:hidden;
width:100%;
height:30px;
top:10px;(元のテンプレートでは32pxになっている個所)
z-index:3;
position:fixed !important;
}
上記 赤文字部分も(左右ボタンの位置と合わせるため)180pxに変更して下さい。

当方の実機iPhoneSEとXperiaで確認がてら表示してみましたら、Xperia(Android6)では表示されるのに、iPhoneSE(iOS11)では左右のメニューボタンが表示されておりませんでした。(何故Androidは表示されるのか?は不明…)
見ましたところ、(当方が改変指示をしていなかった)前出の#btn部分の未修正が原因だったようなので、コチラの部分も修正をお願い致します。
何度もお手数をお掛けして申し訳ございません。m(__)m
改めて修正後に表示確認させて頂きたいので、もう一度 お声掛け頂けますか?

No Subject * by 名無し
丁寧なご説明ありがとうございました。
おかげさまで今のところ全ての問題が解決しました。

また何かあったら質問させていただくと思いますので、その時はまたよろしくお願いします。

本当にありがとうございました。

名無し 様へ * by aki
名無し様、無事に改変できたようで何よりです。(^^)
ドロワーメニューを出した時の背景色グレー部分、という事でしょうか?
これもHTMLなのですが、同じく(下記レスのscript部分)
(3カラム)
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
$("#aside_wrap").css({display:"block",position:"absolute","z-index":"4",top:"0","margin-top":"-64px", (右メニュー)と、
$("#nav_wrap").css({display:"block",position:"absolute","z-index":"4",top:"0","margin-top":"34px", (左メニュー)
の赤文字部分の数値を増やしてメニュー位置まで下げて下さい。
それと、貴殿のブログを拝見させて頂いたところ、ドロワーメニューを下に下げた分だけ下位部分が表示できなくなっています。(スクロールしても一番下まで見えない状態)
CSS編集で /* メニュー */ の nav と aside にご自身が追加した margin-top:180px; に合わせて、
padding-bottom:15px; の部分も180px(若しくはそれ以上)に変更して下さい。
これでサイドのメニューも全て表示されると思います。

名無し様は素晴らしいカスタマイズをされる方ですので、不勉強な当方の説明でも分かって頂けると思いますが、理解不能(?)な点等ございましたら再度、ご面倒でも連絡下さいませ。m(__)m

貴殿ブログ、拝見させて頂きビックリ致しました。(^^)
こんなに素敵にカスタマイズして頂いて、BABYMETALファンである当方も嬉しいやら有難いやら…感謝感激です。( ;∀;)
是非、末永くご愛顧賜ります様 宜しくお願い致します。

No Subject * by 名無し
ドロワーメニュー幅の変更に関して質問した者です。
おかげさまで希望の幅に調整することが出来ました。
これまで自分の気に行ったレスポンシブテンプレートが見つからず残念に思っていましたが、akiさんの作ったテンプレートが気に入って早速テンプレートをレスポンシブに変更しました。

ありがとうございました。
私のブログは『BABYMETALの楽園』です。
http://bmparadise.blog.fc2.com/

最後に、ドロワーメニューを開いたときに上の広告にかかる変色幕をドロワーメニューの高さまで下げられるのか教えていただけるとありがたいです。

名無し 様へ * by aki
名無し 様、初めまして。テンプレートのご利用、誠に有難うございます。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キー』を押すと文字列を検索できる小窓が表示されますのでご活用下さいませ。

他にもご不明な点がございましたら何なりとお声掛け下さい。
不勉強で素人回答ですが頑張ってお返事出来るように致します。(^^;)
今後とも末永くお付き合い下さいます様、宜しくお願い致します。

No Subject * by 名無し
スマホのスライドメニュー幅を広げたら、閉じた時に広げた分が画面に残るのですが、スライドメニュー幅を広げることは出来るのですか?

コメント







管理者にだけ表示を許可する

まゆたん 様へ

まゆたん様、初めまして♪
数あるテンプレートの中から見つけて頂き、且つ永くご利用頂きまして有難うございます。m(__)m

貴殿ブログ、拝見致しました。
可愛く・素敵にカスタマイズして頂き、とても嬉しい限りです。(^-^)
記事も沢山更新されていて 読み応えありそうですね♪
また、記事中(7月下旬の夜間救急のお話)で弊ブログのテンプレートをご紹介及びお褒め頂き、嬉しいやら恥ずかしいやらで…誠に有難うございます。
その後お身体の具合は如何ですか?大事が無ければ良いのですが…。

この度、レスポンシブのテンプレートを作成するにあたり、不勉強なHTML5やCSS3(MediaQueries)、JavaScript(jQuery)等々、あれやこれや弄繰り回して何とか形にしております。
きちんとした学習も無く、本やNet情報を頼りに作っているため不具合が無いかと心配しております。
もし、何かお気付きの点などがございましたら 何なりとお申し出下さいませ。

素敵なデザインテンプレートは(難しくて作れないので^^;)他の方にお任せして、相も変わらず昔ながらの(ブログです!的な)レガシーテンプレートですが、是非是非、末永くお付き合い下さいます様 今後とも宜しくお願い致します。m(__)m
2018-09-18 * aki [ 編集 ]

ありがとうございます!

はじめまして!
いつも素敵なテンプレートをありがとうございます。
ブログ開設時よりテンプレートを使わせてもらってまして、特に「lace-al2」が大変気に入ってましたので、いちばん長期にわたり利用させてもらいました。
今回さらに「al_responsive2c-r」に惚れこんでしまいまして、スマホにもキレイに対応されますし本当に嬉しかったです!
こちらのサイトを参考に最初は全文にして…また要約に戻したり、あちこちカスタマイズしまして自己満足ではありますが、近年にないほどの大満足の完成度です(笑)
嬉しさのあまり唐突にコメントしてしまいましたが…これからも大切に使わせていただきます!
ありがとうございました(*'ω' *)
2018-09-17 * まゆたん [ 編集 ]

ゆきゆず 様へ

こちらこそ初めまして♪テンプレートのご利用 、誠に有難うございます。
早速ヘッダーの画像が猫ちゃん達になっていましたね。(^^)
当方のウサギの飼育歴は20年超有るのですが、猫に関しては20年位前に実家の祖父母が飼っていた程度で、あんまり手出しが出来ず知識がそれ程有りません。(^^;
夜鳴き(声がデカくて遠吠えに近い^^;)に悩み、トイレハイに戸惑い、マーキングの臭さと後始末に翻弄され、たった一匹の猫に悪戦苦闘の日々なので、ゆきゆず様宅の猫生活がどんなにか凄い事なのかと、ホントに感嘆しきりです。
でも、なんだかんだ言って 大変ながらも楽しいですよね。
うちの旦那さんは『元野良・成猫・雄(6キロ!)』という初めての猫が可愛くて仕方ないようです。
何歳なのか不明で どれ位一緒に居られるか分からないですが、素敵な出会いを大事に、末永く暮らせたら良いなと思っております。(^^)
分からない事は 是非是非、教えて下さいませね♪

テンプレート共々、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m
2018-07-25 * aki [ 編集 ]

はじめまして

はじめまして!
こちらのテンプレートお借りしています。
とても可愛くてお気に入りになりました。
ありがとうございます!!
にゃんこさんの記事読みました♫
まるで私を見ているみたいでした笑
我が家も同じような経緯ではや9匹。
勝手に親近感です笑
毎日暑いですがにゃんことうさちゃんと
お元気にお過ごしください。
まずはお礼まで。
ありがとうございました。
2018-07-24 * ゆきゆず [ 編集 ]

名無し 様へ

いえいえこちらこそ。(^-^;
運営、頑張って下さい。陰ながら応援しています。
2018-07-16 * aki [ 編集 ]

No Subject

何度もお手数かけてすいませんでした。
おかげで多くのスマホサイズに対応できるようになりました。
本当にありがとうございます。

また何かあったらよろしくお願いします。
2018-07-16 * 名無し [ 編集 ]

名無し 様へ

テンプレート共々、無事表示できるようになって良かったです。(^^)
hr は、HTML4.01で非推奨だった size属性、width属性、align属性、とnoshade属性がHTML5で廃止されました。
この度のテンプレートはHTML5ですので、今後はCSSを使って記述して下さいませ。
それと一つご提案なのですが、当方のiPhoneSEで拝見するとブラウザサイズ(ベース解像度)が568×320なので、メニュー幅340pxでは右メニューの左端が欠けて表示されてしまいます。
iPhoneの最少幅が5やSEの320pxなので、このサイズに合わせればほぼどのスマホでも欠ける事無く表示できると思います。
修正箇所を下記に記しておきますので、是非改変をご検討下さい。
(現行の表示確認が出来ます。貴殿URLを入れてみて下さい。修正後の確認にもどうぞ。http://html5-lab.jp/checker/

/* メニューボタン */
#btn2 の width: 340px; を width: 320px;
#aside_close の padding-left: 295px; を padding-left: 265px;

/* メニュー */
aside の width: 340px; を width: 320px;
     right: -340px; を right: -320px;

HTML編集枠下のscript
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("aside").animate({top:"0",right:"-340px"} を $("aside").animate({top:"0",right: "-320px"}

以上です。ご面倒でなければ、です。m(__)m

この度は(説明下手なもので)何度もお手数をお掛けして 申し訳ございませんでした。
また何かご不明な点がございましたら、何なりとお声掛け下さいませ。
今後とも末永くお付き合いの程、宜しくお願い致します。
p.s. 因みに関係無いですが、私のカラオケでの十八番は『syncopation』です。踊れませんが。(^-^;
2018-07-16 * aki [ 編集 ]

No Subject

返事が遅れてすいませんでした。ご説明の通りしたら出来ました。
今までhtmlで
<hr size="2" color="#000000" width="100%">
のような単純な方法でラインを引いていたので今回は出来なかったようです。

今後も何か分からないことがあったら質問すると思いますので、その時はよろしくお願いします。


2018-07-15 * 名無し [ 編集 ]

名無し 様へ

hr のスタイル変更ですが、記事投稿・編集の画面で『水平線(旧画面)』若しくは『横罫線(新投稿画面)』のボタンを使っていませんか?
ボタンを使って hr を入れると、そのままテンプレートのスタイルシートに設定されている線になります。
スタイルを変える方法は幾つか有るのですが、投稿画面(HTML)で直接タグを入れる方法が一番簡単です。
ボタンは使わずに、そのまま記事を書く画面にタグを入れて下さい。
例)<hr style="border-top: 1px dashed #3366ff;margin-right:100px;">
この例では右に100pxの余白を持った1pxの青い破線が出るはずです。(プレビューでも確認できます。)
幾つかスタイルシートに設定を作っておいて、その都度選んで hr を挿入したい場合は、テンプレートのスタイルシート編集枠内(できれば hr の下辺りに入れるとPCもモバイルも反映します)に数種類作っておいて、

hr.style1{
border-top: 1px solid #9900ff; /* 1px 直線 紫 */
}
hr.style2 {
border-top: 1px dashed #ff6600; /* 1px 破線 オレンジ */
}
hr.style3{
border-top: 1px dotted #ff69b4; /* 1px 点線 ピンク */
}

記事を書く際に入力画面(HTML)で
<hr class="style1">
とだけ入れれば、その部分に 1pxのsolidな紫線が表示されます。(プレビュー確認)
一度試してみて頂けますか?
2018-07-15 * aki [ 編集 ]

No Subject

『✖』印は余白部分に移動しました。ありがとうございます。

それと、ライン(hr)の件ですが、cssの
h4{
margin:0 10px;
font-size:1.0em;
font-weight:normal;
color:#15adb3;
border-bottom:1px dotted #999;
}

の下にある
hr{
margin:10px 0;
border-top:dashed 1px #f0bdbd;
height:1px;
}

が影響してか、全てのラインがdashedになり、ここをsolidに変えると全てのラインがsolidになり、記事書き込み欄のhtml編集では線の太さも色も調整できません。

私の知識不足のせいだと思いますが、どうか教えていただけたらありがたいです。
2018-07-15 * 名無し [ 編集 ]

名無し 様へ

こちらこそ、何度もスミマセン。m(__)m
×印の位置は前出のresで書いた箇所、CSSの /* メニューボタン */
#btn1#btn2
top:180px; を、5px(位で良いと思う^^;微調が必要ならそのように修正を。)に書き換えて下さい。

…レスポンシブチェッカー(http://html5-lab.jp/checker/)やブラウザのデベロッパーツールを使って確認しても、実際は広告枠等が入ったりするため、実機(iOSとAndroid)での確認をしてみると異なる表示になったりするので困りものです。(^-^;
色々とお手数をお掛けして申し訳ございません。

それとhr等の調整ですが、直接記事内にスタイルを指定する事ができます。
新規投稿(若しくは過去記事の編集)をHTML表示ができる画面にして、タグに直接記述します。
例)<hr style="border-top: 1px dashed #ff33cc;margin-right:100px;">

テンプレートのCSS以外のスタイルが欲しい場合は直接投稿・編集画面をHTMLにして記述するのが早いです。
的外れな回答?でしたらご指摘下さい。m(__)m
2018-07-15 * aki [ 編集 ]

No Subject

何度もありがとうございます。

修正しましたところ閉じるための『✖』印が下がってしまいます。
下がった『✖』印を最上部の余白部分に戻すにはどうすればいいのか教えていただけるとありがたいです。

それと、これは別件ですが、ライン(hr)やテーブルラインを記事記入欄で調整することは出来ないのでしょうか?
2018-07-15 * 名無し [ 編集 ]

名無し 様へ

名無し様、もう一点、修正箇所がございましたっっ!
この部分を直して頂かないと、iPhoneで左右のメニューボタンが表示されないもので…(^-^;

CSS編集枠1/4程の
/* メニューボタン */
#btn{
overflow:hidden;
width:100%;
height:30px;
top:10px;(元のテンプレートでは32pxになっている個所)
z-index:3;
position:fixed !important;
}
上記 赤文字部分も(左右ボタンの位置と合わせるため)180pxに変更して下さい。

当方の実機iPhoneSEとXperiaで確認がてら表示してみましたら、Xperia(Android6)では表示されるのに、iPhoneSE(iOS11)では左右のメニューボタンが表示されておりませんでした。(何故Androidは表示されるのか?は不明…)
見ましたところ、(当方が改変指示をしていなかった)前出の#btn部分の未修正が原因だったようなので、コチラの部分も修正をお願い致します。
何度もお手数をお掛けして申し訳ございません。m(__)m
改めて修正後に表示確認させて頂きたいので、もう一度 お声掛け頂けますか?
2018-07-15 * aki [ 編集 ]

No Subject

丁寧なご説明ありがとうございました。
おかげさまで今のところ全ての問題が解決しました。

また何かあったら質問させていただくと思いますので、その時はまたよろしくお願いします。

本当にありがとうございました。
2018-07-15 * 名無し [ 編集 ]

名無し 様へ

名無し様、無事に改変できたようで何よりです。(^^)
ドロワーメニューを出した時の背景色グレー部分、という事でしょうか?
これもHTMLなのですが、同じく(下記レスのscript部分)
(3カラム)
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
$("#aside_wrap").css({display:"block",position:"absolute","z-index":"4",top:"0","margin-top":"-64px", (右メニュー)と、
$("#nav_wrap").css({display:"block",position:"absolute","z-index":"4",top:"0","margin-top":"34px", (左メニュー)
の赤文字部分の数値を増やしてメニュー位置まで下げて下さい。
それと、貴殿のブログを拝見させて頂いたところ、ドロワーメニューを下に下げた分だけ下位部分が表示できなくなっています。(スクロールしても一番下まで見えない状態)
CSS編集で /* メニュー */ の nav と aside にご自身が追加した margin-top:180px; に合わせて、
padding-bottom:15px; の部分も180px(若しくはそれ以上)に変更して下さい。
これでサイドのメニューも全て表示されると思います。

名無し様は素晴らしいカスタマイズをされる方ですので、不勉強な当方の説明でも分かって頂けると思いますが、理解不能(?)な点等ございましたら再度、ご面倒でも連絡下さいませ。m(__)m

貴殿ブログ、拝見させて頂きビックリ致しました。(^^)
こんなに素敵にカスタマイズして頂いて、BABYMETALファンである当方も嬉しいやら有難いやら…感謝感激です。( ;∀;)
是非、末永くご愛顧賜ります様 宜しくお願い致します。
2018-07-14 * aki [ 編集 ]

No Subject

ドロワーメニュー幅の変更に関して質問した者です。
おかげさまで希望の幅に調整することが出来ました。
これまで自分の気に行ったレスポンシブテンプレートが見つからず残念に思っていましたが、akiさんの作ったテンプレートが気に入って早速テンプレートをレスポンシブに変更しました。

ありがとうございました。
私のブログは『BABYMETALの楽園』です。
http://bmparadise.blog.fc2.com/

最後に、ドロワーメニューを開いたときに上の広告にかかる変色幕をドロワーメニューの高さまで下げられるのか教えていただけるとありがたいです。
2018-07-14 * 名無し [ 編集 ]

名無し 様へ

名無し 様、初めまして。テンプレートのご利用、誠に有難うございます。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キー』を押すと文字列を検索できる小窓が表示されますのでご活用下さいませ。

他にもご不明な点がございましたら何なりとお声掛け下さい。
不勉強で素人回答ですが頑張ってお返事出来るように致します。(^^;)
今後とも末永くお付き合い下さいます様、宜しくお願い致します。
2018-07-14 * aki [ 編集 ]

No Subject

スマホのスライドメニュー幅を広げたら、閉じた時に広げた分が画面に残るのですが、スライドメニュー幅を広げることは出来るのですか?
2018-07-13 * 名無し [ 編集 ]