*Essence

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

Top Page › Template › テンプレ修正等 › 全文表示タイプテンプレートに加筆修正しました。
2019-07-26 (Fri) 01:06

全文表示タイプテンプレートに加筆修正しました。

2019/07/26 の更新で、トップページが全文表示タイプの、『serene_resp』『lace_al』 の2カラム及び3カラムを修正・更新致しました。
加筆したのは、カテゴリー別及び月別のアーカイブを表示する際に、ずらずらと記事自体が設定件数分表示されてしまうのを、タイトルリストにして表示するためのHTML追加です。
本文に記述している内容が少なかったり、表示設定している記事件数が少なければ気にならないかもしれません…が、内容が濃い・件数が多い場合は探すまでのスクロール量が半端無いので、^^; 気になる方は是非!下記のように追記・編集をお願い致します。m(__)m

その他、要約表示タイプテンプレートでの適用に関しては、後日カスタマイズ記事として掲載致しますのでお待ち下さいませ。


【serene_resp の場合】
1) HTML編集枠1/5程スクロールした以下(オレンジ文字)の所に(茶色文字の文全て)を入れる。
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)

<!--/titlelist_area-->
<!-- 全記事リスト終了 -->
</div>

この間に下記を入れる
<div class="menu3">
<!--プラグイン3-->
<!--not_permanent_area-->


----------------

<div class="archive">
<!-- カテゴリーリスト開始 -->
<!--category_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title tape" style="text-align:<%plugin_third_talign>">Category</h2>
<div class="title_list">
<h3 class="menu_title" style="margin:10px -5px 25px;">カテゴリ「<%sub_title>」の記事一覧</h3>
<!--topentry-->
<p class="all_body" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>の記事を表示する"><%topentry_title></a></p>
<!--/topentry-->
</div>
</section>
<!--/category_area-->
<!-- カテゴリーリスト終了 -->

<!-- 月別アーカイブリスト開始 -->
<!--date_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title tape" style="text-align:<%plugin_third_talign>">Monthly</h2>
<div class="title_list">
<h3 class="menu_title" style="margin:10px -5px 25px;">月別アーカイブ「<%sub_title>」の記事一覧</h3>
<!--topentry-->
<p class="all_body" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>の記事を表示する"><%topentry_title></a></p>
<!--/topentry-->
</div>
</section>
<!--/date_area-->
<!-- 月別アーカイブリスト終了 -->
</div>





2) 同じく1/3程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)

<div class="blog">
<!--not_category_area--><!--not_date_area-->
<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->

若しくは下記のようになっている場合有り。その場合も

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!--not_category_area--><!--not_date_area-->
<!-- トップページ ここから-->

のように、<div class="blog"> の下に追記する。




3) 同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)

</article>
<!--/topentry-->
<!-- トップページ ここまで -->
<!--/not_date_area--><!--/not_category_area-->





【lace_al の場合】
1) HTML編集枠を少し(al2)スクロールした以下(オレンジ文字)の所に(茶色文字の文全て)を入れる。(al3は1/5程枠内スクロール)
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)

<!--/titlelist_area-->
<!-- 全記事リスト終了 -->

この間に下記を入れる
<!--プラグイン3-->
<!--not_permanent_area-->


----------------

<!-- カテゴリーリスト開始 -->
<!--category_area-->
<div class="con2">
<section>
<div class="menu3_title" style="text-align:<%plugin_third_talign>">カテゴリ「<%sub_title>」の記事一覧</div>
<!--topentry-->
<div class="all_body">
<p class="all_day" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></p>
</div>
<!--/topentry-->
</section>
</div>
<!--/category_area-->
<!-- カテゴリーリスト終了 -->

<!-- 月別アーカイブリスト開始 -->
<!--date_area-->
<div class="con2">
<section>
<div class="menu3_title" style="text-align:<%plugin_third_talign>">月別アーカイブ「<%sub_title>」の記事一覧</div>
<!--topentry-->
<div class="all_body">
<p class="all_day" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></p>
</div>
<!--/topentry-->
</section>
</div>
<!--/date_area-->
<!-- 月別アーカイブリスト終了 -->





2) 同じく1/4程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)

<!--not_category_area--><!--not_date_area-->
<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->




3) 同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)

</article>
<!--/topentry-->
<!-- トップページ ここまで -->
<!--/not_date_area--><!--/not_category_area-->

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


