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

はじめに

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

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

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

HTML全テンプレート

まず onclick="changeTextValue でCtrl + 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ブログではコメント入力時に使える装飾ツールが準備されていますが、方針次第で思い切って削除してしまえば良い、のススメ。簡単に言えば 第三者による入力内容の制限 です。...

vanillaice000.blog.fc2.com

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

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 に変更します。

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

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ブログの「サムネイル代替画像の設定」について

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

vanillaice000.blog.fc2.com

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

『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ブログランキングなどに画像は出ない(同時にブログ設定も行っている場合はブログ設定の画像が表示されます)

さいごに

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