*Essence

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

 >  Template >  カスタマイズ >  al_responsive のカスタマイズ（CSS変更・その他）

al_responsive のカスタマイズ（CSS変更・その他）

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

１）　薄く透過されている大枠の背景
２）　丸みを帯びた角を直角に戻す。
３）　記事掲載時にYouTube等の動画をレスポンシブで埋め込む

１）　薄く透過されている大枠の背景
［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

２）　丸みを帯びた角を直角に戻す。
記事を取り囲んでいる枠や、タイトルの背景などの角に丸みを持たせております。
スタイルシート枠内上から
〈セレクタ名： 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


３）　記事掲載時に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
スポンサーサイト

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

* Comment : (26) * Trackback : (0) * △
<<暑中お見舞い申し上げます m(__)m | Home | al_responsive のカスタマイズ（トップ画像変更）>>

コメント






管理者にだけ表示を許可

ころも 様へ

回りくどく長ったらしい説明で申し訳ございません。
ご理解頂けて何より…というか、今作っているテンプレートで考えていたのですが、al_responsiveにも折角JavaScriptが付帯しているのだから、トップページ全文表示（にカスタマイズした場合）で開閉では無く、個別記事ページで展開できるように そのうち修正・更新しようかなと思いました。^^;
ころも様からのご質問・ご意見は、当方も何となく予てから思っていた事なんですよね。
追記の開閉はトップページでは無く個別ページに有った方が良いのでは、と。
背中を押して頂けて『感謝』です。(^-^)

>「moji-c」のスクリプトを採用すると、…
実は「moji-c」の部分、JavaScriptでは無くCSSです。
文字出力部分を「moji-c」というdivで括り、そのボックスの高さを決めて表示させ、はみ出た部分を非表示にする、という簡単なものです。
.moji-c{
height: 105px;
overflow: hidden;
line-height: 1.8;
}
上記では、高さ105pxを超えた部分の文字は表示しない（hidden）。文字列の行の高さは1.8（フォントサイズ×1.8）。になります。

本文が短く余白が増える場合は、高さ（height）の数値を減らせば表示領域が減るので余白も減ります。
画像が無い場合は上記の方法で高さを調整できるのですが、テンプレートでは左に画像が有る場合の見栄えで高さを決めているので、本文が短い場合は余白…できます。
本当に、あとはお好みで…と言うしかございません。m(__)m

