On-my-way-ALL - FC2ブログテンプレート

名称

On-my-way-ALL
おん まい うぇい おーる

動作確認ブラウザ

ブログタイプ

全文

記事見出しレベル

h2 〜 h6

jQuery

Lazyloading

ダークテーマ対応

パン屑リスト

個別記事前後ページサムネイル

構造化マークアップ

その他機能

• プロフィール + SNSリンクリスト
• 最新記事サムネイルリスト
• 画像にドロップシャドウ
• YouTube動画縦横比固定
• 見出し装飾
• その他

使い方など詳細は ARTICLE DEMO 参照

Google fonts

Anton SC
* 小文字は大文字と比較して若干小さくなります。和文フォントとの相性はよくありません。

ライセンス

Required 必須事項

• Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)

Permitted 許可事項

• Modification 改変
• Personal Use 個人利用
• Commercial Use 商用利用

Forbidden 禁止事項

• Distribution 再配布
• Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません

サンプル

Samples

カスタマイズのコツ

A few tips on customizing

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

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

記事内容を読まずに質問される方が多く少し困っています。できるだけ自己解決できるようたくさんのガイダンスを入れてありますので、ご希望のカスタマイズについての指南が既に記されているかどうか確認を行った上でご質問ください。何卒ご協力をお願いします。

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

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

• デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き(別テンプレートからの機能・スタイル移植指南含む)
• デフォルトテンプレートに無い機能の新規追加指南及びソースコード作成依頼(ナビゲーションにドロップダウンやモーダルを追加するなど)
• テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
• アフィリエイトの都合を優先した仕様変更の指南
• ドロワーの中身をナビゲーションからプラグインなど他のものに変更する指南
• トップと個別記事のデザインを揃える変更指南

カスタマイズは原則、自己責任・独力 でお願いします。ご自身の知識の範疇で行うようにしてください。
また、第三者作成コードの解析や導入手引き及び各個人向け新規コード作成(HTML, CSS, JS)の一切をお断りしていますのでご依頼はお控えください。

質問・相談は良いですが依頼はやめてくださいね ^^;

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「無効にする」

スマートフォン版の表示設定

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

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

検索バーの設定

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

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

メタタグの設定 > OGP設定

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

記事編集リンクについて

Location of edit icon

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

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

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。重要な内容が記されているため必読ページです。

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

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

vanillaice000.blog.fc2.com

注) で検索することでカスタマイズのガイダンスを見つけることができ、スタイルシートの方は一箇所にまとまっているもののHTMLの方は点在しています。HTMLカスタマイズのヒントになる単語をキーワードとして以下に記載しておきますので、クリックコピーして利用してください。

想定し得るカスタマイズについては簡単に操作できるように構成してあります。色指定やサイズ指定などは書き換えなどが必要ですが、その他のほとんどが 行削除 か 範囲削除 で対応可能です。行と範囲を誤認しないようガイダンスをよく読んで作業を行ってください。

一覧を見る

ガイダンスキーワード (文字列クリックでコピーできます)

注)Google
Google analytics や X(旧Twitter) card の掲載場所です。

注)FC2アクセス解析
FC2アクセス解析の掲載場所です。

注)ブログ名ロゴ変更
デフォルトテキストの代替となり得るもののみを想定しています。背景つき大判画像などは対応不可です。

注)ドロワー展開軸
ドロワー展開方向を指定できます。

注)ナビゲーション予備リンク
2つ分のHTMLを予備記載しています。3つ目以降は予備HTMLを複製して利用してください。

注)リスト型ページネーション複製
リスト型ページネーションの複製をページ上部に表示することができます。

注)パンくずリスト
折り返し有りの通常タイプから横スクロールタイプに変更できます。

注)タグポータルリンク+SNSシェア
不要な場合は取り除きができます。

注)タグポータルリンク
不要な場合は取り除きができます。

注)SNSシェア
不要な場合は取り除きができます。

