Choir - ブログ内期間限定配布「配布終了」

Choir - ブログ内期間限定配布「配布終了」

ブログ内限定配布
2020/05/26 12
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD Limited Darkmode
Choirテンプレート

Choirテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

最終更新 2020.6.10
  • カテゴリページのhtmlミスを修正

お手数ですが以下の手順で自主修正をお願いします。

<div class=grid-content<!--category_area--> id=grid-content-category<!--/category_area-->>

上記文字列で検索するとhtml内に1箇所ありますので、以下の内容に 差し替え

<div class="grid-content<!--category_area--> grid-content-category<!--/category_area-->">

続きまして #grid-content-category で検索するとスタイルシート内に1箇所ありますので .grid-content-category に変更。

以上です。よろしくお願いします。

2020.5.28
ページ送りのJS内容を修正しました。スタイルシート上部にある更新履歴に
Latest update: 2020.5.28 - ページ送りのJSを修正
の一文が記載されていない方は再DLをお願いします。

名称 Choir
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 あり
構造化マークアップ 個別記事のみ
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カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下

くゎいあ
ブログ内短期間限定配布。配布期間は2020年5月末日まで。上級者向け です。

サンプル

Samples

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

* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。

FAQ
DOWNLOAD

カスタマイズサポート無し

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

カスタマイズに関するご質問・ご相談は受け付けません。今回のカスタマイズ難易度は星5MAXです。技術的な難易度ではなく作業難易度で、いつもの倍以上注意深い作業が必要になります。

といっても内容によりますので、色調を変更する程度であれば従来のテンプレートと何ら変わりありません。注意点は以降で順次説明します。

必須個人設定

Necessary personal settings

関連記事リスト表示場所「テンプレート変数のみ」

レスポンシブ設定やその他必須設定は割愛します。本テンプレート利用時はこの設定に必ず変更してください。

全体幅の調整

How to change width

グリッドレイアウトのページ横幅は最大 1200px、個別記事などグリッド以外のページ横幅は最大 900px に設定してあります。

カスタマイズの必要が有る方は、グリッドの横幅は メイン最大横幅、グリッド以外の横幅は 記事最大横幅 でそれぞれ検索し、適切な数値に変更してください。

エンターページの仕様について

Instruction for use of enter page

カルーセルスライダー

カルーセルに表示される記事は 更新順 です。

カルーセルの見た目でカスタマイズが容易なのは 色調変更 です。こちらはスタイルシート内容の操作でできます。スライダー本体の挙動や見た目、例えばナビゲーションボタンの位置, スライダーの表示アイテム数, 移動速度, アニメーション速度などは 全て外部ファイル化してあります ので、ファイル修正が行える、という場合はご自由にどうぞ。

また、カルーセルの削除は非推奨です。理由は後述。

親カテゴリ新着リスト

カルーセルスライダーの下に表示されるのは カテゴリの最新記事 です。ここは親カテゴリのみ。子カテゴリは除外してあります。

子カテゴリを含めてしまうと表示の重複が多くなりますので親に絞っています。そして現状FC2ではカテゴリ別の新着を抽出する変数というのはありませんので、テンプレート内のJS(ajax)で情報を取得しています。

ユーザーによる任意スクロールが始まってからJSが発火するようにしてあります (スピード対策)ので、カルーセルスライダーの削除はおすすめしません。(ローディング直後のabove the fold部位が空白になってしまうため)

子カテゴリリスト

子カテゴリはテキストリンクで下にまとめています。

私が使用しているものはhtml直書きですが、みなさんに配布するものは親子カテゴリ共に自動で振り分けられるように調整してあります。変数など複雑な構成になっていますのでこの部位をカスタマイズする場合はかなり難しいと思いますが可能です。

カスタマイズする方は 1箇所でも間違えると全てのリストが表示不可 になりますので最大限に注意してください。JSが不得手という場合には手を出さない方が無難です。

注意点

Extra Cautions

利用できる独自クラスなどは ARTICLE DEMO をご覧ください。

  1. グローバルナビゲーション内 search ドロップダウン内の「任意タグ」の記載必須
  2. フッター上左側のボックスは各自で必要な内容を埋め込む
  3. ナビゲーションがドロワーに変更された際の「タグ」「カテゴリリスト」のアニメーション削除不可
  4. lazyload関係の利用について熟考
  5. NEWマーク表示期間変更不可
  6. 個別記事ヘッダー「管理人アイコン」及び「コメント欄管理人アイコン」のhtml手打ち推奨

