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

Expanseテンプレート

Expanseテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Expanse
いくすぱんす
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • ドロワーサイドメニュー
  • プロフィール + SNSリンクリスト
  • 最新記事サムネイルリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Bebas Neue 本フォントは全て大文字表記です。
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.5 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 ver.4 2023.12.22
  • グローバルナビゲーションを固定できるようJSを分離

自身で修正される場合は

<script src="https://blog-imgs-161.fc2.com/v/a/n/vanillaice000/expanse_min.js" async></script>

上記赤字部位のURLを下記の通り変更

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/expanse_ver4.js" async></script>

続いて </body> の直前に以下のscript要素を追加。

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/peekaboo_navigation.js" async></script>
更新 2023.10.2
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ダークモードの切り替えを任意にしました
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
  • その他UI調整

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

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

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

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

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

サンプル

Samples

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

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

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

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

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

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

検索バーの設定

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

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

メタタグの設定 > OGP設定

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

OGP設定あり
OGP設定無し

このテンプレートに向かないブログ

This theme might be unsuitable for some people

このテンプレートに適さないかもしれないブログは以下の通りです。

  • アフィリエイトに力を入れている
  • 記事に画像を掲載する機会が少ない、掲載していても縦横サイズが小さい(長辺1200程度を想定)
  • 掲載画像の容量やサイズが大きすぎる(500KBを超える, 長辺2000pxを超える など)
  • 文字を含むスクリーンショット画像をアイキャッチに指定することが多い

サイドメニューが折りたたまれているテンプレートは元々アフィリエイターさんとあまり相性は良くありません(広告をサイドメニュー部に掲載する場合)
また、画像なしのアイテムが多いと成り立ちにくいデザインです。

画像の容量やサイズについては、ブログの記事内掲載では1画像あたり 長辺1000〜1500px前後、100KB前後 が妥当です。

グリッドページではアイキャッチ(サムネイル画像)上に記事タイトルが乗るため、背面に文字があると非常に見づらいものになります。スクリーンショットをアイキャッチにする頻度が高い方、スクリーンショットでなくとも記事タイトルを含んだアイキャッチなども不向きと言えると思います。

記事編集リンクについて

Location of edit icon

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

ページ遷移エフェクトの除外

How to exclude 'a' element from page transition effect.

a要素をトリガーとする何らかのJSを導入している方は、ページ遷移のエフェクトと衝突する可能性があります。その場合は

a:not([href^="#"]):not([target]):not(.sns-bell)

という部位がHTML内にありますので、この後ろに対象となるa要素のclass名を記して除外してください。以下は例です。

a:not([href^="#"]):not([target]):not(.sns-bell):not(.luminous)

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

Common customization.

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

ぼっちん
2023/05/28 (Sun) 22:05

class="luminous" の挙動が異様

Akiraちゃん、こんばんは ^^

まだ「Expanse」のカスタマイズが追いついていないので「適用」させてなく、スクショ表現も出来ない内容で申し訳ないんですが……
画像拡大スクリプトのLuminous用に、class="luminous"を利かせると、そのCSSの挙動?が怪しくなるようです。
Luminousでの拡大表示が出来た瞬間(同時)に、通常のaタグリンクでの画像表示状態になってしまうのです。
当然クリックしてもクリック前の記事画面に戻りません。

恐れ入りますが、同挙動のご確認をお願い致します 😮

vanillaice (Akira)
vanillaice (Akira)
2023/05/29 (Mon) 00:47

To ぼっちんさん

こんばんは ('0')/

除外の方法を追記しましたのでご確認くださいね(ページ遷移エフェクトの制御)

第二手順の &&〜 の方は不要かと思いますが一応入れておいてください。

ぼっちん
2023/05/29 (Mon) 06:25

To vanillaice (Akira)さん

おはようございます ^^

いや、素晴らしいです、もうもう完璧です 😃
古稀過ぎぼっちんの脳みそでは、このようなJSコンクリフトの回避方法はまったく思いつきませんでした(笑)

ほんとにありがとうございました m(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2023/05/29 (Mon) 17:18

To ぼっちんさん

こんにちは ('0')/
説明が無く不親切でした。お手数おかけしてごめんなさいね。
こちらこそいつもありがとうございます :)

あみきん
2023/07/19 (Wed) 16:43

Akiraさん
こんにちは。
Expanseでは、ある記事をトップにしばらく固定することはできますか?

vanillaice (Akira)
vanillaice (Akira)
2023/07/20 (Thu) 01:19

To あみきんさん

こんばんは ('0')/

> ある記事をトップにしばらく固定することはできますか?〜

この言葉通りのことを実現する機能はありませんが、以下に該当する場合はそれぞれの機能をご利用ください。

1. 時系列に関係なく特定の記事を1件目として表示する(固定表示)
= 記事作成画面の『記事設定』に『固定表示』というのがありますのでそちらにチェックを入れる(期間の指定はできませんので手動で解除する必要があります, 固定するだけなのでnewマークは指定期日を経過すれば消えます, RSSも固定されますので、例えばランキングなどに影響が出るかもしれません(固定させている間はその記事が最新として扱われるため))

2. 一定期間表示させた後に非表示化する
= 記事作成画面の『記事設定』に『期間限定』というのがあります。期間を過ぎると公開から下書きに切り替わります。

あみきん
2023/07/20 (Thu) 10:37

To vanillaice (Akira)さん

Akiraさん
ありがとうございました。
FC2の設定に固定表示があったのですね!
ありました!これを利用させてもらいます。
期間限定もあるんだ~
テンプレートと関係ない質問になり、すみません💦

-
2023/10/30 (Mon) 14:23

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/31 (Tue) 21:41

To 名称の件 内緒さん

こんばんは ('0')/
お知らせありがとうございます。訂正しました :)

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