Francesca- FC2ブログテンプレート

プラグインのスクロールバーが出てきません

続きです。

こちらのページでデモを拝見した時は、
アイキャッチ画像をポイントすると記事の数行が出ることや
プラグインをしまえる（笑）ことでスピードが強化されていることなどから、
もう少し今のテンプレートを楽しんだ後には是非！と思っていたのが、
そんなわけで急遽ダウンロードしたのであります（笑。

実際に使ってみたら、
なぜだか「プラグイン」ウィンドウのスクロールバーが出てきません。

アタイのプラグインが多すぎるからか、とも思い、すべて外してみましたが、
デフォルトで入っている「新規記事」に関してもやっぱりスクロールバーが出現しません。

実は最初にFC2のテンプレートダウンロード画面のプレビューを見た時も同様でしたが、
プレビューだからだろうぐらいにしか思っていませんでしたｖｖ。
早くお伝え出来なくて申し訳ない。

今すぐテンプレートを変える予定はないのですが
気づいたからには気になってお節介に参上ましたm(__)m。

実際にご覧にならないとなんとも？という場合は
お手数ですが、どうぞご指導くださいませね。

などと書いておいて、自分の勘違いだったらすみませんです。
いつもながらガチャガチャうるさくて申し訳ないです(;^ω^)。ではではごきげんよう。

To こんさん

* スクロールバーの件

ご指摘の通りです。こんさんの勘違いではありません(笑)
サイドメニューの部位は多重スクロールバーにならない対策をしています。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser2020_5_4.png

通常だと上記のようにページ全体のバーとサイドメニューのバーが重複表示されて疎ましいので、サイドメニュー側のバーを非表示にしています。その処理がプラグインにも継承されていますので「出ない」という結果になっています。

Twitterのウィジェットなどを掲載している方もいらっしゃいますので、本件については修正しました。「プラグイン内のスクロールバーは表示させる」という処理です。
こんさんがお使いになる際には、可能であれば再DLをお願いします。再DLが困難な場合にはスタイルシート末尾に

.side_menu {scrollbar-width:auto!important}
.side_menu::-webkit-scrollbar{display:block!important}

を追加してください。ただしこの処理のためにテンプレート内のクラス名を一部変更しており、現在配布中のものは!important指定なしで提供しています。

ちなみにスマートフォンとMacでスクロールバーは表示されません。Macは「マウスまたはトラックパッドに基づいて自動的に表示」がデフォルトです。
「スクロール時に表示」
「常に表示」
のオプションは用意されています。
なのでMacユーザーに今回の変更はあまり意味が無いというか、対象外なのでご了承くださいね :)

To Akiraさん

Akiraさん、早速ありがとうございます！
勘違いじゃなくて安心しました～（爆。

まだどこも触っていないので、使用する際はご指摘通り再DLいたしまするね。
重ね重ね、ご教示ありがとうございましたm(__)m。

To こんさん

こんばんは ('0')/

はい。お手数おかけします。よろしくお願いします :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francescaご利用中の内緒さん

こんばんは。

> 古いページから新しいページに戻った時に、違うカテゴリーになっている事が多い〜

これなんですが、FC2の不具合あるいは仕様変更によるもの、あるいはその両方だと思います。運営に問い合わせを行います。
(本件については記事でアナウンスも行います)

> 個別記事ページ送りの複製について〜日付順のほうだけにする事は可能でしょうか？〜

できますよ。
<ul class="pager_entry-list">
を目印に検索すると2つ出てきて一つ目が時系列、もうひとつがカテゴリ移動なので
<ul class="pager_entry-list">
から直近の
</ul>
までを移動させてください。

> you may also like より上に表示する事はできますか？〜

基本的にはできません。FC2の仕様により表示順序は固定されています。
どうしてもという場合には以下の記事を参照して内容に沿った方法を選択してください。

参考記事: ランキングバナーやアフィリエイトバナーを好きな位置に表示するには
https://vanillaice000.blog.fc2.com/blog-entry-990.html

> you may also likeを同一カテゴリー関連に置き換えてみたのですが、フォントの変更の仕方ほどうすればいいのでしょうか？〜

具体的なフォント名がわからないとなんとも言えませんが、通常フォントと揃えるのであれば
.fc2relate_entry_thumbnail_on::before
で検索するとスタイルシート内に1箇所ありますので、ルールセット内の

font: bold var(--font_size-another-title)/1.5 'Hiragino Mincho ProN', YuMincho, 'MS PMincho', 'MS Mincho', serif;

の一行を削除し、

font-weight: bold;
font-size: var(--font_size-another-title);

に置き換えてください。

-----
ページ送りの件はお待ち下さいね。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francescaご利用中の内緒さん②

カテゴリのページ送りについては今記事を書いている最中なのでお待ち下さい。
「同じテンプレートを使っている人のを操作してみても特に問題はなかった〜」というのは、本件はとても入り組んだ問題になっていて、全く同一のテンプレートを利用していても個人設定・偶発的な問題(記事数など)も絡んでいるためです。
詳細は記事が公開をお待ち下さい。

-----
記事タイトルの件なんですが、

参考記事: テンプレートのhtmlに誤りがありました
https://vanillaice000.blog.fc2.com/blog-entry-1022.html

この際に上書き修正したはずが正しく反映されていなかったようで、今改めて配布ソースの上書きを行いました。
こちらについては再DLして頂くことで解消できますが、再DLが難しいようであれば上記記事内容に沿って修正をお願いします。お手数おかけします。

