テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。

2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。

はじめに

予想されるカスタマイズについては スタイルシート注)主要カスタマイズ(variables) にまとめられています。

自身の行いたいカスタマイズが含まれているかどうかまず確認をお願いします。この部位を把握することで質疑応答の手間を省くことができるかもしれません。

コメント返信の自動入力文言変更

HTML全テンプレート

まず onclick="changeTextValueCtrl + F キー検索すると該当部位を特定できます。HTML内に2箇所あります。デフォルトでは

onclick="changeTextValue('To <%comment_name>さん')
onclick="changeTextValue('To <%author_name>さん')

となっており、前者は他者への返信コメント、後者は管理人への返信コメントです。それぞれ「To」に続き「コメント送信者名」が表記される仕組みです。管理人が自身の管理ページで返信を行った場合は「Re:」に続き「コメントのタイトル」です。管理ページでの返信に合わせたい場合は双方を

onclick="changeTextValue('Re: <%comment_title>')

に変更します。タイトルが無記入だった場合は「Re:」のみ表記されます。

また、度々ご質問の届く コメント編集ボタン について、『送信者』『送信者以外』を見分ける仕組みが未だ提供されていませんので『対象コメント送信者以外に表示させない』といったことは現時点ではできません。

コメント装飾ツールの取り除き

HTMLほぼ全テンプレート

一部テンプレートでは予め取り除いてあります。ツールバー不要の方は

<script src="<%template_comment_js>"></script>

という要素がHTML内に2箇所ありますので、双方を削除します。

FC2ブログのコメント装飾ツールは思い切って削除して良いと思う

FC2ブログのコメント装飾ツールは思い切って削除して良いと思う

FC2ブログではコメント入力時に使える装飾ツールが準備されていますが、方針次第で思い切って削除してしまえば良い、のススメ。簡単に言えば 第三者による入力内容の制限 です。...

プラグインとテンプレート固有セクションの位置操作

HTML固有セクション導入テンプレート

固有セクション というのは、例えば『サムネイル付き最新記事リスト』や『プロフィール』など、その多くは公式プラグインと重複する内容です。公式プラグインの足りない点を補った上でテンプレートが独自に表示するセクションと考えてください。

繰り返しになりますが、各人の設定によってはプラグイン内容と重複することがありますので、どちらを表示したいか選択をし、不要な方を削除(プラグインの場合は『非表示』)するようにしてください。以下はサンプルです。

公式プラグイン
固有セクション

見た目の違いだけでなく、固有セクションの方は公式プラグインには無い『画像遅延読み込み(lazyloading)』『全体リンク』『No image画像指定』『高解像度画像指定』などが含まれています。

これら固有セクションはデフォルトでは プラグイン1 の前 または プラグイン3 の後 に設置されています。例えば『プラグイン1と2の間』『プラグイン3の前』などに変更したい場合は以下の仕組みを理解した上で操作してください。

プラグインの登録・カテゴリ分けや表示順序の操作などはテンプレートではできません。ブログ個人設定で行います。

『プラグインの設定』へ

プラグイン登録を上手く操作すれば固有セクションの位置を自由に変更できます。注意点としては <!--plugin--><!--/plugin--> の内側に固有セクションを移動した場合、『プラグイン設定 > 無効』を行うと固有セクションも表示されなくなります。

要素を複製するときのコツ

HTML全テンプレート

グローバルナビゲーションにリンクを追加するなど、HTMLを複製することがあるかと思います。複製の際に注意したいのは インデントを全角スペースやタブで行わない(必ず半角スペースを用いる) ことです。特に、テキストエディターを利用せず、ブラウザ上で作業をされる方は複製時のミスが非常に多いので注意してください。

例えば以下の内容で複製の必要が生じたとします。複製対象は緑色の部位と仮定します。

        <!-- SNSリンク -->
        <ul class="sns-list-navi">
          <li class="sns-item-navi">
            <a class="sns-item-anchor-navi sns-pinterest-navi" href="#" target="_blank" rel="noopener noreferrer" aria-label="go onto Pinterest"><svg class="svg-fill" role="img" aria-hidden="true"><use xlink:href="#svg-pinterest-fill"></use></svg></a>
          </li>
          <li class="sns-item-navi">
            <a class="sns-item-anchor-navi sns-youtube-navi" href="#" target="_blank" rel="noopener noreferrer" aria-label="go onto YouTube"><svg class="svg-fill" role="img" aria-hidden="true"><use xlink:href="#svg-youtube-fill"></use></svg></a>
          </li>
        </ul>
