*Essence

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

Top Page › Template › カスタマイズ › Christmasだから、では無いですが…
2018-12-22 (Sat) 16:00

Christmasだから、では無いですが…

もうすぐクリスマス!だから…という訳では無いですが、背景を夜景にした(だけ)の暗色テンプレートにしました。

(因みに…背景画像中央の明るい部分に『魔晄炉』は無いです…サムネイルが微妙にミッドガル…^^;)

ちょっと使ってみたい♪という稀有な方がいらっしゃいましたら、スタイルシートの貼り換えだけで適用できますので使ってやって下さい。(^-^)

yakei1縮小版

*暗色CSS適用済み見本『nightscape1.html』←クリック!

『ct_responsive』暗色CSS(3カラム用) 2019/09/29 css更新
『ct_responsive』暗色CSS(2カラム右用) 2019/09/29 css更新
『ct_responsive』暗色CSS(2カラム左用) 2019/09/29 css更新

クリックするとスタイルシートが書かれたタブが開きます。

『ct_responsive』テンプレートのスタイルシート編集枠内のCSSを全て削除し、上記(リンクで表示された)スタイルシートを全てコピー&ペーストして下さい。
その後更新して完了です。

(エントリー全文表示の方は、更にこの記事のスタイルシート部分だけを再度修正して下さい。
不具合が有った時のために複製を作っておくと安心です。

暗色カスタマイズCSSを適用すると、コメントの入力欄(名前やメッセージ等)をフォーカスした際に、背景色が薄いのに文字色が白になっていたため見難い状態になっておりました。
12/25修正してup致しましたので、お持ち頂いた方は再コピペして頂くか、CSSの一番下にある中括弧二つ( {{ )の後に下記を追加して下さい。

input[type="password"],input[type="text"],textarea,select:focus{
background:#000 !important;
}


これでフォーカスした際に背景が黒色になります。
失念しておりました。スミマセンでした。m(__)m
Re: aki 様へ * by 呑兵衛あな
なるほど...です。
>でないと、トップページで全て完結してしまって 誰も個別記事に来てくれなくなりますから。

というセンスがFC2テンプレーと作者には多く見受けられますね~
私の育ちとしては、個別記事をいちいち見る手間をかけずに、TOPを広げたらすべてを見通すことができるのが望ましいのですが。
私の俳諧先..主として高齢者ですが、個別記事を広げるような面倒な事はしませんね。

おっと、余談でした。本コメに返コメは辞退します

Re: 呑兵衛あな 様へ * by aki
お手数を煩わせて申し訳ございませんでした。
エントリーページ全文表示カスタマイズでは、記事に追記が有った場合の「ReadMore」で個別記事ページに移動します。
その際のReadMoreに枠は付いておりません。
枠の付いているReadMoreは、個別記事画面での追記時展開用ボタンなので枠を付けています。(CSSなので枠を外す事も出来ます。)
個別記事ページに展開表示する場合は
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
から
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
までの作業をして頂ければ展開している状態で表示されます。
「続きはCMのあとで」…みたいなのが嫌な場合は、上記のカスタマイズをして下さい。m(__)m

もともとFC2ブログでは、エントリーページでは追記部分を表示しません。
追記は個別記事で表示されます。
でないと、トップページで全て完結してしまって 誰も個別記事に来てくれなくなりますから。(^^;

Re: aki 様へ * by 呑兵衛あな
>このブログでの「Read More」のボタンの動作と少し違うような....

とは、当該記事を単品で表示した場合は「Read More」の周囲をBoxで囲われるのですが、複数表示させた場合にはBoxが表示されない..と言いたかったのですが。
https://nonn63400.blog.fc2.com/blog-entry-4076.html
https://nonn63400.blog.fc2.com/

PS:自己レスです。
「genial_resp3c」を全文表示で仮設置してみましたところ、「ct_responsive3c」を黒表示させた改造最終版と同じ表示でした。
よって、私が質問した改造最終版での「Read More」ボタンの表示は正当であると考え、質問を取り下げます。
お騒がせしました

Re: aki 様へ「Read More」 * by 呑兵衛あな
早速対応していただき、ありがとうございます。
説明の通りに入れかてみました。

このブログでの「Read More」のボタンの動作と少し違うような気もしているのですが、これでOKなのでしょうか?

Re: 呑兵衛あな 様へ * by aki
呑兵衛あな様、先ずはお礼を。
「お気付き頂き有難うございました。」
これは、追記を開閉するためのJavaScriptがHTML内にもともと記述して有ったのですが、5/14の修正記事(2)
https://sorauta1.blog.fc2.com/blog-entry-317.html
にございますように、とあるJavaScriptとバッティングして開閉しなくなる不具合を見付けましたので、CSSで開閉するように修正致しました。
その際のHTMLソースを、[ct_responsive]全文表示カスタマイズ記事に修正記述するのを失念致しておりました。
先程記事も修正致しました。
お気付き頂き、改めて御礼申し上げます。
有難うございました。

現在キチンと追記が開閉するのであれば、相性の悪いJSは記述されておりませんのでそのままご利用頂けます。
もし、今後の追加プラグイン等で不安が有るようでしたら、HTMLを少し書き換えるだけの簡単な作業なので、是非修正・更新をお願い致します。
変更箇所は、HTML編集枠内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 class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を、下記のように変更して下さい。(コピペでOKです。)

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--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>(全角山括弧を半角に変更して)を入れる -->


上記5/14の記事(2)に有る追加CSSは既に有りますので、HTMLだけを修正・更新して下さい。
お手数をお掛け致します。m(__)m

No Subject * by 呑兵衛あな
以下の「表示試験」において【追記】として書いてみました。
https://nonn63400.blog.fc2.com/blog-entry-4076.html

「Read More」と「Return」の表示が、全文表示と要約表示で異なる事に気が付きました。
要約表示だと囲み枠が表示されますが、全文表示だと表示されません。
自力復旧を試みようと、HTML等で「Read More」「Return」をさがしましたら、いっぱい有りまして挫折しました。
現在、不自由する事はありませんが、ご報告まで。

PS、コメントの編集テスト

Re: 呑兵衛あな 様へ * by aki
リスト位置の調整、出来たようで何よりです。(^-^)
当方も聞かれないと思い出せなくて「ああそう言えば」…と確認が出来ました。
(要するに、方法忘れてた訳です。^^;)有難うございました。
また何か有りましたらお声掛け下さいませ。

Re: aki 様へ * by 呑兵衛あな
ありがとうございました。
バッチグーです...んん~、古い(汗)

Re: 呑兵衛あな 様へ * by aki
本文の方ですか?
一番簡単なのは、ul や ol にpadding-left:で余白を設ける方法です。
下段に追加したCSSに、更に一行追加して下さい。

/* リストマークを黒丸・数字表示 */
ul li{list-style-type:disc;}
ol li{list-style-type:decimal;}
ul, ol{padding-left:20px;}

追加するのは赤い文字部分です。
リストの位置はデフォルトでoutside、且つインデントも揃っています。
(list-style-positionをinsideにしてしまうと、今度はインデントが揃わなくなる。)
なので、outsideのままで余白を設けて調整する、というのが1番簡単です。
余白の数値は、全体を見ながら良い位置をご自身で調整して下さいませ。

Re: aki 様へ、お願い * by 呑兵衛あな
リストマークを字下げしたいのですが、どうしてもできませんでした(涙)
字下げしたCSSを提供して頂けないでしょうか

Re: - t様へ * by aki
いつもご愛顧、有難うございます。
後程、そちらに返信致しますね。(^-^)

Re: 呑兵衛あな 様へ * by aki
おお!拝見してみましたが、なかなか使い勝手が良さそうですね。(^^)
閲覧される方が下へスクロールしなくても、要約表示に出来れば記事を探し易くなります。
共有プラグインも、見てるととても楽しく有益なものが色々有りますね。
最近は作られる方がめっきり減ってしまいました。
出尽くした感は有るのですが、出来れば過去のものを現行に合わせて作り直して欲しいです。
(^^; 私には作れないので。

管理人のみ閲覧できます * by -

No Subject * by 呑兵衛あな
2019-10-03-18:39 付け「思い付き-2」で書きました『全文表示用、要約表示用のボタン』に近い機能を持ったFC2用プラグインを発見しました。
XOOPSの「テンプレートのジェネレーター・モジュール」のような感じです。
https://sorauta1.blog.fc2.com/blog-entry-59.html#comment1619

「Select Template」というプラグインです。
https://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=29292&mob=
現在、私のブログの右下に設置して試行しています。
https://nonn63400.blog.fc2.com/

Re: 呑兵衛あな 様へ * by aki
そうなんです。^^;
「メディアクエリのブレークポイント」は、考えだしたらキリが無い、というか…遡ったモバイルデバイスまで考えてしまうと途方もなくなってしまうんです。^^;
なので、とあるサイトに書いてあった
「このサイズ!という観念・概念を捨てて、自身サイト(ブログ)のブラウザを狭めていって見栄えの限界になった所をブレークポイントにした」という話を実践して、テンプレートのブレークポイントにしています。(3から2カラム、2から1カラム、1カラム時要約表示、等CSS内に大体5~6ヵ所位は有ります。)
もし何か思い付くところが有りましたら、是非追加してみて下さい。

また何かお気付きの点がございましたらお声掛け下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

Re: aki 様へ * by 呑兵衛あな
「メディアクエリのブレークポイント」
とやらはとんでもない工事になるようですね。
触る気にもなれませんよv-12
>悩みつつ楽しんで下さい。(^^)
とんてもありません。
糖尿病性網膜症の私は、目玉の中に出血跡のゴミが浮いていまして、硝子体手術で取り除くしかないのですがさぼっています。
あの世への旅立ちと、どっちが早いゴールになるかというところです。
ですから、おかげをもってこれまでの工事で納得できる機能を達成できましたので、これ以上は触りませんよ。

Re: 呑兵衛あな 様へ * by aki
そうですね。
色々と探している時間・試している時間もきっと楽しいです。
メディアクエリのブレークポイントについては、下記のようなサイトもご参考に。
https://www.seojuku.com/blog/responsive-mediaquery.html
【2019年2月修正追記】レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ

移行を決められるまでの間、悩みつつ楽しんで下さい。(^^)

Re: aki 様へ感謝 * by 呑兵衛あな
色々と教えていただきまして、ありがとうございます。
リストマークの件はうまく行きました。
その他については、やってみます。

Re: 呑兵衛あな 様へ * by aki
まとめてお返事致します。m(__)m

>なお、以前よりそうでしたが、全文表示にするとリスト文で黒丸とかは表示されませんね。
…現在適用されているスタイルシートを拝見させて頂いた所、一番下段に追記されているリストマークが機能しておりません。
原因は、直前に有るコメントアウトが終了されていない、からだと思います。
/* リストマークを黒丸・数字表示
では無く、
/* リストマークを黒丸・数字表示 */
です。(/*の直前は全角文字&スペース厳禁。半角スペースはOK)
コメントアウトが終了されていないため、それ以下のリストマークCSSが無効になっています。なので、このコメントアウト自体を削除するか、若しくは最後に */を入れて下さい。

>アクセスしてきたデバイスよって「ex.PCアクセスなら全文表示、モバイルアクセスならば要約表示」するといった自動的な表示切替ができるのではないかと思うのですが、どうなんでしょう
…既にメディアクエリで制御しています。
メディアクエリとは、表示された画面サイズに応じて適用するスタイルを切り替える機能です。
例えば、下記にある返信コメントで 1カラムだけ「要約表示にしたい!」という場合は、~~
と有りますが、その下の
@media only screen and (max-width:749px) {
というのがメディアクエリです。この場合は「ブラウザの幅が最大値749pxまで」のスタイルという事になります。
これを例にすると、例えばiPhoneSEは縦表示の場合 幅が320pxと狭いので、
@media only screen and (max-width:320px) {
.kiji1{
display:block; /* 1カラム時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
}

とすればiPhoneSEは要約表示になります。
スマホやタブレット等のデバイス幅を調べて上記のように記述すれば、全記事表示・要約表示の制御が出来ますので、是非お試し下さいませ。

>全文表示用、要約表示用のボタン。
…これは(当方には)難しいです。
多分切り替えるためのJavaScriptが必要になるのでは?と思いますし 私にはJS 書けません。m(__)m

>Page not foundについて
…設定したパスワードが間違っていたのではと推測致します。
パスワードはクッキーが効きませんから、その都度入力が必要ですので、初めに入れた文字に(知らずに)誤字が有ったのでは?(^_^;)
これは当方にも正解は分かりません。。

試験してみましたが * by 呑兵衛あな
このsorauta1.blog.fc2.com/ブログの事なんですが、コメントを編集しようとした場合「Page not found
ご指定のファイルが見つかりませんでした。
30秒後にトップページへ移動します。」
とエラーメッセージで編集できません事を告知します。もちろんパスワードは入れていますよ。
https://error.fc2.com/blog/e/404/?c=4b1003ap
ちなみに私のブログでは編集できました。なぜでしょうね(謎)

思い付き-2 * by 呑兵衛あな
全文表示用、要約表示用のボタン。
なんて?

Re: aki 様へ * by 呑兵衛あな
思い付きですが
ブログ側で、PCでのアクセスなのか、モバイルのアクセスなのかを識別しているようですね。
それならば、アクセスしてきたデバイスよって「ex.PCアクセスなら全文表示、モバイルアクセスならば要約表示」するといった自動的な表示切替ができるのではないかと思うのですが、どうなんでしょうかね

Re: aki 様へ * by 呑兵衛あな
素早い対応をいただき、ありがとうございます。
御教授いただいた内容で修正し、満足しております。

なお、以前よりそうでしたが、全文表示にするとリスト文で黒丸とかは表示されませんね。要約表示している場合に、続きを見るボタンにして全文を表示させた場合は黒丸とか表示されるのですが。

Re: 呑兵衛あな 様へ * by aki
貴殿ブログ(現在適用中)のスタイルシートを拝見致しました。
表示が崩れる原因は、全記事表示にカスタマイズするページの、メディアクエリで表示分岐する部分が変更されていないためだと分かりました。
これについて、当方のコメントでの指示(全文表示HTMLが変更されていればCSSを貼り換えるだけでOKと返答した件)に問題が有った点をお詫び致します。
夜景のカスタマイズCSS自体は要約表示用なので、全文表示の際はその個所のCSSも変更が必要とする旨、申し上げるのを失念しておりました。
大変 申し訳ございませんでした。m(__)m

改めまして、下記のページ
https://sorauta1.blog.fc2.com/blog-entry-285.html
のスタイルシート変更部分に沿って変更して頂けます様、お願い致します。

(一応転載しておきます。)
--------------------------------------------
そしてもう2ヵ所、スタイルシート編集枠下方(だいたい9/10くらいの所)に
@media only screen and (max-width:400px) {
という部分が有りますので、ここの
.kiji1{
display:block; /* 要約表示時記事非表示 */
margin:0;
}
青文字部分を display:none; に変更

そしてそれよりもう少し下、
@media only screen and (max-width: 960px) {
という部分が有りますので、ここの
.kiji2{
display:none; /* 記事表示時要約非表示 */
}
青文字部分を display:block; に変更

後は更新ボタンを押して適用させて下さい。

↑ここまでやると1、2、3カラム共全文表示になります。
1カラムだけ「要約表示にしたい!」という場合は、上記を行った後にスタイルシート編集枠の一番下に下記を追加して下さい。

@media only screen and (max-width:749px) {
.kiji1{
display:block; /* 1カラム時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
}


最後の閉じる中括弧は2つです。お間違いのないように。
--------------------------------------------

上記のように作業して頂けますか?
不具合が有りましたら再度お教え下さいませ。m(__)m

SOSです * by 呑兵衛あな
頭がグチャになってしまい、巧く伝わるか自信が無いのですが

ct_responsive3cの『ct_responsive』暗色CSS(3カラム用)を適用した場合、私のAndroidタブレットで見ると以下の不具合が発生します。なお、パソコンから見た場合、不具合はありません。

2019-09-29-22:33で御提供いただきましたスタイルシートを適用した場合、
全画面表示とならず、「タイトル+コメント等の下部パーツ」だけ表示され、記事は(要約も全文も)表示されません。
現在(2019-09-30-20:43)で御指示のあったスタイルシートへの付加しただけで、HTMLは未改造の物を掲示してあります(https://nonn63400.blog.fc2.com/)

2019-09-29以前にDLLしていたスタイルシートを適用すれば全画面表示されます。
なお、貴ブログの当該ページ(https://sorauta1.blog.fc2.com/blog-entry-294.html)に掲示されたスタイルシートを適用しても同様でした。

以上、私の環境だけで発生する事象なのかもしれませんが、確認して頂きたたくお願いします。

Re: 呑兵衛あな 様へ * by aki
運営の長い方や記事数の多い方などは、とても思い入れが強いだろうと思いますので、お引越しする際にも色々と思案されている事と思います。
私などはここ(FC2)しか知らないため、移動される方を「大変だなぁ~」と傍観しているだけなので、本当に心苦しいです。^^;

それと、このブログには掲示板等のコンタクト媒体は設置しておりません。
当方のキャパシティでは、コメント欄とメールの返信でいっぱいいっぱいです。(^_^;)
申し訳ございません。m(__)m

Re: aki 様へ * by 呑兵衛あな
>もし、来年ご縁がございましたら 是非宜しくお願い致します。m(__)m

そんなに先の事にならずにFC2ブログに引っ越すだろうと読んでいます。
ということで、今後ともよろしくです。
ブラウザは2020年春にはTLS 1.2を利用していないサーバーは警告だらけになるようですから、livedoorブログが何時迄にどこまでできるかが行き先の勝負と見ています。
FC2ブログは当面1年間として始めた広告無を何時まで続けられるかがグレーですね。
それさえ明確になれば私も今後の進行方向が定まるのですが...
いずれにしても、提供していただいたテンプレートを付けた私のブログはpassモードを外してあります。気が向いたら眺めてください。
身の振り方を決めるまでの1ヶ月ばかりは、2つのブログをメンテする予定です。
PS、明日あたりはWindows10のv19H1がリリースされないかしらんと心待ちしています。
PS、aki 様は掲示板をもっているのですか?
ブログ記事のコメントでは書けないヨタ話ができる場所をお持ちでしたら教えてください。

Re: 呑兵衛あな 様へ * by aki
>現在利用しているlivedoorからSSL化に関するアナウンスがありました。
…そうなのですか。「転ばぬ先の杖」は、持っていれば安心ですものね。(^^)
やはり長く慣れ親しんだ場所には敵いませんので、もし、来年ご縁がございましたら 是非宜しくお願い致します。m(__)m

>Firefoxの最新は69.0.1である事は御存知ですよね。v40は2015年にはサポートから外れています。
…はい。存じておりますが、敢えて閲覧確認は古いバージョンを使っております。
不特定多数の方が閲覧される環境では、皆が最新のブラウザを使っているとは限りませんので、出来得る限りクロスブラウザ・旧バージョンでの動作確認をしております。勿論、テンプレートでも。
他の手持ちPCでは新しいバージョンのブラウザも確認しております。
全てのブラウザ、旧バージョンを確認する事は出来ませんが「これ以前のものでは表示が崩れるよ」という境界としてFirefoxでは40.0を確認に使っております。(Operaでは27.0)
Macintoshは持っていないのでWindowsだけですが。^^;

当方、プロではございませんので 不具合等も多々有るかと存じます。
もしお気付きの点などがございましたら、どうぞ気兼ね無くお声掛け下さいませ。
今後とも宜しくお願い致します。m(__)m

Re: aki 様へ * by 呑兵衛あな
そう言えば思い出しましたが...

貴ブログの御報せにても
>当方確認ブラウザ:(OSは全てWin10です)
IE10, IE11, Opera27.0, Firefox40.0, Safari5.1.7, MSEdge, GoogleChrome

との掲示があり、以前「Firefoxでのテキストエンコーディング 」について『Firefoxの40.0を使用している』旨を書かれていますが、Firefoxの最新は69.0.1である事は御存知ですよね。
v40は2015年にはサポートから外れています。

Re: aki 様へ * by 呑兵衛あな
タグリストの終了タグの件、ご指摘いただきありがとうございます。
自分の忘備録として書いているブログなのでタグクラウドは必須なんですよ。

>passモードなので見れませんが。

おかげさまを持ちまして、私のブログは何時でも開店できる状態になり一度オープンしたのですが、現在利用しているlivedoorからSSL化に関するアナウンスがありました。
http://staff.livedoor.blog/archives/51967997.html
実現は来年の春ということで、何とも気の長い話ですのが、FC2への移転はしばし見送りして模様眺めする気になっています。
http://nonn634.blog.jp/archives/81095154.html
いすれにしても、転居先の環境を整えたので何時でも引っ越せると思うと気が楽です。
慣れの問題だと思いますが、既存の記事を手直しする事の多い私の場合、FC2のエディターはイマイチです。いっそのこと、ブログではなくWikiの方が向いているかも知れないとも思うのですが。

Re: 呑兵衛あな 様へ * by aki
無事に引っ越し出来ましたか。良かったです。(passモードなので見れませんが。^^;)
また何かございましたらご連絡下さいませ。

p.s. 当方はタグリストを付けていないのでよく分かりませんが、下記のリンクに簡単な利用説明がありますのでご参考に。
https://fc2blogstaff.blog.fc2.com/blog-entry-116.html
https://help.fc2.com/blog/manual/group99/1446

それと、コメントに記述されている終了タグが閉じていませんので修正下さいね。
× </p<!--/tag_list-->
○ </p><!--/tag_list-->

Re: aki 様へ * by 呑兵衛あな
ありがとうございました。
先ほど引越ししました。
向後ともよろしくお願いします。

PS、記事本文にタグリストを付けたかったので、適当な場所に以下を書きました

<!--tag_list--><p>TAG :<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a></p<!--/tag_list-->

Re: 呑兵衛あな 様へ * by aki
一つにまとめてレス致しますね。(^^)

先ず全文表示テンプレに適用…ですが、同様にそのままスタイルシートに全文コピペして下さい。
全文表示のカスタマイズはHTML部分の改変なので、それが完了しているのであればスタイルシートを貼り付けるだけです。
https://sorauta1.blog.fc2.com/blog-entry-285.html
(↑この作業が済んでいるのであれば、スタイルシートを全てコピペするだけです。)
もしご心配ならば、複製を作って作業して頂くと安心です。

リストマークの表示…についてですが、スタイルシート上部に記述されている reset css で ol,ul,li に list-style-type:none; を指定しているので、新たに記述して頂ければ反映致します。
スタイルシート編集枠の一番下にでも
(例)
ul li{list-style-type:circle;}
ol li{list-style-type:upper-alpha;}

のように追記述して頂ければリストマークが使えます。
ただ、メニュー部分のリストについてはカラム幅やmargin,padding 等で位置が随分とずれてしまいますので、下記のように記述して下さい。
nav ul{padding-left:15px;}
nav ul li{list-style-type:circle;}
nav ol{padding-left:15px;}
nav ol li{list-style-type:upper-alpha;}

(リストマークの形状はご自由に。)
詳しくは下記のURLをご覧下さい。
https://www.tagindex.com/stylesheet/list/list_style_type.html

それと大変申し訳無いのですが、先般の貼り付け用スタイルシートに記述漏れが有りましたので、下記を追記して更新をして頂けます様お願い致します。

ご自身でフォント指定をされている部分に、赤文字部分を追記して下さい。

body{
font-size:1.0em;
color:#fff; /* 基本文字色 */
line-height: 1.8;
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "Osaka","Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","MS Pゴシック","UDデジタル教科書体","Yu Gothic UI",Verdana, sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-overflow-scrolling:touch !important;
word-wrap: break-word;
overflow-wrap: break-word;

}

(赤い部分は、表示範囲内に収まらない単語がある場合の折り返し方法についてのスタイルです。)
また、下記コメントのCSSリンクも修正済みですので、再度コピペしてご利用頂く事も出来ます。
お手数お掛け致しますが、宜しくお願い致します。m(__)m

リスト表示をしたい * by 呑兵衛あな
御礼とは別スレッドにしました。
教えてください。

リスト文「<ul><li>~</li></ul>」や「<ol><li>~</li></ol>」を、「点付き」や「数字付き」で表示したいと思います。
どのように修正すればよいでしょうか?

Re: aki 様へ感謝 * by 呑兵衛あな
修正済みCSSを適用しました。
いや~、実に至れり尽くせりで感激です。
鉛筆マークを大きくしていただき、ありがとうございます。とっても見易くなりました。
全画面表示版CSSにも適用したいと思いますので、修正箇所を教えていただければ助かります。
但し私は、糖尿病で硝子体手術を奨められているほど視力が悪く、タブレットから見る場合に備えて「記事編集」のテキストボタンし追加しましたので悪しからず。

Re: 呑兵衛あな 様へ * by aki
お返事が遅くなり申し訳ございませんでした。
修正済みCSSを作りましたので、下記を開いて表示されたスタイルを全てコピーし、お手持ちの『ct_responsive3c (nightscape)』スタイルシートに貼り換えて下さい。
呑兵衛あな様がご自身で変更されたフォントサイズ100%と使用フォント(font-family)、テーブルボーダーも記述済みなので、そのまま使えると思います。

https://blog-imgs-131.fc2.com/s/o/r/sorauta1/yakei3c-ex.css

適用してみて不具合がございましたら、お手数ですが再度ご連絡下さいませ。
宜しくお願い致します。m(__)m

Re: 呑兵衛あな 様へ * by aki
質問の取消しの件、了解致しました。(^-^)

「2019-09-28-08:42 蛇足ですが」 にある、3カラムcssを表示するとFirefoxで文字化けする、との件ですが、エンコードを変えてみて頂けますか?
Firefoxを起動して頂き右上のメニュー、≡ → テキストエンコーディング の中にある自動判別を日本語にして下さい。
(メニューバーのあるブラウザの場合は、表示 → 文字エンコーディング → 自動判別 → 日本語)

一応当方のFirefox(ver.40.0)では問題無く表示されておりますので、お手数ですがエンコードをご確認下さいませ。m(__)m

質問の取り消し * by 呑兵衛あな
先に質問した以下について取り下げます。
1.「2019-09-28-08:28付け」の中で「Q4」
質問した後で治りました。キャッシュのせい?

2.「2019-09-28-08:42付け」の蛇足については、「web material *Essence」を発見しました

蛇足ですが * by 呑兵衛あな
ct_responsive>着せ替え nightscape
https://sorauta1.blog.fc2.com/blog-entry-294.html
記事に紹介されている「『ct_responsive』暗色CSS(3カラム用)」
https://blog-imgs-123-origin.fc2.com/s/o/r/sorauta1/yakei3c.css
をFirefoxで表示させると文字化けします。Chromeであれば化けませんでした。

素材サイトのURLを教えてください

No Subject * by 呑兵衛あな
こんなにも素早く回答いただけるとは思ってもいませんでした。
今朝、ベットでタブレットを眺めていましたら回答いただいているのを知り、いつもは未だ寝ている時間に起きて修正しました。
ご指導いただいた箇所はすべて修正しましたので、ご報告します。
「Q1.フリーエリア」の件で『テーブルを使わず<div>を使う』との事。知りませんでした。
早速、現在運用中の物の記述も変えました(笑)

私は現在livedoorブログを利用中でそれなりに満足しているのですが、常時SSL化が行われない事に業を煮やして、半年先とかのスパンでFC2ブログに引っ越すかも知れない未来に備えているのですが、なかなか気に入った環境に持ち込めずにおりました。
しかし、今回の試行で大いに満足する内容となりましたので、livedoorブログの対応を云々と眺めていないで、FC2ブログに引越ししようかしらんと思い始めています。

もう2点教えてください。
Q3.ct_responsive をエントリー全文表示にして試行している事は、以前申し上げました。
暗色CSS(3カラム用)を適用した場合の表示が、アレっなのです。
暗色CSS(3カラム用)を適用しない場合は『要約された個別の記事』が表示され、個別記事に画像が有れば嘉造と記事が表示され、『画像が無ければ、記事が画像エリアに被さるようにして表示される仕組み』と見ました。
ところが、暗色CSS(3カラム用)を適用した場合、『画像が無ければ、そこが空白となり、記事が画像エリアに被さらない』のです。

Q4.この貴ブログをタブレット(Android 4.4.2)から見た場合、画面右上の「プラグイン表示できるボタン」を押下すると『ブログ記事のドコにいても』プラグインがプルダウンメニューで開閉します。
しかし、ct_responsive 暗色CSS(3カラム用)を適用した場合、『ブログ記事の中ほどより下側』にいくと「プラグイン表示できるボタンは表示されていますが、プルダウンメニューが開閉しなくなります」

以上、慌てませんのて教えていただきたく、お願いします。

Re: 呑兵衛あな 様へ * by aki
初めまして。この度はテンプレートをDL頂き、誠に有難うございます。
早速ご質問の件です。また、ご質問外で修正頂きたい所が幾つかございますので、大変お手数とは存じますが、返答の最後に記述致します旨を修正・更新下さいませ。m(__)m

>Q1.フリーエリアに以下のタグを書いたのですが、線と色が表示されません。

…スタイルシート上部にあるreset cssでテーブルのボーダーを0にしているため表示されない、というのが理由です。
表示させるには、スタイルシート編集枠の一番下に
table {
border: 1px solid #cccccc;
}

を追加して頂くか、若しくはフリーエリアに記述しているテーブルタグにスタイルを追加して頂く方法が有ります。
上記のスタイルを追加すればテーブルのボーダーは表示されますが、プラグインに指定している背景色や文字色は反映されません。
「HTML5で廃止・非推奨のタグが使われている」ため、と申しましょうか。
正しくCSSで記述しますと、

<div style="margin:0 auto; width:180px;">
<table style="border:1px solid #cccccc;">
<tbody>
<tr>
<td style="text-align:center;">
<span style="color:#ffffff;">禁煙始め<script type="text/javascript" src="https://www.nannichime.net/s.php?d=2015/10/16"&f=y></script></span>
</td>
</tr>
</tbody>
</table>
<table style="border:1px solid #cccccc;">
<tbody>
<tr>
<td style="text-align:center; background-color:#ff0000;"><span style="color:#ffffff;">〇〇〇〇熱望</span>
</td>
</tr>
</tbody>
</table>
</div>


となりますが、テーブルを使わず<div>を使うともっと簡単になります。

<div style="margin:0 auto; width:180px; border:1px solid #cccccc; text-align:center;">
<span style="color:#ffffff;">禁煙始め<script type="text/javascript" src="https://www.nannichime.net/s.php?d=2015/10/16"&f=y></script></span>
</div>
<div style="margin:0 auto; width:180px; border:1px solid #cccccc; text-align:center; background-color:#ff0000;">
<span style="color:#ffffff;">〇〇〇〇熱望</span>
</div>


HTML5では、要素<center>や<font>,属性<table>や<td>のbgcolorは廃止されております。
他にも廃止や非推奨になっているものが沢山ございますので、詳しいサイトを是非ご覧になって下さい。
https://www.tagindex.com/html5/basic/ 【HTML5の基本- TAG index】


>Q2.1つの記事だけを全記事表示させた場合、記事の下部に「更新日順」として当該記事の前後の記事タイトルが表示されるハズですが、表示されません。

…この個別ページリンクは最近の更新で取り付けた装備なので、カスタマイズCSS『nightscape』には実装されていないスタイルです。
カスタマイズ方法として近日記事に掲載するつもりでしたが、少し遅れてしまっております。申し訳ございません。
『nightscape』に適用する場合は、スタイルシート編集枠の最下段に、下記のCSSをコピー&ペーストして下さい。

.entry-navi{
margin:0 auto 20px;
width:100%;
font-size:12px;
}
.entry-prev{
list-style:none;
margin:0 5px 0 15px;
}
.entry-next{
list-style:none;
margin:0 15px 0 5px;
}
.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 #999;
border-right: solid 2px #999;
-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 #999;
border-right: solid 2px #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


後は更新ボタンを押して下さい。

-----------------
次に、お手数ですが修正頂きたい箇所のご案内です。
現在のテンプレートの状態では、レスポンシブ1カラム(タブレットやスマホ等、閲覧幅が750px未満)の時の右に隠れたメニューが固定及び小さく格納されておりません。
何度か修正した際の、当方の見落としだと思います。
申し訳ございませんが、下記の部分を修正・更新をお願い致します。

スタイルシート編集枠内3/4程の所にある
nav{
position:absolute;
top:0;
bottom:0;
height:100vh;
width:270px;
right:-270px;
padding-bottom:50px;
background:#000;
z-index:5;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.tree{
display:none; /* メニューを閉じて表示 */
}

という部分を下記のように変更

nav{
position:fixed;
top:0;
bottom:0;
height:100vh;
width:270px;
right:-270px;
padding-bottom:150px;
background:#000;
z-index:5;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.tree-m{
display:none; /* メニューを閉じて表示 */
}


以上ですが、修正頂けましたら確認致しますので、改めてコメント頂けると幸いです。m(__)m

No Subject * by 呑兵衛あな
ct_responsive3cに暗色CSSを適用して運用試行しています。以下について御教授いただきたく質問いたします。

Q1.フリーエリアに以下のタグを書いたのですが、線と色が表示されません。

<center>
<TABLE border="1">
<TBODY>
<TR>
<TD width="180" align="center" bgcolor="#ffffff">
<font color="#FFFFFF">禁煙始め<script language="JavaScript" src="https://www.nannichime.net/s.php?d=2015/10/16"&f=y></script></font>
</TD>
</TR>
</TBODY>
</TABLE>

<TABLE border="1">
<TBODY>
<TR>
<TD width="180" align="center" bgcolor="#ff0000"><FONT color="#ffffff">〇〇〇〇熱望</FONT></TD>
</TR>
</TBODY>
</TABLE>
</center>

Q2.1つの記事だけを全記事表示させた場合、記事の下部に「更新日順」として当該記事の前後の記事タイトルが表示されるハズですが、表示されません。
暗色CSSを適用しなければ正規に表示できます。なお。「 font-size:100%; /* フォントサイズは1em(16px)の80% */」にて文字サイズを「80%⇒100%」に変えたので収容枠からはみだしたのかしらんとも思いましたが、80%にしても表示乱れが出ます。

<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
以下、省略

以上2点について御教授いただきたく、よろしく願いします。
素敵なテンプレートが嬉しくなっています。

Comment-close▲

Comment







管理者にだけ表示を許可

Re: aki 様へ

なるほど...です。
>でないと、トップページで全て完結してしまって 誰も個別記事に来てくれなくなりますから。

というセンスがFC2テンプレーと作者には多く見受けられますね~
私の育ちとしては、個別記事をいちいち見る手間をかけずに、TOPを広げたらすべてを見通すことができるのが望ましいのですが。
私の俳諧先..主として高齢者ですが、個別記事を広げるような面倒な事はしませんね。

おっと、余談でした。本コメに返コメは辞退します
2019-10-08-15:15 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

お手数を煩わせて申し訳ございませんでした。
エントリーページ全文表示カスタマイズでは、記事に追記が有った場合の「ReadMore」で個別記事ページに移動します。
その際のReadMoreに枠は付いておりません。
枠の付いているReadMoreは、個別記事画面での追記時展開用ボタンなので枠を付けています。(CSSなので枠を外す事も出来ます。)
個別記事ページに展開表示する場合は
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
から
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
までの作業をして頂ければ展開している状態で表示されます。
「続きはCMのあとで」…みたいなのが嫌な場合は、上記のカスタマイズをして下さい。m(__)m

もともとFC2ブログでは、エントリーページでは追記部分を表示しません。
追記は個別記事で表示されます。
でないと、トップページで全て完結してしまって 誰も個別記事に来てくれなくなりますから。(^^;
2019-10-08-14:37 * aki [ 返信 * 編集 ]

Re: aki 様へ

>このブログでの「Read More」のボタンの動作と少し違うような....

とは、当該記事を単品で表示した場合は「Read More」の周囲をBoxで囲われるのですが、複数表示させた場合にはBoxが表示されない..と言いたかったのですが。
https://nonn63400.blog.fc2.com/blog-entry-4076.html
https://nonn63400.blog.fc2.com/

PS:自己レスです。
「genial_resp3c」を全文表示で仮設置してみましたところ、「ct_responsive3c」を黒表示させた改造最終版と同じ表示でした。
よって、私が質問した改造最終版での「Read More」ボタンの表示は正当であると考え、質問を取り下げます。
お騒がせしました
2019-10-08-08:34 * 呑兵衛あな [ 返信 * 編集 ]

Re: aki 様へ「Read More」

早速対応していただき、ありがとうございます。
説明の通りに入れかてみました。

このブログでの「Read More」のボタンの動作と少し違うような気もしているのですが、これでOKなのでしょうか?
2019-10-08-08:08 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

呑兵衛あな様、先ずはお礼を。
「お気付き頂き有難うございました。」
これは、追記を開閉するためのJavaScriptがHTML内にもともと記述して有ったのですが、5/14の修正記事(2)
https://sorauta1.blog.fc2.com/blog-entry-317.html
にございますように、とあるJavaScriptとバッティングして開閉しなくなる不具合を見付けましたので、CSSで開閉するように修正致しました。
その際のHTMLソースを、[ct_responsive]全文表示カスタマイズ記事に修正記述するのを失念致しておりました。
先程記事も修正致しました。
お気付き頂き、改めて御礼申し上げます。
有難うございました。

現在キチンと追記が開閉するのであれば、相性の悪いJSは記述されておりませんのでそのままご利用頂けます。
もし、今後の追加プラグイン等で不安が有るようでしたら、HTMLを少し書き換えるだけの簡単な作業なので、是非修正・更新をお願い致します。
変更箇所は、HTML編集枠内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 class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を、下記のように変更して下さい。(コピペでOKです。)

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--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>(全角山括弧を半角に変更して)を入れる -->


上記5/14の記事(2)に有る追加CSSは既に有りますので、HTMLだけを修正・更新して下さい。
お手数をお掛け致します。m(__)m
2019-10-08-02:41 * aki [ 返信 * 編集 ]

No Subject

以下の「表示試験」において【追記】として書いてみました。
https://nonn63400.blog.fc2.com/blog-entry-4076.html

「Read More」と「Return」の表示が、全文表示と要約表示で異なる事に気が付きました。
要約表示だと囲み枠が表示されますが、全文表示だと表示されません。
自力復旧を試みようと、HTML等で「Read More」「Return」をさがしましたら、いっぱい有りまして挫折しました。
現在、不自由する事はありませんが、ご報告まで。

PS、コメントの編集テスト
2019-10-07-17:37 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

リスト位置の調整、出来たようで何よりです。(^-^)
当方も聞かれないと思い出せなくて「ああそう言えば」…と確認が出来ました。
(要するに、方法忘れてた訳です。^^;)有難うございました。
また何か有りましたらお声掛け下さいませ。
2019-10-06-23:17 * aki [ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました。
バッチグーです...んん~、古い(汗)
2019-10-06-22:32 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

本文の方ですか?
一番簡単なのは、ul や ol にpadding-left:で余白を設ける方法です。
下段に追加したCSSに、更に一行追加して下さい。

/* リストマークを黒丸・数字表示 */
ul li{list-style-type:disc;}
ol li{list-style-type:decimal;}
ul, ol{padding-left:20px;}

追加するのは赤い文字部分です。
リストの位置はデフォルトでoutside、且つインデントも揃っています。
(list-style-positionをinsideにしてしまうと、今度はインデントが揃わなくなる。)
なので、outsideのままで余白を設けて調整する、というのが1番簡単です。
余白の数値は、全体を見ながら良い位置をご自身で調整して下さいませ。
2019-10-06-21:18 * aki [ 返信 * 編集 ]

Re: aki 様へ、お願い

リストマークを字下げしたいのですが、どうしてもできませんでした(涙)
字下げしたCSSを提供して頂けないでしょうか
2019-10-06-16:24 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: - t様へ

いつもご愛顧、有難うございます。
後程、そちらに返信致しますね。(^-^)
2019-10-06-02:46 * aki [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

おお!拝見してみましたが、なかなか使い勝手が良さそうですね。(^^)
閲覧される方が下へスクロールしなくても、要約表示に出来れば記事を探し易くなります。
共有プラグインも、見てるととても楽しく有益なものが色々有りますね。
最近は作られる方がめっきり減ってしまいました。
出尽くした感は有るのですが、出来れば過去のものを現行に合わせて作り直して欲しいです。
(^^; 私には作れないので。
2019-10-06-02:45 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-10-06-01:16 * - [ 返信 * 編集 ]

No Subject

2019-10-03-18:39 付け「思い付き-2」で書きました『全文表示用、要約表示用のボタン』に近い機能を持ったFC2用プラグインを発見しました。
XOOPSの「テンプレートのジェネレーター・モジュール」のような感じです。
https://sorauta1.blog.fc2.com/blog-entry-59.html#comment1619

「Select Template」というプラグインです。
https://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=29292&mob=
現在、私のブログの右下に設置して試行しています。
https://nonn63400.blog.fc2.com/
2019-10-05-20:21 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

そうなんです。^^;
「メディアクエリのブレークポイント」は、考えだしたらキリが無い、というか…遡ったモバイルデバイスまで考えてしまうと途方もなくなってしまうんです。^^;
なので、とあるサイトに書いてあった
「このサイズ!という観念・概念を捨てて、自身サイト(ブログ)のブラウザを狭めていって見栄えの限界になった所をブレークポイントにした」という話を実践して、テンプレートのブレークポイントにしています。(3から2カラム、2から1カラム、1カラム時要約表示、等CSS内に大体5~6ヵ所位は有ります。)
もし何か思い付くところが有りましたら、是非追加してみて下さい。

また何かお気付きの点がございましたらお声掛け下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-10-05-02:21 * aki [ 返信 * 編集 ]

Re: aki 様へ

「メディアクエリのブレークポイント」
とやらはとんでもない工事になるようですね。
触る気にもなれませんよv-12
>悩みつつ楽しんで下さい。(^^)
とんてもありません。
糖尿病性網膜症の私は、目玉の中に出血跡のゴミが浮いていまして、硝子体手術で取り除くしかないのですがさぼっています。
あの世への旅立ちと、どっちが早いゴールになるかというところです。
ですから、おかげをもってこれまでの工事で納得できる機能を達成できましたので、これ以上は触りませんよ。
2019-10-04-14:05 * 呑兵衛あな [ 返信 * 編集 ]

Re: 呑兵衛あな 様へ

そうですね。
色々と探している時間・試している時間もきっと楽しいです。
メディアクエリのブレークポイントについては、下記のようなサイトもご参考に。
https://www.seojuku.com/blog/responsive-mediaquery.html
【2019年2月修正追記】レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ

移行を決められるまでの間、悩みつつ楽しんで下さい。(^^)
2019-10-04-11:42 * aki [ 返信 * 編集 ]

Re: aki 様へ感謝

色々と教えていただきまして、ありがとうございます。
リストマークの件はうまく行きました。
その他については、やってみます。
2019-10-04-07:54 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

まとめてお返事致します。m(__)m

>なお、以前よりそうでしたが、全文表示にするとリスト文で黒丸とかは表示されませんね。
…現在適用されているスタイルシートを拝見させて頂いた所、一番下段に追記されているリストマークが機能しておりません。
原因は、直前に有るコメントアウトが終了されていない、からだと思います。
/* リストマークを黒丸・数字表示
では無く、
/* リストマークを黒丸・数字表示 */
です。(/*の直前は全角文字&スペース厳禁。半角スペースはOK)
コメントアウトが終了されていないため、それ以下のリストマークCSSが無効になっています。なので、このコメントアウト自体を削除するか、若しくは最後に */を入れて下さい。

>アクセスしてきたデバイスよって「ex.PCアクセスなら全文表示、モバイルアクセスならば要約表示」するといった自動的な表示切替ができるのではないかと思うのですが、どうなんでしょう
…既にメディアクエリで制御しています。
メディアクエリとは、表示された画面サイズに応じて適用するスタイルを切り替える機能です。
例えば、下記にある返信コメントで 1カラムだけ「要約表示にしたい!」という場合は、~~
と有りますが、その下の
@media only screen and (max-width:749px) {
というのがメディアクエリです。この場合は「ブラウザの幅が最大値749pxまで」のスタイルという事になります。
これを例にすると、例えばiPhoneSEは縦表示の場合 幅が320pxと狭いので、
@media only screen and (max-width:320px) {
.kiji1{
display:block; /* 1カラム時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
}

とすればiPhoneSEは要約表示になります。
スマホやタブレット等のデバイス幅を調べて上記のように記述すれば、全記事表示・要約表示の制御が出来ますので、是非お試し下さいませ。

>全文表示用、要約表示用のボタン。
…これは(当方には)難しいです。
多分切り替えるためのJavaScriptが必要になるのでは?と思いますし 私にはJS 書けません。m(__)m

>Page not foundについて
…設定したパスワードが間違っていたのではと推測致します。
パスワードはクッキーが効きませんから、その都度入力が必要ですので、初めに入れた文字に(知らずに)誤字が有ったのでは?(^_^;)
これは当方にも正解は分かりません。。
2019-10-04-01:25 * aki [ 返信 * 編集 ]

試験してみましたが

このsorauta1.blog.fc2.com/ブログの事なんですが、コメントを編集しようとした場合「Page not found
ご指定のファイルが見つかりませんでした。
30秒後にトップページへ移動します。」
とエラーメッセージで編集できません事を告知します。もちろんパスワードは入れていますよ。
https://error.fc2.com/blog/e/404/?c=4b1003ap
ちなみに私のブログでは編集できました。なぜでしょうね(謎)
2019-10-03-18:46 * 呑兵衛あな [ 返信 * 編集 ]

思い付き-2

全文表示用、要約表示用のボタン。
なんて?
2019-10-03-18:39 * 呑兵衛あな [ 返信 * 編集 ]

Re: aki 様へ

思い付きですが
ブログ側で、PCでのアクセスなのか、モバイルのアクセスなのかを識別しているようですね。
それならば、アクセスしてきたデバイスよって「ex.PCアクセスなら全文表示、モバイルアクセスならば要約表示」するといった自動的な表示切替ができるのではないかと思うのですが、どうなんでしょうかね
2019-10-03-15:45 * 呑兵衛あな [ 返信 * 編集 ]

Re: aki 様へ

素早い対応をいただき、ありがとうございます。
御教授いただいた内容で修正し、満足しております。

なお、以前よりそうでしたが、全文表示にするとリスト文で黒丸とかは表示されませんね。要約表示している場合に、続きを見るボタンにして全文を表示させた場合は黒丸とか表示されるのですが。
2019-10-03-15:40 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

貴殿ブログ(現在適用中)のスタイルシートを拝見致しました。
表示が崩れる原因は、全記事表示にカスタマイズするページの、メディアクエリで表示分岐する部分が変更されていないためだと分かりました。
これについて、当方のコメントでの指示(全文表示HTMLが変更されていればCSSを貼り換えるだけでOKと返答した件)に問題が有った点をお詫び致します。
夜景のカスタマイズCSS自体は要約表示用なので、全文表示の際はその個所のCSSも変更が必要とする旨、申し上げるのを失念しておりました。
大変 申し訳ございませんでした。m(__)m

改めまして、下記のページ
https://sorauta1.blog.fc2.com/blog-entry-285.html
のスタイルシート変更部分に沿って変更して頂けます様、お願い致します。

(一応転載しておきます。)
--------------------------------------------
そしてもう2ヵ所、スタイルシート編集枠下方(だいたい9/10くらいの所)に
@media only screen and (max-width:400px) {
という部分が有りますので、ここの
.kiji1{
display:block; /* 要約表示時記事非表示 */
margin:0;
}
青文字部分を display:none; に変更

そしてそれよりもう少し下、
@media only screen and (max-width: 960px) {
という部分が有りますので、ここの
.kiji2{
display:none; /* 記事表示時要約非表示 */
}
青文字部分を display:block; に変更

後は更新ボタンを押して適用させて下さい。

↑ここまでやると1、2、3カラム共全文表示になります。
1カラムだけ「要約表示にしたい!」という場合は、上記を行った後にスタイルシート編集枠の一番下に下記を追加して下さい。

@media only screen and (max-width:749px) {
.kiji1{
display:block; /* 1カラム時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
}


最後の閉じる中括弧は2つです。お間違いのないように。
--------------------------------------------

上記のように作業して頂けますか?
不具合が有りましたら再度お教え下さいませ。m(__)m
2019-10-03-13:43 * aki [ 返信 * 編集 ]

SOSです

頭がグチャになってしまい、巧く伝わるか自信が無いのですが

ct_responsive3cの『ct_responsive』暗色CSS(3カラム用)を適用した場合、私のAndroidタブレットで見ると以下の不具合が発生します。なお、パソコンから見た場合、不具合はありません。

2019-09-29-22:33で御提供いただきましたスタイルシートを適用した場合、
全画面表示とならず、「タイトル+コメント等の下部パーツ」だけ表示され、記事は(要約も全文も)表示されません。
現在(2019-09-30-20:43)で御指示のあったスタイルシートへの付加しただけで、HTMLは未改造の物を掲示してあります(https://nonn63400.blog.fc2.com/)

2019-09-29以前にDLLしていたスタイルシートを適用すれば全画面表示されます。
なお、貴ブログの当該ページ(https://sorauta1.blog.fc2.com/blog-entry-294.html)に掲示されたスタイルシートを適用しても同様でした。

以上、私の環境だけで発生する事象なのかもしれませんが、確認して頂きたたくお願いします。
2019-10-03-11:58 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

運営の長い方や記事数の多い方などは、とても思い入れが強いだろうと思いますので、お引越しする際にも色々と思案されている事と思います。
私などはここ(FC2)しか知らないため、移動される方を「大変だなぁ~」と傍観しているだけなので、本当に心苦しいです。^^;

それと、このブログには掲示板等のコンタクト媒体は設置しておりません。
当方のキャパシティでは、コメント欄とメールの返信でいっぱいいっぱいです。(^_^;)
申し訳ございません。m(__)m
2019-10-03-03:15 * aki [ 返信 * 編集 ]

Re: aki 様へ

>もし、来年ご縁がございましたら 是非宜しくお願い致します。m(__)m

そんなに先の事にならずにFC2ブログに引っ越すだろうと読んでいます。
ということで、今後ともよろしくです。
ブラウザは2020年春にはTLS 1.2を利用していないサーバーは警告だらけになるようですから、livedoorブログが何時迄にどこまでできるかが行き先の勝負と見ています。
FC2ブログは当面1年間として始めた広告無を何時まで続けられるかがグレーですね。
それさえ明確になれば私も今後の進行方向が定まるのですが...
いずれにしても、提供していただいたテンプレートを付けた私のブログはpassモードを外してあります。気が向いたら眺めてください。
身の振り方を決めるまでの1ヶ月ばかりは、2つのブログをメンテする予定です。
PS、明日あたりはWindows10のv19H1がリリースされないかしらんと心待ちしています。
PS、aki 様は掲示板をもっているのですか?
ブログ記事のコメントでは書けないヨタ話ができる場所をお持ちでしたら教えてください。
2019-10-02-18:22 * 呑兵衛あな [ 返信 * 編集 ]

Re: 呑兵衛あな 様へ

>現在利用しているlivedoorからSSL化に関するアナウンスがありました。
…そうなのですか。「転ばぬ先の杖」は、持っていれば安心ですものね。(^^)
やはり長く慣れ親しんだ場所には敵いませんので、もし、来年ご縁がございましたら 是非宜しくお願い致します。m(__)m

>Firefoxの最新は69.0.1である事は御存知ですよね。v40は2015年にはサポートから外れています。
…はい。存じておりますが、敢えて閲覧確認は古いバージョンを使っております。
不特定多数の方が閲覧される環境では、皆が最新のブラウザを使っているとは限りませんので、出来得る限りクロスブラウザ・旧バージョンでの動作確認をしております。勿論、テンプレートでも。
他の手持ちPCでは新しいバージョンのブラウザも確認しております。
全てのブラウザ、旧バージョンを確認する事は出来ませんが「これ以前のものでは表示が崩れるよ」という境界としてFirefoxでは40.0を確認に使っております。(Operaでは27.0)
Macintoshは持っていないのでWindowsだけですが。^^;

当方、プロではございませんので 不具合等も多々有るかと存じます。
もしお気付きの点などがございましたら、どうぞ気兼ね無くお声掛け下さいませ。
今後とも宜しくお願い致します。m(__)m
2019-10-02-16:17 * aki [ 返信 * 編集 ]

Re: aki 様へ

そう言えば思い出しましたが...

貴ブログの御報せにても
>当方確認ブラウザ:(OSは全てWin10です)
IE10, IE11, Opera27.0, Firefox40.0, Safari5.1.7, MSEdge, GoogleChrome

との掲示があり、以前「Firefoxでのテキストエンコーディング 」について『Firefoxの40.0を使用している』旨を書かれていますが、Firefoxの最新は69.0.1である事は御存知ですよね。
v40は2015年にはサポートから外れています。
2019-10-02-06:45 * 呑兵衛あな [ 返信 * 編集 ]

Re: aki 様へ

タグリストの終了タグの件、ご指摘いただきありがとうございます。
自分の忘備録として書いているブログなのでタグクラウドは必須なんですよ。

>passモードなので見れませんが。

おかげさまを持ちまして、私のブログは何時でも開店できる状態になり一度オープンしたのですが、現在利用しているlivedoorからSSL化に関するアナウンスがありました。
http://staff.livedoor.blog/archives/51967997.html
実現は来年の春ということで、何とも気の長い話ですのが、FC2への移転はしばし見送りして模様眺めする気になっています。
http://nonn634.blog.jp/archives/81095154.html
いすれにしても、転居先の環境を整えたので何時でも引っ越せると思うと気が楽です。
慣れの問題だと思いますが、既存の記事を手直しする事の多い私の場合、FC2のエディターはイマイチです。いっそのこと、ブログではなくWikiの方が向いているかも知れないとも思うのですが。
2019-10-02-06:10 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

無事に引っ越し出来ましたか。良かったです。(passモードなので見れませんが。^^;)
また何かございましたらご連絡下さいませ。

p.s. 当方はタグリストを付けていないのでよく分かりませんが、下記のリンクに簡単な利用説明がありますのでご参考に。
https://fc2blogstaff.blog.fc2.com/blog-entry-116.html
https://help.fc2.com/blog/manual/group99/1446

それと、コメントに記述されている終了タグが閉じていませんので修正下さいね。
× </p<!--/tag_list-->
○ </p><!--/tag_list-->
2019-10-01-22:40 * aki [ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました。
先ほど引越ししました。
向後ともよろしくお願いします。

PS、記事本文にタグリストを付けたかったので、適当な場所に以下を書きました

<!--tag_list--><p>TAG :<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a></p<!--/tag_list-->
2019-10-01-11:51 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

一つにまとめてレス致しますね。(^^)

先ず全文表示テンプレに適用…ですが、同様にそのままスタイルシートに全文コピペして下さい。
全文表示のカスタマイズはHTML部分の改変なので、それが完了しているのであればスタイルシートを貼り付けるだけです。
https://sorauta1.blog.fc2.com/blog-entry-285.html
(↑この作業が済んでいるのであれば、スタイルシートを全てコピペするだけです。)
もしご心配ならば、複製を作って作業して頂くと安心です。

リストマークの表示…についてですが、スタイルシート上部に記述されている reset css で ol,ul,li に list-style-type:none; を指定しているので、新たに記述して頂ければ反映致します。
スタイルシート編集枠の一番下にでも
(例)
ul li{list-style-type:circle;}
ol li{list-style-type:upper-alpha;}

のように追記述して頂ければリストマークが使えます。
ただ、メニュー部分のリストについてはカラム幅やmargin,padding 等で位置が随分とずれてしまいますので、下記のように記述して下さい。
nav ul{padding-left:15px;}
nav ul li{list-style-type:circle;}
nav ol{padding-left:15px;}
nav ol li{list-style-type:upper-alpha;}

(リストマークの形状はご自由に。)
詳しくは下記のURLをご覧下さい。
https://www.tagindex.com/stylesheet/list/list_style_type.html

それと大変申し訳無いのですが、先般の貼り付け用スタイルシートに記述漏れが有りましたので、下記を追記して更新をして頂けます様お願い致します。

ご自身でフォント指定をされている部分に、赤文字部分を追記して下さい。

body{
font-size:1.0em;
color:#fff; /* 基本文字色 */
line-height: 1.8;
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "Osaka","Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","MS Pゴシック","UDデジタル教科書体","Yu Gothic UI",Verdana, sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-overflow-scrolling:touch !important;
word-wrap: break-word;
overflow-wrap: break-word;

}

(赤い部分は、表示範囲内に収まらない単語がある場合の折り返し方法についてのスタイルです。)
また、下記コメントのCSSリンクも修正済みですので、再度コピペしてご利用頂く事も出来ます。
お手数お掛け致しますが、宜しくお願い致します。m(__)m
2019-09-30-20:43 * aki [ 返信 * 編集 ]

リスト表示をしたい

御礼とは別スレッドにしました。
教えてください。

リスト文「<ul><li>~</li></ul>」や「<ol><li>~</li></ol>」を、「点付き」や「数字付き」で表示したいと思います。
どのように修正すればよいでしょうか?
2019-09-30-08:44 * 呑兵衛あな [ 返信 * 編集 ]

Re: aki 様へ感謝

修正済みCSSを適用しました。
いや~、実に至れり尽くせりで感激です。
鉛筆マークを大きくしていただき、ありがとうございます。とっても見易くなりました。
全画面表示版CSSにも適用したいと思いますので、修正箇所を教えていただければ助かります。
但し私は、糖尿病で硝子体手術を奨められているほど視力が悪く、タブレットから見る場合に備えて「記事編集」のテキストボタンし追加しましたので悪しからず。
2019-09-30-08:41 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

お返事が遅くなり申し訳ございませんでした。
修正済みCSSを作りましたので、下記を開いて表示されたスタイルを全てコピーし、お手持ちの『ct_responsive3c (nightscape)』スタイルシートに貼り換えて下さい。
呑兵衛あな様がご自身で変更されたフォントサイズ100%と使用フォント(font-family)、テーブルボーダーも記述済みなので、そのまま使えると思います。

https://blog-imgs-131.fc2.com/s/o/r/sorauta1/yakei3c-ex.css

適用してみて不具合がございましたら、お手数ですが再度ご連絡下さいませ。
宜しくお願い致します。m(__)m
2019-09-29-22:33 * aki [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

質問の取消しの件、了解致しました。(^-^)

「2019-09-28-08:42 蛇足ですが」 にある、3カラムcssを表示するとFirefoxで文字化けする、との件ですが、エンコードを変えてみて頂けますか?
Firefoxを起動して頂き右上のメニュー、≡ → テキストエンコーディング の中にある自動判別を日本語にして下さい。
(メニューバーのあるブラウザの場合は、表示 → 文字エンコーディング → 自動判別 → 日本語)

一応当方のFirefox(ver.40.0)では問題無く表示されておりますので、お手数ですがエンコードをご確認下さいませ。m(__)m
2019-09-28-14:53 * aki [ 返信 * 編集 ]

質問の取り消し

先に質問した以下について取り下げます。
1.「2019-09-28-08:28付け」の中で「Q4」
質問した後で治りました。キャッシュのせい?

2.「2019-09-28-08:42付け」の蛇足については、「web material *Essence」を発見しました
2019-09-28-11:15 * 呑兵衛あな [ 返信 * 編集 ]

蛇足ですが

ct_responsive>着せ替え nightscape
https://sorauta1.blog.fc2.com/blog-entry-294.html
記事に紹介されている「『ct_responsive』暗色CSS(3カラム用)」
https://blog-imgs-123-origin.fc2.com/s/o/r/sorauta1/yakei3c.css
をFirefoxで表示させると文字化けします。Chromeであれば化けませんでした。

素材サイトのURLを教えてください
2019-09-28-08:42 * 呑兵衛あな [ 返信 * 編集 ]

No Subject

こんなにも素早く回答いただけるとは思ってもいませんでした。
今朝、ベットでタブレットを眺めていましたら回答いただいているのを知り、いつもは未だ寝ている時間に起きて修正しました。
ご指導いただいた箇所はすべて修正しましたので、ご報告します。
「Q1.フリーエリア」の件で『テーブルを使わず<div>を使う』との事。知りませんでした。
早速、現在運用中の物の記述も変えました(笑)

私は現在livedoorブログを利用中でそれなりに満足しているのですが、常時SSL化が行われない事に業を煮やして、半年先とかのスパンでFC2ブログに引っ越すかも知れない未来に備えているのですが、なかなか気に入った環境に持ち込めずにおりました。
しかし、今回の試行で大いに満足する内容となりましたので、livedoorブログの対応を云々と眺めていないで、FC2ブログに引越ししようかしらんと思い始めています。

もう2点教えてください。
Q3.ct_responsive をエントリー全文表示にして試行している事は、以前申し上げました。
暗色CSS(3カラム用)を適用した場合の表示が、アレっなのです。
暗色CSS(3カラム用)を適用しない場合は『要約された個別の記事』が表示され、個別記事に画像が有れば嘉造と記事が表示され、『画像が無ければ、記事が画像エリアに被さるようにして表示される仕組み』と見ました。
ところが、暗色CSS(3カラム用)を適用した場合、『画像が無ければ、そこが空白となり、記事が画像エリアに被さらない』のです。

Q4.この貴ブログをタブレット(Android 4.4.2)から見た場合、画面右上の「プラグイン表示できるボタン」を押下すると『ブログ記事のドコにいても』プラグインがプルダウンメニューで開閉します。
しかし、ct_responsive 暗色CSS(3カラム用)を適用した場合、『ブログ記事の中ほどより下側』にいくと「プラグイン表示できるボタンは表示されていますが、プルダウンメニューが開閉しなくなります」

以上、慌てませんのて教えていただきたく、お願いします。
2019-09-28-08:28 * 呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

初めまして。この度はテンプレートをDL頂き、誠に有難うございます。
早速ご質問の件です。また、ご質問外で修正頂きたい所が幾つかございますので、大変お手数とは存じますが、返答の最後に記述致します旨を修正・更新下さいませ。m(__)m

>Q1.フリーエリアに以下のタグを書いたのですが、線と色が表示されません。

…スタイルシート上部にあるreset cssでテーブルのボーダーを0にしているため表示されない、というのが理由です。
表示させるには、スタイルシート編集枠の一番下に
table {
border: 1px solid #cccccc;
}

を追加して頂くか、若しくはフリーエリアに記述しているテーブルタグにスタイルを追加して頂く方法が有ります。
上記のスタイルを追加すればテーブルのボーダーは表示されますが、プラグインに指定している背景色や文字色は反映されません。
「HTML5で廃止・非推奨のタグが使われている」ため、と申しましょうか。
正しくCSSで記述しますと、

<div style="margin:0 auto; width:180px;">
<table style="border:1px solid #cccccc;">
<tbody>
<tr>
<td style="text-align:center;">
<span style="color:#ffffff;">禁煙始め<script type="text/javascript" src="https://www.nannichime.net/s.php?d=2015/10/16"&f=y></script></span>
</td>
</tr>
</tbody>
</table>
<table style="border:1px solid #cccccc;">
<tbody>
<tr>
<td style="text-align:center; background-color:#ff0000;"><span style="color:#ffffff;">〇〇〇〇熱望</span>
</td>
</tr>
</tbody>
</table>
</div>


となりますが、テーブルを使わず<div>を使うともっと簡単になります。

<div style="margin:0 auto; width:180px; border:1px solid #cccccc; text-align:center;">
<span style="color:#ffffff;">禁煙始め<script type="text/javascript" src="https://www.nannichime.net/s.php?d=2015/10/16"&f=y></script></span>
</div>
<div style="margin:0 auto; width:180px; border:1px solid #cccccc; text-align:center; background-color:#ff0000;">
<span style="color:#ffffff;">〇〇〇〇熱望</span>
</div>


HTML5では、要素<center>や<font>,属性<table>や<td>のbgcolorは廃止されております。
他にも廃止や非推奨になっているものが沢山ございますので、詳しいサイトを是非ご覧になって下さい。
https://www.tagindex.com/html5/basic/ 【HTML5の基本- TAG index】


>Q2.1つの記事だけを全記事表示させた場合、記事の下部に「更新日順」として当該記事の前後の記事タイトルが表示されるハズですが、表示されません。

…この個別ページリンクは最近の更新で取り付けた装備なので、カスタマイズCSS『nightscape』には実装されていないスタイルです。
カスタマイズ方法として近日記事に掲載するつもりでしたが、少し遅れてしまっております。申し訳ございません。
『nightscape』に適用する場合は、スタイルシート編集枠の最下段に、下記のCSSをコピー&ペーストして下さい。

.entry-navi{
margin:0 auto 20px;
width:100%;
font-size:12px;
}
.entry-prev{
list-style:none;
margin:0 5px 0 15px;
}
.entry-next{
list-style:none;
margin:0 15px 0 5px;
}
.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 #999;
border-right: solid 2px #999;
-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 #999;
border-right: solid 2px #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


後は更新ボタンを押して下さい。

-----------------
次に、お手数ですが修正頂きたい箇所のご案内です。
現在のテンプレートの状態では、レスポンシブ1カラム(タブレットやスマホ等、閲覧幅が750px未満)の時の右に隠れたメニューが固定及び小さく格納されておりません。
何度か修正した際の、当方の見落としだと思います。
申し訳ございませんが、下記の部分を修正・更新をお願い致します。

スタイルシート編集枠内3/4程の所にある
nav{
position:absolute;
top:0;
bottom:0;
height:100vh;
width:270px;
right:-270px;
padding-bottom:50px;
background:#000;
z-index:5;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.tree{
display:none; /* メニューを閉じて表示 */
}

という部分を下記のように変更

nav{
position:fixed;
top:0;
bottom:0;
height:100vh;
width:270px;
right:-270px;
padding-bottom:150px;
background:#000;
z-index:5;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.tree-m{
display:none; /* メニューを閉じて表示 */
}


以上ですが、修正頂けましたら確認致しますので、改めてコメント頂けると幸いです。m(__)m
2019-09-28-01:07 * aki [ 返信 * 編集 ]

No Subject

ct_responsive3cに暗色CSSを適用して運用試行しています。以下について御教授いただきたく質問いたします。

Q1.フリーエリアに以下のタグを書いたのですが、線と色が表示されません。

<center>
<TABLE border="1">
<TBODY>
<TR>
<TD width="180" align="center" bgcolor="#ffffff">
<font color="#FFFFFF">禁煙始め<script language="JavaScript" src="https://www.nannichime.net/s.php?d=2015/10/16"&f=y></script></font>
</TD>
</TR>
</TBODY>
</TABLE>

<TABLE border="1">
<TBODY>
<TR>
<TD width="180" align="center" bgcolor="#ff0000"><FONT color="#ffffff">〇〇〇〇熱望</FONT></TD>
</TR>
</TBODY>
</TABLE>
</center>

Q2.1つの記事だけを全記事表示させた場合、記事の下部に「更新日順」として当該記事の前後の記事タイトルが表示されるハズですが、表示されません。
暗色CSSを適用しなければ正規に表示できます。なお。「 font-size:100%; /* フォントサイズは1em(16px)の80% */」にて文字サイズを「80%⇒100%」に変えたので収容枠からはみだしたのかしらんとも思いましたが、80%にしても表示乱れが出ます。

<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
以下、省略

以上2点について御教授いただきたく、よろしく願いします。
素敵なテンプレートが嬉しくなっています。
2019-09-27-20:33 * 呑兵衛あな [ 返信 * 編集 ]