*Essence

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

TOP >  テンプレ閲覧障害等 >  重要!テンプレート al_responsive2c-r をご利用の方へ

重要!テンプレート al_responsive2c-r をご利用の方へ

いつもご愛顧頂き有難うございます。
何故か昨日(?)テンプレート名『al_responsive2c-r』のメニュー部分が下方へ脱落する表示崩れを起こしている事に気が付きました。(右カラムのみ)
それまでの表示は問題無かったのに、突然崩れてしまっていた状態です。
IE,Edge,Opera,Safari は問題無し、GoogleChrome,Firefox がカラム落ち…となっておりました。

al_responsive右メニュー

これが↓こんな風にカラム落ち

メニュー部分カラム落ち

何故?どうして??…と考えてるより早く修正しなければ!と、今朝方共有テンプレートを一部修正し更新致しました。
修正箇所は下記のとおりですので、不具合の有る方は修正・更新をお願い致します。

テンプレートスタイルシート編集枠内かなり下段(上から4/5位)の場所に

/* メニュー */
nav{
position:static;
width:230px;
height:100%;
margin:0 15px 0 0;
padding-bottom:30px;
overflow:hidden;
box-sizing:border-box;
}

という部分が有ります。この青文字部分を下記の赤文字部分のように変更して下さい。

/* メニュー */
nav{
position:static;
width:230px;
height:100%;
margin:0;
padding-bottom:30px;
overflow:hidden;
box-sizing:border-box;
}

後は更新ボタンを押して頂ければ完了です。
大変お手数をお掛け致しますが、もし崩れていらっしゃる方が居られましたら、修正の程 宜しくお願い致します。m(__)m
関連記事

コメント







管理者にだけ表示を許可

aki Re: YUMY 様へ

確認致しました。無事に表示されておりますね♪
清水の舞台から…そうですよね。初めてやる事はそれ相応に勇気がいります。
まぁ、失敗しても取り返しがつかない事では無いので。いつでも戻せるように『複製』作れますし、(頼りないですが)当方も居りますし。(^-^)

FC2ブログというYUMY 様の書庫を沢山のお薦め本で埋まるよう、是非楽しんで更新して下さい。
今後とも宜しくお願い致します。m(__)m
2019-09-11-21:38 * aki [ 返信 * 編集 ]

清水の舞台から

aki様
②の問題についての解決策を色々提示してくださってありがとうございました。(メールまでいただいて恐縮です。)
さて、「ダメよダメダメ」という消極姿勢をいったん脇に置いてからaki様のご指示を読むと、何とか自力で対応できそうな気がしてきました。
で、やってみました。清水の舞台から飛び降りるつもりで。(ちょっと大げさ?)
*「新しいバージョンをダウンロードし直す」、というのは難しそうなので、けっきょく、
*「HTMLとスタイルシートを編集する」という方法をとりました。

結果はばっちりでした。とてもうれしいです!
ドシロートの質問に長々とおつき合いいただいてありがとうございました。
今後とも、どうかどうかよろしくお願いいたします。
2019-09-11-10:06 * YUMY [ 返信 * 編集 ]

aki Re: YUMY様へ

ページ移動のリンクについて、ご理解頂けたようで何よりです。(^-^)

>「テンプレートの複製を作って作業」などのイメージも湧かず~~
…これは、テンプレートの管理画面で、お手持ちのテンプレートの表に「編集」や「複製」というボタンが有ります。
テンプレート名の「編集」を押せば(そのテンプレートの)HTMLやCSSを表示し、「複製」を押せば(そのテンプレートの)現状と同じものを別名(テンプレート名の末尾に1とか2とか付きます)で作ってくれます。

>でも、ブログにくわしい友人がいるので、そのひとの助けを借りれば、何とかやれるもしれません。その際には、ここに記された変更手順に添って、ミスのないようにやってみます。
…そうですね。その際には是非「複製」ボタンを押して同じものをもう一つ作ってから作業して下さい。きっと見て頂くと分かると思うので。(^_^)

>これからもわからないことを質問させてください。よろしくお願いいたします。
…こちらこそ、不具合が有りましたら教えて下さいね。

この度は素敵な出会いを有難うございます。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-09-10-23:23 * aki [ 返信 * 編集 ]

No Subject

aki様
②の問題について、なぜそういうことが起こるのかをわかりやすく説明していただいてありがとうございました。
「簡単な手順で変更可能」ということですが、やはり私にとっては敷居が高く、「テンプレートの複製を作って作業」などのイメージも湧かず、とりあえず今はあきらめようと思います。
でも、ブログにくわしい友人がいるので、そのひとの助けを借りれば、何とかやれるもしれません。その際には、ここに記された変更手順に添って、ミスのないようにやってみます。

