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

OATHテンプレート

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

名称 OATH おーす
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事幅(PC 最大) メイン --- 最大約1000px
サイド --- 最大300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし
Google fonts導入 Oswald
Font Awesome導入 なし
Lazyloading導入 あり
OSダークモード対応 あり
パン屑リスト表示 あり
固有セクション
  • プロフィール + SNSリスト
  • 最新記事リスト(サムネイル付き)
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Lighthouseスコア
(トップページ平均)
OATH Lighthouseスコア
固有機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン
2カラム
サイドメニュー --- 右
タブレット
2カラム
サイドメニュー --- 右 or 下
デバイス幅依存
スマートフォン
2カラム
サイドメニュー --- 下
最終更新 2023.9.30
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ダークモードの切り替えを任意にしました
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • パン屑リストからSVGアイコンを削除
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
  • その他UI調整

最大横幅の調整、左右カラム入れ替え、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.10.6
  • メインJSファイル再変更
更新履歴 2022.10.1
  • メインJSファイル変更

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

4. 色調変更に注意
色調(フォント色や背景色)の変更を行った場合、Lighthouseのスコアが著しく低下する可能性があります。自己責任の上、視認性に注意して変更を行ってください。

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

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

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

OGP設定あり
OGP設定無し

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

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

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

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

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソルをデフォルト(pointer(指マーク)ではない、という意味)にしてあります。

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

Cautions before asking for something.

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

・ ご自身のブログURLを明記
・ 問題が生じている場合はその内容を確認できるページのURLを明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

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

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

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

-
2022/10/01 (Sat) 08:19

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/01 (Sat) 14:34

To OATH TOCの件 内緒さん

こんにちは ('0')/
修正しました。ファイル変更を忘れていました ( ̄∀ ̄;)
お知らせありがとうございます!

-
2022/10/01 (Sat) 15:01

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/01 (Sat) 15:31

To OATH TOCの件 内緒さん

お手数おかけしました。

4回目接種されたんですね。私3回目だけモデルナだったんですが、副作用きつかったです (∵`)
そして何故コロナになったのか (;`ー´)o
次男がバイト先から持ち帰ったんですけどね。もーほんと辛かったです。あんなに気をつけてたのに。
ちなみにまだ咳が収まらないんですよ。咳だけがゲホゲホといまだに出るんです。まさかこんなことになるとは。
深刻な症状がでなくとも長引くのでほんとかからないよう皆さん気をつけてくださいね (;ωq`)

Yokkabose
2022/10/02 (Sun) 21:11

待ってました〜。

新作テンプレートが出ている事に先ほど気づきました。
嬉しいです〜。ありがとうございます。

vanillaice (Akira)
vanillaice (Akira)
2022/10/02 (Sun) 23:12

To Yokkaboseさん

こちらこそいつもありがあとうございます :)

-
2022/10/06 (Thu) 11:32

管理人のみ閲覧できます

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

-
2022/10/06 (Thu) 12:21

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/06 (Thu) 19:33

OATH TOCの件 内緒さん

うぁぁああぁぁまた間違えてしもたんです (;ωq`)
記事をUPしましたのでご覧ください。

https://vanillaice000.blog.fc2.com/blog-entry-1125.html

度々お手数おかけして申し訳ないです (;_;)

ぼっちん
2022/10/06 (Thu) 19:56

こんどこそ(笑)

Akiraちゃん

今度こそ、キチンと直りましたよ~ (〃^▽^〃)
いやぁ、お手数をお掛けしました、ほんっとにありがとうございます ^^

新作の「OATH」と「opt_RED」両テンプレート共にほんっとに素敵で、ありがたく利用させて戴きます ^^

vanillaice (Akira)
vanillaice (Akira)
2022/10/07 (Fri) 19:34

To ぼっちんさん

こんばんは ('0')/
何度もホントすみませんです。また何かお気づきなら教えてくださいね :)

-
2022/10/08 (Sat) 11:59

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/08 (Sat) 14:15

