*Essence

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

 > 2018年07月

al_responsive のカスタマイズ(CSS変更・その他)

al_responsive のカスタマイズ(CSS変更・その他)

その他の箇所のカスタマイズ(^-^;です。暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。1) 薄く透過されている大枠の背景 2) 丸みを帯びた角を直角に戻す。3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む1) 薄く透過されている大枠の背景 [al_responsive〇c]のスタイルシート編集枠をほんの少し下げた所に有る#wrapper{ という部分の背景色を変更します。何も加工が無け...

... 続きを読む

ころも 様へ * by aki
回りくどく長ったらしい説明で申し訳ございません。
ご理解頂けて何より…というか、今作っているテンプレートで考えていたのですが、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歳半のご長寿ウサギです♪

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

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

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

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

ころも 様へ * by aki
ころも様、いつも有難うございます。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

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

No Subject * by ころも
こんにちは。お久しぶりです。
こちらのブログの記事を見て、テンプレートの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>

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

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

p.s.
このテンプレートのメニューボタンが押せない…有難うございます。修正しました。(;^_^A

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

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

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

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

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

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

では、また長文失礼しました。

ころも 様へ * by aki
ころも 様、初めまして♪
数あるテンプレートの中から見つけて頂き、誠に有難うございます。
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カラム版は、ブラウザの幅に応じて3→2→1カラムに変わります。)
不具合を見つけて頂けましたら是非!教えて下さいませ。m(__)m

はじめまして。 * by ころも
はじめまして。
この度、要約表示形式の「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文字よりも少なく収めたいと思った場合は、
記事の文章を書く場所を、任意のタイミングで本文部分から追記部分に切り替えれば、
追記部分に書いた文章は要約として扱われないのですね。

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

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

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

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

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

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