Expanseテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Expanse いくすぱんす |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事内で使える見出しレベル | h2 から h6 まで |
| jQuery導入 | なし (Vanilla JSのみ利用) |
| Google fonts導入 | あり Bebas Neue
|
| Font Awesome導入 | なし (インラインSVGを利用) |
| Lazyloading導入 | あり |
| OSダークモード対応 | あり |
| 構造化マークアップ |
|
| Lighthouseスコア (トップページ平均) |
|
| 固有機能 |
その他機能及び使い方詳細は ARTICLE DEMO を参照
|
| ライセンス | Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
|
| パソコン | タブレット | スマートフォン |
|
|
|
| カラム数 : 1 | カラム数 : 1 | カラム数 : 1 |
| サイドメニュー : 右ドロワー | サイドメニュー : 右ドロワー | サイドメニュー : 右ドロワー |
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。
カスタマイズのコツ
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
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
この設定を済ませた方はテンプレートからJSをひとつ減らせます。 注)FC2検索バー非表示の方 で検索すると出てきますのでガイダンスに従ってください。
メタタグの設定 > OGP設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
このテンプレートに向かないブログ
This theme might be unsuitable for some people
このテンプレートに適さないかもしれないブログは以下の通りです。
- アフィリエイトに力を入れている
- 記事に画像を掲載する機会が少ない、掲載していても縦横サイズが小さい(長辺1200程度を想定)
- 掲載画像の容量やサイズが大きすぎる(500KBを超える, 長辺2000pxを超える など)
- 文字を含むスクリーンショット画像をアイキャッチに指定することが多い
サイドメニューが折りたたまれているテンプレートは元々アフィリエイターさんとあまり相性は良くありません(広告をサイドメニュー部に掲載する場合)
また、画像なしのアイテムが多いと成り立ちにくいデザインです。
画像の容量やサイズについては、ブログの記事内掲載では1画像あたり 長辺1000〜1500px前後、100KB前後 が妥当です。
グリッドページではアイキャッチ(サムネイル画像)上に記事タイトルが乗るため、背面に文字があると非常に見づらいものになります。スクリーンショットをアイキャッチにする頻度が高い方、スクリーンショットでなくとも記事タイトルを含んだアイキャッチなども不向きと言えると思います。
Lighthouseスコアについて
About 'Lighthouse' score
ページ遷移時にフェイドイン・アウトのエフェクトを付けています。
エフェクトを外したい方は 注)ページ遷移エフェクト不要の方 で検索すると注釈が 2箇所 出てきますので、ガイダンスに従って処理してください。
表示が遅いと思わせないギリギリ譲歩できるところまで調整していますので、JSを理解できている、という方以外は秒数調整を含むJS内容の変更はおすすめしません。また、ページのロード(loadイベント)を待っていると個人環境によっては表示が大幅に遅くなる可能性がありますので、DOMツリー読み込み後(DomContentLoadedイベント)に発火させています。
参考までにページのロードを遅くする原因の大半は以下のようなものです(個人環境にあたります)
- 非同期読み込みをしていない多数の広告
- 容量削減(ロスレス圧縮)していない画像
- プラグイン(FC2, 第三サービス含む)
- 遅延ロードしていない動画
また、グリッドページでは速度対策として
- 画像遅延ロード(lazyloading)
- PCとスマートフォンでのオリジナル画像サイズ切り替え
などを行っています。特にPCでは、みなさんがアップロードした画像の容量がそのまま反映されますので、ロスレス圧縮を怠らないようにしましょう。どうしても容量や縦横サイズの大きな画像を記事に掲載したい場合は、サムネイル対象用として『アイキャッチ画像』機能を利用して 長辺1200px、容量100KB前後 に調整したものを指定するなどの工夫もおすすめです。
また、PCとスマホの表示画像の切り替えることでグリッドページにおいて GIF動画はPCでは動きますが、スマホでは静止画になります ので予めご了承をお願いします。
その他のスコアについてもカスタマイズ内容や記事の書き方によって大きく数値が変わることがあります。主に
- JSウィジェット(アクセス解析, RSS表示, Twitterタイムライン など)の導入
- 色調(フォント色, 背景色 など)の変更によるコントラスト比(contrast ratio)の低下
- フォントサイズ変更(デフォルトよりも小さくする場合, 特にサイドメニュープラグイン)
- 行間の変更(デフォルトよりも狭くする場合)
- 掲載プラグインの内容
- 記事やサイドメニューへの掲載画像の容量を削減していない
- コメント欄で使用されたフォント色
などお気をつけください。
ページ遷移エフェクトの制御
How to control page transition effect.
Luminous など、a要素 をトリガーにする何らかのJSとの衝突を防ぐには以下のような処理を行ってください。
a:not([href^="#"]):not([target])で検索するとHTML内に 2箇所 あります。not:() が除外を意味しますので、例えばluminousであれば『クラス名に luminous を持つa要素は除外』といった指定が可能です。
a:not([href^="#"]):not([target]):not(.luminous)続いて、
&& !e.target.hasAttribute('target')という部位が 1箇所 ありますので、この後ろにさきほど除外したものを追加します。
&& !e.target.hasAttribute('target') && !e.target.classList.contains('luminous')全記事リストについて
About 'titlelist' page.
ページ種の中で最も表示の遅い 全記事リスト (本テンプレートでは『INDEX』としてリンク表記してあります) について、既存テンプレートでは表示速度対策を行っており素早く開けるようにしてあるんですが、今回はその対策が申請却下要因とみなされたようです。なので恐らく本テンプレートではもちろんのこと、今後リリースするテンプレートでも利用できない対策となってしまいました。
FC2ブログでの通常の速度になりますので、非常に遅いです。めちゃくちゃ遅いです ^^;
運営の方針として受け入れるしかありません。申し訳ないです。
ナビゲーション内ブログタイトルをロゴ画像に変更する
How to put logo image in the navigation bar.
デフォルトは以下のようなテキスト表示です。
ロゴ画像に変更する際の注意点は以下の通りです。
- 画像の高さは120〜180pxを推奨
- 背景透過PNGを推奨
- シンプルで複雑な色の組み合わせではないものを推奨
- ナビゲーション背景色の反対色で作成
①横幅ではなく 高さ を基準にします。②背景を付けてしまうとナビゲーションの背景色と完全同色でない限り浮いてしまいます。背景色付きの画像の利用を避けられない場合はナビゲーション背景色を変更するなどの工夫が必要になります。③同じくナビゲーションとの色合わせが複雑になるため、できるだけ単色のものが望ましいです。④はナビゲーション反対色で最初から作成できれば良いですが、できない場合の対処は後述します。
サンプルとして以下のような画像を利用するとします。
* 画像自体の背景は透過されていますが、ダークモードをご利用中の方にもわかるよう、CSSで背景色 rgb(255,255,255) を指定しています。
サンプル画像は 横 1158px, 高さ 160px の 背景透過PNG です。
シャドウの具合でわかるように、上下左右に余白なし(内容切り抜きされている)ものです。画像編集時に余白をつけても構いませんが、無い方がCSSでの微調整がし易いかと思います。
HTML編集
<a class="navbar-blog_name-anchor" href="<%url>"><%blog_name></a>で検索するとテンプレートHTML内に見つけられますので、この部位を以下の通り修正します。
<a class="navbar-blog_name-anchor" href="<%url>"><img src="画像URL" width="横幅" height="高さ" alt="ブログ名"></a>- 画像URL
- 画像横幅
- 画像高さ
- ブログ名
を適切な内容に書き換え必須です。横幅・高さは 単位を書かない よう注意します。
width="500px" height="120px"
width="500" height="120"
ナビゲーション部位はPCでもスマホでもファーストビュー(above the fold)の範囲内なので loading="lazy" を付加する必要はありません(寧ろ書かないのがベター)
CSS追加
以下の内容をテンプレートスタイルシートの最終に追加します。
.navbar-blog_name-anchor {
display: flex;
justify-content: canter;
align-items: center;
height: 100%;
max-height: initial;
padding: 12px 0;/* 上下余白12px 左右余白0px, 適宜調整 */
}
.navbar-blog_name-anchor > img {
width: auto;
height: 100%;
filter: brightness(0) invert(1);/* 画像色反転, 不要な場合は削除 */
}
7行目と13行目が重要です。サンプル画像の場合は四方に余白が無いので、高さがナビゲーションの高さいっぱいになり不格好です。そのため7行目で余白を作成しています。使用するロゴ画像によっては不要な指定です。13行目の指定は画像の色調を反転させるためのものでこちらも不要になる可能性があります。
ナビゲーションリンクを追加する場合
How to add link to navigation.
本テンプレートではメインのナビゲーション(グローバルナビゲーション)をサイドメニュープラグインと同様にドロワー内に格納しています。
- HOME --- ホームページへ
- INDEX --- 全記事リスト
- LOG IN --- FC2ブロガーは自分の管理画面へ(ログアウト状態のときはログイン画面へ, FC2ID非保有者はアカウント取得画面へ)
の3つがデフォルトで記載されています。
リンク追加場所とhtmlソースコード
注)リンク追加ここから で検索すると追加可能箇所が出てきます。追加のコードはこのガイダンスのすぐ下の構成に倣ってください。心配な方は以下の内容を該当位置へコピペ。
<li class="main_navi-item"><a class="main_navi-anchor" href="遷移先URL">表示テキスト</a></li>
リンク追加 注意点『インデント』
ガイダンスにある通り 全角スペースでインデントを行わない よう注意してください。
インデント無し
半角スペースでインデント
全角スペースでインデント 構文エラーでレイアウトが崩れます。
No imageアイテムについて
About 'No image' in grid layout.
今回は記事内に画像がなく、アイキャッチ画像指定も無い場合は『画像なし + 画像ありアイテムと若干のレイアウト違い』で表示させるようにしてあります。
記事タイトルなどのテキストがアイテム上下中央に載るため、画像下に『No image』などの文言があると見づらい可能性がありますので『No image用画像なし(個人設定の代替画像も表示されません)』としました。この部位に画像を表示させるなどのカスタマイズは自力でお願いします。
グリッドアイテム間の余白について
How to adjust space between items in grid.
デフォルトでは記事同士の余白を 4px に設定しています。変更したい方はスタイルシート内の --gap-grid の値を変更してください。
余白を無くす場合、画像なしアイテムが隣接すると区切りが不明瞭になりますので、毎回必ずアイキャッチを画像を掲載(あるいはアイキャッチ画像指定)している方以外は向きません。
余白を大きくする場合、今回のデザインはデバイスの横幅いっぱいを使い切るようになっていますので、アイテム余白を広げすぎると不格好になる可能性があります。ほどほどに調整してください。
ドミナントカラー
You can easily change dominant color.
ドミナントカラーはデフォルトで rgb(110,116,142) に設定しています。別の色にするにはスタイルシート内の --bgcolor-dominant の値を変更します。
ドミナントカラー変更時には --color-dominant-reverse に反対色を指定してテキストカラーの視認性を確保するようにしてください。
記事横幅の変更
How to adjust blog post width.
記事の横幅を調整するには --width-article_max の値を変更してください。デフォルトは 1100px です。この調整はグリッドページに影響しません。
コメント装飾ツールについて
How to activate 'comment js'.
コメント投稿者が文字サイズなどを装飾するための『コメント装飾ツール』をデフォルトでは閉鎖状態にしてあります。これまでいくつかの OSダークモード対応テンプレート を提供してきましたが、OSダークモード対応であるという点に留意している管理人(テンプレートユーザー)が非常に少ない ようです。まして訪問者であればなおさらです。
OSダークモードがOFFの状態(つまり白背景状態)のみを想定して文字色を任意変更してしまうと、ON状態のときに著しく視認性が低下してしまいます。
管理人は記事を書く際などの文字色指定を気をつけて頂きたいんですが、コメント欄について訪問者の意図をコントロールすることはできませんし、ツールを掲載しておいて「使わないでくれ」というのはナンセンスなのでデフォルトで非表示にしました。
注意点を踏まえた上で、やはり装飾ツールが必要という場合は 注)コメント装飾ツール必要な方 で検索し、ガイダンスに従って有効化してください。2箇所 (コメント投稿用, コメント編集用)ありますのでお忘れなく。
SNSボタンについて
About SNS buttons.
本テンプレートは『SNSシェアボタン』と『SNSリンクボタン(自身のSNSページへの誘導ボタン)』の2種があります。
SNSシェア 全削除または部分削除
注)注)SNSシェアボタン不要の方 で検索すると出てきますのでガイダンスに従ってください。* 2箇所あります。
また、デフォルトに無いSNSのシェアについては 当方でアイコンの準備等は致しません ので、ご自身で準備とhtml, CSS調整をお願いします。
SNSリンク 全削除または部分削除
注)SNSリンク不要の方 で検索すると出てきますのでガイダンスに従ってください。こちらも同様に追加アイコン等はご自身で準備をお願いします。
テンプレート製作者側でみなさんのSNSのURLは把握できませんので、自身でURL記載必須 です。
欧文フォント(Google Fonts) について
About Latin text font provided by Google.
webフォント利用で生じる FOUT(フォント切り替わり時に起こるチラつき) の対策を行うとLighthouseで減点されるようになりましたので、従来の方針を変更しました。本テンプレートデフォルトwebフォントは Bebas Neue (以下 本フォント と表現) です。
使用箇所は以下の部位です。
- グリッドページの日付
- Comment, Trackback, Search Results, Index, Edit Comment など一部の見出し
該当部位を英語から日本語に書き換えるカスタマイズが行われる可能性を考慮して、和文フォントの指定も同時に行っています。本フォント表記対象のHTMLには wf-tar のクラス名を付与しています。記事内で本フォントを利用したい場合は
<p class="wf-tar">文章</p>または
<div class="wf-tar">文章</div><span class="wf-tar">文章</span>といった方法が有効です。注意点は以下の通り。
- テンプレートを変更するとスタイルが消失するか、適用テンプレートの指定に倣います
- アルファベットまたは数字を含まないテキストの場合は意味がありません
- 本フォントは和文との相性はよろしくありませんので和欧混合テキストの場合はご一考ください
- 本フォントは全て大文字表記になります
和文フォント変更
How to change Japanese text font.
--font_family-base と --font_family-latin の2行が対象です。和文を書き換える場合もMac, Windowsの双方を意識するようにしましょう。デフォルトは
| OS名 | 第一 | 第二 | 第三 | 総称ファミリー |
| Mac | HiraKakuPro-W3 (ヒラギノ角ゴ Pro W3) | Hiragino Sans (ヒラギノ角ゴシック) | YuGothic (游ゴシック) | sans-serif |
| Windows | Meiryo (メイリオ) | Yu Gothic (游ゴシック) | なし | sans-serif |
自身の所有OSだけで考えてしまい、カスタマイズ時にいずれかに存在しないフォントを指定しまう方が多いので、上記の表と実際のCSS指定を見比べ、自身が所有するOSのフォント指定のみ書き換えて ください。書き換え時は英語名で記します。
(例:「ヒラギノ丸ゴ Pro」を指定したい場合は 'Hiragino Maru Gothic Pro')
フォントのバンドル状況はOSのバージョンによっても変わり、正直デフォルト以外の指定はおすすめできませんので、せいぜい優先順位を入れ替える程度になるかと思います。また、スマートフォンのAndroidの場合、合致するフォントが無いのでシステムフォントの Noto Sans CJK で表示されます。
また、欧文フォントはアルファベット, 記号, 数字 しか持ちませんので日本語を考慮しませんが、和文フォントはアルファベットなども入っていますので、欧文フォント指定を削除して和文フォントで全てをまかなう、という方法もあります。
(当然デザインが違うので英文・英単語表記時の見易さや好みとは別の問題です。)
明朝体にしたい場合のフォント指定は個人的に以下の一択かな、と思います。
(以下は欧文指定に Times New Roman を指定, MS PMincho を含み以降がWindows用フォント指定, Mac・Windows共通総称ファミリーは serif)
'Times New Roman', 'Hiragino Mincho ProN', YuMincho, 'MS PMincho', 'MS Mincho', serif記事編集リンクについて
Location of edit icon
個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソルをデフォルト(pointer(指マーク)ではない、という意味)にしてあります。
タグについて
About tag page
記事ヘッダー下にあるタグは 自身のブログ内タグページへ の遷移です。
記事フッター上にあるタグは FC2ブログ タグポータルページへ の遷移です。
ポータルの方はハッシュが付いていますので、いわゆる「ハッシュタグ」として外部への遷移です。一般の閲覧者さんにも意味はわかるのではないかな、と思います。
自身のブログ内タグページは必要だとして、外部遷移(ハッシュタグの方)が不要な場合は 注)タグポータルリンク不要の方 で該当部位が出てきますので、ガイダンスに従って削除してください。
サイドメニュー内容
About aside menu
サイドメニュー部にある『About Me』『Recent』『Subscribe and Follow』はテンプレートで独自に入れているもので、プラグインではありません。自分で追加したプラグインと内容がかぶることがありますので、できればプラグイン側の非表示をおすすめします。理由は以下の通り。
- 表示が早い --- Subscribe〜(更新通知ボタン)
- 画像のlazyload --- Recent(最新記事サムネイル付き)
- テンプレートに合わせたデザイン
順序はプラグイン側のカテゴリ分けとこれらのhtmlの記載位置を上手く利用すれば自由に並べ替えできます。
CSS代替テキストについて
About alternative text in CSS.
画像htmlのalt属性のことではなく、各所で何かが「無い」ときに表示させるテキストのことです。本テンプレートでは以下の条件で表示されます。
- 検索結果なし
- コメント未受信 (受け付けているが未だ0件)
- コメント受付終了 (既に受信したコメントは表示)
検索結果なし
顔文字変更は .hit0::before で検索し、このルールセット内の content: "(≥o≤)"; 緑部位を変更。顔文字不要の方はこのルールセットを削除します。
文言変更は .hit0::after で検索し、このルールセット内の content: "該当する記事はありません。\aSorry, there are no results available"; を変更。和文と欧文の間にある \a は 改行 です。改行不要であれば削除。
改行は \a 以外ではできませんので、htmlと混同して <br> などを記さないよう注意してください。
コメント未受信
.comment-number0::before で検索し、上記と同じ要領で変更。
コメント受付終了
こちらは2017年頃追加された機能です。既にコメントをもらっている記事で、新規コメントを受け付けないが、既存コメントは表示しておく、という場合に用います。設定場所は記事作成画面の以下の項目です。
#comment_wrap::before で検索し、上記と同じ要領で変更。
OSダークモード対応について
About dark mode.
本テンプレートはOSのダークモードに対応しています。カスタマイズをする際にはその点に留意してください。ダークモード不要の場合やダークモードの目視確認が困難な場合はダークモード対応自体を取り除く ことをおすすめします。
注)ダークモード対応 注)ダークのみ利用 で検索すると、ダークモード停止の仕方や、ダークモードデザイン統一(ライトの廃止)などのガイダンスが出てきますので手順に沿ってください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログURLを明記
・ 問題が生じている場合はその内容を確認できるページのURLを明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記4点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.