①は 注)カスタマイズ必須 で検索すると出てきますのでガイダンスに従ってください。

②は 注)ここはフリーエリアです で検索できます。

③のスケーリングアニメーションが不要・疎ましいと感じるかもしれませんが、これを入れておかないと iOSのバグに捕まります ので削除しないよう注意してください。
(感圧ホバー時に背面にあるリンクを押せてしまう、というものです)

④のlazyload関連htmlは使えるからといって 迂闊に利用しないよう注意 してください。テンプレート変更時に表示が行われない、情報を取得できない、といった結果を招くことになります。詳細は以下のページを参照のこと。

FC2ブログでのLazyload導入の仕方と注意点【検討編】

Lazyloadは自分との闘いです(笑) まず最初に、初心者向け説明記事ということで、なるべく平たく細かく説明できれば良いな、と思います。 「Lazyloadが何か知らない。読み方もわからない (∵`) 」を出発点にして自ら説明のハードルを上げるワタクシ((((笑) 説明すべき点がたくさんありますので、かなりの長文になりますから記事も数回に分けようと思います。 導入の具体的な手順は最終の記事にしますので、それまでの説...

⑤のNEWマークですが、全記事リスト以外はJSではなくサーバーサイドでの出力を行っており、表示日数は 6日間 です。7日目に消えます。ここは変更できませんので予めご了承ください。あるいはJSに切り替えることで操作可能です。

⑥の管理人アイコンはデフォルトはみなさんが「プロフィール画像」としてアップロードしたものを表示させています。ヘッダーには該当記事のOGP画像と共に管理人アイコンが表示され、これらはいずれも lazyload対象外 にしてあります(above the foldにほぼ確実に入ってくるため)

なのでできれば 120px四方程度 のものをアップロードし、そのアドレスに切り替えた方が良いと思います。表示サイズはコメント欄管理人アイコンも含め70px四方前後と小さいので、大きな画像を指定する必要はありません。
* コメント欄アイコンはlazyload対象です。
変更する方は <%image> で検索するとhtml内に5箇所あり、1つ目と2つ目が対象です。この件は任意で強制ではありません。

ダウンロード

Here's the download link

あと今ページネーションに不具合が出ており、これがどうなるかまだわかりませんので、結果が判明次第何らかの対処をするかもしれませんし、解消されるかもしれません。つまりわかりません(笑)
長引きそうなので見切り配布です。

ページ送りに不具合か【FC2独自変数】

独自変数に不具合が生じているのではないか、という仮定のもとに書いています。具体的な内容としては リスト型ページ送りで1ページ目に戻った際に正しいページが表示されない、あるいは404 not foundになる というものです。どちらになるかは エイリアス機能を利用しているかどうか で分かれます。また、不具合ではなく仕様変更の可能性もあります。...

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

2020.5.26
margin調整を忘れていた部位がありますのでCSSに若干の追加修正を行いました。26日午前11時以前にDLされた方は再DLをおすすめします(大きな変更ではありません)

CSSソース圧縮について

About CSS minification

スタイルシート内容を圧縮してhtmlに style要素 として記載する方法がありますが、バリデーションを気にかける方へは おすすめしません。

現状のvalidatorはCSS3までしか検証できないのでCSS4が含まれるとエラーとして結果を返します。実際はエラーではないのでアレですが、精神衛生上よろしくないと思います(笑)

どうしても、という場合にはカスタムプロパティの一部修正(通常の指定に戻す, 特にフォント指定関連)すると共に -webkit- -moz- のプリフィックスの精査とCSS4プロパティの洗い出し及び削除等の作業が必要になります。

 12

There are no comments yet.
ぼっちん
ありがとうございます ^^

Akiraさん、おはようございます ^^
早速DLさせて戴きました、ありがとうございます。
思っていたよりも早く記事にしてくださって「あっ」と思わず声が出ちゃいました(笑)

これからじっくりと、公式の爆速並の DOMContentLoaded: 794 ms を叩きだしているテクニックやいろいろを研究させて戴いてから、導入の為の諸設定に取り組んでみたいと思います ^^
これだけのデザイン量を含んでいても、このDOM形成の速さってとても信じられないくらいで……

また私のワガママを聞いてくださって、ほんとにありがとうございます、感謝感謝です m(_ _)m

2020/05/26 (Tue) 08:29
vanillaice (Akira)
Akira
To ぼっちんさん

こんにちは ( ゚Д゚)ノ

margin調整するのを忘れてた箇所があるのでファイル修正しました。
これから外出なので詳細は後ほど追記します。
取り急ぎファイルだけ直したので再DLして貰えると助かります。
よろしくお願いします。ごめんねー!

2020/05/26 (Tue) 11:08
ぼっちん
To Akiraさん

は~い、了解です、HTML & CSSとも差し替えました ^^
ありがとうございます ^^

2020/05/26 (Tue) 11:26
vanillaice (Akira)
Akira
To ぼっちんさん

お手数おかけしました。説明も少し追加しましたのでご確認くださいね。
よろしくお願いします :)

2020/05/26 (Tue) 17:15
M
カテゴリページについて

Akiraさま

いつもお世話になっております。

夜分に申し訳ありません。

とても素晴らしいテンプレートだったので、使わせて頂きました。

【質問1】

後からチェックしていて気付いたのですが、カテゴリページでどうしてもW3Cエラーになってしまいます。

「属性grid-content-categoryは要素divに許可されていません。」という警告が表示されるのですが、<div>以外のタグって何使えばいいんですかね(;^ω^)

あれこれ思案したのですが、どうもシックリくるようなタグが思い当たらなくて、ちょっと質問してみたくなってしまいました。すみません…。

【質問2】

トップページについてですが、僕のブログはカテゴリ数が多いため、表示数を制限したいのですが、何か良い方法ありますでしょうか?

制限できない場合は、せめて「未分類」のカテゴリだけは表示させたくないのですが(未分類の記事数は0のため)…。

お忙しいところにこんな質問してしまって恐縮です(o*。_。)o

2020/06/07 (Sun) 00:31
vanillaice (Akira)
Akira
To Mさん

こんばんは ('0')/

duplicate IDの件、大変失礼しました。以下の修正をお願いします。
<div class=grid-content<!--category_area--> id=grid-content-category<!--/category_area-->>
で検索すると1箇所ありますので、
<div class="grid-content<!--category_area--> grid-content-category<!--/category_area-->">
に修正。

スタイルシートの
#grid-content-category

.grid-content-category
に変更。

*
記事に追記すべきなんですが時間が取れずちょっと遅くなります。コメント欄をご覧のユーザーさんはお気づきになられましたら修正をお願いします。

-----
カテゴリの件については記事内に記した通り手打ちでhtmlの変更及びajax JSの修正が必須です。なので「上級者向け難易度MAX」なんですね (´・ω・`)
申し訳ないんですがコメント欄でどうこうできる内容でもありませんし、「カスタマイズサポートなし」のお約束なものですみません (*_ _)