To OATH TOC出てこないの件 内緒さん

こんにちは ('0')/

> どうしても「目次」が出てきてくれません〜

TOCはユーザー個人カスタマイズでの提供でデフォルトでは入れてありませんので、ご自分の所有ファイル(あるいはhtmlへのベタ打ち)の掲載をしてください。

> またカテゴリーも、〜先に出てきちゃうのですよ

これはですね、ドロップダウンの部位のアニメーションに「opacity .6s,transform .55s」が指定されているためです。マウスオーバーでフワっと表示させるのに必要なんですが、これは「開く」「閉じる」双方に適用されるので、レンダリング直後も不透明度と位置移動が行われてしまうんですね。今回は特に不透明度の方がレンダリング「内容を読み込んでからコンマ6秒遅れる」形になるので見えてしまうということだと思います。
対策として双方を .2 など秒数を早めてみても良いかもしれません。
(.dropdown-child で検索すると出てきます)
opacity .2s,transform .2s など

あと別の方法としてはvisibilityの追加も良いかもしれません。
.dropdown-child
で検索すると6箇所あり最初のものを対象とし、ルールセットの
opacity: 0;
の上に
visibility: hidden;
を追加。続いて
.dropdown:hover .dropdown-child
で検索し、
opacity: 1;
の上に
visibility: visible;
を追加

これをやるとマウスが離れたときに文字だけ少し残って違和感があるかもしれないしが無いかもしれません(個人感によります)
今回の対策ではvisibilityにアニメーションはつけられない(付けると元と同じ結果になります)ので、上記内容で一度お試しください。

ちなみに私の環境では起こらないので、デバイススペックの影響などもあるかもしれません。