-----
> ブログタイトルのフォントやサイズ、色は変更できますか？Meiryo UIはどうでしょうか？ブログタイトルの下にブログの説明を追加できるでしょうか？〜

できます。
申し訳ないんですが、個人カスタマイズを一から十までつきっきりで行うことは致しません。できるだけご自身でお調べになってくださいね。
カスタマイズが予想される部位については記事内に明記してある通りあらかじめガイダンスをつけてありますので 事前に確認を行ってください。

注)主要カスタマイズ

で検索すると何がどの部位の指定なのかすぐにわかるようになっています。このリストの中に
/* ブログタイトル文字色 */
/* トップページ1ページ目以降ブログタイトル文字サイズ */
などもあります。

フォント種の変更の仕方については以前お伝えしましたので読み返して頂くようお願いします。
また、meiryo UIというフォントはwindows OSのコントロールパネルなど、設定の説明に特化したフォント種です。説明文の折返しを極力減らすために横幅を詰めているフォントで、ブログの文章などには向きません。
そして当然ですが Macにmeiryoやmeiryo UIというフォントはインストールされていません。

-----
> ABOUTのところですが、自分のプロフィールを入れるにはどうすれば〜

プロフィールページを作成し、そのページアドレスを # と置き換えてください。
この「ABOUT」については予備リンクですから用途が無ければ削除してくださいね。

> El-zigzag』で作っておられたようなプロフィールが表示できれば〜

El-zigzagのようなプロフィールが必要なのであればEl-zigzagの該当部位htmlとCSSを移植してください。弊テンプレート間での移植自体は許可していますがお手伝いは致しておりません。

-----
> カテゴリーやコメントしてくれた人のHNや三本線から×に代わるマークなどの色を今の赤から青に変更できますか？〜

/* ドロワー開閉ボタンなど背景色 */
で検索するとハンバーガーボタンの背景色の該当部位がでてきます。
コメント主アイコンの背景色は
.user-icon
のルールセット内
background-color: var(--bgcolor-box);
赤字部位を希望の色コードに変更してください。

-----
> 【現在閲覧中】の色を変更できるでしょうか？〜

content: "【現在閲覧中】";
で検索し、この直下に
color: 色コード;
を追加してください。

-----
> 個別ページのブログの更新日付の下の赤で表示されたカテゴリーの横にあるコメントの吹き出し表示を非表示に〜

<!--allow_comment-->
で検索し、この文字列を含み
<!--/allow_comment-->
までを削除。

-----
個人カスタマイズは原則 自身でできる範疇で自己責任で お願いしています。最初から全て人任せにされませんよう。
よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To テンプレート「表」の件 内緒さん

こんにちは。

tableのhtml, CSSを利用したい、という意味でしたらどうぞご自由に。
掲載画像の流用や直リンク等が無い、というのが絶対条件ですが、ここだけお守り頂ければバックリンク等一切不要です。
お気遣い・ご連絡をありがとうございます :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To ヘッダー画像枚数の増設 内緒さん

こんばんは。明日改めますね。「ご相談の件、拝見しました」という意味でお返事しています。
なかなか時間が取れず申し訳ないです (*_ _)
明日のもしかすると深夜になる可能性もあります。ご迷惑おかけします。よろしくお願いします。

ブログタイトルを画像に変更して中央に揃えたい

はじめまして。
akiraさまのテンプレートを使わせていただいております。いつもありがとうございます。

質問なのですがブログタイトルをテキストから画像に変更して、中央に揃えたいのですがどうしても左によってしまいます。どうしたら中央に揃えることができますか。

初歩的な質問で申し訳ありません。どうかご教授いただけませんでしょうか。
よろしくおねがいいたします。

To taroさん

お返事遅くなりました (*_ _)

まず、準備された画像なんですが、このままだと問題があります。
Francescaテンプレートはダークモード対応ですから、閲覧者がデバイスのダークモード設定をONにしているとブログ背景が暗色に切り替わります(DEMOページにある通りです)
現状で画像は背景「白」のjpgですから完全に浮いてしまいます。以下のような感じです。

参考
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/sc20210404_1.png

ロゴを作成する際のコツは
・文字白系と文字黒系の両方を準備し、必ず背景透過PNGで保存する
・余白を大きく取らない

余白を大きく取らない、というのは以下のような意味です。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/sc20210404_2.png

画像についている背景が大きいと、各デバイス表示(PC or タブレット or スマホ)の際の全体の余白調整が困難なので、できるだけギリギリの位置でカットしておくのが望ましいです。画像の背景余白は画像の一部なので小さいデバイスで「取り除く」といったことはできませんので、文字の表示領域がどんどん小さくなってしまいます。
この2点を踏まえてどうするか、というのが第一関門というか ^^;
ダークモードも、ONにするかOFFにするかは閲覧者個人の自由意志ですから強制及び矯正ができません。

で、このテンプレートはヘッダー自体もヘッダー内に記される文字列も特殊なもので、まずは画像の準備が整ってからでないと指南ができませんので、どうされるかご検討をお願いします。
あるいはそのフォントであればwebフォントがありますので、画像ではなくフォント(文字)として表記されるのが最も良い形です。

画像を作成できるかどうか、あるいはwebフォントに変更するかどうかのお返事をお願いします。
webフォントにされる場合はフォント名の明記もお願いします。

To Akiraさま

こんばんは。ご返信ありがとうございます。

画像にてのご説明大変わかりやすく感謝しております。お手数をおかけいたします。
ダークモード機能を失念しておりました。見やすい配慮設計に無駄を追加するようなことをしておりました。

