OATHテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | OATH おーす |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事内で使える見出しレベル | h2 から h6 まで |
| jQuery導入 | なし (Vanilla JSのみ利用) |
| Google fonts導入 | あり (ポイント欧文フォントで使用) |
| 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 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム | 1カラム | 1カラム |
| サイドメニュー --- 右 | サイドメニュー --- 下 | サイドメニュー --- 下 |
- メインJSファイル再変更
サンプル
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設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
Lighthouseスコアについて
About 'Lighthouse' score
今回はスコア低めです。スプラッシュ(アクセス時に最初に表示される代替画面)の通常の利用意義は、アクセスあるいは起動直後にレイアウトが整うまでの時間稼ぎ的目隠し表示のようなもので、主に動画サイトなど比較的「表示が重たい」ページなどに用いられます。本テンプレートではそういったこと(レイアウトの整備が遅い, コンテンツの取得に時間がかかる 等)は無く、単に遊びゴコロとして導入しており、メインコンテンツ表示を数秒遅延させています。
スプラッシュを外したい方は 注)スプラッシュ不要の方 で検索すると注釈が出てきますので、ガイダンスに従って処理してください。
また、その他のスコアについてもカスタマイズ内容や記事の書き方によって大きく数値が変わることがあります。主に
- JSウィジェット(アクセス解析, RSS表示, Twitterタイムライン など)の導入
- 色調(フォント色, 背景色 など)の変更によるコントラスト比(contrast ratio)の低下
- フォントサイズ変更(デフォルトよりも小さくする場合, 特にサイドメニュープラグイン)
- 行間の変更(デフォルトよりも狭くする場合)
- 掲載プラグインの内容
- 記事やサイドメニューへの掲載画像の容量を削減していない
- コメント欄で使用されたフォント色
などお気をつけください。
グリッドの画像解像度が気になる場合
How to fix low resalution images in grid layout.
グリッドでのサムネイル画像の解像度が低いと感じる場合は <%topentry_image_url_760x420> で検索するとhtml内に2箇所ありますので、最初の方を <%topentry_image_url> に書き換えてください。
2つ目の方は個別記事下のSNSシェアの背景です。こちらは画像上にオーバーレイが乗りますので解像度については見た目に緩和されますが気になるならば同じ手順で変更を。
カラム入れ替えの仕方
How to reverse the direction of rows.
.container で検索するとスタイルシート内に3つあります。3つ目のルールセット内 max-width: var(--width-whole-pc); の下の行に flex-direction: row-reverse; を追加
(インデントをつける場合は必ず半角スペースで！)
続いて直近、下の方(上にもありますが下の方) .secondary のルールセット内 margin-left: var(--gap); の緑部位 left を right に変更。
ナビゲーションリンクを追加する場合
How to add link to navigation.
デフォルトでは
- CATEGORIES --- カテゴリリスト
- INDEX --- 全記事リスト
- LOG IN --- FC2ブロガーは自分の管理画面へ(ログアウト状態のときはログイン画面へ, FC2ブロガー以外はアカウント取得画面へ)
の3つが記載されています。
追加場所とhtmlソースコード
注)リンク追加ここから で検索すると追加可能箇所が出てきます。追加のコードはこのガイダンスのすぐ下の構成に倣ってください。心配な方は以下の内容を該当位置へコピペ。
<li class="navi-item">
<a class="navi-anchor" href="遷移先アドレス">表示テキスト</a>
</li>
リンク追加 注意点『インデント』
ガイダンスにある通り 全角スペースでインデントを行わない よう注意してください。
インデント無し
半角スペースでインデント
全角スペースでインデント 構文エラーでレイアウトが崩れます。
リンク追加 注意点『順序』
テンプレート構造上、スマートフォンでは記載順序通り(html上から順) に、パソコンでは記載順序と逆(html下から順) になりますので、リンクを複数追加する際にはその点を踏まえて記載順序を決めてください。
リンク追加 注意点『レスポンシブ』
本テンプレートでのナビゲーションはスマートフォンやタブレットでドロワー(右からスライド)に切り替わります。本テンプレートは レスポンシブウェブデザイン ですから、カスタマイズの際には必ず ブラウザの横幅を拡大・縮小して見た目を確認 してください。
多くのリンクを追加する、あるいは表示テキストの長いリンクを追加すると、リンク群に押されてブログタイトルの表示スペースが小さくなり、場合によっては見た目や使い勝手が悪くなります。
注)ナビゲーション ブレイクポイント で検索するとスタイルシート内にありますので、このすぐ下の行にある @media screen and (min-width: 960px) の緑部位 960 をこれより 大きな数値 に変更してください。デフォルトよりも早くドロワーに切り替わります。
No imageブロック変更の仕方
How to change 'No image' pic.
デフォルトでは記事内『本文』に画像が無い場合、アイキャッチ画像未設定の場合はNo imageと記された要素が表示されます。
こちらは画像ではありません。表示される箇所は以下の通り。
- グリッドレイアウトページ
- 個別記事下 SNSシェア
- サイドメニュー部『Recent』
画像差し替え
ここを画像に変更したい場合、例えば個人設定で指定済の『サムネイル代替画像』と揃えたい場合など、注)No image で検索すると『グリッド』『SNSシェア』『Recent』ともにhtml内に出てきますので、それぞれ上下ガイダンスコメントに挟まれた部位を以下の通り変更します。グリッド
<img class="grid-img lazyload" src="https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif" data-src="画像URL" width="横原寸" height="高さ原寸" loading="lazy" alt>SNSシェア
<img class="lazyload entry_footer-share-img" src="https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif" data-src="画像URL" width="横原寸" height="高さ原寸" loading="lazy" alt>Recent
<img class="recent-img lazyload" src="https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif" data-src="画像URL" width="横原寸" height="高さ原寸" loading="lazy" alt>
当方では差し替える画像に 'No image' と記されているかどうかまでは知りえませんので、自動で画像上にオーバーレイや 'No image' のテキストが乗ることはありません。できれば画像編集で 'No image' であることを明示した方が良いと思います。また、目立つ派手な画像も避けましょう。以下はサンプルです。
画像ブロック削除
また、No image差し替えではなく、imageが無いときに画像表示ブロックを消したい場合は以下のカスタマイズを行います。
まず <a class="grid-image-anchor" で検索し、この行を含めその近接下の方にある </a> までの内容を以下の内容に変更します。
<!--body_img-->
<a class="grid-image-anchor" href="<%topentry_link>" aria-label="<%topentry_title> - <%template_abs_link>">
<div class="grid-image-wrapper">
<div class="grid-image">
<img class="grid-img lazyload" src="https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif" data-src="<%topentry_image_url_760x420>" width="760" height="420" loading="lazy" alt="<%topentry_title>">
</div>
</div>
</a>
<!--/body_img-->
スマートフォンではグリッドの記事概要分が非表示化されます のであまりおすすめは致しません。
* スマホでもサムネイルと概要を横並びにするデザイン上の処置です。
インデントを付けたい方はくれぐれも 全角スペースを用いないよう注意 してください。インデントは必ず半角スペースで！
SNSボタンについて
About SNS buttons.
本テンプレートは『SNSシェアボタン』と『SNSリンクボタン(自身のSNSページへの誘導ボタン)』の2種があります。
SNSシェア 全削除または部分削除
注)SNSシェア で検索すると出てきますのでガイダンスに従ってください。* 2箇所あります。
また、デフォルトに無いSNSのシェアについては 当方でアイコンの準備等は致しません ので、ご自身で準備とhtml, CSS調整をお願いします。
SNSリンク 全削除または部分削除
注)SNSリンク で検索すると出てきますのでガイダンスに従ってください。
こちらも同様に追加アイコン等はご自身で準備をお願いします。
欧文フォント変更
How to change Latin text font.
本テンプレートの欧文(アルファベット, 記号, 数字)は以下のようになっています。
- ポイントとなる欧文フォント --- Welcome〜, ナビゲーション, 各ページ名称 等
- 通常欧文フォント --- 記事やグリッドアイテム概要文 等
該当部位を英語から日本語に書き換えるカスタマイズが行われる可能性を考慮して、和文フォントの指定も同時に行っています。
ポイント欧文フォント変更
Google fontsを利用する場合、通常はGoogle fontsで発行されるhtmlをテンプレートのhead要素内に記載しますが、本テンプレートではFOUT(Flash of Unstyled Text, フォント切り替わり時のチラつき)を避けるためこの方法は取りません。
注)google fonts変更は で検索するとhtmlに1箇所、スタイルシートに1箇所、合計2箇所出てきますのでガイダンスに従ってください。フォント名に半角スペースを含む場合は以下の点に注意します。
- html --- 半角スペースは + で表記 (例 Playfair+Display)
- スタイルシート --- 半角スペースはそのまま表記し、シングルまたはダブルクォーテーションで囲う
(例 'Playfair Display')
Google fontsのみを想定していますので、Adobe fontsなどは対象外です。Google fonts以外のwebフォントサービスを利用する場合は各サービスの使い方に従ってください。
通常欧文フォント変更
--font_family-base と --font_family-latin の2行が対象です。それぞれ Arial フォントが指定されていますので、ここを変更する場合は MacとWindows共通フォントを選ぶ よう注意してください。MacとWindowsではバンドルされているフォントが異なりますので、一方にしか無いフォント指定は避けます。
また、この部位でGoogle fontsを利用する場合はGoogle fontsが発行するhtmlコードをhead要素内に記載した上でフォント名を記してください。欧文フォント名を差し替えるのみで、他の指定は消してしまわないようにしてください。日本語の指定が失われてしまします。以下は --font_family-base の書き換え例です。
デフォルト
--font_family-base: Arial, 'HiraKakuPro-W3', 'Hiragino Sans', YuGothic, Meiryo, 'Yu Gothic', sans-serif;欧文フォント変更(Mac, Windows共通フォント)
--font_family-base: Verdana, 'HiraKakuPro-W3', 'Hiragino Sans', YuGothic, Meiryo, 'Yu Gothic', sans-serif;欧文フォント変更(Macになく Windowsにはあるフォント)
--font_family-base: David, 'HiraKakuPro-W3', 'Hiragino Sans', YuGothic, Meiryo, 'Yu Gothic', sans-serif;欧文フォント変更(Google fontsのコードに書き換えて日本語指定が失われている)
--font_family-base: 'Open Sans', sans-serif;Googleフォントを複数導入
ポイント欧文以外は通常の方法でGoogle fontsが発行するhtmlコードをhead要素内に記載し、スタイルシートで該当セレクタにフォント名を指定してください。
和文フォント変更
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(最新記事サムネイル付き)
- テンプレートに合わせたデザイン
『About Me』『Recent』『Subscribe and Follow』に付いている背景色を外してプラグインと同じスタイリングにするには .default_menu { で検索、スタイルシートからこのルールセットを削除します。記載順序はプラグイン側のカテゴリ分けとこれらの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.