*Essence

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

個別記事ページに同じカテゴリーのページ送りを付ける

個別記事ページに同じカテゴリーのページ送りを付ける

確か、2019/09 中旬以降の更新で全てのテンプレートに標準で付けたと思いますが、それ以前のテンプレートに不備だった『同一カテゴリーのページ送り』を付けるカスタマイズです。9月上旬にユーザー様よりお問い合わせ頂いた件で、更新以前のユーザー様にも有益なカスタマイズなので記事にしようと思っておりました。遅くなりましたが、この度 回答しているものを掲載させて頂きます。記事を読む際に、更新日で辿ってもカテゴリー...

... 続きを読む

確か、2019/09 中旬以降の更新で全てのテンプレートに標準で付けたと思いますが、それ以前のテンプレートに不備だった『同一カテゴリーのページ送り』を付けるカスタマイズです。
9月上旬にユーザー様よりお問い合わせ頂いた件で、更新以前のユーザー様にも有益なカスタマイズなので記事にしようと思っておりました。
遅くなりましたが、この度 回答しているものを掲載させて頂きます。

記事を読む際に、更新日で辿ってもカテゴリーで辿っても、表示されるページは個別記事ページです。
この"個別記事ページ"に仕込んであるページ送りが 2019/09 中旬以前にDLされたテンプレートだと『更新日順』のみなので、記事の後、コメント入力欄(投稿可の場合)の前に下記のように表示されます。

ページ送り
↑更新以前のものは、こんな感じに表示されています。

…なので、更新日順とカテゴリー順の両方付ければ閲覧されている方が選べて良いのでは?と、『更新日順』と『カテゴリー順』の両方を付けるカスタマイズです。

ページ送り1
↑こんな感じに変更するカスタマイズです。

ページ送り2
↑カラム幅が狭い場合の表示はこんな感じ。




先ず、HTML編集枠内半分くらいまでスクロールした所に下記のような箇所が有ります。
(検索は[Ctrl+Fキー]で <!-- トップページ ここまで --> と入力。枠内に1ヶ所有り)
その2,3行下に、

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


という部分が有ります。この青文字部分を削除し、下記(オレンジの部分)をコピーして同じ場所に貼りつけて下さい。

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


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

@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%;
}
}

.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 #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);
}


後は更新ボタンを押して頂ければ完了です。
カスタマイズをする場合は、テンプレートの複製を作って作業すると安心です。(^_^)
(コメントにて質問を頂いたページはこちら↓)
https://sorauta1.blog.fc2.com/blog-entry-337.html




lace-d3c,d2c のカスタマイズ(エントリー要約表示)

lace-d3c,d2c のカスタマイズ(エントリー要約表示)

lace-d3c(3カラム), lace-d2c(2カラム)は、11月02日の記事『告知済みの古いテンプレート削除しました。』で一つだけ残したテンプレートなのですが、申請・共有化したのは何と10年前の2009年08月09日!今迄何度かの更新を経て来ましたが、最近までDLが有ったのでこの度の削除対象から外し、改めてHTML5・レスポンシブ化して更新致しました。最近の素敵なテンプレートから見たらかなりレガシーデザインでは有りますが、もし お気...

... 続きを読む

lace-d3c(3カラム), lace-d2c(2カラム)は、11月02日の記事『告知済みの古いテンプレート削除しました。』で一つだけ残したテンプレートなのですが、申請・共有化したのは何と10年前の2009年08月09日!
今迄何度かの更新を経て来ましたが、最近までDLが有ったのでこの度の削除対象から外し、改めてHTML5・レスポンシブ化して更新致しました。
最近の素敵なテンプレートから見たらかなりレガシーデザインでは有りますが、もし お気に召して頂けましたらご利用下さいませ。m(__)m

で、そのレスポンシブテンプレート lace-d3c(3カラム), lace-d2c(2カラム)の記事表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の全文表示になっています。
これを要約表示に変更する方法です。

lace-d31cm.jpg
クリックで見本を表示↑3カラム


