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 コメント欄アイコンの件 内緒さん(完了のご報告)

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