*Essence

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

 >  Template >  テンプレ修正等 >  al_responsiveとct_responsiveの修正及び装飾追加

al_responsiveとct_responsiveの修正及び装飾追加

テンプレート『al_responsive』『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
01/14 修正及び装飾機能を追加致しましたのでご案内申し上げます。

修正は、(ブラウザ最上段に有る)FC2の検索バーをご利用で1カラム表示の際、『al_responsive』のブログタイトルを含むヘッダー部分が下がってしまい、ドロワーメニューのボタン「≡」が隠れて見えなくなってしまう不具合です。
隠れてしまうボタンをヘッダー上に表示させる事で解消致しました。
また、この現象が有っても少し画面をスクロールすると表示されるので、再DLしなくてもそのままご利用頂けます。

装飾機能については、
1) テンプレート『al_responsive』『ct_responsive』に、管理者コメントの背景色変更CSSを追加
2) テンプレート『al_responsive』に、個別記事ページ追記開閉機能を追加
致しました。


1) テンプレート『al_responsive』『ct_responsive』両方に、管理者コメントの背景色等を変更できるCSSを追加
スタイルシート編集枠最下部に(下記は ct_responsive )

/* 管理者コメントの背景に色を付ける(日本語可・記号等は文字の前にバックスラッシュを入れる)
バックスラッシュは日本語表示用フォントで円記号に見えますが問題ありません */

.コメント入力時の管理者名 {
background-color:#f4f4f4;
}


というスタイルが有りますので、ここの [ .コメント入力時の管理者名 ] の部分に投稿時の管理人名を入れておくと、自身のコメントに背景色が着色され、また色だけでなく背景画像や margin を設定する事も出来ます。
このCSSは、共同管理者やご常連の方の名前等を class に設定しておくと管理者以外の方にも反映させる事ができるので、来訪してコメントして頂く楽しみにもなります。
この仕様はトップページのコメントリスト、及び個別記事ページのコメント欄に反映致します。
不要な場合は、スタイルシート編集枠最下段のスタイル設定をしない、若しくはHTMLの該当箇所のタグを削除して頂けば無効になります。

トップページコメントリストの該当箇所
<!--comment_list-->
<div class="topentry_comment_body <%topentry_comment_list_name>">

個別記事ページのコメント該当箇所
[al_responsive]
<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<div class="com_block <%comment_name>">

[ct_responsive]
<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">

削除する際は、赤いタグの部分とその前の半角スペースも一緒に消して下さい。


2) テンプレート『al_responsive』に、個別記事ページ追記開閉機能を追加
ct_responsive には既についている機能ですが、過去に要望がございましたので al_responsive にも追加致しました。
不要な場合は、HTML内の該当箇所を削除して下さい。 
(該当箇所及び、この度の更新前 al_responsive に追記開閉機能を付ける方法も Read More に掲載していますのでご確認下さい。)

ご不明な点・不具合等を見付けられましたらご連絡下さいませ。m(__)m
Read More

追記開閉機能が不要な場合は下記のように変更して更新して下さい。
al_responsive 2カラムではHTML編集枠1/4程、3カラムでは1/3程の所

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--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></p>
<a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

この部分を削除し、その場所に <%topentry_more> を入れて下記のように変更する
(コメントアウトの<%topentry_more>(全角山括弧を半角に変更して)は、半角括弧でコメントアウトすると画像高速表示・アカマイがおかしくなってしまうためです。)

<!--more-->
<%topentry_more>
<!--/more-->




逆に、今迄追記開閉機能が付いていなかった al_responsive をご利用の方で付けたい方は、下記の箇所を削除し、上記の(青色)HTMLを貼り付けて、更にHTML編集枠下の方に有る javascript を下記に掲載しているものに差し替えて下さい。

<!-- トップページ ここから--> 以下を探して下記の部分を削除し、上記の青文字タグをコピーしてこの部分に貼り付ける

<!--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-->


次に、HTML編集枠下段に<script>が幾つも記述されている中から下記の部分を見付けて削除し、その個所に下記の<script>を貼り付ける

<script>
function showHide(e){var t=document.getElementById(e).style.display;return document.getElementById(e).style.display="block"==t?"none":"block",!1}
</script>


この部分を削除し、下記を貼り付ける

