Ampleテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
- 個別記事ページナビ iOS14でサムネイルが時折表示されない件修正
【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え
<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementById("pager-prev-image");og.style.backgroundImage="url("+og_i+")"})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementById("pager-next-image");og.style.backgroundImage="url("+og_i+")"})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementById("pager-prev-cate-image");og.style.backgroundImage="url("+og_i+")"})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementById("pager-next-cate-image");og.style.backgroundImage="url("+og_i+")"})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>script要素を1つから3つ分割に変更しています。
| 名称 | Ample |
| 配布期間 | 2019.10.15〜2019.10.31 |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅 | メイン --- 最大1000px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | なし (Vanilla JSのみ) |
| Font Awesome導入 | なし (インラインSVG) |
| Lazyloading導入 | あり |
| TOC導入 | あり |
| 構造化マークアップ | 個別記事のみ BreadcrumbList(パン屑リスト) BlogPostiong |
| Page Speed Insigtsスコア |
|
| 固有機能 |
・ 見出し装飾 ・ YouTube縦横比固定 使い方詳細はARTICLE DEMOを参照 |
| 推奨カスタマイズ | 色調変更 |
| ライセンス | Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
・IE非対応 ・カスタマイズ難易度高 ・カスタマイズサポートなし ・FC2プラグイン非対応 ・編集必須箇所あり(フッター上カテゴリリスト) 
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 1カラム | 1カラム | 1カラム |
| サイドメニュー --- 下 | サイドメニュー --- 下 | サイドメニュー --- 下 |
過去の更新一覧
- ページ送りのJSを修正
詳細については以下の記事をご確認ください。
カテゴリページクエリの件は不具合ではなく仕様
えーと。まぁタイトルの通りです(笑) 「カテゴリページのみ最初の1ページ目にクエリが付かないのは不具合ではないか」という件ですが、結論としては 仕様 ということで確定です。...
<a class=pagination-anchor href="'+base+0+ext+'">1</a>で検索するとhtml内に1箇所あります。この部位を以下の内容に変更してください。
<a class=pagination-anchor href="<!--not_category_area-->'+base+0+ext+'<!--/not_category_area--><!--category_area--><!--page_area--><%firstpage_url><!--/page_area--><!--/category_area-->">1</a>- FC2アクセス解析を入れている場合にテキスト返信ボタン押下で返信タイトルが2度出力される問題の修正
詳細については以下の記事をご確認ください。
【重要】弊テンプレートのコメント返信JSを修正します
FC2アクセス解析と衝突する ことに気が付きまして(汗) そのための修正です。FC2アクセス解析を利用していない方には無関係ですが、弊テンプレートをご利用中のユーザーさんは是非ご一読をお願いします。...
【修正の仕方】
(a.type,arguments.callee)}); を目印に検索し、そのすぐ後ろにある function から </script> のすぐ手前にある arg.title} までを以下の内容と差し替えます。
function changeTextValue(e){document.getElementById("subject").value=e};
続いて <a class=btn-a href="#comment_form" を目印に検索すると3箇所あります。最初の2つが修正対象、3つ目は対象外です。1つ目・ 2つ目それぞれ目印のすぐ後ろにある onclick から title="To <%author_name>さん" までを以下の内容と差し替えます。1つ目と2つ目の差し替え内容が異なりますのでご注意ください。
ひとつめ
onclick="changeTextValue('To <%comment_name>さん');" title="<%comment_name>さんへ返信"
ふたつめ
onclick="changeTextValue('To <%author_name>さん');" title="<%author_name>さんへ返信"
以上です。お手数おかけします。
あんぷる 
10月末日までの限定配布です。
サンプル
Samples
カスタマイズのコツ
A few tips on customizing
1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。
2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります。
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。
3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです。
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。
カスタマイズサポート無し
I'm sorry I couldn't be of any help.
今回は 上級者向け です。不具合のご報告は承りますがカスタマイズのサポートはありません。html, CSS共に若干トリッキーな内容になっています。特にhtmlを編集での要素の追加や削除など、セクションやアウトラインの構造が壊れないよう 十分注意を払うようにしてください。
また、TOC用スクリプトが含まれている 点にも注意。内容は私がこのブログ内で提供しているものと同じです。
見出し目次を生成するTOCスクリプト
以前にもTOCの記事は書いていますが今回jQuery依存なしのvanilla JS(ネイティブJS, pure JS)のご紹介と説明で統一しようと思います。私が今後制作するテンプレートはよほどのことが無い限りjQueryを入れないと思います。それなのにjQueryで紹介というのはやはりマズいもので。...
あとブログカード用のCSSも入れてあります。
ブログカードのブックマークレットを作成しました
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
ブログカードCSSの方は無視できますが、これまで記事内で別のTOCスクリプトを利用していたり、記事内の見出しレベルをh2よりも下位 に指定していたり、追記ではなく本文で見出しを利用している などの場合には表示に影響が出ます。その場合はご利用をお控え頂くか、テンプレート内のTOCスクリプトを排除するようにしてください。
編集必須箇所
Necessary edition
フッター上のカテゴリリストは編集必須です。不要の方は <!-- カテゴリタイル表示 --> から <!-- カテゴリタイル表示ここまで --> のhtml内容を削除してください。
デフォルトでは1件分のサンプルhtmlをリンク無しで入れてありますので、表示したいカテゴリの件数分を複製し、それぞれのリンク記載と画像の指定を行ってください。サンプル画像は横600pxですが、画像上に黒のマスクがかかりますので長辺(横)400px程度で良いと思います。
ヘッダー画像について
About header images
デフォルトでは3枚分をランダム表示できるようにしてあります。あくまでランダムですから繰り返し同じ画像が表示されることもあります。画像の指定はスタイルシート内の /* 注)パソコン用ヘッダー画像 */ を目印にしてください。スマホ用画像指定もその近接にあります。
パソコン用は長辺(横)1600px、スマホ用は長辺(横)800px程度が望ましいと思います。
必須個人設定
Necessary personal settings
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
メタタグの設定 > OGP設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
関連記事リスト表示場所「テンプレート変数のみ」アイキャッチ画像「表示する」
関連記事リスト表示場所「テンプレート変数のみ」及び アイキャッチ画像を「表示する」
この設定にしないとスタイリングが行われませんので注意。
IE非対応
This theme is incompatible with Internet Explorer.
全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。
IE利用者へ向けたブロック用オーバーレイを導入済み です。内容の変更などはお好みでどうぞ。
圧縮CSSの提供
Compiled CSS is bundled
今回は圧縮済みのCSSも提供します。html内にstyle要素として記載するため のもので、スタイルシートとしてはご利用頂けません。
CSSの圧縮は意外と難しいんですね。特にCSS4のvariables(変数)が利用されている際に自動圧縮ツールに頼ると危険です。また、メデイアクエリの順序やFC2の独自変数の絡みもありますのであまりに難易度が高いと判断し、私の方でやっておきました。
使い方は、html内にある
<link rel="stylesheet" href="<%css_link>" media="all">
を 削除 し、その位置にファイル名末尾 min.html の内容をそっくりコピペします。念の為コメントなどをつけていますし改行も行っていますので、さらに改善したい方はお任せします。
html全体を圧縮する際は、インラインCSS化しておきそのままhtml自動圧縮ツールを使ってもOKです。スタイルシートへのリンクを切りますので、従来の「スタイルシート編集」内容が浮きますのでメモ書きとかに使えます(笑)
CSSを外部ファイル化するとキャッシュが使える利点がありますが、FC2ブログの規模を考えるとインライン化した方が概ね速度は上がります。htmlはキャッシュされず毎回読み込みますので 独自変数によるエリア分けが重要 です。minファイルを編集するときは十二分に注意するようにしてください。
記事編集リンクについて
Location of edit icon
個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。
スピード測定について
Tips for using PSI
スピード測定などされる方がいらっしゃると思いますので注意点を。
遷移が予想されるページをprefetchするようになっています(ページ遷移速度を強化するため)
そのためにバックグラウンドで読み込みが終了したページの内容(画像など)がテストの対象になってしまいます。
作業自体は裏でやってますのでスピードへの影響はありませんが、最近は「画像の読み込みを遅延させなさい」だけでなく「画像にはwebp拡張子を使いなさい」という指摘で減点されるようになっていますので、減点対象が増えた結果スコアが下がってしまいます。純粋なテストを行うためには prefetch用スクリプトを一時的にコメント化 するなどの対策を行ってください。
qkoriginlistmin_base.js
のファイル名を持つものとその下に続く内容がそれにあたります。
Analyticsを入れて無ければ100点取れるはずです。Analyticsは必ず1%減点されるようになってます。
その他
and more
その他のtipsをいくつか。
htmlのクォーテーション
htmlの属性を囲うクォーテーションは一定条件下で省略できます。
<span class="xxx">あいうえお</span>
<span class=xxx>あいうえお</span>
ファイルサイズ削減のためになるべく取り除いていますが、条件があり全て取り除いて良いわけではありませんので注意。また、FC2ブログの特性として
id="comment_form"
id=comment_form
これはコメント投稿フォームのidです。このid名の変更不可、クォーテーション無し不可です。文法的には正しくとも コメント「受け付けない」「表示する」 の設定を選択したときにフォームが非表示化されません(なんでやねんな…)
ファビコン
ファビコンを設定する方はhead内のスタイルシートのlink要素(あるいはインラインCSSのstyle要素)よりも 下 に記載すると良いですね。ついでなので必要と思われるファビコンの記述については以下の通り。
<meta name="msapplication-config" content="xxx.xml"/> <meta name="msapplication-TileColor" content="カラーコード"> <meta name="msapplication-TileImage" content="xxx-144x144.png"> <link rel="icon" type="image/x-icon" href="xxx.ico"> <link rel="apple-touch-icon" sizes="180x180" href="xxx-180x180.png"> <link rel="mask-icon" href="xxx.svg" color="カラーコード"> <link rel="icon" type="image/png" sizes="192x192" href="xxx-192x192.png">
このぐらいかな、と思います。ちゃんとやろうと思えばです。safari用のsvgについてはFTPが無いと無理(有料会員でないと無理)なので省いてもOKです。
msapplication-config はWindowsでピン留めに使うもので、xml ですから末尾のスラッシュ必須です。
ダウンロード
Download for free
* ダウンロード期間終了致しました。
上級者向けですからテキストエディターを所有していることを前提に、いつもはhtml内容を .txt で提供していますが、今回は .html 拡張子にしてあります。頭に d_ がついているのはダーク背景CSSです。
あと、「Category」「Article」などの見出しはSVGなのでそのまま入れてあります。ブログタイトルだけはどうしようもないのでフツーのフォント表示です。
いつもありがとうございます (●'0'●)/
追加説明「JS内容」 2019.10.18
Additional explanation
JSファイル内容に関する説明が不足していると感じましたので追記します。デフォルトで含まれるJS内容は以下の通りです。
- lazy_blur_embed_move48_min.js --- 画像など遅延読み込み用
- function getRandomInt〜 --- インラインscript, ヘッダー画像にランダムにクラス名を付加
- toc_clipboard_modify_min.js --- TOCとSNSアイコン右端にあるURLコピーを可能にするためのJS
- document.addEventListener〜 --- インラインscript, 個別記事で前後ページのサムネイルを非同期で取得
- function pagination〜 --- インラインscript, 汎用ページ送り
- qkoriginlistmin_base.js --- prefetch関連
- application/ld+json --- 構造化データ
- 'use strict';function isIE --- IEブロック
1のファイル内には 画像lazy video embed LQIP スムーススクロール が含まれています。特にスムーススクロールはこの中でさらに遅延させています。この調整によりTOC利用時スムーススクロールの再記載をしなくて済むようにしています。また、video embedに関してもサムネイル画像の表示位置調整やautoplayに関する最適化も済ませてあります。
3のファイル内には SNSアイコンの右端にあるURLコピーを可能にするJSが含まれます。削除すればコピーが効かなくなります。ここで以下のパターンに当てはまる方は各々選択を行ってください。
- 記事「本文」に見出しを記載していたり、記事内最上位レベルをh2以外にしている方 --- 該当ファイルを開き、selectorとscopeを変更。
- これまで別のTOCスクリプトを利用していた方 --- ファイル及びURLコピー用アイコンを削除。または、ファイルからTOC内容だけを削除(コピー機能は温存するという意味です)
注意すべきは1と3のファイルで後は特に触る必要は無いと思います。よろしくお願いします。
追加説明「ブログURLコピー」2019.10.20
How to add a copy button
各個別記事のURLをワンクリックでコピーできるようにしてあります。そこで、ブログURLのコピーもできるとRSS登録時など非常に便利なので、そのカスタマイズのご案内です。
リンクアイコンを個別記事以外でも表示させるよう調整
<symbol id=inline-link> で検索するとhtml内に1箇所あります。このsymbol要素を一旦 カット し、html上方に1箇所ある <defs> の直後に ペースト。つまり記載位置の移動です。
CSS内容の移動
スタイルシートを利用する場合はこの作業は不要です。
インライン化する方は @keyframes toolTip で検索し、このルールセットと、次の .tooltip::before 及びその次の .tooltip::after 全部で3つのルールセットを一旦 カットし、最初のstyle要素の末尾(1つ目のstyle終了タグの直前という意味です) に ペースト。
JSを追加
<body> の直前で構いません。以下の内容をコピペ。
<!--not_permanent_area-->
<script src="https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/clipboard_not_entry.js" async></script>
<!--/not_permanent_area-->htmlを追加
<br><%introduction2></div> で検索するとhtml内に1箇所あります。このdiv要素の直下に以下の内容を 追加。
<button id=blog-uri class=copy-btn data-clipboard-text="<%url>"><svg class=svg-inline-stroke viewBox="0 0 24 24" role=img><use xlink:href="#inline-link"></use></svg> ブログのURLをコピー</button>CSSを追加
スタイルシートの場合は最終に。インラインCSSの場合は 最初のstyle要素の末尾(1つ目のstyle終了タグの直前という意味です) にそれぞれ以下の内容を 追加。ダーク背景も共通です。
* インラインの場合は圧縮してください
#blog-uri {
display: block;
position: relative;
width: 100%;
height: 40px;/* ボタンの高さ */
margin-top: 15px;
border-radius: 3px;
border: 0;
background: カラーコード;/* ボタン背景色 */
color: カラーコード;/* ボタンテキスト色 */
cursor: pointer;
-webkit-appearance: none;
}以上です。提供ファイル原本の修正はしませんので導入希望の方は追加作業という形でお願いします。
There are no comments yet.