対象範囲のみ選択
先行要素の末尾まで選択

選択時の基本は 終点から始点へ向けてドラッグ です。これを基本動作として、ドラッグ範囲は 先行要素の末尾まで を推奨。対象部位(要素)のみをコピーした場合に続く動作は

  • ペーストしたいところで一度 改行
  • コピーした内容をペースト

という流れになるかと思います。

すると上記スクリーンショットのようにズレてしまうので(テキストエディターはその限りではありません)、インデントを設けようとして全角スペースを押下してしまうミス を起こす可能性があります。また、改行時にスペースを押下してしまうケースも度々見受けられます。

コピー範囲を先行要素の末尾までにした場合は

  • 挿入したい部位の先行になる要素の末尾にカーソルを置く
  • コピーした内容をペースト

この方法を取れば改行の必要もないですし、インデントの状態も保持できます。最後にコピー導線をもう少し具体的に図解。

SNSリンク設置

HTMLSNSリンクが導入されているテンプレート

SNSに関するリンクリストは2種あり、ひとつは SNSシェアリンク で、もうひとつは SNSサービスへのリンク です。前者の場合はテンプレートで自動的に遷移先を設定しますので特に何もする必要はありません。

SNSサービスリンク(以降 SNSリンク と称す)の場合、テンプレート作者が各個人のURLを取得することはできませんので、自身での設定必須です。不要なSNSリンク、またはSNSリンク自体が不要な場合は 必ずHTMLから削除するようにしてください。空リンクのまま放置しないよう注意。空のままにしておくと、アイコンをクリックした際にページの最上部へと飛ばされ、閲覧者は意図がわからず戸惑ってしまいます。

<!-- SNSリンク -->

で検索。概ね以下のような内容になっています(一部抜粋)

<a class="sns-item-anchor-navi sns-facebook-navi" href="#" target="_blank" rel="noopener noreferrer" aria-label="go onto Facebook"><svg class="svg-fill" role="img" aria-hidden="true"><use xlink:href="#svg-facebook-fill"></use></svg></a><!-- 注)リンク不要な方この一行削除 リンクする方は#を消去してアドレス入力 -->

href属性 の値に # が代入されている、あるいは href="" と空白(値無し)になっていますので、この部位を正しいURLに書き換えます。

また、SNSリンクを増やしたい場合、サービスのロゴやアイコンの準備は私の方では致しかねますので、ご自身でお願いします。ソースコードがわからない場合のみご質問ください。

ダークモードに関して

HTMLCSSダークモード対応テンプレート

2023年の全テンプレートを対象とした比較的大規模な修正で、ダークモードの仕様を変更 しています。旧来は『OSダークモードON(opt in)状態のデバイスでは自動的にダークモード用スタイルで表示』という方法を取っていましたが、閲覧ユーザーによるモードの任意変更を可能にしました。

変更の理由なんですが、以下のような問題があるためです

  • 管理者自身がダークモード対応であることに気づいていない
  • ダークモードにすると目視困難な要素(文字列など)が存在している

大きくこの2つです。一番の問題は『管理人が理解していない』という点。

OSのダークモードというのは 任意設定 ですから、デフォルトではOFF(opt out)状態です。ここがONになっているということは、意図的に設定を変更している ということであり、つまりは ダークモードで閲覧を行いたい という意志の現れです。なので本来ダークモード利用者に向けては自動的にダークテーマで表示するべきではあるんですが、管理人がテンプレートの仕様説明を読んでいなかったり、ダークモード自体をご存じなかったり、といったケースが非常に多いんですね。

ダークモード対応と知らずに使っていると、もしかしたら以下のような視覚的障害が生じているかもしれません。

ダークモード非利用者の見え方
ダークモード利用者の見え方