注)コメント装飾ツール
ダークモード時のテキスト視認性を確保するため、第三者によるコメントの色操作を避けるべくデフォルトで非表示化されているツールを有効化できます。

注)インデックス記事番号
全記事一覧ページ(index)での記事連番表記を削除できます。

注)個別記事ページネーション更新順
不要な場合は取り除きができます(同カテゴリと双方の取り除きは想定していません, いずれかを残すようにしてください)

注)個別記事ページネーション同カテゴリ
不要な場合は取り除きができます(更新順と双方の取り除きは想定していません, いずれかを残すようにしてください)

注)固有セクション プロフィール+SNSリンク
不要な場合は取り除きができます。

注)固有セクション プロフィール
不要な場合は取り除きができます。

注)固有セクション SNSリンク
不要な場合は取り除きができます。

注)固有セクション 最新記事リスト
不要な場合は取り除きができます。

注)スムーススクロールボタン+ダークモード切り替え
不要な場合は取り除きができます。

注)ダークモード切り替え
不要な場合は取り除きができます。

注)スムーススクロールボタンモーション
ボタンを常時表示に変更できます。

注)スムーススクロールボタン
不要な場合は取り除きができます。

注)JSスクロール
ブラウザネイティブスクロール(CSS)からJSスクロールに変更できます。

注)新着マーク
マーク表示日数を指定できます。

注)リスト型ページネーション
表示リンク数を指定できます。

注)ナビゲーション ピーカブースタイル
下スクロールで非表示、上スクロールで表示、という視認領域を調整できるスタイルに変更できます。

注)コメントフォーム高さ自動
マウスドラッグで拡縮できる通常タイプに変更できます。

注)ドロワー解除ポイント
ドロワーの解除地点を変更できます。

注)FC2検索バー
検索バー非利用はJSを一つ減らすことができます。

注)スマホフッター広告
広告非表示サービスが終了した際にスムーススクロールボタンとの干渉を避けることができます。

上記に含まれないカスタマイズ内容についてはガイダンスが無い、ということではありません。上記はあくまでもHTMLのガイダンスです。その他はCSS操作、つまりスタイルシート内でガイドされています。

ガイダンスの末尾に 1/2 や 2/4 など数字が表示されているのは『操作手順がいくつあり、そのうちのいくつ』という意味です。1/2 は2手順のうちの1つ目、ということですね。全て行わないと完了しませんので漏れが無いようしっかりチェックしましょう。また、全てがHTMLだけで完了するとも限らず、HTMLとスタイルシート双方に渡っている場合もあります。Ctrl + F を上手く利用してスラッシュ前後の数字が同じになるまで検索チェックを行ってください。

ブラウザ上で作業される方は どこまでが同一行なのか非常にわかりづらい と思います。FC2ブログのソースコードボックスは折り返しが効く設定なので、長い文字列の一行が自動折り返しされて複数行に見えてしまいます。この点についてはどうしようもないので、前後のインデントの様子で判断するか、最も良い方法は専用エディターを利用することです。

テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします

テンプレートのカスタマイズをよくしている、という方に 「HTMLエディター」 をおすすめしたいと思います。「テキストエディター」という呼び方もされます。 なんとなく上級者向けなイメージがあるかもしれませんが、寧ろ初心者の方ほど積極的に使って欲しい と思います。...

vanillaice000.blog.fc2.com

ナビゲーションカスタマイズ【重要】

リンクを追加したり、フォントを大きくするなどのカスタマイズをされた場合、ドロワーから横並びナビゲーションに変化するポイント(地点)操作 を怠らないようにしましょう。極端な例は以下のようなものです。

リンクを4つ追加しています。上記はパソコンの様子でブラウザの幅は1500pxです。グローバルナビゲーションはサイト内の主要なページへの導線なのでむやみにリンクを増やさない注意も必要ですが、極端な例として。

本テンプレートは レスポンシブデザイン ですから、レイアウトはブラウズサイズあるいはデバイスサイズに依存します。