咳がおさまらないのってやっぱり後遺症的なものですよね (∵`)
え、一生このままってことはないよね(笑)
今年はインフルエンザのワクチンも初で打とうと思います (;_;)

-
2022/10/08 (Sat) 15:37

管理人のみ閲覧できます

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

-
2022/10/08 (Sat) 16:08

管理人のみ閲覧できます

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

-
2022/10/09 (Sun) 16:08

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/11 (Tue) 16:58

To OATH TOCの件 内緒さん(完了のご報告)

こんにちは ('0')/

お返事大変遅くなりごめんなさい。
無事にお出来になったということで安心しました。

お父様お大事になさってくださいね。お疲れ様でした :)

-
2022/10/12 (Wed) 15:29

管理人のみ閲覧できます

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

-
2022/10/18 (Tue) 11:34

管理人のみ閲覧できます

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

Yokkabose
2022/10/23 (Sun) 17:58

いつもすいません。
TOCを使いたいので https://vanillaice000.blog.fc2.com/blog-entry-826.htmlの記事を確認しながら導入試みたところ、目次機能は使えるようになったのですが、見出し(H2)記事用装飾が装飾されなくなりました。

これはTOCを導入したので使えないということなのでしょうか?
ご指導よろしければお願いいたします。

vanillaice (Akira)
vanillaice (Akira)
2022/10/25 (Tue) 00:46

To Yokkaboseさん

こんばんは ('0')/

> 見出し(H2)記事用装飾が装飾されなくなりました〜

これはテンプレートデフォルトのスタイルが外されてしまう、という解釈で合ってますでしょうか。

.inner-contents h2:not
を目印に検索するとスタイルシート内で見つかります。この部位は

.inner-contents h2:not([class]):not([id]):not([style])

というセレクタになっています。これを
.inner-contents h2
または
.inner-contents h2:not([class]):not([style])
に変更します。こちらがおすすめ。
で、この近接に h3 と h4 も同じように記載されていますのでこれらも同じ処理を行ってください。

ちょっと説明しないと何をすべきか伝わらないかもなので、
テンプレートの見出し装飾は、それぞれのh要素にidまたはclassまたはstyleまたはそれらの組み合わせなどが含まれる場合には適用外にしてあります。
何故かというと、ユーザーが任意であてたスタイルを打ち消してしまう可能性があるからです。

Yokkaboseさんの場合は
<h2 class="xxx">
など、クラス属性を付けずに
<h2>
をそのまま利用していますが、TOCスクリプトを利用することで各見出しにid属性が自動で付与されます。
<h2 id="chapter-1">
といった具合です。そのためデフォルトスタイルが適用されなくなります。

対処法は上でお伝えした通りです。今後Yokkaboseさんが見出しに独自スタイルをあてた場合は恐らくそれが反映されませんので、おすすめした方のセレクタ指定をご利用になると良いと思います。記事内装飾をidで行うというのはあまり考えたくない ^^;
(装飾は単一要素だとしてもclassの利用を強くおすすめします)

Yokkabose
2022/10/25 (Tue) 16:25

To vanillaice (Akira)さん

毎度お忙しい中ご指導ありがとうございます。
いただいたアドバイスをもとに勉強させていただきます。
m(. .)m

-
2022/11/09 (Wed) 15:58

管理人のみ閲覧できます

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

-
2022/11/10 (Thu) 17:58

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/11/16 (Wed) 00:22

To OATH ヘッダー画像の件 内緒さん

お返事大変遅くなりごめんなさい。
まず、フラッシュは利用していません。

/* モバイル用ヘッダー画像
を目印に検索するとスタイルシート内に1箇所あります。
このコメントの付いた行とその下の行が画像指定です。ガイダンスに従って画像を準備し、それぞれURLの差し替えを行ってください。
モバイル/ PC で1種サイズ違いの準備が面倒でしたら同じ画像指定(画像URL指定)でも構いませんが、その場合はPCを基準にしてください。モバイルでは若干読み込み速度が遅くなることも念頭に置いてくださいね。
よろしくお願いします
(画像は1枚の画像を分割しているように見せているだけなので1種の画像でOKです)

vanillaice (Akira)
vanillaice (Akira)
2022/11/16 (Wed) 00:27

To ご心配おかけしております内緒さん

こんばんは ('0')/

やっぱまだ本調子じゃなかった。コンタクトレンズ外しますね (;ωq`)
もう2〜3日要るかも。
角膜潰瘍って恐ろしいですね。私普段健康なだけにこういうとき大げさなんです。今年の何月だったか、なんとか結石になったんだけど、ええその時ももちろん大騒ぎしました。めちゃくちゃ小さく散らすほどもないぐらいだったのに死ぬって大騒ぎしました。すみません(笑)

-
2022/11/16 (Wed) 10:50

管理人のみ閲覧できます

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

-
2022/12/01 (Thu) 19:36

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/12/11 (Sun) 18:05

To OATH 各記事の画像について 内緒さん

こんばんは ('0')/
お返事が大変遅くなりましたことをお詫びします。

> 私のブログの最新記事のように横長を縦長にしたい〜

以下の記事を参照し、作業を行ってください。
参考記事: トップページに縦長サムネイルを利用したい方向けカスタマイズ
https://vanillaice000.blog.fc2.com/blog-entry-1102.html

OATHの場合は
.grid-image-wrapper::before
がセレクタです。よろしくお願いします :)

Jun
2022/12/12 (Mon) 10:51

縦長にできました

Akiraさんへ
前後のコメントから、体調がお悪いのかな?
と思っていました。
もう大丈夫なのでしょうか?

ご指示のとおり作業を進めましたら
おかげさまで希望通りに変更できました。
ありがとうございました。

これから寒くなります。
くれぐれもお体ご自愛くださいね。

vanillaice (Akira)
vanillaice (Akira)
2022/12/15 (Thu) 00:53

To Junさん

こんばんは ('0')/

うまく行ったようで安心しました。対応が遅くなってごめんなさいね。
お気遣いもありがとうございます。今はすっかり良くなりました。お疲れ様でした :)

-
2023/01/16 (Mon) 15:50

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/01/16 (Mon) 23:40