akiraさまのご教授を受け背景透過pngを作成してみました。

白文字背景透過
https://blog-imgs-137.fc2.com/c/h/i/chillm4ple/20210404190023f2f.png
黒文字背景透過
https://blog-imgs-137.fc2.com/c/h/i/chillm4ple/20210404190022bcd.png

フォントはgoogle　Fontsの「Nothing You Could Do」を使用しています。
webフォントとして使えるのであれば好みなフォントであるので使わせていただきたいです。
よろしくおねがいいたします。

To taroさん

こんにちは ('0')/
いつも間が空いてすみません (*_ _)

フォントの方が良いと思いますので、その方法をお伝えしますね。
まず最初に現在カスタマイズされた内容ではよくないのでデフォルトに戻してください。複雑な箇所なのでスクリーンショットを掲載します。必ず照らし合わて同じ内容になるようにしてください。

------- html変更
<div id=<!--index_area-->index-<!--/index_area-->blog_title-container>
で検索するとhtml内に1箇所ありますので、それを目印にすぐ下段にあるa要素を以下の通り修正します。

<a id=blog_title-anchor href="<%url>">
<<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--> id=blog_title<!--index_area--> class=index-blog_title<!--/index_area-->><%blog_name></<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>
</a>

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/sc20210406.png

スタイルシートの内容は既にカスタマイズされていますので、全部はチェックしていませんがそのままでいけると思います。
(デフォルトまで戻す必要はない、という意味です)

続きまして
</head>
で検索すると1箇所ありますので、そのすぐ上、あるいはすぐ左に
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
を追加。

続きまして
#header-banner
で検索するとスタイルシート内に1箇所ありますので、そのルールセットを以下の通り変更

#header-banner {
width: 100%;
margin: 0 auto;
padding: var(--padding-header);
text-align: center;
}