これだと左側のサイト内検索がまともに使えない状態です。まだギリギリ収まってはいますが、これ以上リンクが増える、あるいはフォントサイズを大きくしてしまうと ナビゲーションからリンクがはみ出してレスポンシブデザインが崩壊します。

みなさん、ご自身がいつもブラウズするサイズでの確認はするんですが、他者の環境が自分のそれと同じとは限らない 点を忘れないようにしてください。ある人は1000px幅で見ているかもしれませんし、またある人は1800px、768pxなど様々です。カスタマイズする際は ブラウザ幅を広げたり縮めたりして目視確認を行う よう心がけてくださいね。

対処としては前章にある 注)ドロワー解除ポイント が該当ガイダンスです。現在はモバイルファーストですから、『ドロワー起動ポイント』ではなく『ドロワー解除ポイント』という表現になっています。ここを取り違えると真逆の作業をしてしまいますので、スマホで有効化されているドロワーを、何pxで解除するのか という意味だと念頭に置いてカスタマイズに臨んでください。

デフォルトは BREAKPOINT = 721; と、721pxを含みそれ以上のブラウズサイズで解除されます。この数値を大きくすることでドロワー状態を規定数値まで維持できます。HTMLとスタイルシート各1箇所づつ操作する必要がありますのでいずれかを変更し忘れないようしっかり行ってください。

直感的に数値を変更できるようJSソースコードも変更・手直ししましたので簡単にできるかと思います。「どの数値を入れたら良いかわからないなぁ」という場合は最初はあてずっぽうで構いません。変更の都度目視確認をし、適切と思われるポイントを探してください。サンプルを例にするならば1200px程度が妥当かな、と思います。1199pxまではドロワー、それを超えたら横並びナビゲーションに切り替わる、という形です。こちらもこれまでの章内容と同様 単位は付けない ようにしますが、スタイルシート操作も1箇所必要でそちらはpx単位必須です。

逆にリンク数を減らした場合は特に何もする必要はありません。

また、今回はドロワーの展開を『右から(デフォルト)』『左から』『上から』の3方向を選択できるようにしてあります。上からはドロワーというよりアコーディオンと表現した方が適切かもしれません。right left top いずれかの単語を記載するだけです。展開軸を変更したらハンバーガーボタンやドロワーを閉じるボタンの位置も変更したくなると思いますので、こちらはデフォルトの『右』から行削除だけで左に変更できるようにしてあります。キーワードはそれぞれ 注)ドロワー展開軸 (HTML) と ハンバーガーボタン位置 (スタイルシート) そして ドロワー内閉じるボタン (スタイルシート) です。スタイルシートはガイダンスがまとまっているため 注) は省いてあります。

JSカスタマイズ全般の注意

本作では簡単に数値調整ができるようJSをこれまでの形式から改変しています。それは 通常は手を出しづらいJSソースコードに手を加えている ことにほかなりません。なので以下の点には十分注意を払うようにしましょう。

1. 記号を変えてしまわない
2. ソースコードを任意改行してしまわない
3. コメントアウトする場合は正しく利用する

① はまず稀ではありますが、例えば以下のような内容

const ROOTMARGIN = 100,

const PAGENUM = 7;

末尾の記号が前者は , 後者は ; です。これをなんとなく気持ち悪いな、というので揃えてしまったりはダメ。記号にも意味がありますのでコードの見た目に囚われないようにしてください。もちろん大文字と小文字を変更、とかもいけません。

② コードの任意改行(Enter/ returnキー押下)も避けましょう。改行自体は可能なので上級者さんには禁じませんが、初心者さんは改行位置を間違えるとコードが破綻してしまいますので『行わない, 行ってはいけない』ということにしたいと思います。

③ コメントアウトはHTML, CSS, JS で使い分ける必要があります。正しく利用するようにしましょう。

コメントアウトを活用しよう

コメントアウト とは何か、から始まり、FC2ブログでの活用方法などを記しています。以前にも記事にしたことのある内容ですが改めて新規でUPします。...

vanillaice000.blog.fc2.com