To OATH plugin_thirdの位置 内緒さん

こんばんは ('0')/

.side_menu:last-of-type
を目印に検索するとスタイルシート内に1箇所ありますので、このルールセットを削除してくださいね。

-----
* 別件で修正すべき点がありますので、ご質問内容の作業が完了してからお伝えします。

-
2023/01/18 (Wed) 11:43

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/01/19 (Thu) 00:33

To OATH plugin_thirdの位置 内緒さん(別件)

こんばんは ('0')/

プラグインのフリーエリアにninjaのスライダーを登録されているかと思います。これがスマートフォンで横幅超過を起こしており、SEO面で大きな減点(モバイルユーザビリティエラー)になりますので修正をおすすめします。
設定項目『プラグインの改造』の【HTMLの編集】をクリックし、ソースを見ると、書き出しが

<div class="plugin-freearea" &align>
ninjaの内容
</div>

という形になっているはずなので、

<div class="plugin-freearea" &align>
<div style="overflow: hidden;">
ninjaの内容
</div>
</div>

に変更。但しこの領域は左右にpaddingによる余白が設けてあるためデバイス画面いっぱいは使いきれません。そのため本当は右のアイテムがチラッと見えていた方が良いんですが、そうはなりませんのでご了承くださいね(これを直そうと思えばテンプレート構造自体の構成を変える必要が生じます)

説明スクリーンショットを作りましたが内緒コメントなので掲載できません(こういうことがあるのでできるだけ公開でのコメントをお願いしています)

<div style="overflow: hidden;">
内容(script要素など)
</div>

という形で掲載すれば防げます。カスタマイズをされた際にはスマートフォンでの見た目を必ず確認するよう心がけてくださいね。

Jun
2023/01/20 (Fri) 09:08

別件で修正すべき点

Akiraさんへ

公開でのコメントとのことですので、
これからはすべて公開にしますね。

ご指示いただいたとおり変更致しました。
本人も見落としている点までご指示いただき
ありがとうございました。

ところが、スマホで確認しようとしたのですが、
何度行っても
ブログタイトル画面から先に進みませんでした。
家族の他のスマホでも、同様でした。

この症状はPCでも3度に1度くらい起こるので
読み直しを行っています。
ちなみに読み直せば1度で表示される時と
2、3度読み直す時があります。

特にブックマークから読み込むと
ほぼ毎回、この症状が起こりますが、
私だけでしょうか。

というわけで、私自身ではスマホで正常に
表示されているのか確認が取れていません。

念のために今もスマホで読み込みましたが、
同様でした。

以上、つまらないご報告をしてすみませんでした。
一応、ご指示いただいたとおりの変更は行っています。

これからもよろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2023/01/20 (Fri) 19:31

To Junさん

こんばんは ('0')/
ご協力ありがとうございます。

ninjaについては修正を確認できましたが、個別記事の楽天などはまだ大きく右にはみ出していますので修正を。
楽天の場合は楽天広告のページでカスタマイズする必要があるようです。参考になりそうな記事を見つけましたのでリンクを掲載しておきます。

参考外部記事: 楽天アフィリエイトの広告がスマホからはみ出る!スッキリ収める最適な方法はコレ!
https://may-style.net/blog-method/affiliate/2212/


また、こちらも参考として先回作成したスクリーンショットを掲載しておきますね。

https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_x1.png
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_x2.png
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_x3.png

お知らせ頂いた件ですが、他にもお一方から同じ症状をお聞きしています。

私の環境からだとどのデバイスを使っても(OSバージョン違いのiPhone・iPad, iMac, Macbook pro など, androidデバイスは未所有)再現ができないので対処法というのも持っていません。

なのでスプラッシュの削除をおすすめします。お手数おかけします。
注)スプラッシュ不要の方
で検索すると複数箇所出てきますので、ガイダンスに従って削除してください。

Jun
2023/01/22 (Sun) 09:48

スプラッシュの削除

Akiraさんへ