黒背景に青い字がめちゃくちゃ見づらい (´0`)
こういったことが起こっているのだよ、というのは 管理人自身が気づいてくれなければどうしようもない ので、以下のような切り替えボタンを設けました。

スクリーンショットはスマートフォンでの様子ですが、PCでも表示されます。これがあれば管理人にも気づいてもらえるだろうと思います。閲覧者へ向けては、どうにもこうにも閲覧困難な場合はボタンをクリックしてライト背景に切り替えてもらう、と。

ここで大きな注意ですが、管理人がこれで「切り替えなければ済む話だから何も考えなくて良いや」と着地してしまうことです。ダークモード利用者はダーク背景がデフォルトで表示される 点を忘れないでください。自分がダークで見ることが無いとしても、他者の希望までコントロールすることはできませんので、ダークモードに対応している限りダークのテーマは活きている、誰かが見ているのだ、と認識することが大事です。

正直ダークモード利用者ならばわざわざ白背景に変更するというのは一手間増えるわけですし、ダークで閲覧したいところをライトへの切り替えを迫られるということは 閲覧しづらいページ状態に陥っている ということです。ただ、OS(またはデバイス)の設定を変更する手間を考えれば滞在ページ内で対象サイトのみ変更できるという点については歓迎できるシステムかと思います。といっても本来はライトでもダークでも問題なく閲覧できるページ作りが最適解です。そのためには『色とりどりの文字装飾を行わない』『コメンテーターによるコメント文字色変更を制限(禁止)する』『文字列に背景色を指定したら必ず文字色も同時に指定する』などの工夫が効果的です。

というわけで、ダークモードを任意解除できる仕様に変更しました。同様にライト(デフォルト)からダークに切り替えることも可能になりました。

念のため、この仕組みを利用して『カラーテーマ』を別途作成することが可能ですが、このシステムの意義というのはそこではありません。あくまでも『夜間だと目が疲れるから』『白背景だと眩しいから』といった場合への対応、ユーザビリティの取り組みであって、『色んなカラーテーマで見られます(はぁと)』というためのものではありませんので、意義をしっかり汲み取った上でご利用ください。

ダークモード対応を停止するには

注)ダークモード切り替え

で検索すると出てきます。2箇所がHTML、1箇所がCSSで合計3箇所の削除です。

ダークテーマを適用し、ライトを停止する場合は、ダークモード対応の必要が無くなりますので上記工程を行った上で 注)lightmode に属する内容を消去し、:root[theme="dark"]:root に変更します。

あとは蛇足になりますが、アイコンのトグル(月 ←→ 太陽)は却って混乱を招くのでやめました。滞在中のモードを示しているのか、切り替え先のモードを示唆しているのかこんがらがるのでやめ ^^;
ボタンの表示位置変更はご自身の技量の範疇・自己責任でお願いします。アコーディオンタイプのナビゲーションの中への移動はボタンの存在に気づいてもらえない可能性がありますのでおすすめしません。

ダークモードとページ表示エフェクトとチラつきの関係

HTMLダークモード対応テンプレート

ダークモード対応の仕様を変更した関係上、切替時のモード状態の全ページ適用、加えて再訪問時にも最終モードを引き継がせるために クッキー (cookie) を利用しています。

さて、ページを開いた際にパッと表示されるのではなくフワッと表示される類のテンプレートで、そのフワッとエフェクトを取り除きたい場合があるかと思います。主に表示スピードをコンマ何秒かでも上げたい場合などに行う可能性がありますね。

ページ表示時のエフェクトを取り除くことによって、デフォルトのモード、つまり『ライト』の状態が一瞬表示されて直後にダークに切り替わる、といった動作が見られることがあります。いわゆる『表示のチラつき』と感じるものです。これを修正するには以下の方法をお試しください。

注)ダークモード切り替え

で検索するとHTMLの後方に見つけられます。これを </head> の直前に移動させます。HTMLの描画前にモード状態を認識させるための処理です。この操作でチラつきは解消されるかと思います。ただし、モード状態の見分けは JavaScript でもって行われ、本来JSはHTMLの後方で実行させる方がページ表示改善には都合が良いと言えます。なので『スピード』に重点を置いてエフェクトを取り除いてもプラスマイナスゼロではないかな、と思います。といってもそんなに大きな負荷がかかる内容でもありません。個人の決定にお任せしますので、この点を考慮の上お決めください。

No image代替画像の操作

HTML要約表示タイプテンプレート

『サムネイル代替画像』設定へ

FC2ブログでは個人設定で予めNo image用代替画像を指定しておくことができます。設定のデフォルトは『代替画像指定なし』です。

テンプレートのNo image表示デフォルトは 個人設定の代替画像未設定 のユーザーに合わせてあります。この方針については『条件の悪い方に合わせている』と考えてください。具体的には以下の3パターンのいずれかで表示されます。

① テンプレートで設定した画像を表示
② 画像部位を背景色で補完
② 画像占有部位を除去

個人設定で代替画像を未設定の方、及び設定済の方もこれらに倣います。

ここからカスタマイズの分岐です。

ブログ個人設定を利用せずテンプレートで代替画像設置を行う

テンプレートHTMLを編集する必要があります。注意深く作業を行ってください。

ブログ個人設定で代替画像登録を済ませた上で以下の手順を行います。画像には『No image』やそれに準じたテキストが含まれることが望ましいです。

<div class="grid-image grid-image-none"></div>
を目印にすると概ね以下のようなHTMLになっています。
<!--body_img-->
<img 〜 内容省略>
<!--/body_img-->
<!--body_img_none-->
<div class="grid-image grid-image-none"></div>
<!--/body_img_none-->

img要素の詳細はテンプレートによって異なりますが、このimg要素のみを残して赤字部位を削除。この処理を行うと個人設定の画像を踏襲するようになります。

なぜこういった仕様にしているか気になるは以下の記事をご覧ください。

FC2ブログの「サムネイル代替画像の設定」について

FC2ブログの「サムネイル代替画像の設定」について

え?今更?って感じですね。すみません。もしかしたら私の勘違いで誤情報を発信したかもしれません。あるいは仕様に変更が入っていることに気づかなかった可能性も。いずれにしろお詫びを含めた記事でございます。...

ブログ個人設定で代替画像設置を行う

『No image』のテキストは自動で表示されますので、表示画像のみ準備してください。概ね以下の手順で設定できます。 --noimage-image を探すと以下のようになっています。

--noimage-image: url(デフォルト画像アドレス);
緑部位を変更したい画像アドレスに変更。続いて --noimage-layer を探すと rgba(244,244,244,1) などと指定があります(テンプレートによって異なります)
これがレイヤー指定で、設置画像の上に被さるマスクの役割です。透けていないと下になる画像が見えませんので rgba(244,244,244,.5)rgba(0,0,0,.8) など 不透明度つき のカラーコードを指定します。 --noimage-layer-reverse が『No image』テキストの色です。--noimage-layer に指定したレイヤー色の反対色を指定します。不透明度は任意です。視認性を確認しながら設定してください。

ダークモード対応テンプレートの場合は light と dark で別の指定になることが多いので、見落とさないよう注意。また、ダークモード対応が行われている場合、上記カスタマイズ部位の記述位置が離れている点にも注意。

それぞれのメリット(pros)とデメリット(cons)

【ブログ個人設定】

  • FC2ブログランキングなどにアイキャッチとして表示される
  • 画像編集が必要(No image文字入れ)

【テンプレート設定】

  • 画像編集の必要が無い
  • FC2ブログランキングなどに画像は出ない(同時にブログ設定も行っている場合はブログ設定の画像が表示されます)

掲載画像の垂直位置合わせについて

CSS全テンプレート

複数画像を上下並びで掲載した場合、テンプレートデフォルトでは以下ようになります。

  • Shift + Enter/ Return 押下
  • Enter/ Return 押下
  • <br> タグ記載

上下の余白(隙間)がありません。何故テンプレートでこうしているかというと、画像上下の余白は作成するよりも取り除く方が難しいためです。余白を設けたい場合はスタイルシート最終に

.inner-contents img {
  vertical-align: baseline;
}

を追加してください。ただし画像上下の余白は margin など意図的に設ける、コントロール可能な余白とは異なり 勝手にできる隙間 と考えた方が良いと思いますので、それを念頭に置いてください。

変更後

さいごに

ご質問の際は 対象テンプレート専用ページ(説明ページ)を熟読注)主要カスタマイズ(variables) と明記されている部位のチェック を済ませた上でお願いします。また、これまで同様 テンプレートに関するご質問は対象テンプレート専用ページでのみ受付、ご自身のブログURLを記載 をお約束とさせてください。虚偽のURLと思われるものについては一切の返信を行いません(一般ブログ・アダルトブログ問わず) のでご留意ください。ローカルルールは質疑応答を円滑に進めるためのものなのでお守り頂ければ幸いです。

-
2023/09/04 (Mon) 01:38

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/09/04 (Mon) 02:17

To 貴ブログの一部の視認性に関して 内緒さん

こんばんは ('0')/

ご指摘ありがとうございます。実は以前全く別のテンプレートのスタイルシートを上書きしてしまうというポカをやらかしまして。
https://vanillaice000.blog.fc2.com/blog-entry-1141.html
この記事が5月1日なので実に4ヶ月も気づいていませんでした。助かりました。ありがとうございます :)

既に記事を重ねていて、文字色をちょくちょく変えている、という方の場合はダークモード対応は厳しいかもしれませんね (∵`)

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