lace-d21cm.jpg
クリックで見本を表示↑2カラム

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[lace-d2c(d3c)]のHTML編集枠を開いて <!-- 要約表示用HTMLの貼り換え ここから--> という所から <!-- 要約表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい(コピー&ペースト)。
不具合が有った時のために『複製』を作成して作業する事をお勧め致します。m(__)m

Read More


<!-- 要約表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<article class="con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area--> <%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<!--div class="kiji1"--><!--kiji1-->
<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';"></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
<!--/div--><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con2_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji1 kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><!--permanent_area--><%topentry_body>
<!--more_link-->
<a href="<%topentry_link>#readmore">Read More</a>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</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>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
<!--/permanent_area-->
</div>
<!-- 要約表示用HTMLの貼り換え ここまで-->


Return

新着記事にNewマークを表示

新着記事にNewマークを表示

昔から有るカスタマイズなので今更感は有りますが、JavaScriptでよく使われている『document.write』を使わないでNewマークを表示する方法です。JavaScript(以下JS)の『document.write』はHTMLに何かを書き出す時に使う記述なのですが、ブラウザのレンダリングに悪影響を与えるそうで、HTML5では非推奨になっています。しかも仕様書では非常に厳しい「strong discouraged(強く非推奨)」、使えなくなった訳では無いですが出来れ...

... 続きを読む

昔から有るカスタマイズなので今更感は有りますが、JavaScriptでよく使われている『document.write』を使わないでNewマークを表示する方法です。

JavaScript(以下JS)の『document.write』はHTMLに何かを書き出す時に使う記述なのですが、ブラウザのレンダリングに悪影響を与えるそうで、HTML5では非推奨になっています。
しかも仕様書では非常に厳しい「strong discouraged(強く非推奨)」、使えなくなった訳では無いですが出来ればこれを使わずに【Newマーク】を出したい…と、色々探してみたのですがなかなか見つけられず。(;^_^A
JSと<span>とdisplayの値で操作する方法も有りますが、それだとHTML内に残るspan要素をクローラーが読んでしまうので今一つ…。出来れば新旧クロスブラウザ(IEも)で表示させたい…。


11/09 『FC2ブログNEWマークのdocument.write書き換えコード』を
The other way round の AkiraさんがJS版の掲載をしていらっしゃいます。m(__)m

FC2ブログNEWマークのdocument.write書き換えコード

「ひとつの方法」です。やり方はそれこそ無数にありますので、現段階でこの方法が良いかもしれないなぁ、というものを提案してみようと思います。...

何より表示する位置を選ばない、プラグインの新着記事の最終更新日や新着コメントにも使える、画像も表示できる、等…こちらの方が色々使い勝手が良いのでお勧め致します。
また、当方テンプレートでの追加位置を、記事最下段にある追記( ReadMore )に掲載しておりますので、是非ご利用下さいませ。


以下は当方がjQuery版のscript記事を11/06に掲載したものです。こちらもご参考にどうぞ。m(__)m
* - - - - - - - - - - *
…で、見付けたのがtime要素。日付のセマンティック・マークアップは<time datetime="">年月日</time>とする方が良いとの事。
↓こんな感じに表示させるカスタマイズです。
Newマーク


先ず、テンプレートのHTML編集枠内、記事日付表示部を探します。
(検索は[Ctrl+Fキー]で<%topentry_year> と入力。枠内に1ヶ所有り)

<%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
この部分を下記のように変更

<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)</time>

オレンジ色の部分が追記した部分です。
次に、下記のJS(jQuery)をHTML編集枠内一番下段 </body> の真上に追加

<script>
$(function(){$("time").each(function(){var c=new Date();var b=c.getTime()-(
2*24*60*60*1000);var a=new Date($(this).attr("datetime"));var d=a.getTime();if(b<d){$(this).before('<span style="color:red;font-size:0.9em;margin-right:5px;">New</span>')}})});
</script>

</body> (←↑こんな感じに</body>の上に追記)