いつもお世話になります。

注)スプラッシュ不要の方を削除しましたら、
PCでもスマホでも、問題なく表示されるようになりました。
ありがとうございます。
でも、少し味気なくなりましたね。(笑)

楽天アフィリエイト広告は、
私がスマホで確認した限りでは、はみ出していないようですが、
その為にも横並びで2つしか掲載していません。
でも、
https://may-style.net/blog-method/affiliate/2212/
は、参考にさせて頂きますね。
一応、スマホ対策で、今のtableからDIVに変更して
すべて張り替えようと思っています。

Akiraさんもお気付きになっていると思いますが、
以前、他のブログでもご指摘いただいた
ページランキングの件ですが、
いろいろと検索してみたのですが、無料で良いのが見当たらず
止む無く今のi2iを利用しているのが現状です。

いつも、参考になることを教えていただき、ありがとうございます。

vanillaice (Akira)
vanillaice (Akira)
2023/01/24 (Tue) 21:02

To Junさん(終了のご報告)

こんばんは ('0')/
お返事遅くなりました。

アフィリエイトについては自己管理・自己責任で、仕様なども変わることがありますので時折チェックされると良いかと思います。
お疲れ様でした :)

momo
2023/02/24 (Fri) 12:00

記事内のh2の空間について

いつも素敵なテンプレートをありがとうございます。
テンプレートをOATHに変更したのですが、記事内のh2に指定した見出しの上下の空白が大きくて気になっています。
もう少し、空間を減らすか無しにしたいのですが、どこを変更すればいいのでしょうか?

vanillaice (Akira)
vanillaice (Akira)
2023/02/24 (Fri) 18:05

To momoさん

こんにちは ('0')/

.inner-contents h2 {
を目印に検索するとスタイルシート内にありますので、このルールセットの
margin: 3em auto 2em
の太字部位の数値を変更してください。3emが上の余白、2emが下です。

同じように h3, h4 もすぐ下にありますので必要があれば修正してくださいね。

----- 別件
OATHテンプレートはダークモードに対応していますので、閲覧者がモードをONにすると背景が暗色に切り替わります。

① 文字が読めない
https://blog-imgs-161.fc2.com/v/a/n/vanillaice000/sc0224.png

② アイコンの背景色
https://blog-imgs-161.fc2.com/v/a/n/vanillaice000/sc0224_2.png

各対処法
① 背景色を指定したら必ず文字色も指定する
参考記事: ブログを白背景から黒背景に変更して苦労したこと気づいたこと
https://vanillaice000.blog.fc2.com/blog-entry-839.html

② アイコンを背景透過PNGにする

または

③ ダークモードの機能を削除する(スタイルシートにガイダンスがあるので従ってください)
ダークモードを取り除けば①②に対する対処は不要です。
(とはいえ背景色が白以外のテンプレートに変更すると同じ問題が発生しますので今のうちの対策をおすすめします)

momo
2023/02/25 (Sat) 00:36

To vanillaice (Akira)さん

Akiraさん、こんばんは

早速の返信ありがとうございました
希望通りにh2を変更することができました!!!

そして、恥ずかしながら、ダークモードのことを全く知らなかったです。
色々と丁寧に教えてくださり、ありがとうございました。自分のブログをダークモードで初めて見ました。

教えていただいたので、アイコンや文字は一応直してみました。過去記事などのアイコンや文字色は探すの大変なのでのんびり探すほかないかなあと思っています。。

色々と教えてくださり、本当にありがとうございました!

vanillaice (Akira)
vanillaice (Akira)
2023/02/25 (Sat) 01:09

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

こんばんは ('0')/
まず、余白の件は希望通りになったようで良かったです。

アイコンなど形状が重要になる画像について今後はできるだけ透過PNGを用いるようにされると良いですね。
過去記事の文字色についてはおっしゃる通り該当を探すことも大変でしょうから、『時間余裕のあるとき』『気がついたとき』『指摘を受けたとき』に順次対応されると良いと思います。
お疲れ様でした :)

