*Essence

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

Top Page › Template › カスタマイズ › al_responsive のカスタマイズ(エントリー全文表示②)
2019-01-23 (Wed)  02:40

al_responsive のカスタマイズ(エントリー全文表示②)

1月15日の更新で、レスポンシブテンプレート、al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の個別記事追記表示を折り畳みに変更致しましたので、トップページ全文表示用の変更HTMLも修正致します。('19.01.15 以前にDLした al_responsive のトップページを全文表示にするカスタマイズは、『al_responsive のカスタマイズ(エントリー全文表示)』をご参照下さい。)
難しい変更箇所はございませんので、要約表示から全文表示にしたい方は、是非カスタマイズしてみて下さい。

'19年4月5日の更新で、記事表示変更箇所を分かり易くするよう、HTML編集枠内のソースにコメントアウトを入れました。
また、'19年3月6日の記事にてCSSやJavaScriptの更新をしておりますので、併せて確認頂き修正をお願い致します。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[al_responsive〇c(-l,r)]のHTML編集枠を開いて <!-- 要約表示用HTMLの貼り換え ここから--> という所から <!-- 要約表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい(コピー&ペースト)。

ここまでで2、3カラム時に全文表示になり、1カラムでは要約表示になります。
1カラムも全文表示にしたい場合は、スタイルシート編集枠3/4程スクロールした所に有る

/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){ という部分の
/* 要約表示時記事非表示 */
.kiji2{
display:none;
}
を display:block; に変更、その下に
.kiji1{
display:none;
}

を追加して下さい。
不具合が有った時のために複製を作成して作業すると安心です。

('19/04/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)
('19/04/05 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)
('19/03/06 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)

al_responsive 2c(2カラム右・左)

<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<div class="con1">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con1_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<a href="<%topentry_link>#readmore">Read More</a>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p style="margin:15px 0;"><%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->



al_responsive 3c(3カラム)

<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<div class="con2">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con2_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<a href="<%topentry_link>#readmore">Read More</a>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p style="margin:15px 0;"><%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


Comment




ご質問,不具合は確認用にURLをお願いします。




管理者にだけ表示を許可

aki Super源さん 様へ

こんばんは。
この度の修正・更新の件、先程記事にさせて頂きました。
有難うございました。
そして、今後とも宜しくお願い致します。m(__)m
2019-02-08-02:12 * aki [ 返信 * 編集 ]

akiさん、こんにちは!(^^)/

超横長画像の対策も、検討してくださったようで、感謝です。m(__)m

了解しました。(^^)v
私の方でも、微力ながら何か方法がないか、探るよう心掛けますね。_(..)βメモメモ

今思いつくのは、もともとの画像表示が、時には黒背景など入れて、強引に同じ大きさにしていたようなので、今回も、画像枠の大きさを決めてしまい、はみでた部分は表示しないようにする、ということくらいですね。
が、これだと、リスポンシブでは問題ありそうですね。(^o^;

何と言うか、リスポンシブでは、できることの自由度が制限され、その「対策」も難しくなる感じですね。(@_@)ウーン

でも、浦島太郎にならないよう、「新技術」に一生懸命ついていかなければ…。(^o^;←モウ ナッテル トイウ ハナシ モ。

また、レイアウト崩れのご指摘、ありがとうございます。m(__)m

このショットは、ブラウザの縮小機能を使ってとられたものですよね?

それで、チェックしてみたところ、ご指摘のものは、見本画像ではなく「ブログパーツ」そのものですね。

なので、どうしたら良いのか…。(@_@)ウーン

ちょっとググッってみます。(爆) 3 ピュ~
2019-02-07-13:12 * Super源さん [ 返信 * 編集 ]

aki Super源さん 様へ

>良く見ると、画像が思いっきり横長の時、高さが若干詰まるようですが、(^^;
…流石に画像の縦横比はユーザー様の掲載サイズ次第なので、最大値(max-height)で合わせてます。
例えば記事タイトルが2行になる場合やカスタマイズで文字サイズを大きくしている場合も有るので、要約表示枠のサイズを一定にするのは私のスキルでは難しいかなぁ~と。。
これも思案材料として今後も考えて参りますが、もし良い方法を思い付かれましたら、是非!お教え下さいませ。m(__)m

>そうだ。そろそろ新記事も書かななければ。(爆)
…あと、きっと追々修正…なのだと思いますが、『オンライン便利ツール』『ブログパーツ』カテゴリーの記事内見本が、枠外まで崩れて表示されております。IE、Edge、Opera、Firefox は大丈夫のようですが、GoogleChromeで崩れます。
https://blog-imgs-124.fc2.com/s/o/r/sorauta1/blogmihon.png
(容量を減らすのに画質を落としたのでちょっと見辛いかも…^^;)
お時間の有る時にでもご確認下さい。
2019-02-07-00:44 * aki [ 返信 * 編集 ]

akiさん、こんばんは!(^^)/

早速試してみました。(^^)v
スゴーく、いい感じですね。(^-')

良く見ると、画像が思いっきり横長の時、高さが若干詰まるようですが、(^^;

https://www.zatsugaku-jiten.net/blog-category-6.html

私の場合、これだけ横長の画像を使うのは、おそらくこのカテゴリーだけだと思うので、これで問題ないと思います。(^^)

何より、これ以上細かいことを言うと、バチが当たりそうです。(^o^;

akiさん、改めまして、ありがとうございました。m(__)m
とても満足してます。(^^)

そうだ。そろそろ新記事も書かななければ。(爆)
2019-02-06-20:35 * Super源さん [ 返信 * 編集 ]

aki Super源さん 様へ

こんばんは。画像の高さ、ですね。(^^;
通常時 W3:H2の比率で数値を変更します。

CSS部分(編集枠2/3程下へスクロール)
.left{ の部分
width:35.3%; /* 35を35.3に変更 */
max-height:155px; /* 275を155に変更 */

.left img{ の部分
max-height:155px; /* 275を155に変更 */

/* レスポンシブ1001px以上で適用 */(編集枠5/6程下へスクロール)
.left{ の部分
width:35.3%; /* 35を35.3に変更 */
max-height:155px; /* 200を155に変更 */
}

それとあともう一点、CSS編集枠下段に有る
@media only screen and (max-width:400px) という部分の
.left img{
margin-bottom:15px;
}
を削除し、代わりに
.right {
padding-top:10px;
}
を入れて下さい。
画面リサイズで横幅は可変ですが高さは同じに保たれると思います。
これで試してみて頂けますか?
2019-02-06-17:53 * aki [ 返信 * 編集 ]

akiさん、こんにちは!(^^)/

おぉ~っ!。w(゚゜)w そうなってましたか。
いわば「FC2マjジック」ですね。それでは、いくらやってもダメなはずですね。【><】

紹介リンク、参照いたしました。(^^)
あっ!(゚o゚)ホントだ。ここに、背景が黒くなる、と書かれてましたね。
先日、どちらも一通り拝読したのですが、見落としてたようです。

ということで、早速ご教示いただいたとおりにHTMLとCSSの変更を行なってみると、、、、。
おお(゚o゚)
黒バック、見事に消えてます!
akiさん、ありがとうございました。m(__)m

ただ、、、今までは、要約表示時に、記事と(次の)記事の間の間隔が「固定」でしたが、今度は画像の高さに応じて可変になったため、ページを上から下ヘとスクロールしていくと、ちょっと違和感がありますね。【><】


https://www.zatsugaku-jiten.net/blog-date-201612.html

※たとえばこのページで、虫と時計の写真のところで、記事間がグッと広くなっているのがお分かりいただけるでしょうか?
(探せば、もっと分かりやすいページがありそうですが…【><】)


なので、ここを固定幅にしていただくと、さらにうれしいのですが、いかがでしょ?(^^)

以上、まずは取り急ぎお礼まで。m(__)m
2019-02-06-15:53 * Super源さん [ 返信 * 編集 ]

aki Super源さん 様へ

FC2のサムネイル画像は、自動で用途別に作成されます。
al_responsive で使用しているのは、変数<%topentry_image_w300>というW300×H200で自動作成されるサムネイル画像です。

【テンプレート用変数一覧】https://help.fc2.com/blog/manual/Home/template/templatevariable.html

アイキャッチ機能で指定した画像を優先に、本文の一番初めに掲載した画像で作成されます。
で、残念な事にこの画像…画像必須のalt属性が付けられない・高さが足りない場合は黒背景で補填(透過GIF,PNGも黒背景)という、使い方に困る代物なのです。(画像サイズが同じでは無いので、JSやCSS等どうあがいても黒背景が消せないらしい。)
テンプレートのデザイン上、左右ボックスで画像が無い場合はfloat解除して文字のみ…という形にしたい(no-imageで左側を空けたくない)ので、色々悩んだ結果この形にしておりました。
ただ、未だに「まだもっと良い方法が有るのではないか?」と思案しているというか…要するに『暗中模索』状態です。(^^;

先日、ct_responsive のトップページ画像についての修正記事を掲載致しました。
【ct_responsive の修正・更新致しました。(3)】
https://sorauta1.blog.fc2.com/blog-entry-300.html
【ct_responsive の修正・更新致しました。(for IE)】
https://sorauta1.blog.fc2.com/blog-entry-301.html
他に良い方法が見つかるまで、現状この形で行こうかなと思っています。
同様に、先程 al_responsive テンプレートも更新致しました。(一緒に貴殿ご指摘の『メニュータイトル開閉の件』も javascript を修正しております。更新した旨の記事は明日にでも。)
この度更新した箇所を下記に掲載致しますので、お時間の有る時に変更して下さいませ。
お手数をお掛けしてスミマセン。m(__)m

HTML部分(編集枠1/4程下へスクロール)
<!-- トップページ ここから-->以下
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
という部分を

<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>
に変更

編集枠下段のjavascript群の最後に
<!--object-fit(IE対策)-->
<script src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/ofi_min.js"></script>
<script>objectFitImages();</script>
を追加

CSS部分(編集枠2/3程下へスクロール)
.left{
float:left;
width:35%; /* サムネイル画像の幅 */
height:auto;
max-height:275px;
margin:0 10px;
text-align:center;
position:relative;
overflow:hidden;
}
.left img{
width:100%;
height:auto;
max-height:275px;
-o-object-fit: cover; /* 古いopera用ベンダー */
font-family:'object-fit:cover;'; /* IE対策 */
object-fit:cover;
border:1px solid #dcdcdc;
vertical-align:middle;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"],
.left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}
上記のように変更・追加

al_responsive シリーズ、1001px以上でメニュータイトルのカーソルをデフォルトにするCSSも、JS併せてテンプレに追加しましたので、下記も追加して下さい。
(スタイルシート編集枠5/6程下へスクロール)
/* レスポンシブ1001px以上で適用 */以下で下記の部分
.menu_title{
padding:3px 15px;
cursor:default; /* 追加 */
}

FC2で自動作成されるサムネイルを使わずに記事内の画像を縮小表示してるので、大きい画像の縮小だと読み込み等が遅くなる場合も有ります。
まだまだ改善できる点を見落としていそうで悩みは尽きそうに有りません。。でもその試行錯誤が楽しかったりもします。(^^;…ユーザー様は大迷惑、ですが。
2019-02-06-01:56 * aki [ 返信 * 編集 ]

akiさん、こんばんは!(^^)/

今日は、質問があってやって参りました。m(__)m

エントリーの簡易表示ページで、サムネイルが横長の場合、上下に黒い余白が入ってしまいます。

https://www.zatsugaku-jiten.net/blog-category-6.html

このような場合、画像の比率を変え、ぴったり表示する設定にすれば、余白はなくなるかと思うのですが、できる限り変えたくありません。

その場合、どのようにすれば良いでしょうか?

CSSで、以下のようにやってみましたが、うまく行きませんでした。

/* 簡易表示トップページエントリー */
.kiji1{
margin:10px;
overflow: hidden;
}
.left{
float:left;
width:35%;
height:auto;
max-height:275px;
margin:0 10px;
text-align:center;
position: relative;
overflow:hidden;
}
.left img{
vertical-align:middle;
border:1px solid #dcdcdc;
background-color:#ffffff;
}

一番下のbackground-colorが、追加した部分です。
(backgroundもやってみましたが、ダメでした)

なお、黒い部分が出てない記事もありますが、そこは画像の幅を調整してあります。

以上、よろしくお願いいたします。m(__)m
2019-02-05-19:13 * Super源さん [ 返信 * 編集 ]

IY 様へ

IY 様、初めまして。
テンプレートのご利用、誠に有難うございます。
テンプレートのスマホ版レスポンシブ使用設定をしてある前提でお話致します。

申し訳ございませんが、FC2の広告は選べません。ユーザー様だけで無く勿論制作者も。
どんなものが表示されるか・どのサイズが表示されるか(3,4種有るらしい)、広告の種類等選定…、ランダム表示でFC2次第なので分かりません。
これは無料会員であれば必須表示のものなので、表示したくなければ有料会員になるしか無いです。

また「他のテンプレートでは表示されない」というのは、スマホ(iPhone含む)で表示した際に表示される画面がFC2ブログのスマホ版画面だからではないでしょうか。
そちらの方が(広告が)気にならないようなら、レスポンシブデザインに拘らず環境設定の『スマホ版の設定有効』で使って頂いて良いと思います。

FC2のスマホ広告は、実はあちこちに大量に貼られています。
注目記事リスト、人気記事ランキング、ヘッダー下や記事下のバナー・テキスト広告、等々…自分で入れずとも既に沢山の広告箇所が有り、どんな広告が入るかも勿論選べません。
自分の記事の下に他のブログのランキングとか、広告やPR、『さらに記事を読み込む』で、どこまでが自分の記事なのか分からない…それをさりげなぁ~く表示しているのがスマホ版のFC2広告です。

レスポンシブテンプレートを選ぶメリットは、PC版とスマホ版の見た目・操作性が統一されている、広告量が最小限、という事です。
広告の必須箇所は'19年2月本日で『フッター下の広告(スクロールで上部に移動する広告も有り)』と『一か月以上更新しないと表示される広告』のみです。
それ以外の広告は任意・非表示可能で、例えば、ページ上部の検索バーや記事真下の画像高速表示用広告。
これは管理画面→環境設定→ブログの設定で『利用しない』にすれば外す事ができます。

表示必須広告は外したり非表示にすると規約違反になりますので、制作者も利用者も削除不可です。
スマホで表示する際に、個人の手を煩わせる事になりますが、『パソコン版を表示』にすると大きな広告が見えなくなります。(PC画面の必須広告は、最下段までスクロールしたフッター部分の文字広告のみなので。)

参考に、当方のブログをスマホ(iPhone SE)で『パソコン版を表示』してみました。(クリックで画像表示。)

GoogleChromeで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-chrome.jpg
safariで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-safari.jpg

広告が邪魔・卑猥等で不快な場合はPC版の画面を表示する…というのはあくまでも『代案』なので解決にはなりませんが、無料である限り広告は必須・及び選べませんので何卒ご容赦を。m(__)m
p.s. お返事が的外れであればお教え下さいませ。。
2019-02-04-16:11 * aki [ 返信 * 編集 ]

No Subject

はじめまして、テンプレート利用させていただいております。

素敵なテンプレートでとても気に入っているのですが、
このテンプレートを採用しているとiphoneのsafariからの閲覧時には
やたらと豊胸系の広告が表示されてしまいます
(cookie削除の有無問わず。尚、他のテンプレートに変えると出ません)。

一見するとアダルト広告バナーと大差無いので正直あまり気分の良い物ではありません。

女性向けの広告が出やすくなるような記述が
もしテンプレート内に有るようでしたら教えて頂けませんか?
2019-02-04-05:32 * IY [ 返信 * 編集 ]

Super源さん 様へ

この度のお気付きの件、有難うございました。
不備・不具合の修正方法を考えるのですが、流石にJSは難しくて…基本すら知らないもんで、あちこち良さげなものを探しております。
一人であれこれ考えるよりも、分からない事は頼らさせて頂きますので(…って勝手ですが。^^;)宜しくお願い致します!

また何か改善等もお気付きがございましたら、何なりとお申し出下さいませ。m(__)m
2019-02-04-01:34 * aki [ 返信 * 編集 ]

akiさん、こんばんは!(^^)/

こちらこそ、いつもテンプレートでお世話になっております。

等価演算子の件、文脈で分かったので大丈夫ですよ。(^^)
が、ちょっと頭が弱いので、分かるまで「10日」かかってしまいましたが…。(。_゚)☆\カーン!!(-.-メ)

おっ!修正スクリプト、採用ですか?\(^o^)/ ヤッタァ
何か、もう1度お正月が来たようで、うれしいです。(^O^)

実は、先日のメールでの質問も、これを直すためのものだったんです。^^;
が、なかなかうまく行かないので、今回は他の手法を使いましたが。【><】

ともあれ、今回はいくらかでもakiさんのお役に立てたようで、うれしいです。(^^)

こちらこそ、今後ともいろいろご教示いただけるとありがたいです。m(__)mヨロシク。
2019-02-03-21:19 * Super源さん [ 返信 * 編集 ]

Super源さん 様へ

こんばんは♪いつも有難うございます。
先程メール致しましたが、送った後で誤字、見付けました。。
『透過演算子』では無く『等価演算子』ですね。我ながら…透明にしてどうすんだと。(^-^; スミマセンでした。

サイドのメニューの件ですが、バレちゃいました?というか、知っていたのですけど
>これらの項目がマウスclick必須なのは、アンドロイドやスマホ表示でサイドバーが非表示になっているとき
…正にこれで、修正不要判定を自分の中で付けていました。
カーソルがポインターに変わらなければ、誰もクリックしないだろうなと…する方がいらっしゃいましたね。(^-^;
この場合 全部閉じてもリロードして頂ければ元に戻ります。が、改善方法をこの度教えて頂きましたので、是非!次の更新で修正させて頂きます♪
有難うございました!

やっぱりjavascriptは難しいです。今後とも色々とご助言頂けると有難いです。
宜しくお願い致します。m(__)m
2019-02-03-00:26 * aki [ 返信 * 編集 ]

akiさん、こんばんは!(^^)/

今日は、このテンプレートで不具合を見つけましたので、ご報告にやってまいりました。m(__)m

PCで、サイドバーが表示されている状態で、複数の項目を「カチッ!」「カチッ!」とマウスでclickしていると、最後には全項目が閉じてしまいます。(? ?)アレッ?

先日、何気なくマウスで遊んでいて、偶然気づきました。(^^;←ドンナ人 ナノ、ソレ ハ。

が、このようになっても、何の実害もありませんし、こんなことをするのはたぶん私だけでしょうから(爆)、このままで良いようにも思います。(^^)

なので、もしも気が向いたら、修正していただければと。

それで、良く考えたら、これらの項目がマウスclick必須なのは、アンドロイドやスマホ表示でサイドバーが非表示になっているときで、PCのような大画面表示時には、clickできなくても問題ないと思うのです。

それで、取りあえず、test(e)にパッチを当て、ブラウザのサイズが1000px以上ある時には、これらの項目がclickできないようにしました。(*^^)v

ご興味がある方のために、以下にそのソースを書いておきます。

var flaged=null;function Test(e){if(window.innerWidth<1000)flaged==e?(document.getElementById(e).style.display="none",flaged=null):(null!=flaged&&(document.getElementById(flaged).style.display="none"),document.getElementById(e).style.display="block",flaged=e)}

テンプレートのHTML編集画面の最後の方にある <script>~</script>で囲まれたTest(e)という関数部分を、上のものに差し替えることで、そのような動作になります。

以上、またまた長くなってしまいましたが、不具合のご報告とその場しのぎの対応法?(^o^;でした。 m(__)m
2019-02-02-22:44 * Super源さん [ 返信 * 編集 ]