その他の箇所のカスタマイズ(^-^;です。
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。
１） 薄く透過されている大枠の背景 ２） 丸みを帯びた角を直角に戻す。３） 記事掲載時にYouTube等の動画をレスポンシブで埋め込む１） 薄く透過されている大枠の背景 ［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 ColorNameRGBAカラーモデル変換ツールは↓コチラをご利用下さい。
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"><iframe width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>YouTubeの記事掲載時はこんな感じに。
以上、［al_responsive〇c］のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m
- 関連記事
-
No Subject
ご丁寧に解説いただきありがとうございます！
なるほど、全文表示にカスタマイズした際に追記が折り畳まれる、そのためのスクリプトだったのですね。
理解に至りました。誤解をしていたようで、申し訳ありません…。
akiさんのおっしゃる通り、トップページでは要約表示→個別記事へ誘導→個別記事の追記部分に関しては開閉式、
この方式がいいなと思い、教えていただいた通りにスクリプトを編集すると、
期待通りの結果を得ることができました。ありがとうございます。
---
余談ですが、追記の開閉部分はコメントリストの開閉部分の設定と同じことから、
記事の追記部分の幅が狭くなることが個人的に気になったので、
新たに追記部分用に設定を作ることで対応してみました。（このブログと同じように、本文部分と同じ幅で）
もうひとつ余談ながら、別の記事の内容になりますが、「moji-c」のスクリプトを採用すると、
たとえば本文が短く、実質の本文を追記部分に書くような場合などは、要約表示の際に空白が発生する…というか、
そういう設定なので道理なのですが、そこはもう好みの問題ですね。失礼しました。
一応ご報告的なものをしてみようかと思った次第です。
今回もまたお世話になり、ありがとうございました。ご親切にしていただき、感謝しております。
---
そして、少し時間が経ってしまったようですが、akiさん、お誕生日おめでとうございます。
昨日質問コメントをしたときには気づいていたのですが、先に疑問を解決してからと思い、いまになりました。
改めて、おめでとうございます。記事の猫ちゃんうさちゃん、かわいいです。
いなばさんのお名前は、神話に由来しているのでしょうか。
2018-10-14-12:23 ころも [
返信 *
編集 ]
▲
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-13:22 ころも [
返信 *
編集 ]
▲
お返事ありがとうございます。
あっ…、訪問履歴に残っていましたか…。
ああ…、自己解決後、すぐにその旨をもとのコメントへ追記したつもりでしたが、
そのときにはすでに動いてくださっていたのですね。
時すでに遅しだったようで、長いこと悩ませてしまい、本当にごめんなさい…。
こちらこそ、解析に多数の履歴を残してしまっているのではないかと思います。
コメントの追記部分に関しては、コメントに追記という形ではなく、
新規コメントで書き込んだほうが、気がついていただけたでしょうか。
後手後手になってしまって、ほんと、なんと言っていいのか…。
この度は本当にすみませんでした！
そして個人的には、この現象は不具合というほどのものでもないと思います。
テンプレートはjavaScriptで指示した通りに動いているだけですし…。
では他になんと呼ぶのかと言われればわかりませんが、
なんだか申し訳ない気持ちになりました。すみません。。
そして、まさか訪問してくださるとは思っていなくて、
完全にオフモードで書いていたので、記事中、なにか失礼があったらごめんなさい…。
でも、以前にもakiさんのテンプレートを使っていた話は書いておいてよかったなと思いました(笑)。
これからもまた、よろしくお願いします。ありがとうございます。
>> p.s.
ブラウザの幅に応じてカラムが変化するとは、ハイテクですね！
試しに画面を縮小化してみたら、たしかにプラグインの位置が変わりました。すごい！
というか、私のお借りしているテンプレートにもその機能があるんですね。
画面の幅を狭くしたら、メニューボタンが出てきて、押したらメニューがニュッと出てきました！
ですが、こちらのakiさんのブログのメニューボタンは押せない…？ような気がしました？
ので、余計なお世話かもしれませんが、ちょっとお知らせしておきます。
では、また長文失礼しました。
2018-09-25-01:08 ころも [
返信 *
編集 ]
▲
ころも 様へ
ころも 様、初めまして♪
数あるテンプレートの中から見つけて頂き、誠に有難うございます。
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-13:55 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-19:25 ころも [
返信 *
編集 ]
▲
ありがとうございます！
はじめまして！
いつも素敵なテンプレートをありがとうございます。
ブログ開設時よりテンプレートを使わせてもらってまして、特に「lace-al2」が大変気に入ってましたので、いちばん長期にわたり利用させてもらいました。
今回さらに「al_responsive2c-r」に惚れこんでしまいまして、スマホにもキレイに対応されますし本当に嬉しかったです！
こちらのサイトを参考に最初は全文にして…また要約に戻したり、あちこちカスタマイズしまして自己満足ではありますが、近年にないほどの大満足の完成度です(笑)
嬉しさのあまり唐突にコメントしてしまいましたが…これからも大切に使わせていただきます！
ありがとうございました(*'ω' *)
ゆきゆず 様へ
こちらこそ初めまして♪テンプレートのご利用 、誠に有難うございます。
早速ヘッダーの画像が猫ちゃん達になっていましたね。(^^)
当方のウサギの飼育歴は20年超有るのですが、猫に関しては20年位前に実家の祖父母が飼っていた程度で、あんまり手出しが出来ず知識がそれ程有りません。(^^;
夜鳴き（声がデカくて遠吠えに近い^^;）に悩み、トイレハイに戸惑い、マーキングの臭さと後始末に翻弄され、たった一匹の猫に悪戦苦闘の日々なので、ゆきゆず様宅の猫生活がどんなにか凄い事なのかと、ホントに感嘆しきりです。
でも、なんだかんだ言って 大変ながらも楽しいですよね。
うちの旦那さんは『元野良・成猫・雄（6キロ！）』という初めての猫が可愛くて仕方ないようです。
何歳なのか不明で どれ位一緒に居られるか分からないですが、素敵な出会いを大事に、末永く暮らせたら良いなと思っております。(^^)
分からない事は 是非是非、教えて下さいませね♪
テンプレート共々、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m
2018-07-25-04:45 aki [
返信 *
編集 ]
▲
はじめまして
はじめまして！
こちらのテンプレートお借りしています。
とても可愛くてお気に入りになりました。
ありがとうございます！！
にゃんこさんの記事読みました♫
まるで私を見ているみたいでした笑
我が家も同じような経緯ではや９匹。
勝手に親近感です笑
毎日暑いですがにゃんことうさちゃんと
お元気にお過ごしください。
まずはお礼まで。
ありがとうございました。
名無し 様へ
いえいえこちらこそ。(^-^;
運営、頑張って下さい。陰ながら応援しています。
2018-07-16-12:48 aki [
返信 *
編集 ]
▲
No Subject
何度もお手数かけてすいませんでした。
おかげで多くのスマホサイズに対応できるようになりました。
本当にありがとうございます。
また何かあったらよろしくお願いします。
2018-07-16-09:30 名無し [
返信 *
編集 ]
▲
No Subject
返事が遅れてすいませんでした。ご説明の通りしたら出来ました。
今までhtmlで
<hr size="2" color="#000000" width="100%">
のような単純な方法でラインを引いていたので今回は出来なかったようです。
今後も何か分からないことがあったら質問すると思いますので、その時はよろしくお願いします。
2018-07-15-23:11 名無し [
返信 *
編集 ]
▲
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-14:09 名無し [
返信 *
編集 ]
▲
No Subject
何度もありがとうございます。
修正しましたところ閉じるための『✖』印が下がってしまいます。
下がった『✖』印を最上部の余白部分に戻すにはどうすればいいのか教えていただけるとありがたいです。
それと、これは別件ですが、ライン（hr）やテーブルラインを記事記入欄で調整することは出来ないのでしょうか？
2018-07-15-07:43 名無し [
返信 *
編集 ]
▲
No Subject
丁寧なご説明ありがとうございました。
おかげさまで今のところ全ての問題が解決しました。
また何かあったら質問させていただくと思いますので、その時はまたよろしくお願いします。
本当にありがとうございました。
2018-07-15-00:17 名無し [
返信 *
編集 ]
▲
No Subject
ドロワーメニュー幅の変更に関して質問した者です。
おかげさまで希望の幅に調整することが出来ました。
これまで自分の気に行ったレスポンシブテンプレートが見つからず残念に思っていましたが、akiさんの作ったテンプレートが気に入って早速テンプレートをレスポンシブに変更しました。
ありがとうございました。
私のブログは『BABYMETALの楽園』です。
http://bmparadise.blog.fc2.com/最後に、ドロワーメニューを開いたときに上の広告にかかる変色幕をドロワーメニューの高さまで下げられるのか教えていただけるとありがたいです。
2018-07-14-12:07 名無し [
返信 *
編集 ]
▲
No Subject
スマホのスライドメニュー幅を広げたら、閉じた時に広げた分が画面に残るのですが、スライドメニュー幅を広げることは出来るのですか？
2018-07-13-22:17 名無し [
返信 *
編集 ]
▲
ころも 様へ
ころも 様へ
回りくどく長ったらしい説明で申し訳ございません。ご理解頂けて何より…というか、今作っているテンプレートで考えていたのですが、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歳半のご長寿ウサギです♪