<script>
function showHide(b){var a=document.getElementById(b).style.display;if(a=="block"){document.getElementById(b).style.display="none"}else{document.getElementById(b).style.display="block"}return false};
</script>


後は更新ボタンを押して完了です。
不具合が有った時のために、複製を作ってから作業すると安心です。m(__)m

スポンサーサイト

Return

コメント






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

Super源さん 様へ

度々のご報告、有難うございます。

人が付けやすい名前って、やっぱり有りますよね。そして、避けた方が良さそうです。^^;
ただ、全然関係無い名前だと後で分からなくなってしまう気がして…で、結局末尾に数字やアルファベット付けてるだけ。安易過ぎますが…(;´∀`)
自分以外に利用してもらうものは気を付けないと、ですね。
また何かお気付きの点が有りましたらお教え下さいませ。m(__)m

今後とも宜しくお願い致します♪
2019-01-16 * aki [ 編集 ]

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

いいえ。お役に立てたらな幸いです。(^^)

なるほど、そうなのですか。
それでは対処のしようががありませんね。(--)(__) ナットク

メニューアーカイブの件、調べてくださり恐縮です。m(__)m
なんと、そのような理由だったのですね。おお!(゚o゚)

実は、アーカイブの部分は、かなり前に「共有プラグイン追加」からインストールしたもので、何が書いてあるのか中身をきちんと見たことがありませんでした。(^^;
で、改めてどんな内容になっているのか見てみると、ご指摘の class="tree" はどこからも参照されてないことが分かりました。

そこで、 バサッと悪女、じゃなかった削除したところ、無事中身が現われるようになりました。ヽ(^o^)ノ
ありがとうございました。m(__)m

いえいえ。こちらこそ、akiさんに余分なお手間をとらせてしまい、申し訳なかったです。【><】

>p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、

なるほど。確かにtreeという変数名を避けるというのは賢明な選択かと思います。(^^)
というのは、以前私の方で、何人かの方から、共有プラグインに登録しているブログパーツの表示がちょっと変との報告を受け、調べたところ、その100%近くが、ユーザーの使用しているテンプレートに使われている変数名とのダブりに起因するものだったからです。(^o^;

>(今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから?それとも諦め?^^;)

(@_@)ウーン どうでしょうね。
確かに、無料で使わせていただいてるわけですから、普通は「まぁ、いいか」と、諦めるかもですね。(^^;

あっ!(゚o゚)また長くなりそうなので、(^^; 今日はこの辺で。m(__)m
2019-01-16 * Super源さん [ 編集 ]

Super源さん 様へ

お忙しい中 早速検証頂き、有難うございます。m(__)m

このFC2の検索バーは z-index:1000; で勝手に body 直下に貼られてしまうので、たとえ方法が有っても私のスキルではどうしようもないです。^^;
なので、ヘッダーが下がってしまうのであればメニューボタンをその上に表示させる方法にしました。
では、メニューボタンの表示は大丈夫みたいですね。良かった。。
自分だけの閲覧環境では分からない事も有りますので、検証して頂けて助かりました。有難うございました。m(__)m

それと、メニュー『アーカイブ』が展開されない理由ですが、HTMLソースを拝見すると
<div class="tree" id="**">
と、テンプレートと重複する class が有るためのようです。
大変申し訳無いのですが、プラグイン『アーカイブ』の class名を tree1 とか tree2 等に変更してみて下さい。
(こちらで確認してみた所、class名を変更しても問題無く表示・展開しました。)
再度、ご確認の程 宜しくお願い致します。m(__)m

p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、先程 後付けながらテンプレートに使用している class="tree" を tree-m という名前に変更・更新致しました。
こちらの件もお教え頂き、有難うございました。
(今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから?それとも諦め?^^;)
2019-01-16 * aki [ 編集 ]

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

おお!(゚o゚)こんなにあったんですね。(^^;
javascriptの部分は、あの後すぐに発見できましたが…。(^^;

ということで、現在のものをsave後、早速書き換えてみました。(^^)v

ドロワーメニューのボタン、常に最上位に表示されるようになりました。ヽ(^o^)ノ
ヘッダー部分はやはり下がってくるようですが、これは別に実害がないのでokです。

テンプレート修正、どうもお疲れさまでした。m(__)m
大変な作業だったと推測いたします。
また、ご教示ありがとうございました。m(__)m


ところで、この"="ボタンをclickするとメニューが現われますが、その中の「アーカイブ」の中を見ると、カラになっているようです。(? ?)アレッ。

以上、今気が付きましたので、ついでながらご報告させていただきました。
2019-01-16 * Super源さん [ 編集 ]

Super源さん 様へ

一応、今回の更新で変更した箇所を掲載しておきますね(al_responsive2cl)。
長々と書き連ねてしまいますがお付き合い下さいませ。m(__)m

スタイルシート編集枠の上から順に

html{
font-size:80%; /* 75%から80%に変更 */
overflow-x:hidden;
}

h1{
margin:0 30px; /* 0 20pxを0 30pxに変更 */
padding:0;
font-size:1.6em;
color:#fff;
position:static; /* 追加 */
}

ul li{
list-style:circle;
list-style-position:outside ;
margin-left:17px; /* 15pxから17pxに変更 */
}


/* レスポンシブ1000px以下(サイズ共有有り) */

/* ヘッダー部分 */
header{
width:100%;
position:relative;
overflow:hidden;
background:#c0d58c;
height:auto;
margin:0;
/* z-index:6; 削除 */
}

/* メニューボタン */
/* 追加 */
#btn,
#btn1,
#btn2{
display:block;
}

#btn{
overflow:hidden;
/* width:100%; 削除 */
height:30px;
top:0; /* 32pxを0に変更 */
/* z-index:3; 削除 */
position:absolute; /* fixed !importantをabsoluteに変更 */
}

#btn1{
overflow:hidden;
/* position:absolute; 削除 */
width:230px;
height:30px;
top:32px;
z-index:3 !important;
}

/* メニュー */
nav{
position:absolute; /* fixedをabsoluteに変更 */
top:0;
bottom:0;
width:230px;
left:-230px;
/* min-height:100%; 削除 */
height:100vh; /* auto !importantを100vhに変更 */
padding-bottom:50px; /* 15pxを50pxに変更 */
z-index:5;
background-color:#fff;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

/* #menu,#menu2{
margin-top:61px;
} 削除 */


/* レスポンシブ1000px以下で適用 */

@media only screen and (max-width:1000px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */
header{
margin-bottom:10px; /* 追加 */
}
/* 1カラム時非表示 */
.introduction{
display:none; /* 追加 */
}


/* レスポンシブ1001px以上で適用 */

@media only screen and (min-width:1001px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */

/* メニュー */
nav{
position:static;
float:left;
width:230px;
height:100%; /*追加 */
margin:26px 0 0 15px;
overflow:hidden;
box-sizing:border-box;
}

.tree{
/* padding-top:12px; 削除 */
display:block; /* メニューを開いて表示 */
}

スタイルシートは以上です。あと、ドロワーメニューのscriptが少し変わりましたのでそれも載せておきます。

<script>
$(function(){$("#nav_open").click(function(){$("nav").css({"display":"block"}).animate({"top":"0","left":"0"},{duration:200,complete:function(){$("#nav_wrap").css({"display":"block","position":"absolute","z-index":"4","background":"rgba(0,0,0,0.5)","top":"0","bottom":"0","right":"0","left":"0"})}}),$("body,html").css({"overflow":"hidden","height":"100%"})}),$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","left":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}}),$("body,html").css({"overflow":"visible","height":"auto"})})});
</script>

宜しければ複製でも作って検証してみて下さい。m(__)m
2019-01-16 * aki [ 編集 ]

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

件の機能、修正版で早速対応してくださり、感謝です。(T^T) ウルウル←ウレシナキ デス
もう私は、akiさんに一生ついていきますよ、(--)(__) ホント ホント。


おお!(゚o゚)そうわれてみれば、今まであまり気にしてませんでしたが、表示後ヘッダーが少し下がってきますね。
私のところは検索バーは使っていない2カラムですが、TOP、カテゴリ、記事ページなど、全てのページにおいて下がってくるようです。

あとで新テンプレートをDLしてチェックしてみますが、もしよろしければ、どの辺を見ればよいのかお教えくださるとうれしいです。
何せ、当方カスタマイズしているため、新規の入れ替えができないので。(^^;

それでは、またお邪魔します。(@^^)/~~~
2019-01-15 * Super源さん [ 編集 ]