青文字の22日間Newマークを表示します。変更する場合は(必ず半角英数で)青文字部分を必要日数にして下さい。

Newマーク3
また、文字では無く画像を表示したい場合は <span style="color:red;font-size:0.9em;margin-right:5px;">New</span> の部分を <span><img src="画像のURL" alt="New!" style="margin:0 5px -2px 0;"></span> のように <span></span> で画像タグを挟んで下さい。
style="margin:0 5px -2px 0;" の部分は画像の場合の表示位置です。4つの数値は(左から)上・右・下・左 になっているので、余白を広げたい場合は正の値・狭めたい場合は負の値で調整して下さい。

Newマーク2
Newマークや画像を日付の後ろに表示したい場合は、上記JS(jQuery)の青文字beforeの部分をafterに変更し、表示位置を下記のように調整して下さい。
・文字の場合↓
style="color:red;font-size:0.9em;margin-left:5px;" 文字の左側余白
・画像の場合↓
style="margin:0 0 -2px 5px;" 画像の左側余白(4番目の数値)
文字は左右の余白のみ(大きさはfont-size:の数値増減)、画像は周囲の余白で調整出来ます。

後は更新ボタンを押して頂ければ完了です。(不具合が有った場合に備えて、複製を作っておくと安心です。)



----- 因みに上記のJSは、下記を圧縮したものです。

更新日時が2日以内であればNewマークを表示する(jQuery)
(2 * 24 * 60 * 60 * 1000) の一番初めの数値が表示する日数

$(function () {
$('time').each(function(){
// 現在日時
var current = new Date();
// 2日前のミリ秒
var range_ms = current.getTime() - (2 * 24 * 60 * 60 * 1000);

// 更新日時
var modified = new Date($(this).attr('datetime'));
// 更新日時のミリ秒
var modified_ms = modified.getTime();

if (range_ms < modified_ms){
$(this).after('<span style="color:red;font-size:0.9em;margin-right:5px;">New</span>');
}
});
});



このJS(jQuery)の出典は下記サイトです。
http://php.o0o0.jp/article/jquery-new [ 私的雑録 ] 様
(上記サイトに書いてある[非jQuery版]はIEで表示出来ませんでしたが、[jQuery版]はWin10にて、
IE10(開発者ツール),IE11,Edge,GoogleChrome,Opera27.0,Firefox40.0で表示を確認、現行OperaやFirefoxでも確認しました。)
当方のテンプレートでは初めからGoogleのCDNから jQuery3.3.1 を読み込んでいるので直ぐに使用できますが、もしテンプレート内に記述が無い場合は、下記のscriptタグをNewマーク表示用のJSより上に追記して下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
バージョン3.3.1で確認済み。それ以外のものは未確認です。
(ただ、MDNでは time要素 datetime属性のどちらもIEは互換性無しになってるのに、何で使えるのか不思議…^^;)

当方不勉強なので、間違っている・こうした方が良い等のお気付きが有る方は是非!ご連絡下さいませ。m(__)m


『The other way round』様で作成された、jQueryを利用しないNewマークを表示するJSを使用する場合は、下記のReadMoreをクリックして表示して下さい。

Read More


共有化されているテンプレート全て、同じ位置の記載で表示出来ます。

■ 『New』の文字で表示する場合
JavaScript(HTML編集枠)下段に有る
<script>objectFitImages();</script> の下に追加
<script>
for(var s=2,c=new Date,n=document.querySelectorAll("[data-newdate]"),i=0;i<n.length;i++){var d=new Date(n[i].dataset.newdate);d.setDate(d.getDate()+s),c<d&&(n[i].classList.add("new"),n[i].innerHTML="New")}
</script>


■ 『画像』を表示する場合
JavaScript(HTML編集枠)下段に有る
<script>objectFitImages();</script> の下に追加
<script>
for(var s=2,c=new Date,n=document.querySelectorAll("[data-newdate]"),i=0;i<n.length;i++){var d=new Date(n[i].dataset.newdate);d.setDate(d.getDate()+s),c<d&&(n[i].classList.add("new"),n[i].innerHTML="<img src='画像URL' alt='New'>")}
</script>

