重要!7/5の記事、CSSの修正1ヵ所追加お願いします!

►2019/07/08 22:21 

テンプレートをご利用頂き有難うございます。m(__)m
先日7/5に掲載した記事『重要!レスポンシブテンプレートの修正・更新致しました。7/5』に、記載し忘れた変更CSSがございましたので、新しい記事では有りますが掲載させて頂きます。

症状としては、前記事の修正を行うと1カラム時にドロワーメニューを開いた際、メニューが一番最上部に貼り付いて背景と一緒にスクロールしてしまいます。
これは、FC2の広告を最上部に固定させないための手段として、ドロワーメニューの背面を固定する『 height:100% 』を外したために起こるものです。
これを従来通りの位置にメニューを固定するために、下記のようにCSSの記述を修正して下さい。


al_responsive2c-l, al_responsive2c-r, al_responsive3c
lace-al2, lace-al3
 の場合
スタイルシート編集枠を1/3より少し上位までスクロールした所に有る
/* メニュー */ の下

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}


serene_resp2c-l,serene_resp2c-r,serene_resp3c
ct_responsive2c-l,ct_responsive2c-r,ct_responsive3c
candy-2c,candy-3c
green-2c,green-3c
dt21_ryo-3c,ryo-2c
 の場合
(/* ドロワーメニュー部分 */ 以下↓スクロールして)
スタイルシート編集枠を4/5位までスクロールした所に有る

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}

上記の記述変更を行って下さい。大変ご迷惑をお掛けしました。m(__)m
(7/5に更新した後のテンプレートで不具合挙動は有りませんが、更新前のテンプレートで7/5の記事通りに修正を行うと不具合が生じますので、上記修正をお願い致します。)
また、本日の記事は重複致しますが7/5の記事にも掲載致します。

スポンサーサイト

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等Comment(0)Trackback(0) | Top ▲

重要!レスポンシブテンプレートの修正・更新致しました。7/5

►2019/07/05 23:48 

拙いテンプレートをご利用頂き、誠に有難うございます。
本日、共有化済みレスポンシブタイプのテンプレート 『serene_resp』『ct_responsive』『al_responsive』『ryo』『candy』『green』『lace_al』 の2カラム及び3カラムを修正・更新致しました。

FC2ブログの広告によって、1カラム表示になった際のドロワーメニューが開かなくなる不具合が発生致します。
これは、スマートフォン(android,iPhone)の各ブラウザアプリでモバイル表示をしている時に、下段に表示される広告が上昇して固定する事があり、この『上昇する広告』が邪魔をしてドロワーメニューのボタンが押せなくなる不具合です。
(表示パターンが幾つか有って、全ての広告がこのタイプではありません。)
この現象は、html や body に cssの height:100% が有ると発生するようです。
当方のテンプレートで該当スタイルを確認してみましたら、スタイルシート編集枠内上段に有る reset css の中(上から6段目程)に
html,body{height:100%;} が有り、テンプレートによってはこの部分の下に
html,body{
width:100%;
height:100%;
min-height:100%;
}
というスタイルが記述されているものが有る事が分かりました。
また、ドロワーメニュー内をスワイプしている際に後ろ側のページがスクロールしないよう、メニュー用のjQueryに html と body に対して、height:100% とoverflow:hidden を入れたものを使っておりました。
この、上部に広告が固定してしまう不具合を解消するため、本日の修正で上記のスタイル及びスクリプトを削除し、更新致しました。
本日以前(7月5日夕刻まで)にテンプレートをDLされた方は、お手数ですが再DLされるか、以下の修正を行って下さい。

また、詳しく画像付きでこの不具合を解説されているブログがございますので是非ご参照下さい。
【超重要】FC2ブログ広告によって起こる表示不備について: The other way round
貴重な記事、有難うございました。m(__)m



① テンプレートのスタイルシート編集枠内上部
/* -----reset css------ */ 以下6段程下に有る
html,body{height:100%;} を削除
同じくこの
/* ---reset css end---- */ 以下にある
html,body{
width:100%;
height:100%;
min-height:100%;
}
の中の height:100%; を削除