…それと、お祝いのお言葉、有難うございます。
嬉しい歳でも無いけれど、「おめでとう」の言葉はやっぱり嬉しい♪です。(#^.^#)
ウサギの『いなばさん』はお察しの通り、因幡の白兎（いなばのしろうさぎ）から命名しました。
動物病院のカルテも「いなばさん」までを名前として登録してもらっていて、お薬の袋は『いなばさん ちゃん』になってます。（笑）
10歳半のご長寿ウサギです♪
2018-10-15 * aki [ 編集 ]

No Subject

ご丁寧に解説いただきありがとうございます！
なるほど、全文表示にカスタマイズした際に追記が折り畳まれる、そのためのスクリプトだったのですね。
理解に至りました。誤解をしていたようで、申し訳ありません…。

akiさんのおっしゃる通り、トップページでは要約表示→個別記事へ誘導→個別記事の追記部分に関しては開閉式、
この方式がいいなと思い、教えていただいた通りにスクリプトを編集すると、
期待通りの結果を得ることができました。ありがとうございます。
---
余談ですが、追記の開閉部分はコメントリストの開閉部分の設定と同じことから、
記事の追記部分の幅が狭くなることが個人的に気になったので、
新たに追記部分用に設定を作ることで対応してみました。（このブログと同じように、本文部分と同じ幅で）

もうひとつ余談ながら、別の記事の内容になりますが、「moji-c」のスクリプトを採用すると、
たとえば本文が短く、実質の本文を追記部分に書くような場合などは、要約表示の際に空白が発生する…というか、
そういう設定なので道理なのですが、そこはもう好みの問題ですね。失礼しました。
一応ご報告的なものをしてみようかと思った次第です。

今回もまたお世話になり、ありがとうございました。ご親切にしていただき、感謝しております。
---
そして、少し時間が経ってしまったようですが、akiさん、お誕生日おめでとうございます。
昨日質問コメントをしたときには気づいていたのですが、先に疑問を解決してからと思い、いまになりました。
改めて、おめでとうございます。記事の猫ちゃんうさちゃん、かわいいです。
いなばさんのお名前は、神話に由来しているのでしょうか。
2018-10-14 * ころも [ 編集 ]

ころも 様へ

ころも様、いつも有難うございます。m(__)m

FC2ブログの追記は、トップページでは表示されず個別ページにて表示される部分で、元々折り畳まれる仕様では有りません。
追記は、文字通り文章を加えたい時だけではなく、長い記事を分割して表示したい場合にも有効で、トップページでは「本文」に記述した部分と『続きを読む』という文言が表示されます。
『続きを読む』をクリックすると個別ページに移動して記事の全文を読むことができる…というのがFC2ブログのデフォルトなのです。
有志の方が昔、トップページに追記部分を折り畳んで表示させてという要望を叶えるために、JavaScriptで作ってくれたものなのですが、テンプレートによっては初めから付帯されているものもあります。（当方のテンプレートもほぼ付いています。）
ただ、それだとトップページだけで全て完結してしまい、個別の記事ページにはコメントする方だけしか来なくなっちゃうと思いますけど。。^^;
なので過去の慣例通り、al_responsive も『トップページが全文表示』の時に追記が折り畳まれて表示されます。が、要約表示では表示されません。
そして、個別記事ページ自体は元々本文も追記も表示される仕様なので「ReadMore」は出てこない訳です。

前置きが長くなりましたが、只今製作中のテンプレートではその個別記事のページに表示される追記部分を折り畳んで表示するようにしております。
ブログの、トップページから記事本文への誘導という本来の使い方では無いのかもしれませんが、ニーズ的にはこの方が良いような気がするので。^^;
ころも様の転記された部分を少し改変するだけで「折り畳み」が使えるようになりますので、ご利用頂く場合は下記のように変更して下さい。

<!--more_link-->
の部分を
<!--more-->
<!--permanent_area-->
に変更する

<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->
の部分を
<!--/permanent_area-->
<!--/more-->
に変更する

これでトップページの追記折り畳みを個別記事用に変更できます。
また、「Return」での戻り位置が記事トップになっているのを「ReadMore」の位置にしたい場合は、その行の

<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
の青色部分を
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
赤文字部分のように変更して下さい。

以上で改変できますが、もし不具合が有りましたら教えて下さいませ。m(__)m

個人的には、トップページは要約表示にして『続きを読む』で個別記事ページへ誘導し、個別記事の追記を開閉式にして「読みたい人が開く」というのが良いんじゃないかと思うのですけどね。^^;
2018-10-14 * aki [ 編集 ]

No Subject

こんにちは。お久しぶりです。
こちらのブログの記事を見て、テンプレートのRead More部分の機能の存在に気が付き、
私がお借りしているテンプレートを確認すると、
こちらにもそのためのスクリプトらしき部分があることに気が付いたのですが、
しかし現状、追記部分に文を書いても本文として扱われ、Read More部分のスクリプトが働かないようなのです。
おそらく下記が該当部分のスクリプトかと思うのですが、なにか思い当たることはありますでしょうか。
私は変に触っていないつもりですが、もしおかしくしていたらすみません…。

<div class="con1_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji1 kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><!--permanent_area--><%topentry_body>
<!--more_link-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">ReadMore</a>
<noscript>
<a href="<%topentry_link>#more">ReadMore</a>
</noscript>

<div class="sidehide" id="more<%topentry_no>">
<hr>
<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->
<!--/permanent_area-->
</div>
2018-10-13 * ころも [ 編集 ]

ころも 様へ

いえいえ、恐縮されては困ります。^^;
すみませんだなんて、謝らないで下さい！とっても有難いのですから。。
これだけ沢山のテンプレートが有って、使って頂く・声を掛けて頂く、それだけで本当に嬉しいのです。(^-^)
そして何より、ご利用頂く方に 長く気持ち良く使って頂くために、どんな事でも気になった事はご相談頂きたいのです。
「こりゃ駄目だわ」と、何も言わずに諦めて他の物に変更するのが常ですが、叶うならお声を掛けて頂いて『改善・修正』させて頂きたい…そう思います。

この度は本当に、有難うございました。m(__)m

p.s.
このテンプレートのメニューボタンが押せない…有難うございます。修正しました。(;^_^A
2018-09-25 * aki [ 編集 ]

お返事ありがとうございます。

あっ…、訪問履歴に残っていましたか…。
ああ…、自己解決後、すぐにその旨をもとのコメントへ追記したつもりでしたが、
そのときにはすでに動いてくださっていたのですね。
時すでに遅しだったようで、長いこと悩ませてしまい、本当にごめんなさい…。
こちらこそ、解析に多数の履歴を残してしまっているのではないかと思います。

コメントの追記部分に関しては、コメントに追記という形ではなく、
新規コメントで書き込んだほうが、気がついていただけたでしょうか。
後手後手になってしまって、ほんと、なんと言っていいのか…。
この度は本当にすみませんでした！

そして個人的には、この現象は不具合というほどのものでもないと思います。
テンプレートはjavaScriptで指示した通りに動いているだけですし…。
では他になんと呼ぶのかと言われればわかりませんが、
なんだか申し訳ない気持ちになりました。すみません。。

そして、まさか訪問してくださるとは思っていなくて、
完全にオフモードで書いていたので、記事中、なにか失礼があったらごめんなさい…。
でも、以前にもakiさんのテンプレートを使っていた話は書いておいてよかったなと思いました(笑)。
これからもまた、よろしくお願いします。ありがとうございます。

>> p.s.
ブラウザの幅に応じてカラムが変化するとは、ハイテクですね！
試しに画面を縮小化してみたら、たしかにプラグインの位置が変わりました。すごい！

というか、私のお借りしているテンプレートにもその機能があるんですね。
画面の幅を狭くしたら、メニューボタンが出てきて、押したらメニューがニュッと出てきました！
ですが、こちらのakiさんのブログのメニューボタンは押せない…？ような気がしました？
ので、余計なお世話かもしれませんが、ちょっとお知らせしておきます。

では、また長文失礼しました。
2018-09-25 * ころも [ 編集 ]

ころも 様へ

ころも 様、初めまして♪
数あるテンプレートの中から見つけて頂き、誠に有難うございます。
FC2管理画面のご訪問頂いた履歴の中に貴殿の名前がございましたので、不具合を確認すべくお伺い致しました。
が、何度リロードしても確認できず…ページのソースを見ながら悩んでおりました。^^;（解析の、多数の履歴が有りましたら私です。）
この案件について他の利用者の方からは一言も伺う事が有りませんでしたので、不具合が有ったとは知りませんでした。
お知らせ頂き、誠に有難うございます！m(__)m
java script の動作確認をしましたところ、構文のエラーは無いのですが、表示高速化のためにソースを圧縮すると java script が発動しない…という欠陥が有ることが分かりました。
先般の script は、FC2独自タグ「<%topentry_description>」で出力される要約200文字を調整できるようにし、150字に調整されて表示するものです。
このJSの不具合で、多分FC2独自タグで出力された200文字が表示された後150字に調整される・・という表示がされたのではないかと推察致します。

早速、自身のブログに不具合告知・テンプレートの修正更新をしようと思います。
改めて、ご連絡頂き 有難うございました！
今後このような事の無いよう、十分に確認作業致しますので、また何かお気付きの点等がございましたらお教え下さいませ。m(__)m

訪問した際、貴殿のブログ記事を拝見致しました。
以前にも弊テンプレートをご利用頂いたとの事。すごくすごく(#^.^#)嬉しいです♪
古い頭で不勉強なHTML5及びCSS3,レスポンシブテンプレートをこの度作成致しましたが、流石に時代の流れは早くて…^^; シンプルで素敵なデザインには程遠い、昔ながらのレガシーデザインになってしまいました。
まぁ、新旧どちらのデザインも、数有ればみんな似たり寄ったりになってしまいますので、見つけて使って頂けることに感謝・感謝♪です。
是非、弊テンプレートと今後とも末永くお付き合い頂けますよう 宜しくお願い致します。m(__)m

p.s.
このテンプレートもまだ試作段階ですが、今後2カラム版（カラム左右）を作ったら共有化を目指して申請する予定です。
（因みにこのテンプレート3カラム版は、ブラウザの幅に応じて３→２→１カラムに変わります。）
不具合を見つけて頂けましたら是非！教えて下さいませ。m(__)m
2018-09-24 * aki [ 編集 ]

はじめまして。

はじめまして。
この度、要約表示形式の「al_responsive2c-r」を気に入り、使い始めました。
まずは感謝を。素敵なテンプレートをお貸しいただき、ありがとうございます。大事にします。

さっそくで恐縮なのですが、ひとつ質問です。
メインページを再読込みすると、要約部分以降の文章が一瞬チラッと表示され、その後、要約部分のみが表示されるようです。
こちらのブログも要約表示形式ですが、そういうことは起きていないように見受けられます。
これはどのような違いから起きているのでしょう。私には見当がつかないので、一度お聞きしてみようと思いました。
お手数ですが、よろしくお願いします。

---

2018/09/24 0:06 追記
ごめんなさい！ 自己解決しました。
HTMLの「<%topentry_description>」部分で見つけた「text_overflow」というワードでページ内検索をしたところ、
CSSの「<script>$(function(){$(".text_overflow").each(function(){var t=$(this).text();if(150<t.length){var n=t.substring(0,150);n+='<span class="omit">…</span>',$(this).html(n)}})});</script>」部分を発見し、
どうやらこれが動作していることが原因らしいとわかり、ここを削除することで期待通りの結果を得ることができました。
仮に要約部分を200文字よりも少なく収めたいと思った場合は、
記事の文章を書く場所を、任意のタイミングで本文部分から追記部分に切り替えれば、
追記部分に書いた文章は要約として扱われないのですね。

いっそコメントを消すべきかとも思ったのですが、
一度書き込んでしまったことなので、そのまま残させていただきます。
本当にすみません…。
2018-09-23 * ころも [ 編集 ]

まゆたん 様へ

まゆたん様、初めまして♪
数あるテンプレートの中から見つけて頂き、且つ永くご利用頂きまして有難うございます。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 [ 編集 ]

はじめまして

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

FC2ブログ共有テンプレート配布中

FC2ブログで共有テンプレートを配布しています。ご利用はFC2会員になってブログを作成して下さい。

＊ レスポンシブテンプレートの設定
＊ テンプレートのご利用について
＊ カスタマイズについて
＊ 著作権と免責事項

不明な点はMail、ブログのコメント等でお問い合わせ下さい。
ご質問は、テンプレート名・閲覧ブラウザとバージョン・変更箇所・状況等、出来るだけ詳細が分かるようにお願い致します。

当方確認ブラウザ：（OSは全てWin10です）
IE10, IE11, Opera12.15, Firefox40.0, Safari5.1.7, MSEdge, GoogleChrome
Mobile確認：iPhoneSE iOS11 , SO-01J Android8
閲覧は 出来るだけ新しいブラウザのご利用を推奨致します。m(__)m
※利用規約は予告なく変更される場合があります。ご了承下さい。

▲ ▼