文字の場合も画像の場合も、s=2 という部分が表示する日数です。(2は2日)

■ 表示するための(文字・画像)共通コード
<span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span>
このコードを、下記の表示位置に挿入して下さい。

記事タイトルの前に表示する場合
記事タイトル前
(検索は[Ctrl+Fキー]で <a href="<%topentry_link>"> と入力。枠内に1ヶ所有り)
<a href="<%topentry_link>"> の前に上記コードを記述

記事タイトルの後に表示する場合
記事タイトル後
(検索は[Ctrl+Fキー]で <%topentry_title></a> と入力。枠内に1ヶ所有り)
<%topentry_title></a> の後に上記コードを記述

日付の前に表示する場合
日付の前
(検索は[Ctrl+Fキー]で <%topentry_year> と入力。枠内に1ヶ所有り)
<%topentry_year> の前に上記コードを記述

日付の後に表示する場合
日付の後
(検索は[Ctrl+Fキー]で (<%topentry_youbi>) と入力。枠内に1ヶ所有り)
(<%topentry_youbi>) の後に上記コードを記述


■ スタイルシート編集枠内最下段に追加
Newマークを記事タイトル、または日付の前に表示する場合
/* Newマーク、日付・タイトル前 */
.new{
margin-right:5px;
font-size:0.9em; /* 文字サイズ */
font-weight:normal;
color:red; /* 文字の色 */
}


Newマークを記事タイトル、または日付の後に表示する場合
/* Newマーク、日付・タイトル後 */
.new{
margin-left:5px;
font-size:0.9em; /* 文字サイズ */
font-weight:normal;
color:red; /* 文字の色 */
}


画像を記事タイトル、または日付の前に表示する場合
/* 画像、日付・タイトル前 */
.new img{
margin:0 5px -2px 0; /* 左の数値から、上右下左の余白 */
}


画像を記事タイトル、または日付の後に表示する場合
/* 画像、日付・タイトル後 */
.new img{
margin:0 0 -2px 5px; /* 左の数値から、上右下左の余白 */
}


確認ブラウザ -- Win10にて、
IE11,Edge,GoogleChrome,Opera27.0,Firefox40.0で表示を確認、現行OperaやFirefoxでも確認済み。)


Return

Re: やぴこ 様へ * by aki
いつも楽しい記事とコメントのやり取り、拝見しております。(^-^)
カスタマイズも楽しめているようで何よりです。
元のテンプレがどんなのだったか、分からないくらいの改変を見るのも楽しいので、是非ドンドン試してみて下さいね。