あみきん
2023/06/03 (Sat) 19:33

サイドバーの公式プラグインの並びについて

まだテスト段階です。

たくさんのテンプレートを見ていて、20個くらい候補に入れていたのですが、
一瞬で魅了され、このテンプレートに決めました(^m^)♪
こんな素敵なテンプレートに初めて出会いました!ありがとうございます。


サイドバーに公式プラグインを4つ入れています。

公式プラグイン1のあとに
『Subscribe and Follow』

そのあとに
公式プラグイン2
公式プラグイン3


というような順番にしたいのですが、
公式123がまとまってしまっていて、
その間に入れることができません。

スタイルシートを
どのように書いたら良いでしょうか?

vanillaice (Akira)
vanillaice (Akira)
2023/06/03 (Sat) 19:42

To あみきんさん

こんばんは ('0')/
今回のカスタマイズはスタイルシートではなくhtmlを修正します。

<!-- 注)更新通知ボタン不要の方この行から削除 -->
で検索し、この行を含め
<!-- 注)更新通知ボタン不要の方この行まで削除 -->
までをカット(Ctrl+X)し、
<!--/plugin_first-->
の直下にペースト(Ctrl+V)します。これで

プラグイン1
Subscribe〜
プラグイン2
プラグイン3

の並びになりますのでお試しください。編集の際、特にペーストの際に インデントのために全角スペースを用いない よう注意してください。インデント無しか、インデントをつける場合は必ず半角スペースを利用してくださいね。

あみきん
2023/06/03 (Sat) 21:38

To vanillaice (Akira)さん

こんばんは


<!--plugin_first-->

ココ

<!--plugin_second-->


に入れたのに。。。
なぜか、
4の下に行ってしまいます。

OATHのHTML編集でしました。

あおなみ
2023/06/03 (Sat) 22:44

ヘッダーのカスタマイズについて

Akiraさん、いつもお世話になっております。

お忙しいところ恐縮ですが、ご質問させてください。

ヘッダー(ナビゲーション)が、「画面を下にスクロールすると消えて、上にスクロールすると表示される」ようにしたいです。(テンプレート:opt_REDのヘッダーのように)

カスタマイズ法をご教示いただけないでしょうか。
よろしくお願いいたします。

vanillaice (Akira)
vanillaice (Akira)
2023/06/03 (Sat) 22:46

To あみきんさん

<!--plugin_first-->

ココ

<!--plugin_second-->

ではなく
<!--/plugin_first-->
の下です。スクリーンショットを掲載しますね。
https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/sc_2023_6_3.png

vanillaice (Akira)
vanillaice (Akira)
2023/06/03 (Sat) 22:58

To あおなみさん

こんばんは ('0')/

その場合はJSファイルを編集する必要が生じます。また、ページ内スクロールの頭出しの位置の調整なども必要になり簡単ではありませんので、今回指南についてはご容赦ください。

opt_REDをダウンロードして頂いて、OATHのhtml内の
/oath__mod.js
をopt_REDのhtml内の
/opt_RED.js
に差し替えてください。共有に出したものはファイル名が変更されていることがありますので、DLファイルから抜き出してくださいね。

あおなみ
2023/06/03 (Sat) 23:36

To vanillaice (Akira)さん

Akiraさん、迅速なお取り計らいに感謝します。

問題なくカスタマイズ完了できました。
ありがとうございました!!

あみきん
2023/06/04 (Sun) 00:50

To vanillaice (Akira)さん

そういう技ができるのですね(*^^*)
文字を打ち間違えましたが、ここに入れてます。

https://blog-imgs-169.fc2.com/s/t/r/streamhens/12.png
とりあえずおやすみなさい。遅くまでありがとうございました。

vanillaice (Akira)
vanillaice (Akira)
2023/06/04 (Sun) 01:19

To あみきんさん