スムーススクロールについて

デフォルトではブラウザのネイティブスクロールを採用しています。

【smooth scroll】JSとCSSの挙動の違い

これまでページ内のスムーススクロールはJavaScriptを用いて行うのが定石でしたが、CSSの scroll-behavior プロパティ が大半のブラウザで実装済みになりましたので、今後はJSを使わず簡単にできるようになります。...

vanillaice000.blog.fc2.com

ネイティブスクロールはクセが強いためJSに戻したい方も少なくないと思います。その場合は 注)JSスクロール を目印にガイダンスに従ってください。

リストページの訪問済みリンクについて

本作でリスト形式のページは以下の通りです。

• カテゴリページ
• タグページ
• 月日別ページ
• 検索結果ページ
• 全記事リスト(INDEX)ページ

アイテム左上にところどころ緑色のチェックマークが表示されています。こちらは 訪問済リンク です。リストページではリンク範囲を大きくしているので記事タイトルはリンク色ではなく通常テキスト色を指定しています。訪問済の色を別に指定したり、グレーアウトや不透明度操作などを行うと却って混乱するような気がしますので、チェックマークでの表現を選択しました。

視覚的に煩わしいと感じる場合は、ガイダンスキーワード 注)訪問済チェックマーク で検索し、削除を行ってください(チェックマーク色変更も可能です)

* 訪問済か否かの判定はブラウザ単位で行われますので、閲覧ブラウザ変更・デバイス変更で状態が合致しなくなる点に留意してください。

ページネーションの複製について

割とご要望の届く ページネーションを上部にも掲載したい という件。ページネーションは2種あります。

いずれもページの終盤ほどに位置しています。

リスト型の複製はあらかじめHTMLを記載してありますので 注)リスト型ページネーション複製 で検索してガイダンスに従ってください。『次のページ』は省いてあります。今回リンク数の調整も可能にしてあり、狭い画面では円形のリンクが下へ折り返したりもしますので、さらに『次のページ』リンクがあると結構場所を取られてしまいます。省スペースの意味でも省略をおすすめします。

個別記事専用の複製は準備していません。更新順と同カテゴリ内の2種があり、どちらが必要か、あるいはいずれも必要なのか等、私では判断がつきませんので必要ならばご自身で行ってください。複製対象範囲さえ間違えなければ簡単にできます。ただし 画像の取得はユーザーによる任意スクロールが始まった直後 です。ページ表示スピードを維持するためそういう仕組になっています。ですからファーストビュー(above the fold)内に複製してしまうと初期状態が画像抜けになります。複製される場合はファーストビューを避けることをおすすめします。 どうしても最上部付近に、という場合は JSを新たに作成する必要があります。そのための指南は私の方では行いませんので、自力・独力で行ってください。

個別記事最上部なら画像なし前後リンクだけでも良いような気もします。その場合は 既存HTMLの使いまわしを避ける ようにしてください。idはもちろんのこと、classを流用してしまうと既存ページネーションのJSが処理を行ってエラーが生じてしまいますので、新たなHTML、新たなスタイルを設けるようにしましょう。

個別記事ページネーションについてまとめます。

• 完全複製 --- ファーストビュー掲載を避ける
• 自身で作成する --- 掲載位置不問, 既存id及び既存class流用不可

表示・レイアウトがおかしいと思ったときは

以下手順をまず行ってください。

1. DEMOと比較する
2. プラグインを一旦『無効』にする

テンプレートカスタマイズ前、デフォルトの状態で既に崩れている場合、原因のほとんどが プラグイン です。多くの場合は自身が任意にHTMLを書き記した フリーエリア に起因しています。HTML内容にミスがあるなどですね。

また、特定の記事で崩れるという場合は 記事内で利用したHTML にミスが存在するかもしれません。

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

Cautions before asking for something.

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

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

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

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

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

* これまで記載していたLighthouseスコアですが、全文表示タイプのみ検証が不能になっており比較対象の役割を果たせないため掲載を辞めました。