② 同じくスタイルシート編集枠内の下記部分を修正 (7/8の記事で修正している部分です。
al_responsive2c-l, al_responsive2c-r, al_responsive3c
lace-al2, lace-al3
 の場合
スタイルシート編集枠を1/3より少し上位までスクロールした所に有る
/* メニュー */ の下

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}

serene_resp2c-l,serene_resp2c-r,serene_resp3c
ct_responsive2c-l,ct_responsive2c-r,ct_responsive3c
candy-2c,candy-3c
green-2c,green-3c
dt21_ryo-3c,ryo-2c
 の場合
(/* ドロワーメニュー部分 */ 以下↓スクロールして)
スタイルシート編集枠を4/5位までスクロールした所に有る

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}



③ その他テンプレート毎に、HTML編集枠下段に有るscript群の中からドロワーメニュー表示用のscriptを探し、下記のものと差し替えて下さい。
(目印)
<script>
$(function(){$("#nav_open")
若しくは
<script>
$(function(){$("#aside_open")

長いので、続きからどうぞ。m(__)m

>> ReadMore

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等Comment(13)Trackback(0) | Top ▲

プラグイン3をお知らせ用に表示する・管理人コメントを装飾

►2019/06/28 01:55 

メールやコメントでご質問頂いた事案の回答を、カスタマイズとして掲載致します。

1) プラグイン3をお知らせ用にインデックスページのみに表示。
2) 管理人コメントに画像を表示。
3) 管理人コメントの背景色を変更。(スタイル追加可)



1) プラグイン3をお知らせ用にインデックスページのみに表示。
プラグイン3をトップのお知らせ用として、ブログのトップページのみに表示します。(次ページ以降は表示されない。)
当方のテンプレートでは、通常、プラグイン3が記事カラム最上段に表示され、個別記事ページでは最下段に表示されるようになっております。
これを、インデックスページにのみ表示するカスタマイズです。

FC2ブログの管理画面左のメニュー『設定』の『テンプレートの設定』をクリックし、DLしたテンプレートの「HTML CSS」の編集をクリックします。
HTMLの編集枠をスクロールしていくと、
<div class="menu3">
<!--プラグイン3-->

という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--プラグイン3--> を入れて検索すると2ヵ所有りますので、上の方に有るものを改変して下さい。)
場所を見付けて頂いたら、その個所から
<!--/プラグイン3-->
</div>

という部分までを下記のようにFC2独自の変数タグで挟んで下さい。

<!--index_area-->
<div class="menu3">
<!--プラグイン3-->
~~~省略~~~
<!--/プラグイン3-->
</div>

<!--/index_area-->

この<!--index_area--><!--/index_area-->で挟んだ部分はトップページのみに表示されます。
ただ、ページ上部に有るプラグイン3の全てがトップページのみの表示になりますので、常に表示しておきたいものは
サイドメニューに表示されるプラグイン1・2に移動して下さい。
また個別記事ページ下段に表示されるプラグイン3は、エントリーページの改変に関係無く表示されるので、
不要の場合はHTML編集枠2/3程スクロールした所に有る(検索結果2ヵ所のうち下の方)

<!-- 固定リンク画面の下段に表示 -->
<div class="menu3">
<!--プラグイン3-->
~~~省略~~~
<!--/プラグイン3-->
</div>
<!-- 固定リンク画面の下段に表示 ここまで -->


という部分を削除して頂くと、個別記事ページ下段に表示されなくなります。
あとは更新ボタンを押せば反映されますが、不具合が有った時のために複製を作成し作業すると安心です。




2) 管理人コメントに画像を表示。
2018年2月、テンプレート変数に管理人コメントブロック変数が追加されたのですが、テンプレートへの実装をしておりませんでした。(正直、FC2インフォメーション見て無かった…^^;)
今後のテンプレート更新時や新規申請テンプレートには付けようと思います。が、カスタマイズとして、すぐに付けられるよう掲載しておきます。(2019/06/29 の更新で当方のレスポンシブテンプレートに「管理人画像変数タグ」を実装致しました。)