もしかしてあみきんさんがおっしゃる「公式123」というのはプラグインの個数のことでしょうか。FC2では通常プラグインの「123」といえばそれはプラグインカテゴリーのことです。プラグインの数は関係ありません。私の解釈が間違いでしたらごめんなさい。

html修正が正しければ、プラグインカテゴリの1, 2, 3それぞれに登録したいものをしっかり分けて再度確認してください。
https://admin.blog.fc2.com/control.php?mode=plugin
例えば

A, B, C, D, E という全5つのプラグインを

A - カテゴリ1
B - カテゴリ2
C - カテゴリ1
D - カテゴリ3
E - カテゴリ1

にそれぞれ分類した場合は

----- カテゴリ1
A
C
E
----- カテゴリ1終了
Subscribe and follow
----- カテゴリ2
B
----- カテゴリ2終了
----- カテゴリ3
D
----- カテゴリ3終了

という並びになります。カテゴリは『まとまり』『分類』のためのものなので、同じカテゴリに登録されている内容の途中に別の要素(今回はSubscribe〜)を挟むことはできません。各カテゴリ同士の間に挟むことは可能です。

vanillaice (Akira)
vanillaice (Akira)
2023/06/04 (Sun) 01:24

To あおなみさん

今回たまたまナビゲーションの高さが同じだったので差し替え可能でしたが、高さが異なる場合はJSの数値計算の調整が必要なので頭の片隅に置いておいてくださいね。
お疲れ様でした :)

-
2023/06/04 (Sun) 01:40

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/06/04 (Sun) 01:51

To プラグインカテゴリの件 内緒さん

開設間もない方ならご存知なくて当然です。私が不親切でした。ごめんなさいね。
ご理解頂けたようで良かったです。お疲れ様でした。
また、励みになるお言葉もありがとうございます :)

あみきん
2023/06/04 (Sun) 09:13

To vanillaice (Akira)さん

あれ、前のコメントが表示されてません。
何か間違えたかしら(^人^)
ご丁寧に解説ありがとうございました。

FC2は20年以上使ってるんですが、あまり更新もせず、
HTMLもスタイルシートもほとんど触ったことがないので💦
本当に助かりました。こちらで、デザインやWebスキルなど
学ばせてもらおうと思います(^.^)

これからガンガン書いていく予定なので
これからもよろしく🙏お願いします🙇‍♀️

vanillaice (Akira)
vanillaice (Akira)
2023/06/04 (Sun) 16:51

To あみきんさん

こんにちは ('0')/

> 何か間違えたかしら〜

『管理者にだけ表示を許可する』にチェックを入れてしまったのだろうと思います。
こちらこそよろしくお願いします :)

あみきん
2023/06/05 (Mon) 12:19

To vanillaice (Akira)さん

ボヤキです💦
記事に目次を入れようと思ったらFC2って目次の機能がないのですね。
プラグインでもないかと思って探したら、1個だけあったのですが、
10年ぐらい前から「借用します」のコメントがなくなってて、
サイトも閉じられているようです。(つд⊂)エーン

ぼっちん
2023/06/05 (Mon) 19:27

To あみきんさん

あみきんさん、はじめまして ^^

Akiraさんが「見出し目次を生成するTOCスクリプト」と言う記事を
https://vanillaice000.blog.fc2.com/blog-entry-826.html
で、とても丁寧に解説してくださっておりますので参照されるといいですよ。

古稀過ぎブロガーの私(笑)でも利用出来ておりますし、とても見映えもよくカスタマイズ出来ますので一押しです 🤩

あみきん
2023/06/05 (Mon) 21:56

To ぼっちんさん

ぼっちんさん
ありがとうございます。(o*。_。)oペコッ
akiraさん、ありがとうございます。感謝です💕

vanillaice (Akira)
vanillaice (Akira)
2023/06/06 (Tue) 01:01

To ぼっちんさん, あみきんさん

こんばんは ('0')/
まず、ぼっちんさん毎度ご協力をありがとうございます。助かります :)