2020/06/07 (Sun) 01:30
M
To Akiraさん(お返事不要)

Akiraさま

お世話さまです。

修正方法ありがとうございます(^^)

実は、この方法。1番最初にやってみたんですけど、""で囲むのを忘れてエラーが治らなかったので元に戻してました(^^;

カテゴリの件は手打ちでカスタマイズ出来ることが分かれば自分で調べますから大丈夫です。

いつもありがとうございます(^^)

2020/06/07 (Sun) 12:26
-
管理人のみ閲覧できます

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

2020/06/11 (Thu) 08:09
vanillaice (Akira)
Akira
To 休止の件 内緒さん

こんにちは。いつもお気遣いありがとうございます。

たぶんあれかなぁ、と思い当たることはありますが、私自身は「えー。そんなの知らん (´・ω・`)」程度のスタンスです(笑)
あと、表示の件、アドバイスありがとうございます。私も思いました(笑)
またちょっと考えるかもしれません。ありがとうございます :)

2020/06/15 (Mon) 15:02
-
管理人のみ閲覧できます

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

2020/06/15 (Mon) 18:20
-
管理人のみ閲覧できます

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

2020/06/15 (Mon) 19:45
-
管理人のみ閲覧できます

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

2020/09/23 (Wed) 07:31
ブログ内限定配布