Re: 猫母 様へ * by aki
私自身が自分に分かるように書いておりますので、随分と長ったらしい・回りくどい文章で申し訳ないです。^^;
カスタマイズは自由なので、HTMLやCSSが分かって来ると自分色にテンプレートを変える事が出来ます。
是非、少しずつ試して行って下さいね。
分からない事は一緒に悩みますので、気兼ね無くお声を掛けて下さいませ。(^-^;

素晴らしい回答に感謝! * by 猫母
akiさま、CSSの知識が全然無いのですが、細かく説明頂いてなんとなく理解(したつもり 笑)
明日、落ち着いた時間に変更してみます(^○^)v
   (複製作ってからでしたネ)
「高機能テキストエディタ」も試してみたいです。
知識はないけど興味とやる気だけはある。
ご丁寧な回答に貴重な時間を割いて頂き、本当にありがとうございました。
お互いが安心できるケージが良いですねe-247e-251

Re: 猫母 様へ * by aki
勝手に訪問致しましたのに、早速のお返事、誠に有難うございます。m(__)m
テンプレートの文字サイズの件ですが、当方『新入力モード』を使った事がございませんので、的外れな回答でしたら申し訳ないです。。

テンプレートの編集画面下段に『スタイルシートの編集』という枠が有ります。
その枠内わりと上の方に
html{
font-size:85%; /* フォントサイズは1em(16px)の85% */
overflow-x:hidden;
}

というように記述して有るかと思います。
この部分がテンプレートの基本文字サイズになります。

デフォルトのフォントサイズは16pxと言われていて、どんな端末でも程良く読めるサイズでは有るのですが、サイト(ブログ)デザイン的な見栄えに関してはちょっと大き過ぎてバランスに欠けます。
(なので、多くのデザイナー様のテンプレートも文字はそんなに大きくないかと。)
新入力モードでの文字サイズMediumは16pxです。
当方テンプレートでは、そのサイズの85%を基本にして表示しているので、smallの記述サイズになってしまうのだと思います。
参考に。
px  em    %    css2.1  font要素
19px 1.188em 118.8%  large   4
16px 1.0em   100%   medium  3
13px 0.813em 81.3%  small   2
11px 0.688em 68.8%  xx-small  1

テンプレートの基本文字サイズを調整したい場合は、スタイルシートの85%の部分を変更してみて下さい。
プレビューで確認し、更新ボタンで確定します。不安が有る場合はテンプレートの複製を作ってから作業すると安心です。(^-^)
(入力モードでの不便さに関しては当方ではどうにもできません。申し訳ないです。的外れな返答でしたら再度コメント下さいませ。)

記事投稿のモードは、旧モードの場合HTMLやCSSを直接記述できるので色々出来るのですが、それが難しい場合は旧モード投稿画面に有る横並びのボタン右から2番目の『W』というボタンを押すと「高機能テキストエディタ」が開くので、これを使って頂くと直接編集より簡単に色々出来ます。(ワードみたいな感じ)
やれることの多さは、新入力(簡単)モード<旧モード高機能テキストエディタ(中級?)<旧モードHTML直接入力(慣れてる方向け・上級?)ですね。
記事は下書きでも投稿した後でも削除できますので、試しに使ってみるのも良いかもしれません。(但し、投稿した後の削除だと記事ナンバー自体は振られているので、記事番号を表示するタイプのテンプレだと番号が抜けてしまいます。当方のテンプレは表示しませんが、有っても非表示に出来ます。^^;)

猫とウサギは…なんとかやってます。普段はお互い無干渉っぽいです。^^;
誰も居なくなる時はどっちかをケージに入れます。可哀そうだけど。
確かに、ウサギが走ると猫の手が反射的に出ちゃうんですよね。
…それがやっぱり怖いかな。(^_^;)

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

先程のコメント * by 猫母
何も考えずに書いちゃいましたが、ペットの事など不都合がありましたら削除して下さいませ。
重ね重ね、すみませんv-13

serene_resp2c-lのユーザー 的外れのコメントかもヾ(;´▽`A`` * by 猫母
akiさん、こんにちは。現在「serene_resp2c-l」を使わせて頂いてます。
ブログ開設1ヶ月未満で、テンプレ着替え中だったので最初のDL時はご挨拶もせず失礼しました。今のが着心地良く3カラムも試してみたくてDLさせて頂きました。
まだ使い込んでいないしFC2ブログも初めてで、マニュアルも全然読まずに使っている無謀なブロガーなので、今日は「感じた事」を書かせて頂きます。
◆文字の大きさで困った事
HTLMやCSSの知識が皆無に近いので、新入力モードで記事を入力していますが、そこで変更出来るサイズが small→Medium→Large...と大きくなって行き、文字サイズは 2→3→4…。「serene_resp2c-l」は何も指定しないと文字の大きさは サイズ2の small で、小声の表現として小さい文字を使いたいとき、HTLM表示にして文字サイズを変更する必要があり、ちょっと面倒かなとワガママですm(^ ^;)m  基本の文字サイズは今のsize="2"が好みですが、記事の編集画面の文字サイズのMediumがsize="2"になれば、HTLMを知らない人も小文字が使えると思いました。
◆頂いたコメント P.S.の返信
久し振りに色々なペットサイトを放浪しましたが、猫と兎の同居については結局「お茶を濁す記事」ばかりでした。兎さんのことは何も分かりませんが、猫とは付き合いが長く、その猫ちゃんが「元は飼い猫なら大丈夫」のように思います。(保証は出来ませんが) 猫は同じ哺乳類として人間の縮図のように感じています。今まで飼った猫はすべて『衣食足りて礼節を知る』で、好きな食べ物でも盗むことは無かったです。ただ、猫も若いうちは動く物に弱いので、akiさんちの猫ちゃんはどうかな~?とは思います。
猫は大昔から人間のペットとして君臨しているだけあって、年取っても可愛さ満載。平和に歳を重ねている先輩の兎さんと、楽しく幸せにいたわり合える同居が出来るよう祈っています。きっと大丈夫♪
◆リンク
最後に、akiさんの「*Essence」のリンクと、まねっこで里親募集中などのリンク、張らせて頂きます。お許し下さい。
また、akiさんのテンプレの中でまた着替えさせて頂くかも。
この先もよろしくお願いします。
メールはこっぱずかしくて、超長コメですみません(;^ω^)
-猫母@衣裳持ち-

Comment-close▲

Comment







管理者にだけ表示を許可

aki Re: 猫母 様へ

私自身が自分に分かるように書いておりますので、随分と長ったらしい・回りくどい文章で申し訳ないです。^^;
カスタマイズは自由なので、HTMLやCSSが分かって来ると自分色にテンプレートを変える事が出来ます。
是非、少しずつ試して行って下さいね。
分からない事は一緒に悩みますので、気兼ね無くお声を掛けて下さいませ。(^-^;
2019-08-06-00:30 * aki [ 返信 * 編集 ]

素晴らしい回答に感謝!

akiさま、CSSの知識が全然無いのですが、細かく説明頂いてなんとなく理解(したつもり 笑)
明日、落ち着いた時間に変更してみます(^○^)v
   (複製作ってからでしたネ)
「高機能テキストエディタ」も試してみたいです。
知識はないけど興味とやる気だけはある。
ご丁寧な回答に貴重な時間を割いて頂き、本当にありがとうございました。
お互いが安心できるケージが良いですねe-247e-251
2019-08-05-23:03 * 猫母 [ 返信 * 編集 ]

aki Re: 猫母 様へ

勝手に訪問致しましたのに、早速のお返事、誠に有難うございます。m(__)m
テンプレートの文字サイズの件ですが、当方『新入力モード』を使った事がございませんので、的外れな回答でしたら申し訳ないです。。

テンプレートの編集画面下段に『スタイルシートの編集』という枠が有ります。
その枠内わりと上の方に
html{
font-size:85%; /* フォントサイズは1em(16px)の85% */
overflow-x:hidden;
}

というように記述して有るかと思います。
この部分がテンプレートの基本文字サイズになります。

デフォルトのフォントサイズは16pxと言われていて、どんな端末でも程良く読めるサイズでは有るのですが、サイト(ブログ)デザイン的な見栄えに関してはちょっと大き過ぎてバランスに欠けます。
(なので、多くのデザイナー様のテンプレートも文字はそんなに大きくないかと。)
新入力モードでの文字サイズMediumは16pxです。
当方テンプレートでは、そのサイズの85%を基本にして表示しているので、smallの記述サイズになってしまうのだと思います。
参考に。
px  em    %    css2.1  font要素
19px 1.188em 118.8%  large   4
16px 1.0em   100%   medium  3
13px 0.813em 81.3%  small   2
11px 0.688em 68.8%  xx-small  1

テンプレートの基本文字サイズを調整したい場合は、スタイルシートの85%の部分を変更してみて下さい。
プレビューで確認し、更新ボタンで確定します。不安が有る場合はテンプレートの複製を作ってから作業すると安心です。(^-^)
(入力モードでの不便さに関しては当方ではどうにもできません。申し訳ないです。的外れな返答でしたら再度コメント下さいませ。)

記事投稿のモードは、旧モードの場合HTMLやCSSを直接記述できるので色々出来るのですが、それが難しい場合は旧モード投稿画面に有る横並びのボタン右から2番目の『W』というボタンを押すと「高機能テキストエディタ」が開くので、これを使って頂くと直接編集より簡単に色々出来ます。(ワードみたいな感じ)
やれることの多さは、新入力(簡単)モード<旧モード高機能テキストエディタ(中級?)<旧モードHTML直接入力(慣れてる方向け・上級?)ですね。
記事は下書きでも投稿した後でも削除できますので、試しに使ってみるのも良いかもしれません。(但し、投稿した後の削除だと記事ナンバー自体は振られているので、記事番号を表示するタイプのテンプレだと番号が抜けてしまいます。当方のテンプレは表示しませんが、有っても非表示に出来ます。^^;)

猫とウサギは…なんとかやってます。普段はお互い無干渉っぽいです。^^;
誰も居なくなる時はどっちかをケージに入れます。可哀そうだけど。
確かに、ウサギが走ると猫の手が反射的に出ちゃうんですよね。
…それがやっぱり怖いかな。(^_^;)

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

先程のコメント

何も考えずに書いちゃいましたが、ペットの事など不都合がありましたら削除して下さいませ。
重ね重ね、すみませんv-13
2019-08-05-14:03 * 猫母 [ 返信 * 編集 ]

serene_resp2c-lのユーザー 的外れのコメントかもヾ(;´▽`A``

akiさん、こんにちは。現在「serene_resp2c-l」を使わせて頂いてます。
ブログ開設1ヶ月未満で、テンプレ着替え中だったので最初のDL時はご挨拶もせず失礼しました。今のが着心地良く3カラムも試してみたくてDLさせて頂きました。
まだ使い込んでいないしFC2ブログも初めてで、マニュアルも全然読まずに使っている無謀なブロガーなので、今日は「感じた事」を書かせて頂きます。
◆文字の大きさで困った事
HTLMやCSSの知識が皆無に近いので、新入力モードで記事を入力していますが、そこで変更出来るサイズが small→Medium→Large...と大きくなって行き、文字サイズは 2→3→4…。「serene_resp2c-l」は何も指定しないと文字の大きさは サイズ2の small で、小声の表現として小さい文字を使いたいとき、HTLM表示にして文字サイズを変更する必要があり、ちょっと面倒かなとワガママですm(^ ^;)m  基本の文字サイズは今のsize="2"が好みですが、記事の編集画面の文字サイズのMediumがsize="2"になれば、HTLMを知らない人も小文字が使えると思いました。
◆頂いたコメント P.S.の返信
久し振りに色々なペットサイトを放浪しましたが、猫と兎の同居については結局「お茶を濁す記事」ばかりでした。兎さんのことは何も分かりませんが、猫とは付き合いが長く、その猫ちゃんが「元は飼い猫なら大丈夫」のように思います。(保証は出来ませんが) 猫は同じ哺乳類として人間の縮図のように感じています。今まで飼った猫はすべて『衣食足りて礼節を知る』で、好きな食べ物でも盗むことは無かったです。ただ、猫も若いうちは動く物に弱いので、akiさんちの猫ちゃんはどうかな~?とは思います。
猫は大昔から人間のペットとして君臨しているだけあって、年取っても可愛さ満載。平和に歳を重ねている先輩の兎さんと、楽しく幸せにいたわり合える同居が出来るよう祈っています。きっと大丈夫♪
◆リンク
最後に、akiさんの「*Essence」のリンクと、まねっこで里親募集中などのリンク、張らせて頂きます。お許し下さい。
また、akiさんのテンプレの中でまた着替えさせて頂くかも。
この先もよろしくお願いします。
メールはこっぱずかしくて、超長コメですみません(;^ω^)
-猫母@衣裳持ち-
2019-08-05-13:59 * 猫母 [ 返信 * 編集 ]