あみきんさんはTOCのページでお返事しますね。

ぼっちん
2023/06/06 (Tue) 07:56

To vanillaice (Akira)さん

おはようございます (^_^;

や~ このような展開になるとは予想もつきませんでした。
余分な仕事を作ってしまって、申し訳ございません。
ごめんなさい、ごめんなさい m(_ _)m
お詫び申し上げます m(_ _)m
お返事ご無用ですから……

vanillaice (Akira)
vanillaice (Akira)
2023/06/06 (Tue) 14:46

To ぼっちんさん

こんにちは ('0')/

ぼっちんさんが謝らなければいけないことは何もないですよ。逆に「えっ?何?ぼっちんさん一体どうした?」と思いました(笑)
いつもご協力くださって感謝しかありません :)

-
2023/06/26 (Mon) 06:28

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/06/27 (Tue) 00:33

To お願いがありまして 内緒さん

こんばんは ('0')/

> ダークモード対応の意味の認識不足(その知識すら持たない)のままに利用していて、記事中で色文字などを使ってしまっているブロガーがとても多い〜

ご意見ありがとうございます :)
そうですね。私もいかがしたものかと思っています。
私のテンプレートの場合は『middle』のボタンがあるので3つ常設されている状態で、さらにまた1つボタンが増えるとなると、ちょっとどうかなぁ、というのもありますので、『ダークモードのON・OFFを見分けて、ONの場合はダークモード解除できるようにする(通常モードCSSと切り替え可能にする)』という妥協点でどうでしょうか。

「ダークモードは利用しないけど暗色でどうなるか気になる」という人はスルーすることになります(笑)
ボタンが無為に増えるよりは良いかな、と。あくまでもダークモード利用者への利便という形で実装したいと思います。

今せっせと過去作を修正していますので、作業段階で導入するようにしますね。といっても古いものから順にやっているので、ダークモード対応作は来月とか再来月とかになるかも ^^;

-
2023/06/27 (Tue) 08:05

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/06/27 (Tue) 14:49

To ダークモードの件 内緒さん

こんにちは ('0')/

> 思いの外邪魔にならない〜

今のところ左下部常設にしたいと考えています。これもまた広告との干渉を考慮しないといけない ^^;
私のテンプレートの場合はグローバルナビがアコーディオンになっており、かつハンバーガー横にブログタイトル、というのも少なくないので、バー内だとブログ名の領域を圧迫して厳しいのと、アコーディオン内に入れてしまうと恐らく『気づかれないボタン』『使われないボタン』化して意味が無いので、扱いとしてはページスクロールボタンと同じ感覚です。

> OSでダークモード設定してあるのに、なんで白色背景ページ〜

あくまでもデフォルトはダークです。ダークモードOFFの場合は切り替えボタン表示なし、ダークモードONの場合はデフォルトがダークで、左下部(PCではスクロールボタン上の予定)にライト←→ダークの切り替えボタン表示、という意味です。おっしゃるように「これでは字が読めないではないか」というケースへの措置として導入、という形です。

ぼっちん
2023/06/27 (Tue) 15:02

To vanillaice (Akira)さん

ワガママ放題のリクエストを聞いて下さって、ほんとにほんとにありがとうございます。
Akiraさんのレスポンシブテンプレートが、ますますユーザーファーストになることでしょう。

またAkiraさんが天使に見えて来ました(いつもですが 笑)
余分な仕事をおっ被せてしまって申し訳ございませんが、よろしくお願い致します m(_ _)m

※ お忙しいでしょうからお返事ご無用ですからね~ 😊

-
2023/10/04 (Wed) 16:50

管理人のみ閲覧できます

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

-
2023/10/04 (Wed) 16:54

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/09 (Mon) 18:45

To OATHダークモードの件 内緒さん

こんばんは ('0')/
はい。ライトとダークの切り分けです。ダークでは白文字になるのでyellowのままだと視認性が落ちてしまうからです。
またなにかお気づきの際は教えて下さいね :)

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