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

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

テンプレート 配布中テンプレート
2020/05/01
36
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWDDarkmode
Francescaテンプレート

Francescaテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

最終更新 2022.7.9
  • prefetchの数を調整
名称 Francesca
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
1カラム
サイドメニュードロワー 		1カラム
サイドメニュードロワー 		1カラム
サイドメニュードロワー
サイドメニュー(ドロワー) --- 右 サイドメニュー(ドロワー) --- 右 サイドメニュー(ドロワー) --- 右
更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。 

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

ふらんちぇすか
承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE DEMO
画像クリックでデモ画面へ

* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。

目次へ戻る↑

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります。
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです。
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

目次へ戻る↑

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
目次へ戻る↑

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

目次へ戻る↑

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ？」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない？」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

vanillaice000.blog.fc2.com
目次へ戻る↑

ダークモード対応について

Supporting Dark Mode - how it works

本テンプレートはOSのダークモードに対応しています。詳細についてはお手数ですが下記リンク先の ダークモード対応について の章をご確認ください。

El-zigzag - FC2ブログテンプレート

El-zigzag - FC2ブログテンプレート

El-zigzagテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com
目次へ戻る↑

全体幅の調整

How to change width

グリッドレイアウトのページ横幅は最大 1300px、個別記事などグリッド以外のページ横幅は最大 900px に設定してあります。

カスタマイズの必要が有る方は、グリッドの横幅は メイン最大横幅、グリッド以外の横幅は 記事最大横幅 でそれぞれ検索し、適切な数値に変更してください。

目次へ戻る↑

ヘッダー画像変更

How to change images of header

3枚 設定できるようにしてあります。枚数の増減は表示秒数など計算が必要になりますので、自身で算出するか、どうしてもわからない場合はお問い合わせください。

また、スマートフォンでは 縦長、パソコンでは 横長 になり表示範囲が固定されていませんので、アスペクト比が変更されても意味のわかる画像を選択するようにしてください。被写体が上下左右の中央付近に位置するものが適しています。

負荷軽減のためスマホ用とパソコン用で画像のサイズを変更しています。スマホ用は横約800px、スマホ用は横約1600px程度をおすすめします。複数サイズを揃えるのが困難な方は 横1600px 程度で準備し、スマホ・パソコン共に同じURLを記載してください。スマホ用は スマホ用 ヘッダー画像、パソコン用は パソコン用 ヘッダー画像 で検索すると変更該当部位が出てきます。

目次へ戻る↑

ダークモード時の画像について

About image grayscale in darkmode

ダークモード時は画像の彩度を若干抑えています(その方が好ましいという統計結果が出ているため)が、不要と思われる方は以下の部位を削除してください。

filter: grayscale(20%); を目印に検索し、これを含む 

  img {
    filter: grayscale(20%);
  }

を削除。すぐ下にある } を巻き込み削除しないよう注意。

目次へ戻る↑

ダークをデフォルトにする場合

How to remove darkmode

ダークモード用スタイル(暗色背景)をデフォルトにしたい場合にはダークモード対応自体が不要になります。ダークデフォルト化 で検索すると複数箇所出てきますので各ガイダンスに従ってください。

目次へ戻る↑

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

目次へ戻る↑

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください。記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

目次へ戻る↑

「新着記事リスト」について

About recent list

プラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。

目次へ戻る↑

補足事項

Handouts

  • ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

目次へ戻る↑

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

Related post

Comments  36

こん
2020/05/04 (Mon) 06:57

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

続きです。

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

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

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

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

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

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

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

vanillaice (Akira)
Akira
2020/05/04 (Mon) 14:38

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ユーザーに今回の変更はあまり意味が無いというか、対象外なのでご了承くださいね :)

こん
2020/05/04 (Mon) 14:43

To Akiraさん

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

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

vanillaice (Akira)
Akira
2020/05/06 (Wed) 00:17

To こんさん

こんばんは ('0')/

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

-
2020/05/21 (Thu) 14:53

管理人のみ閲覧できます

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

vanillaice (Akira)
AKira
2020/05/21 (Thu) 18:57

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);

に置き換えてください。

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

-
2020/05/21 (Thu) 21:19

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/05/21 (Thu) 22:08

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-->
までを削除。

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

-
2020/05/22 (Fri) 07:58

管理人のみ閲覧できます

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

-
2020/12/06 (Sun) 11:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/12/06 (Sun) 17:01

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

こんにちは。

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

-
2020/12/07 (Mon) 04:18

管理人のみ閲覧できます

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

-
2021/03/11 (Thu) 12:28

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2021/03/12 (Fri) 01:36

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

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

taro
2021/04/02 (Fri) 23:28

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

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

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

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

vanillaice (Akira)
vanillaice (Akira)
2021/04/04 (Sun) 16:19

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フォントにされる場合はフォント名の明記もお願いします。

taro
2021/04/04 (Sun) 19:24

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フォントとして使えるのであれば好みなフォントであるので使わせていただきたいです。
よろしくおねがいいたします。


vanillaice (Akira)
vanillaice (Akira)
2021/04/06 (Tue) 17:25

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

taro
2021/04/07 (Wed) 01:41

To Akiraさま

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

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

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

vanillaice (Akira)
vanillaice (Akira)
2021/04/12 (Mon) 13:33

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

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

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

-
2021/06/20 (Sun) 22:00

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/06/21 (Mon) 14:47

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
が正しいスペルなので修正してください ^^;

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

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

-
2021/06/21 (Mon) 18:01

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/06/21 (Mon) 22:20

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

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

-
2021/12/10 (Fri) 23:15

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/12/11 (Sat) 16:49

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を用いて特殊な動作環境を与える類のもの)を導入した際、この指定によって上手く機能しない場合があります。
(例: ページに滞在したまま画像を拡大する など)

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

-
2021/12/12 (Sun) 15:40

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/12/15 (Wed) 17:32

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

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

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

ittsuie
2022/07/21 (Thu) 18:07

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

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

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

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

vanillaice (Akira)
vanillaice (Akira)
2022/07/26 (Tue) 16:54

To ittsuieさん

取り急ぎのご連絡

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

vanillaice (Akira)
vanillaice (Akira)
2022/07/27 (Wed) 10:19

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

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

ittsuie
2022/07/27 (Wed) 23:02

To vanillaice (Akira)さん

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

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

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

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

vanillaice (Akira)
vanillaice (Akira)
2022/07/29 (Fri) 11:29

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

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

-
2022/09/07 (Wed) 05:55

管理人のみ閲覧できます

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

-
2022/09/11 (Sun) 10:33

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/12 (Mon) 21:11

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

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

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
    FC2共有テンプレート一覧 ご質問の前に
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)
「配布中テンプレート」 カテゴリの一覧を見る