テンプレートのHTML編集枠を大体半分位スクロールした所に
<%comment_title>
という部分が有ります。(ほぼ当方のテンプレートでは同じくらいの位置に有りますが、見つからない場合は検索して下さい。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <%comment_title> を入れて検索します。)
この変数タグの前に下記オレンジ色の部分を追加して下さい。

<!--comment_author--><img src="<%image>" alt="<%author_name>" style="border-radius:50%;width:50px;height:50px;margin:-18px 0 -8px -23px;border:1px solid #bbb;">&nbsp;<!--/comment_author--><%comment_title>

上記では環境設定のプロフィール画像が(小さく^^;)表示されます。
プロフィール画像以外を表示させたい場合は、<img src="<%image>" ~~の部分を
<img src="表示したい画像のURL" ~~
に変更して下さい。

後は更新ボタンを押して適用させて下さい。
ただ、管理人画像を表示させるには、FC2ブログにログインしている状態でコメント、または返信している必要が有ります。
(コメントの管理画面から必ずしもレスを打つ必要は有りません。あくまでも『ログインしている状態』であれば良いので、その状態で自ブログの投稿画面に打ち込めば表示されます。)
ログインしていない状態で打ったコメントには、画像が表示されません。m(__)m




3) 管理人コメントの背景色を変更。(スタイル追加可)
以前コメントにてご要望を頂き、現行の共有化済みレスポンシブテンプレートに、すぐに使えるCSSが付いております。
既に、使い方の説明を過去の修正・装飾記事に掲載しておりましたが、再度こちらにも掲載致しますので是非ご利用下さい。m(__)m

テンプレート設定ページの一番下に [ テンプレート名 ] のスタイルシート編集 という枠が有ります。
その枠を一番下までスクロールすると、

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

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


という文言が有ります。(上記はserene_resp2c-lの場合)
この .コメント入力時の管理者名 という部分に、コメントを書き込む際のお名前を入れて下さい。
例えば当方なら .aki , 名無しさんだったら .名無しさん , のように、記号が入る場合は記号の前にバックスラッシュ(フォントによっては\マークに見える。キーボードの位置は右下辺り、『ろ』のキー)を入れます。(例: .neko\*chan )
スタイルの内容は背景色になっておりますが勿論変更可。背景画像にしたり、文字色を変えたり、お好みに変更して下さい。

また、該当する箇所が無い場合(更新前のテンプレート等)は過去の修正・装飾記事にも掲載しておりますので、そちらも併せてお読み下さい。
al_responsiveとct_responsiveの修正及び装飾追加

カスタマイズは、不具合が有った時のために複製を作成して作業すると安心です。

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(9)Trackback(0) | Top ▲

折り畳み追記の開閉

►2019/06/27 23:50 

折り畳み追記についてを、要望の有ったカスタマイズと一緒にまとめました。

この『折り畳み追記』については、FC2ブログテンプレートの[レガシー・カスタマイズ]とでも言いますか、昔から要望されるカスタマイズで、古い記事に掲載があるブログも多数ございます。(掲載が古い共有テンプレートにも付いている事が多い機能です。)
そのため当方のテンプレートでも初めから付帯しております。
しかし、追記の使用・表示方法は、テンプレートを利用される方のお考えで賛否等もあり、機能の使用を強制するものではございませんので、ご不要の方・追記を隠す必要性を感じない方は、大変お手数ですがHTML編集枠内のコメントアウト内を削除・編集して下さい。

1) 折り畳み追記の表示方法変更。
2) トップページ全文表示で折り畳み追記を開閉。


1) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しましたので、カスタマイズ記事として再掲載致します。(修正記事以降にDLされた方には必要ありません。HTMLソースで下記のようになっているかをご確認下さいませ。m(__)m)
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
また、追記開閉が不要の場合は該当箇所の
<!-- 記事ページの追記開閉が不要の場合はここから削除 --> から
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる --> のように削除及び文言の追加をお願い致します。

変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。


変更箇所は、HTML編集枠内1/3程スクロールした所に有る

<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">&#8203;</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 class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を下記に変更

<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">ReadMore</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


そして、スタイルシート編集枠内一番下(“@media only screen” で括っていない所)にでも