それにしても、質問にお答えくださったaki様の素早さ、的確さ。とても感銘を受けました。心強いことこの上なしです。これからもわからないことを質問させてください。よろしくお願いいたします。
2019-09-10-21:55 * YUMY [ 返信 * 編集 ]

aki Re: YUMY 様へ

①については、修正されている事を確認致しました。(^-^)
②については、やはり下記に掲示したHTMLに変更…ですね。

更新日で辿っても、カテゴリーで辿っても、表示されるページは個別記事ページです。
この"個別記事ページ"に仕込んであるページ送りは『更新日順』のみなので、YUMY様の仰る"順番が全記事順番"でしか表示されないのです。
では、カテゴリーで辿ってこられた方用にページ送りを切り替えれば…という事をFC2ブログの変数では出来ないのでJavaScriptに頼る方法しか無いのですが、そのJSに著作者様がいらっしゃるので、承諾なく勝手に掲載は出来ないかな、と思いまして。^^;
…では、更新日順とカテゴリー順の両方付ければ閲覧されている方が選べるので良いのでは?と掲載したのが下記のHTMLとCSSです。(見本はこのブログです。)
前置きが長くなりましたが、難しい事は有りませんので是非改変してみて下さい。
不安な場合は、テンプレートの複製を作って作業すると(いつでも戻せるので)安心です。(^_^)
今一度、手順をご説明致します。

先ず、serene_resp2c-r のHTML編集枠内半分くらいまでスクロールした所に下記のような箇所が有ります。

<!--permanent_area-->
<!--ページ移動-->
<div class="page_navi">
<!--preventry-->« <a href="<%preventry_url>" title="前のページへ"><%preventry_title></a><!--/preventry--> | <a href="<%url>" title="TOPページへ">Home</a> | <!--nextentry--><a href="<%nextentry_url>" title="次のページへ"><%nextentry_title></a> »<!--/nextentry-->
</div>
<!--/ページ移動-->
<!--/permanent_area-->


目印はその2行上に有る
<!-- トップページ ここまで --> という文字列です。
この青文字部分を削除し、下記(オレンジの部分)をコピーして同じ場所に貼りつけて下さい。

<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
<ul class="entry-navi">
<li class="entry-prev"><!--preventry--><a href="<%preventry_url>" title="New"><%preventry_title></a><!--/preventry--></li>
<li class="entry-next"><!--nextentry--><a href="<%nextentry_url>" title="Old"><%nextentry_title></a><!--/nextentry--></li>
</ul>
<!--/ページ移動・更新順-->

<!--topentry-->
<!--ページ移動・同カテゴリ-->
<div style="font-size:12px;">カテゴリ:[<a href="<%topentry_category_link>" title="CategoryTOPへ"><%topentry_category></a>]</div>
<ul class="entry-navi">
<li class="entry-prev"><!--prevcategoryentry--><a href="<%prevcategoryentry_url>" title="New"><%prevcategoryentry_title></a><!--/prevcategoryentry--></li>
<li class="entry-next"><!--nextcategoryentry--><a href="<%nextcategoryentry_url>" title="Old"><%nextcategoryentry_title></a><!--/nextcategoryentry--></li>
</ul>
</div>
<!--/ページ移動・同カテゴリ-->
<!--/topentry-->
<!--/permanent_area-->


次に、下段のスタイルシート編集枠内、一番下に下記(緑の部分)をコピーして貼り付けて下さい。