* セレクタ(この場合は #header-banner)から始まって { の記号から } までを「ルールセット」と言います。

続いて
#blog_title
で検索するとスタイルシート内に3箇所あります。最初のものが対象です。ルールセット内
color: var(--color-blog-title);
color: var(--color-base);
に変更、そして
font: 〜 省略 〜
の内容を
font: calc(var(--font_size-blog-title) - .8em)/1.4 'Nothing You Could Do', serif;
に変更。

続いてスクリーンショットに従って、今作業した近接にあるルールセットを削除

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/sc20210406_2.png

続いて
#index-blog_title-container
で検索すると1箇所ありますので、そのルールセットを削除。ルールセット上に
/* index_area */
と付いていますがこれも削除してOKです。

-------
これで中央に寄りますけれども、フォントのサイズが
PC > タブレット > スマホ
の順で小さくなります。カスタマイズ時にブラウザの横幅を変更、あるいはモバイルビュー(右クリック「検証」で使えます)を見る、あるいは実機で見るなど目視確認を行ってください。小さいと感じる場合はまず最初に
--font_size-blog-title: 3.5rem;
を検索し、これがPCでのサイズなので調整、その上で
最初にカスタマイズした #blog_title の font の
calc(var(--font_size-blog-title) - .8em)
これがスマホでのサイズなので赤字部位の数字を小さく(例えば .5 など)に変更。

#blog_title の2つ目・3つ目、#blog_titleの上に
@media screen and (min-width: 661px) {
とあるのがスマホからタブレットまでのサイズなので調整。

--------
webフォントは読み込まれるまでのタイムラグがあるのでパパっと切り替わる状態が目視できてしまいます。
それがどうしても気になる、という場合はまた別の若干複雑な処理が要りますのでご相談ください。
よろしくお願いします。

To Akiraさま

こんばんは。ご返信ありがとうございます。
忙しい中、身勝手なお願いを聞いていただき感謝しております。

akiraさまのご指南をいただき、無事ブログタイトルを中央に置き好みのwebフォントに変更することができました。
無知な私であってもスムーズに編集できるよう綺麗で読みやすいコードで設計なされている配慮に改めて気付かされました。

今後もakiraさまの素敵なテンプレートを使わせていただきます。
改めて感謝申し上げます。この度は誠にありがとうございました。

To taroさん(完了のご報告)

お返事大変遅くなりました (*_ _)

完了したということで安心しました。お疲れさまでした :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To コメント欄アイコン画像について 内緒さん

こんにちは。
わー、またやってしまった… （￣∀￣；）
「また」です。これは2つとも私のミスです。ごめんなさい。

----- アイコン修正
.author-icon
で検索するとスタイルシート内に1箇所ありますので、このルールセット
object-position: center center;
の下に3つ内容を追加して以下の通り。

.author-icon {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center center;
position: absolute;
top: 0;
left: 0;
}

赤字部位が追加内容です。コメント欄ではインデントが除去されてしまいますが、無しで構いませんのでそのままコピペしてください)

----- 検索
これも毎回私打ち間違えてしまう (;`ｰ´)o
search
が正しいスペルなので修正してください ^^;

お手数おかけします。また、本件についてアナウンス記事を書きたいと思います。お知らせ頂いて助かりました。ありがとうございます :)

----- 追記 同日
スクリーンショットを使わせてもらえるとと嬉しいです。私のアイコンの部位のみカットしてアナウンス記事で利用させてもらえるととっても助かります(もちろん直リンクは致しません)
お返事頂ければ幸いです。よろしくお願いします (*_ _)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To コメント欄アイコンの件 内緒さん(完了のご報告)

こちらこそお手数おかけしました。スクリーンショットの許可もありがとうございます :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francesca 記事表示件数などの件 内緒さん

こんにちは ('0')/

> トップページの記事が何故か5件づつしか表示されません。〜

こちらはテンプレートではなくブログ個人設定です。以下のページで変更してください(ご自身の環境設定ページへ遷移します)
https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2

-----
> テンプレート側で一括で画像の表示サイズを指定することは可能でしょうか。〜

個別記事に掲載した画像、という意味で合ってますでしょうか。
本来はあまりおすすめできませんが、一括で調整したい場合は以下の内容をテンプレートのスタイルシート末尾に追加してください。

.inner-contents img {
max-width: 希望数値px;
}

注意点としては、

1. 記事内全ての画像に対し調整がかかりますので、仮に数点掲載し、そのうちいくつかを記事幅いっぱいにしたい、などの場合は対象画像に対し個別に指定をする必要があります。

2. 今後何らかのプラグイン(FC2の「プラグイン」ではなく、JSを用いて特殊な動作環境を与える類のもの)を導入した際、この指定によって上手く機能しない場合があります。
(例: ページに滞在したまま画像を拡大する など)

注意事項を踏まえた上で一度お試しください。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francescaトップページの件 内緒さん(完了のご報告)

　お返事遅くなりごめんなさい。

画像サイズの件、了解です。変更お疲れ様でした :)

タグのアイコンが表示されないんです

こんにちは！以前お世話になったittsuieです

僕はSNSをやらないので、トップページSNSの場所にタグの構文を引っ張って、タグ名も表示されて問題無くリンクページにも行くのですが、トップページのみタグのアイコンが表示されません

Devツールで確認してみると、use 0×0になってしまっています
何がいけないのでしょうか？

To ittsuieさん

取り急ぎのご連絡

返信が大変遅くなってしまいました。なかなかログインできず (´0｀)
本日夜分遅くになってしまいますが、ちゃんとお返事しますので今しばらくお待ちくださいね。ホントごめんなさい （￣∀￣；）

To ittsuieさん

遅くなってすみません。

まず、タグをトップ(グリッド系ページ)に、ということ自体は問題ないんですが、html, CSSの状態があまり良くないので修正された方が良いと思います。

【html】

まず、トップに転載した内容を以下の通り書き換えます。

<div class=top-snslist>
<!--tag_list-->
<a class=top-tag-link href="<%url>?tag=<%topentry_tag_list_parsename>"><svg class=svg-inline-stroke viewBox="0 0 64 64" role=img><use xlink:href="#inline-tag"></use></svg> <%topentry_tag_list_name></a>
<!--/tag_list-->
</div>

続いて、
<symbol id=inline-tag>
で検索するとhtml内の上の方に2箇所ありますので、2つとも
<symbol id=inline-tag>
から
</symbol>
までを削除。

2つめ目の方は上下にある
<!--tag_area-->
と
<!--/tag_area-->
も削除。

続いて、近接に
</defs>
</svg>
というのがありますので、</defs>の直前に以下の内容をペースト

<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area-->
<symbol id=inline-tag>
<g><path d="M25.6 61L3 38.4 38.4 3l21.2 1.4L61 25.6 25.6 61z" stroke-miterlimit="10" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><circle cx="48" cy="16" r="4" stroke-miterlimit="10" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"></circle></g>
</symbol>
<!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

【CSS(スタイルシート) * ダークモード対応無しを前提】

以下の内容をスタイルシート最終に追加。

/* トップ tagカスタマイズ */
.grid-item {
display: flex;
flex-flow: column;
}
.top-snslist {
flex: 1;
display: flex;
flex-flow: wrap;
justify-content: center;
align-items: center;
min-height: 5em;
padding: .5em 1em;
background: var(--bgcolor-point);
font-size: 10px;
}
.top-tag-link {
margin: .3em .5em;
color: white;
}

以上です。遅くなりましたこと重ねてお詫び致します。

To vanillaice (Akira)さん

Akiraさんこんばんは！
数か月、試行錯誤していましたが、教えて頂いた通りにしたら、ものの数分で表示されました

僕の脳ミソはエクセルの関数のように、”ここがこれならここもこれ”の感じで、イコールしか思い浮かびません
難しいですね～～～～

自己満足の世界ですが、タグアイコンがあるとオシャレ度が増した気がします
（*＾-＾*）

今回も、お忙しい中本当に有難うございました！！！

To ittsuieさん(完了のご報告)

こんにちは ('0')/
ご希望の通りになったのであればよかったです。お疲れ様でした :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francesca ブログタイトルの件 内緒さん(完了のご報告)

お返事遅くなりました。
完了ということで良かったでしょうか。気づくのが遅れましたことお詫びします。
お疲れ様でした :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francesca ブログタイトル縦書きの件 内緒さん

こんにちは ('0')/

まず、縦書きについては非推奨です。
内緒さんの場合は画像が総じて白系なので、オーバーレイの濃さで調整されてはいかがでしょうか。

#crossfade::before
で検索するとスタイルシート内に1箇所ありますので、このルールセット内の
background: rgba(51,51,51,.1);
を
background: rgba(0,0,0,.4);
に書き換えます。太字の .4 が不透明度の調整なので、まだ見づらいという場合はここの数値を .5 や .6 などに増やします。 .8 ぐらいが限界かと思います。
一度お試しください :)

あと、全体幅の調整をされて
--width-main: 100%;
とされたようですが、これでは文章が表示領域の縦の辺にぴったりくっついてしまい、とても読みづらいです(パソコンでは気づきませんのでスマートフォンで目視確認してください)
できればもとの状態(93%) に戻されることをおすすめします。

早速のご返信ありがとうございます！
やってみました！が、今度は画像がくすんできれいに見えなくなったので、元に戻しました。
93％も戻しました。ご指摘ありがとうございます。
黒いラインが切れ目なく左右に広がっているようにと100にしましたが、スマホの確認を怠りました。
いろいろ御指南いただけて、感謝です。

To くさかりさん

こんにちは ('0')/

では別の方法をお試しください。テキスト周囲に白のシャドウを付けて背景と同化しないよう処理する方法です。
-webkit-background-clip: text;
を目印に検索するとスタイルシート内に2箇所あります。場所を見つけたら以下のスクリーンショットを参照しながら該当部位を削除します。該当部位以外の記号などを巻き込んで消してしまわないよう注意してください。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-10-02.png

続いて
#index-blog_title-container
で検索するとスタイルシート内に2箇所あり、最初の方が対象です。このルールセット内
margin: 0 -60% 0 0;
の下に

text-shadow: rgb(255, 255, 255) 1px 1px 3px, rgb(255, 255, 255) -1px -1px 3px, rgb(255, 255, 255) -1px 1px 3px, rgb(255, 255, 255) 1px -1px 3px, rgb(255, 255, 255) 0 1px 3px, rgb(255, 255, 255) 0 -1px 3px, rgb(255, 255, 255) -1px 0 3px, rgb(255, 255, 255) 1px 0 3px;

を追加。インデントをつける際には全角スペースを利用しないよう注意してください。あるいはインデントは付けなくても構いません。
上記の文字列中に 3px という記述が8箇所あります。これがぼかしなのでご自身で目視確認をして調整してください。最小値は 0 でぼかしが無くなります。最大は 4px 程度までが限度かと思います。

この方法をとる場合の注意点は、白系の画像のみを想定している点です。画像変更時には再考が必要になるかもしれません。
この方法でも納得行かないときは、タイトルと画像の表示領域が完全に分離しているか、ヘッダー画像が無いなどのタイプのテンプレートの選び直しをおすすめします。
一度お試しください :)

いつもすぐに答えていただきありがとうございます！

やってみますと、文字が白くなって見えなくなりました。黒い文字は画面が切り替わる時などに部分的にうっすら見える感じです。何度かやり直したのですが、うまくいきません。
それと、サブタイトルの文字が大きくなるようでした。

To くさかりさん

こんにちは ('0')/

まず、URL欄に記載して頂いたURLですが、こちらは保存前のプレビュー画面で開くことはできません。なのでどこでミスをしたのか目視確認ができません。

> サブタイトルの文字が大きくなった〜

ということは、
・消してはいけない文字列あるいは削除対象範囲の前後にある記号を削除してしまった
・インデントに全角スペースを使ってしまった

など色々考えられます。サブタイトルの文字が大きくなることはありませんので、スクリーンショットをしっかり見て、削除対象前後にある記号もしっかり見て、再度行ってください。
編集後の内容が以下のスクリーンショットのようになっていればOKです。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/2022-10-03_3.png

正しく行えば結果が以下のようになるはずです。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-10-03.png

-----
ダークモード対応が有効になっていますので、作業が済んだらもうひとつ追加をしてください。スタイルシートの最後でOKです。

@media (prefers-color-scheme: dark) {
#index-blog_title-container {
text-shadow: rgb(0, 0, 0) 1px 1px 3px, rgb(0, 0, 0) -1px -1px 3px, rgb(0, 0, 0) -1px 1px 3px, rgb(0, 0, 0) 1px -1px 3px, rgb(0, 0, 0) 0 1px 3px, rgb(0, 0, 0) 0 -1px 3px, rgb(0, 0, 0) -1px 0 3px, rgb(0, 0, 0) 1px 0 3px;
}
}

結果
https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/2022-10-03_2.png

明日からまたちょっと忙しくなるので数日ログインできないかもしれません。お返事遅れたらすみません。

できました！
忍耐強くご指導いただき、本当にありがとうございます！

To くさかりさん(完了のご報告)

こんにちは ('0')/
上手く行ったようで安心しました。お疲れ様でした :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francescaの件 内緒さん

こんにちは ('0')/
スクリーンショットを掲載しますので参照しながらお願いします。また、内緒コメントの場合は人物特定されそうな「画像」「文章」「URL記載」などができませんので、修正該当箇所もぼかして表現するしかありません。なので該当箇所を見つけるのが困難であったり、説明がわかりづらいという場合には公開コメントでお願いします。公開コメントであれば「この内容で差し替えてください」とhtmlの丸渡しもできるんですが (´・ω・｀)

まず、画像の件から。記事内で説明している通り、画像の指定箇所はPC用とスマホ用と 2箇所 あります。理由はPCでは大きい画像が必要ですが、スマホはそこまで大きくなくて良いため、同画像のサイズ違い(例: PC用画像は横1500px, スマホ画像は横800px など)
これはレスポンシブの基本で、画像容量の削減の問題ですが、面倒ならばどちらも同じ画像指定で構いません。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-10-25.png

目視確認は更新後の状態で行って頂きましたでしょうか。プレビュー画面はキャッシュの削除ができませんので、必ず複製を取った上でカスタマイズを開始し、カスタマイズを行ったら 更新 をして実際の状態を見るようにしてください。

-----
> グローバルナビゲーションの項目のうち、CATEGORY、ABOUT、SEARCHが動作しない。（ABOUTのみリンク有り、空ページ？）〜HOME、INDEX、RSS、LOG INは動作〜

aboutはテンプレートhtmlのガイダンスにある通り予備リンク(ユーザー任意指定リンク)なので不要であればガイダンスに従って削除するか、リンクの設定を行ってください。

categoryとsearchが動作しないのはカスタマイズによるhtml構文エラーとプラグインのhtml構文エラーが原因です。

① プラグイン「プロフィール」--- strong開始タグ欠損 + font終了タグ重複 + a終了タグ不正
修正提案 ↓
<div class="plugin-freearea" &align>
<div style="color: #8f8f8f;">....ようこそ<br>
現在,.......どうぞ　<br>
管理者：....<br><br>
<span style="color: #d7d7d7;">
<img src="xx.png" width="150" height="150" alt><br>
■......<br>
......<br>
......<br>
......<br><br>
<img src="xxx.png" width="150" height="150" alt><br>
■......<br>
......<br>
......<br><br>
<img src="xxxx.png" width="150" height="150" alt><br>
■......<br>
......<br>
......<br>
......<br>
......<br><br>
<img src="xxxxx.png" width="166" height="99" alt><br>
■......<br>
......<br>
......<br>
......<br>
</span>
</div>
</div>

もしかすると「aboutへどうぞ」のaboutの単語部分をリンクにしたかった可能性がありますので、その場合は

〜を取り扱っております。詳しくは<a href="遷移先URLに書き換え">About</a>へどうぞ

② fontタグ入れ子ルールの構文エラー + 欠損及び重複
font要素(fontタグ)は廃止属性であるのと同時に、display初期値がblockの要素を子要素にすることはできません。
説明が難しいと思いますので、「fontタグ<font>〜</font>で囲って良いのはa要素かspan要素程度」と覚えておいてください。というかfont要素自体廃止要素なので使うべきではありません。文章の色やサイズやフォント種を変更したいだけならばfontタグで囲う必要はありません。

・ プラグイン「カレンダー」--- font終了タグ欠損
<font face="Georgia"><div class="plugin-calender" &align>
<table summary="カレンダー" class="calender">
の部位を修正 ↓

<div class="plugin-calender" &align>
<table summary="カレンダー" class="calender" style="font-family: Georgia">

③ プラグイン「Category」---center終了タグ欠損
このプラグイン編集画面を開き
<center>
を削除。
また、このプラグイン自体構文エラーが多数存在していますし技術も古いので別のものへ変更をおすすめします。
参考記事: 弊テンプレートと相性の良い共有プラグインの紹介
https://vanillaice000.blog.fc2.com/blog-entry-954.html

-----
特にfontタグの不正が後々の要素まで悪影響を及ぼしていますので、まずはこれらプラグインの修正を行ってください。もしかすると治るかもしれません。改善されなければ他に原因がありますので、その時にまた検証しますね。

今回のように「同テンプレート利用の他の人は問題ないのに自分だけおかしい」という場合の原因はまず間違いなく以下のものです。
1. カスタマイズのミス(主に構文エラー)
2. プラグイン内容にミス
3. 記事内で利用したhtmlのミス(構文エラー)

今後のために、特定のページだけおかしい場合は記事内容に原因が、どのページでもおかしい場合はプラグインに原因がありますので、プラグインと判断できる場合には一旦全てのプラグインを非表示にし、一つづつ表示させて目視確認を行います。症状が出たらその時に表示させたプラグインが原因です。ただし原因は一つとは限りません。
html構文は厳正に利用しないとレイアウトを崩してしまいます。この機会に整理をおすすめします。

お返事、またご確認いただきありがとうございます。

>また、内緒コメントの場合～
そうですよね、毎度、苦慮されながらエラー訂正文を表記してくださっているのがわかりますので…
ご配慮いただきありがとうございます。
もしかしたら今後利用される方のなにかに役に立つかもしれないので、公開コメントで書き残させていただきます。

①ヘッダー画像の件
ごめんなさい、これは単純なミスで、半角スペースと半角スペースの間に全角スペースが入ってしまっていたのですが、
修正したつもりが別テンプレートの方で修正していたらしく、それで更新をかけてもヘッダーの画像が一部反映されない！　という状況になっていました。お騒がせしました。反映されなかったAboutへのリンクも、おそらく同様の理由でした。

②グローバルナビゲーションの件
ああっ！！！！!
なるほど、プラグイン…過去に適当に作ったまま放ったらかしにしていた心当たりがありまくりです…
テンプレートの中身だけ見ればいいと思っていたので、完全に意識の外にありました……
プロフィールとカレンダーのhtmlを修正したところ、無事カテゴリもサーチも、表示されるようになりました。本当にありがとうございます。

③カテゴリプラグインの件
こちらなんですが、ご指摘があるまで特にいじっていないのですが、どうしても　<center>　タグを見つけることができませんでした…
他に該当するのは　-700px center　や、　left center　くらいですが、<center>タグではありませんでした。
おっしゃる通り、こちらのプラグイン2010年程にお借りした年代ものなので、グローバルナビゲーションが機能しているならまあ不要ではあるんですが…、せっかくですし代わりになるものを探してみようかと思います。
修正案をいただいたのに、該当箇所を見つけられず申し訳ないです。

--------

基礎のテンプレートだけではなく、プラグイン等もしっかりアップデートしていかなければならないと、勉強になりました。
不具合も解消でき大変助かりました。また、素敵なテンプレートを配布していただき、ありがとうございました。

To グローバルナビゲーションの項目エラーが解消されました さん

こんばんは ('0')/

直ったようで良かったです。修正とテンプレート変更も併せてお疲れ様でした :)
お返事遅くなってごめんなさいね。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

TO 外部CSSの読み込み？ 内緒さん

こんにちは ('0')/

原因はメールフォームにcolor(文字色)の指定が無いのと、背景色を form という要素セレクタにしてしまったことです。
要素セレクタというのは以下のようなものです。

例) 以下の場合はページ内にある全てのform要素が赤背景になります。

form {background: red}

<form class="form1">内容</form>
<form class="form2">内容</form>

例) 以下の場合はページ内にある form1 というクラス名を持つform要素だけが赤背景になります。

.form1 {background: red}

<form class="form1">内容</form>
<form class="form2">内容</form>

form要素というのはページ内にいくつも使われる要素なので要素セレクタ指定は避けるようにしてください。
FC2メールフォーム側でそれができない場合には仕方が無いので、以下の内容を追加してください。

.fc2form {
color: カラーコード;
}

太字の部位は rgb(51,51,51) など適切なものに書き換えてください。

-----
現状の問題点

1. FrancescaはOSダークモード対応テンプレートです。閲覧者がダークモードをONにしている場合はページが暗転しますので、現在書き添えてある「返信が必要な場合は「メールアドレス」をご入力ください。」が背景と同化して読めなくなります。
2． formにpadding指定が無いため上下左右の辺とテキスト及びinput(入力欄)が接しています。そのためダークモード状態では不格好になります。
3. 今後別のform要素がサイドメニューなどに掲載された場合、CSS指定のバッティングが起こりいずれか一方の色調デザインが狂う可能性があります。

1と2についてはダークモード用CSSを削除することで対処可能です。paddingについては無いままですが、白背景なら区切りが目視できないので見た目に問題はありません(ブログまたはメールフォームの背景色を別々の色に変更した場合は問題が生じます)
/* darkmode 1/2 */
で検索し、この行を含め
/* end */
までを削除。

3についてはFC2メールフォームのCSSを記事内に記載するのであれば全体に影響が出ることはありませんが、このページに於いてのみは影響が出ます。

ダークモードの確認をされていない(ダークモードの利用を想定していない)ようなので、削除をおすすめします。
先に記したCSSをどこに記載するかですが、メールフォームが記事内掲載ならば、記事内の末尾に

<style>
.fc2form {
color: カラーコード;
}
</style>

でもOKです。ただし反映はされますがこの位置へのstyle要素記載はhtmlの構文としてはエラーなので、できればテンプレートスタイルシートの最終に追記することをおすすめします。

---------- 関連問題
FC2メールフォームのCSS自体が外部への埋め込みをあまり考慮していないため、ことごとく要素セレクタを使ったスタイリングを行っています。
テンプレートのスタイルシートよりもFC2メールフォームのスタイルシートの方が後に記載されているため、上書きされてところどころ背景と同化してリンクが見えなくなってしまっています(ナビゲーションリンクなど)

なのでhtmlをベタ打ちされるなどの対処が必要です。といっても意味が伝わらないでしょうから、この機会にFC2メールフォームについての記事を書こうかなと思っています。

また、鍵コメントの方へはスクリーンショットを利用した詳細な説明ができませんので、視覚的にわかりやすい指南をお求めの場合は公開コメントにされることをおすすめします。

記事を今日明日中にUPしますので、それまでお待ち頂ければと思います。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francesca メールフォームの件 内緒さん

こんばんは ('0')/
まず、メールフォームの方はうまく行ったようで良かったです。お疲れ様でした :)

>　何かが表示されすっとフレームアウトすることがあります〜

これなんですが、私もどうしようかと今迷っているところです。
この症状はPC版Chromeで顕著です。理由は、私のテンプレートではみなさんが記事内に記した a要素 などが自動的にふわっと切り替わるように transition というのを付けています。マウスホバーしたときに背景色や文字色がパっといきなり変わるのではなくふわっと変わりますよね。
他にもFrancescaを例にするとドロワーがスライドします。これもスライド時にいきなり出ずにスーっという感じでアニメーションしながら動きますよね。

これらの動きを全てJSでもって行うと表示速度が下がってしまうので、極力CSSを利用するようにしています。
ところがこのtransitionというのは『双方向』って言えばわかりますかね。ちょっと説明難しいんですけども、例えばドロワーならば初期状態から折りたたまれるまでに動きがつき(transformにtransitionがかかります, 初期状態というのはあくまでもtransformの値が0のときで、右側に閉じるにはtransformX(100%)です)、逆に折りたたまれた状態から開いたときにもtransitionがかかります。
あるいはフォントの色にしてもブラウザデフォルトから指定色になるのにtransitionがかかります。

そういう理由で、修正するには
1. 全てをtransitionではなくanimationに変更する
2. transitionの利用を辞める(JSへの変更またはふわっと動作なし)

1については扱いが困難になるので今のところ個人的に不可。2については、情緒の無いUIになってしまうけれども、こちらはありかなぁ、と考えています。あるいはごまかしにローディング画面を経由させるなど(次回作はこれを採用しています)

初回表示時のみの挙動なので、キャッシュが効いているときは起こりません。
私自身結論を持ち越している状態なので、原因の説明しかできないのをご容赦くださいね。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To 記事下の関連記事やENTRYのサムネについて 内緒さん

こんばんは ('0')/

記事にある通り、必須個人設定を行ってください。
4-3 の『メタタグの設定 > OGP設定「有効にする」』です。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Francesca OGPの件 内緒さん

こんばんは ('0')/
そうだったんですね。OGP自体が出力されていなかったので未設定かと思いました。
</head>はHTMLの構文ルール上では省略可能なんですが、FC2ブログのシステムで</head>を見つけてその直前にOGPの各要素を挿入、という方法を取っているのでうっかり消さないようご注意くださいね。
お疲れ様でした :)

カールテキストについて

こんにちは！
いつもお世話になりっぱなしのittsuieです

カールテキストを好んで使用しています
以前までは不具合無かったはずですが、Akiraさんのページでも確認出来たので問い合わせさせて頂きます

PC上では問題無いのですが、スマホ上（僕の場合はiPhone SE）だと画像のように、before・afterの部分が変な風に表示されます

https://blog-imgs-166.fc2.com/i/t/t/ittsuie/curltext.jpg

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/francesca_min_entry_mod.html

Re: カールテキストについて

こんにちは ('0')/

端的に言うとiPhone SEの固有グリッチです。(日本語のページがありましたので参考として掲載します)

参考記事(外部) : アイフォンSEは「position:fixed」した要素のz-indexが効かない - ゴリラドット様
https://gorilla.dododori.com/2650/

私がiPhone SEを所有しておらず実機確認が叶わないのでお手数ですがご協力お願いできますでしょうか。

【1】
.curl で検索し、
z-index: 3;
と
transform-style: preserve-3d;
の宣言を削除。

【2】
.curl:before
の
transform: translate3D(0,0,-1px) rotate(-3deg);
を
transform: rotate(-3deg);
に変更

【3】
transform: translate3D(0,0,-1px) rotate(3deg);
を
transform: rotate(3deg);
に変更

【4】
以下の内容をスタイルシート最終に追加

.main-body {
position: relative;
z-index: 1;
}

iPhone SEへの対策でそれ以外の機種がだめになるようなことがあってはいけないので、これでだめだともうどうしようもないというか。HTMLを変更するしかなくなります。
この内容で問題が無いようであればアップデート時に変更を行いたいと思います。目視確認のご協力をお願いします。

To ittsuieさん

別件です。
トップページをカスタマイズしたことによってスマートフォンのマウスホバー時にオーバーフロー(画面超過)が起こっています。スケールを他の要素と重ならないよう調整しつつ(タップ範囲が重なるのはSEO的にも減点です)、オーバーフローが起こらないよう(こちらはSEO的に大きな減点です)、マウス利用不可のデバイスでホバー動作を禁止するか、スケール自体の数値を調整するなどされることをおすすめします。

To vanillaice (Akira)さん

お忙しい中有難うございます！

【3】に関しては.curl:afterの部分と解釈して書き換えました

https://blog-imgs-166.fc2.com/i/t/t/ittsuie/curltext002.jpg

直ってくれました！

最後の部分、
.main-body {
position: relative;
z-index: 1;
}

最初この構文を書き忘れていましたが、表示は正常に表示されていました
現在は書き足しています

＞　トップページをカスタマイズしたことによってスマートフォンのマウスホバー時にオーバーフロー(画面超過)が起こっています

カスタマイズした後に、スマホでオーバーフロー(画面超過)を確認して修正したつもりでしたが、まだまだヘナチョコ野郎でした・・・
探りながら修正してみます

今回もお忙しい中、本当に有難うございました！！

To ittsuieさん

こんばんは ('0')/

この内容ならどのiPhoneでも上手く表示されそうですね。
デフォルトの内容はもともとiPhoneグリッチの対策だったんですが、年月が経って今度はiPhone SEでのみ噛み合わなくなった、というものです。実機を持たないのでお知らせ頂いてよかったです。
curlスタイル導入全テンプレートを修正したいと思います。ご協力ありがとうございます :)

CSSのスケールなんですが、その特性上、マウスホバーでタップ(クリック)のターゲットが大きくずれてしまう可能性があります。
例えば『カテゴリ』をクリックしようと思ったのにスケーリングで位置が変わって『個別記事』へ遷移してしまった、など。
なのでターゲットにズレが生じない範疇に数値調整されると良いですね。大きなスケーリングを採用できるのはアイテムが全体リンク(全体が一つのリンク, 遷移先が一つ)になっている場合ぐらいではないかと思います。

ぼっちんさんへ

Akiraさんこんにちは！
いつもお世話になりっぱなしのittsuieです

全くの御門違いを招致での投稿です

ぼっちんさんのサイトで、コメントを送ろうとしても送信ボタンが現れてくれないので、コメントを送れない状態になっています

僕のサイトで以前、コメントを貰った記事から返信してみましたが、気付いてくれません

テンプレートの工事中にしては期間が長いので、コメント機能に不具合があるんでは無いでしょうか？
「お名前・ご自身のサイトURL・コメント本文」の三項目を入力すると、送信ボタンが表示されます。
と書かれていますが、どうやっても送信ボタンは現れません

https://blog-imgs-166.fc2.com/i/t/t/ittsuie/bocchinnsannhenokomennto.jpg

ぼっちんさんに伝える術が無いので、ぼっちんさんが立ち寄る率が高いと思っている、Akiraさんのサイトをお借りしました

Akiraさん本当にゴメンナサイ

To ittsuieさん

ぎゃ～～～
ittsuieさん、とっても失礼致しました～
とりあえずコメント送信ボタンの制御は只今外しました (^_^; ｱﾊﾊ…

どうぞ、コメントお寄せくださいまし～ m(_ _)m

追記
Akiraちゃん、コメントスペースをお借りしまして申し訳ございません、ありがとうございます m(_ _)m

To ittsuieさん, ぼっちんさん

こんばんは ('0')/
解決されたなら良かったです。またお困りの際はどうぞ遠慮なくお使いくださいね。