/* 記事ページ追記ボタン */
.hidden_box label{
padding:0 10px;
border:solid 1px #aaa;
cursor:pointer;
}
.hidden_box label:hover{
background:#e1f0f6;
color:#333;
}
.hidden_box input {
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /* 中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /* クリックで中身表示 */
}


上記を追加して更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。




2) トップページ全文表示で折り畳み追記を開閉。
テンプレート内に既に記述して有るJavaScript(コメントOpen用)を使って、トップページ全文表示(要約表示から全文表示へのカスタマイズ後も含む)での追記開閉が出来ます。
ただ、トップページで追記も見せてしまうと個別記事ページへの誘導は難しくなると思いますので、ご自身の判断でお使い頂きます様お願い致します。m(__)m
(カスタマイズ後の個別記事ページでは、展開された状態の表示になります。)

HTML編集枠をスクロールしていくと、
<!--more_link-->
という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--more_link--> を入れて検索すると一ヵ所だけ有ります。)
場所を見付けて頂いたら、その個所から
<!-- 全文表示用HTMLの貼り換え ここまで-->
を下記に貼り換えて下さい。

<!--more_link-->
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a></p>
<noscript>
<a href="<%topentry_link>#readmore">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<%topentry_more>
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;"></p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


上記に貼り換えて更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(0)Trackback(0) | Top ▲

serene_resp のカスタマイズ(トップ画像変更)

►2019/06/18 17:00 

テンプレート serene_resp 2c,3c のトップ画像の変更方法です。
このカスタマイズは、大変お手数ですが 『テンプレートの修正・更新致しました。6/17』 の記事を参考に修正・更新をされてからお願い致します。(更新記事 '19/06/17 以降にテンプレートをダウンロードされた方は、そのままカスタマイズ記事をお読み下さい。)

表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。
画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と background-size:cover; を使った方法です。
background-size:cover; は、画像の幅と高さの比率を固定して領域を覆うように表示し、はみ出した部分を非表示にします。

テンプレートの管理画面下段の [ serene_resp〇c ] のスタイルシート編集枠内
スクロールすると1/8手前位に下記のような箇所が有ります。

/* トップ画像 */
.topimg{
height:auto;
position:relative;
overflow:hidden;
margin-top:10px;
padding-top:46.67%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 ,高さを下げたい場合は数値を下げる */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/cf-img2.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
(青文字の部分は表示したい画像のアップロード先URLを入れて下さい。)
縦横比の計算値で%指定すると元画像が(拡大・縮小されて)全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。

トップ画像の変更1
padding-top:47.5%; 縦横比計算値のまま
background-position:center center; 表示位置中央

トップ画像の変更2
padding-top:35.0%; 縦横比計算値より小さくした場合(高さが低くなり上下が非表示)
background-position:center center; 表示位置中央寄せ

トップ画像の変更3
padding-top:35.0%; 縦横比計算値より小さくした場合
background-position:center bottom; 表示位置中央・下寄せ(下段表示で上が非表示)

トップ画像の変更4
padding-top:60.0%; 縦横比計算値より大きくした場合(高さが増えて横が非表示)
background-position:right bottom; 表示位置右寄せ・下寄せ

(画像をクリックして頂くと少し大きく表示されます。)

パーセント指定をすることでブラウザのサイズに合わせて画像サイズが変わるようになり、position 指定する事で画像の気に入っている部分を表示する事が出来ます。
background-position:横方向 縦方向; で指定出来る値は
横方向  left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等
縦方向  top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等

なので、極端に画像が横に長い場合でも位置を指定して表示出来ます。

トップ画像の変更
padding-top:43.0%; 縦横比計算値(22.72%)より大きくした場合
background-position:right center; 表示位置右寄せ・中央寄せ

これの元画像がこちら↓(クリックで原寸)
top-image3.jpg

お気に入りの画像で、色々と試してみて下さい。m(__)m
(但し、容量の大きい画像は表示が遅くなってしまいますので、閲覧される方のためにも 画像サイズ・容量を小さくされるよう注意して下さい。)

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(7)Trackback(0) | Top ▲