.entry-navi{
margin:0 auto 20px;
width:100%;
font-size:12px;
}
.entry-prev a{
padding:0 10px;
display: block;
position: relative;
max-width: 100%;
text-align: left;
}
.entry-prev a:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -3px;
width: 10px;
height: 10px;
margin: -7px 0 0 0;
border-top: solid 2px #666;
border-right: solid 2px #666;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.entry-next a{
padding:0 10px;
display: block;
position: relative;
max-width: 100%;
text-align: right;
}
.entry-next a:after {
display: block;
content: "";
position: absolute;
top: 50%;
right: -3px;
width: 10px;
height: 10px;
margin: -7px 0 0 0;
border-top: solid 2px #666;
border-right: solid 2px #666;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

@media screen and (min-width:600px) {
.entry-navi{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.entry-prev,.entry-next{
max-width:45%;
}
}



後は更新ボタンを押して頂ければ完了です。
この度は、ご利用頂く方・閲覧される方にとって有益なご指摘を頂き、誠に有難うございました。
このコメントを元に 必要な方が使えるよう、後日、テンプレート更新と併せてカスタマイズ記事として掲載させて頂きますのでご了承下さい。
また、何かお気付きの点等がございましたら、どうぞ気兼ね無くお声掛け下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-09-10-00:12 * aki [ 返信 * 編集 ]

No Subject

aki様
おっしゃるとおりでした。カテゴリーの記事数を直していませんでした。すみませんでした。
これで①は完全解決です。

②についてもう一度説明させていただくと、
<カテゴリーAの記事を見ていて、そのカテゴリー内での「>>(次記事)」や「<<(前記事)」を見ていきたいのに、そこの順番が全記事順番になっていて、カテゴリーBやCなどがまざりこんでしまう>
ということです。
以前の私のつたない説明からでも、たぶんaki様はすでに正しくご理解なさっていると思います。
ただ、私がびびっているのです。かなりの手直しを間違えずにできるかなと。
2019-09-09-19:58 * YUMY [ 返信 * 編集 ]

aki Re: YUMY 様へ

①についてです。
[環境設定]→[ブログの設定]→[記事の設定]の中の『記事(カテゴリ別)』です。
この件数を10に変更して下さい。(変更後は更新ボタンを押して頂ければ反映します。)

②の意味、違いましたか?お手数ですが、宜しければ詳しくお願いできませんか?
(;^_^Aスミマセン。

…一応、表示調整が完了しましたので、下記の部分を改めまして再記述致します。
(見本はこのテンプレートの「更新日順及び個別記事内カテゴリーページ送り」ですので、クリックやブラウザ幅を狭めてご確認下さいませ。)

先ず、修正箇所は同様に青い文字部分です。そこを、下記のオレンジ文字に変更して下さい。
(コピペ可)
<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
<ul class="entry-navi">
<li class="entry-prev"><!--preventry--><a href="<%preventry_url>" title="New"><%preventry_title></a><!--/preventry--></li>
<li class="entry-next"><!--nextentry--><a href="<%nextentry_url>" title="Old"><%nextentry_title></a><!--/nextentry--></li>
</ul>
<!--/ページ移動・更新順-->

<!--topentry-->
<!--ページ移動・同カテゴリ-->
<div style="font-size:12px;">カテゴリ:[<a href="<%topentry_category_link>" title="CategoryTOPへ"><%topentry_category></a>]</div>
<ul class="entry-navi">
<li class="entry-prev"><!--prevcategoryentry--><a href="<%prevcategoryentry_url>" title="New"><%prevcategoryentry_title></a><!--/prevcategoryentry--></li>
<li class="entry-next"><!--nextcategoryentry--><a href="<%nextcategoryentry_url>" title="Old"><%nextcategoryentry_title></a><!--/nextcategoryentry--></li>
</ul>
</div>
<!--/ページ移動・同カテゴリ-->
<!--/topentry-->
<!--/permanent_area-->


調整用のスタイルを、下段「スタイルシート編集枠の最下」に追加して下さい。

.entry-navi{
margin:0 auto 20px;
width:100%;
font-size:12px;
}
.entry-prev a{
padding:0 10px;
display: block;
position: relative;
max-width: 100%;
text-align: left;
}
.entry-prev a:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -3px;
width: 10px;
height: 10px;
margin: -7px 0 0 0;
border-top: solid 2px #666;
border-right: solid 2px #666;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.entry-next a{
padding:0 10px;
display: block;
position: relative;
max-width: 100%;
text-align: right;
}
.entry-next a:after {
display: block;
content: "";
position: absolute;
top: 50%;
right: -3px;
width: 10px;
height: 10px;
margin: -7px 0 0 0;
border-top: solid 2px #666;
border-right: solid 2px #666;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

@media screen and (min-width:600px) {
.entry-navi{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.entry-prev,.entry-next{
max-width:45%;
}
}

以上です。m(__)m
2019-09-08-21:40 * aki [ 返信 * 編集 ]

Re: YUMY 様へ

aki様
たびたびすみません。
①の件ですが、今試してみたところ、全記事については、[環境設定]→[ブログの設定]→[記事の設定]で、5件を10件に表示変更できるのですが、カテゴリー内のリストは相変わらず5件しか表示されません。
2019-09-08-21:25 * YUMY [ 返信 * 編集 ]

Re: aki 様へ

akiさま
さっそくの返信ありがとうございました。
①の件はよくわかりました。
②の件は私の説明がわかりにくかったようですし、何だかたくさんの変更を加えるようで、失敗したらどうしようと思うとビビリます。
変更は見合わせようと思います。
2019-09-08-21:15 * YUMY [ 返信 * 編集 ]

aki Re: YUMY 様へ

初めまして♪ご利用頂き、誠に有難うございます。

ご質問の件ですが、先ず①番、これはFC2ブログ管理画面の環境設定で変更して下さい。
左のメニュー[環境設定]→[ブログの設定]→[記事の設定](1ページの表示件数は50件までで、設定数以上の分はページ分けされます。)

>②その際、Next記事などの順番がカテゴリー内におさまるようにしたい。(今は全記事に戻ってしまっています。)
…質問の意味がよく分からないのですが、カテゴリーから個別記事に移動した際のページ内(コメント入力枠上)に表示されるリンク、の事…かな?と思って返信致します。読解力が無くてスミマセン。。m(__)m
このページ(コメント入力枠上)のような感じで宜しければ、下記に掲載致しますHTMLに変更して頂くだけでリンクを表示できます。

先ず、serene_resp2c-r のHTML編集枠内半分くらいまでスクロールした所に下記のような箇所が有ります。

<!--permanent_area-->
<!--ページ移動-->
<div class="page_navi">
<!--preventry-->« <a href="<%preventry_url>" title="前のページへ"><%preventry_title></a><!--/preventry--> | <a href="<%url>" title="TOPページへ">Home</a> | <!--nextentry--><a href="<%nextentry_url>" title="次のページへ"><%nextentry_title></a> »<!--/nextentry-->
</div>
<!--/ページ移動-->
<!--/permanent_area-->


目印はその2行上に有る
<!-- トップページ ここまで --> という文字列です。
この青文字部分を下記のように変更して下さい。(コピペ可能)

修正致しましたので、上記返信コメントをご参照下さい。
<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<p>全記事内の移動</p>
<!--preventry-->« <a href="<%preventry_url>" title="前のページへ"><%preventry_title></a><!--/preventry--> | <a href="<%url>" title="TOPページへ">Home</a> | <!--nextentry--><a href="<%nextentry_url>" title="次のページへ"><%nextentry_title></a> »<!--/nextentry-->
</div>
<!--/ページ移動・更新順-->

<!--topentry-->
<!--ページ移動・同カテゴリ-->
<div class="page_navi">
<p>カテゴリ:[<%topentry_category>]内の移動</p>
<!--prevcategoryentry-->« <a href="<%prevcategoryentry_url>" title="前のページへ"><%prevcategoryentry_title></a><!--/prevcategoryentry--> | <a href="<%topentry_category_link>" title="<%template_view_category>">Category Top</a> | <!--nextcategoryentry--><a href="<%nextcategoryentry_url>" title="次のページへ"><%nextcategoryentry_title></a> »<!--/nextcategoryentry-->
</div>
<!--/ページ移動・同カテゴリ-->
<!--/topentry-->
<!--/permanent_area-->


後は更新ボタンを押して頂ければ反映致します。(不具合が有った時のために『複製』を作っておくと安心です。)
巡ってきたページによってどちらかを消す、という方法もJavaScriptを使用する事で出来るのですが、(JS)作者様が他に居られる件(著作物)なので、必要であれば下記ページを参考に導入してみて下さい。
https://hatenachips.blog.fc2.com/blog-entry-476.html
hatena chips 様『カテゴリ内移動と全記事移動を自動で切り替えるページナビゲーション』

質問の意図が違うようであればお教え下さいね。
また、取り敢えず急ぎで掲載致しましたが、もう少しお時間を頂いて(改めて)表示調整したものを後程up致しますので、必要な場合はお待ち下さいませ。m(__)m
2019-09-08-01:29 * aki [ 返信 * 編集 ]

aki Re: - 様へ

わざわざ来て頂いてのコメント、有難うございます♪
是非、季節や気分で色んなパターンを作って遊んで下さい。(^-^)
何だかんだと、イメージを探して悩むのって(面倒臭いですけど)楽しいですよね。

今後とも末永く、宜しくお願い致します。m(__)m
2019-09-07-22:00 * aki [ 返信 * 編集 ]

カテゴリー内の記事の表示

akiさま

serene_resp2c-rを使わせていただいている者です。
投稿記事が「続きを読む」とならず、全文表示されるのが気に入っています。(画像の美しさももちろんです。)

ただ、いくつか「こうだったらいいな」と思う点があります。
①カテゴリーをクリックすると記事がリストで表示される際、いちどに5記事でなく10記事表示させたい。
②その際、Next記事などの順番がカテゴリー内におさまるようにしたい。(今は全記事に戻ってしまっています。)

私にはakiさまのテンプレートを自在にカスタマイズするような能力がないので、ご助言をいただきたいと思います。ご指示があれば、HTML表示を書き換えたりは何とかできると思います
2019-09-07-20:24 * YUMY [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-09-07-09:20 * - [ 返信 * 編集 ]