p.s. 納車の後、帰路で高速道路を走りまして、すごい量の虫衝突&鳥の糞攻撃に遭遇。(^^;
早速「運が付いたね。。(;'∀')」と旦那さんと苦笑いしました。
今迄の車は15年、多分今度も10年位は乗るでしょう。
(私、物持ちいいので。( ー`дー´)キリッ)

こんにちは * by やぴこ
akiさん、こんにちは。
いつもお忙しい中、丁寧に対応してくださりありがとうございます(^-^)

New✨やフォントのこと等詳しく書いてくださったのに、トップ画像にチョコ(自宅にいるハムスターです)を入れたくなりハマってしまいました…

たぬこさんにあれやこれや教えて頂き、ハンバーガー🍔やポテト🍟等食しながらなんとか落ち着きました🙆

納車の為の帰省だったのですね。
うちの車はまだきてません…
待ち遠しい分楽しみです♪

とりとめもないコメント、お礼も込めて…お邪魔いたしました。


Re: t 様へ * by aki
コメント頂き有難うございます。
でもまぁ、ブログのカスタマイズは、色々試して・楽しみながらやるのが一番ですから。(^^)
お気に召すまで、沢山弄ってみて下さい。
カスタマイズ失敗した時のために、複製を作るのをお忘れなく。(^-^)

では、暫し帰省して参ります。。

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

Re: y 様へ * by aki
後程そちらへ伺いますね。(^-^)

Re: 徳川たぬこ 様へ * by aki
セマンティックは「意味を持たせる」という意味で、マークアップは「印をつける」という意味です。
HTMLタグ自体に意味を持たせて、内容を分かりやすく検索エンジンに伝える記述の事を「セマンティックなマークアップを書く」と言います。
そうする事によって、SEOが上がったり、ユーザーのページ操作を補助する標示になったりするそうです。
『なんちゃってHTML5』な当方のテンプレートでは、正しいセマンティック・マークアップが出来ているとは言えませんが、これが正しいよと示せるよう勉強しなきゃいけないですね。^^;

それと、HTML内にちょっと気になる所が有ったので、後程そちらに伺います。m(__)m

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

毎度おさわがせします * by 徳川たぬこ
ありがとうございます
せ、セマンティック? セマンティックが止まらない的な?

すみません^^;またよくわからないのに使用してしまいました これでは意味がないですね💦


ちなみに前はこちらを参考にしておりました
https://sakuraxren.blog.fc2.com/blog-entry-736.html
document.writeとあり、これがセマンティックのですね^^;今意味がわかりました(←本当にわかったのかは怪しい)
いつもお騒がせしてすみませんorz💦


---追記---
リベンジでつけてみました!

Re: 徳川たぬこ 様へ * by aki
<time>は、日付や時刻を表すための要素ですので、その使い方はセマンティック的には違うかな~と思います。
まぁ、使えなくはないのですが。^^;
(実際、は○なブログでのカスタマイズ記事に、何方かがタイトル脇に表示する同様の方法を書いてますし。)

ご利用頂いて、不具合が有るようでしたらお教え下さいね。

Re: - y様へ * by aki
後程そちらへ伺いますね。(^-^)

告知済みの古いテンプレート削除しました。

告知済みの古いテンプレート削除しました。

9月2日に告知しておりました古いテンプレートを、11月1日削除致しました。古い共有テンプレート、整理します。(2)ただ、直近までDLの有った lace-d2c , lace-d3c のみレスポンシブ化し、10月26日に更新しております。クリックで見本を表示↑3カラム(トップページ全文表示タイプ)クリックで見本を表示↑2カラム(トップページ全文表示タイプ)後日改めてカスタマイズ方法を掲載致しますので、ご入用の方はお待ち下さいませ。m(__)...

... 続きを読む

9月2日に告知しておりました古いテンプレートを、11月1日削除致しました。
古い共有テンプレート、整理します。(2)
ただ、直近までDLの有った lace-d2c , lace-d3c のみレスポンシブ化し、10月26日に更新しております。

lace-d3cm.jpg
クリックで見本を表示↑3カラム(トップページ全文表示タイプ)

lace-d2cm.jpg
クリックで見本を表示↑2カラム(トップページ全文表示タイプ)

後日改めてカスタマイズ方法を掲載致しますので、ご入用の方はお待ち下さいませ。m(__)m



Re: 呑兵衛あな 様へ * by aki
いつもご愛顧頂き有難うございます。m(__)m

サムネイル画像が変わらない現象は、FC2の仕様によるものです。
記事の編集画面にあるサムネイル画像は、初めに投稿した時の一番初めに有る画像になります。
が、その後記事内の画像が変わっても初回時の画像になったままで、一度サムネイルを削除しないと過去画像のまま…だそうです。^^;

下記のURL記事に詳しく書いて有りますので、是非ご覧になって下さいませ。m(__)m
https://vanillaice000.blog.fc2.com/blog-entry-625.html
[ 記事内の画像を変更してもサムネイルが変わらないという方へ ]
- The other way round - Akira様

No Subject * by 呑兵衛あな
お疲れさまでした。
余談ですが
「投稿済の画像を、別画像に取り換えた場合の表示」的な「画像投稿試験」を行って気が付きました。
投稿済の画像を変更しても「要約表示」画面には旧画像のままで新画像に変わらないですね。「全文表示」すれば新しい画像が表示されるんですね。

「ct_responsive3c」(更新日:2019/10/26)以外にも、共有や公式の「レスポンシブ対応テンプレート」でも同じでした。
「要約表示」で表示される画像として「サムネール画像を用いる為に新旧が反映されない」のかしらん(?)、それともレスポンスの問題かしらん(?)、とも考えたのですが、FC2ブログ提供の公式プラグインである「アルバム」画面の「サムネール画像」では即座に新画像が表示されるのですから、別に原因が有るのでとょうか

テンプレートの修正・更新致しました。10/26

テンプレートの修正・更新致しました。10/26

ご利用の方には何度も更新して大変申し訳ないのですが、「genial_resp2c,3c」「ct_responsive2c,3c」「lace-al2,al3」の3種テンプレートの背景画像をCSS記述に変更致しました。今までと見栄えは変わりませんが、こちらも先日(10/22)の更新同様に『サーバーへの画像リクエストを減らす』『エラー等で画像表示が出来ない場合』を考えて、CSSで表示可能なもの(この度は水玉とストライプ)を修正・更新致しました。変更したスタイル...

... 続きを読む

ご利用の方には何度も更新して大変申し訳ないのですが、「genial_resp2c,3c」「ct_responsive2c,3c」「lace-al2,al3」の3種テンプレートの背景画像をCSS記述に変更致しました。
今までと見栄えは変わりませんが、こちらも先日(10/22)の更新同様に『サーバーへの画像リクエストを減らす』『エラー等で画像表示が出来ない場合』を考えて、CSSで表示可能なもの(この度は水玉とストライプ)を修正・更新致しました。
変更したスタイルは下記のようになっています。

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

gn-50-50.jpg 「genial_resp2c,3c」
body::before{
background:#e7f7e7 url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色+背景画像 */
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

を下記のように変更

body::before{
/* ストライプの背景を他の画像にする場合は、ここから↓ */
background:-webkit-repeating-linear-gradient(
left, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 3px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 7px, rgb(255,255,255) 7px, rgb(255,255,255) 9px, rgba(255,255,255,0) 9px, rgba(255,255,255,0) 13px, rgba(255,255,255,.5) 13px, rgba(255,255,255,.5) 16px);
background:repeating-linear-gradient(
90deg, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 3px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 7px, rgb(255,255,255) 7px, rgb(255,255,255) 9px, rgba(255,255,255,0) 9px, rgba(255,255,255,0) 13px, rgba(255,255,255,.5) 13px, rgba(255,255,255,.5) 16px);
background-size: 16px 1px;
/* ↑ここまでを削除し、代わりにbackground-image:url(画像のURL);を入れる */

background-color:#e7f7e7; /* 背景色 */
background-position:center;
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

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

ct-50.jpg 「ct_responsive2c,3c」
body::before{
background:#fff url(https://blog-imgs-123.fc2.com/s/o/r/sorauta1/wgg-st4-1.png) repeat center; /* 色+背景画像 */
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

を下記のように変更

body::before{
/* ストライプの背景を他の画像にする場合は、ここから↓ */
background:-webkit-repeating-linear-gradient(
left, rgb(255,255,255), rgb(255,255,255) 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px);
background: repeating-linear-gradient(
90deg, rgb(255,255,255), rgb(255,255,255) 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px);
background-size:6px 2px;
/* ↑ここまでを削除し、代わりにbackground-image:url(画像のURL);を入れる */

background-color:#dcdcdc; /* 背景色 */
background-position:center;
background-repeat: repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

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

lal-50.jpg 「lace-al2,al3」
body::before{
background-image:url(https://blog-imgs-31.fc2.com/s/o/r/sorauta1/ssbg-p3.gif);
background-color:#e6b9b3;
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

を下記のように変更

body::before{
/* 水玉背景を他の画像にする場合は、ここから↓ */
background-image:-webkit-radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%), -webkit-radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%);
background-image:radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%), radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%);
background-size:20px 20px;
background-position: 0 0, 10px 10px;
/* ↑ここまでを削除し、代わりにbackground-image:url(画像のURL);を入れる */

background-color:#ebc3bb; /* 背景色 */
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}


上記のように変更しなくてもテンプレートに問題はございません。また、表示も体感する程の変化は有りません。
表示されない等のご不安が有る場合に、是非 画像からCSSへの変更をお願い致します。m(__)m


Re: 徳川たぬこ 様へ * by aki
いつもお手伝い頂き、有難うございます。m(__)m
きっとヤプミーのご友人様も、初見で制作者の所に来る事自体敷居が高いでしょうから、気持ち的に助かっているのではないでしょうか。
そして当方もとても助かっております。(説明下手なもんで…^^;)

ページの表示スピードは、載せるものによって随分左右されます。
サーバーが所以になってしまう部分はどうしようもないですが、表示する画像の量、画像自体の容量、サイドメニューのプラグインやウイジェット、バナーなどの量、読み込むリクエストやリンクの量、etc.… 自力調整する事で時間短縮できる部分は多くあります。

色々有ったら楽しいですが、表示に支障が出ない程度に抑える事でブログを見に来る方の離脱率が下がりますので、是非とも気を付けたいですね。^^;
(…って、ほぼ自分に言い聞かせ、です。)

報告です * by 徳川たぬこ
本日、ヤプミー様のブログ開設に伴い、genial2clをダウンロードさせていただき、カスタマイズのお手伝いをいたしまして、
ページスピードインサイトを試してみたところ
モバイル99点、PC100点という驚きの数字がでました
すごい、めちゃめちゃ速いですよ(๑˃ᴗ˂)و♡ 思わぬところで体感できました
あとでhttps://gtmetrix.com/も試してみようかと思います笑

Re: 徳川たぬこ 様へ * by aki
なるほど、略ですか。(^^)
PageSpeed Insights のスコアだと、時間帯にもよりますが(PCもモバイルも)90点超と優秀ですね。
ただ、『サーバー応答時間の短縮』はFC2のサーバー頼みですし、『オフスクリーン画像の遅延読み込み』は、色んな遅延読み込みのJSを試してみても診断結果に出るんですよね。^^;(なので、一番軽いJSにしています。)
まぁ、どちらも0.1~0.3秒程(?)なので、許容範囲かなと。m(__)m
同じくスピードテストの【 GTmetrix 】https://gtmetrix.com/ は試されましたか?(海外サイトなので夜中に試すとかなり待たされます。^^;)
こちらのスコアでも PageSpeed A、YSlowScore B になってますね。
YSlowScore B については、サーバー次第で自助努力出来ない部分が多いので、Bは優秀だと思います。(私もBですし、これ以上はちょっと難しいです。)

スコアが良いと、何回でも試してみちゃいますね。(;´∀`)

こんにちは(ᐥ꒳ᐥ )すみません * by 徳川たぬこ
PSI、ページスピードインサイトをカッコつけて略してしまいました(^^;; 
https://developers.google.com/speed/pagespeed/insights/

私も10年目指して頑張ります(๑˃ᴗ˂)و

Re: 徳川たぬこ 様へ * by aki
コメント頂き有難うございます。(^-^)
10年超、FC2ブログ運営してますが…まだ350件弱ですので、1000件超えるには更に10年超 いやもっと必要です…。^^;
今後、テンプレートを作るネタは切れても、日記ぐらいは書き続けて(亀更新ですが)1000件目指しますか。
たぬ子さんも頑張って『散歩日記』書いて下さいね♪

ところで、PSIって何ですか?不勉強でスミマセン。m(__)m

お疲れ様です * by 徳川たぬこ
修正・記事更新お疲れ様です。体感的にもPSI的にも違いがわかりませんでしたが、いつか記事数が1000件を超えた時に体感できるのでしょうね^^ ぜひご一緒に体感しましょう