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

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

テンプレート
2019/03/20 6
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD
tremoloテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正
名称 tremolo
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大800px
サイド --- 最小280px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更, ヘッダー背景画像変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
変則2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.11.24
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
最終更新 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

<li class="comment-btn-list"> で検索すると4箇所あります。2つ目の

<li class="comment-btn-list"><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a></li>

を以下の通り 変更

<li class="comment-btn-list"><!--comment_author--><!-- <!--/comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author--></li>
②について

#community" で検索するとhtml内に3箇所あります。3箇所とも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a reply</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下を 追加

#comment_form {
  padding-top: var(--navi-height);
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

続いてスタイルシート末尾に以下の内容を 追加

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

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

とれもろ
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

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, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない?」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

ドミナントカラー

Dominant colors

root で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

ヘッダー背景画像変更

How to change header image

https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/tremoloheader.jpg

で検索するとhtml内に 2箇所 あります。2箇所共希望の画像アドレスに変更してください。個別記事ではサムネイルまたはOGP画像がある場合その画像が自動でヘッダーに表示されます。

左右カラム入れ替えの仕方

How to reverse the direction of rows.

#main-container { で検索されますと4箇所ヒットします。
4つ目display: flex; の直下に flex-direction: row-reverse; を追加。
続いてすぐ下にある #primary {margin-right: 40px; 緑部位 right を left に変更。

スピード強化について

Behavior about navigation

リンク先をprefetchするようになっています。公式爆速テンプレートのように一瞬で表示というわけにはいきませんが、それでもページ遷移はかなり素早いと思います。爆速はマウスオーバーでprefetchを行うようなスクリプトになっています。tremoloではabove the fold(ファーストビュー)内のリンクをprefetchします。爆速で利用されているpjaxについては導入していません(広告表示の阻害, JS及びプラグインが制限されてしまうため)

prefetchは諸刃といいますか、リンク数が過剰だとブラウザがアイドル状態にならない(常に可動している)ので却って害になることもあります。そのため、サイドメニュー内のリンクの多くを対象外にしています。また、prefetchが行われるのはユーザーのブログドメインと同じドメインを持つページのみ。同一ドメインでも別タブで開くリンクは無効にしてあります。

検査では「FC2広告あり(無料アカウントの場合) + トップページ記事表示件数30件 + キャッシュ有効」という条件で概ね200〜700ミリ秒で表示できると思いますが、トップページの件数は12〜20件程度が妥当だと思います。あまり欲張って数を多くすると、prefetchはその性質上メモリや帯域を使いますので適度な数に留めるようにしてください。

ページ表示直後のアニメーションは表示を若干遅く感じさせてしまいますのでデフォルトでは無効化してあります。
注)ページをフェイドインさせたい場合はこの一行削除
で検索するとCSS(スタイルシート)内に2行(2箇所)出てきますので2箇所とも削除するとページがフワっと表示されます。

また、tremoloのスペックを最大限に活用するには SSL設定の有効化 を強く推奨します。自己責任でご判断をお願いします。
SSL設定(301有効化)

* DEMOページではprefetchを無効化しています

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までです。

複製したhtml内容は以下の作業してから希望の位置へペーストしてください。

html冒頭の <div class="pager-wrapper" id="pager-wrapper"><div class="pager-wrapper"> に修正(id属性の取り除き)

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

Cautions before asking for something.

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

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

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

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

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

 6

There are no comments yet.
きろろ
お借りします

ご無沙汰しておりますm(_ _)m
新しいテンプレート、お借りします。
まだSon-Of-Valkyrieなのですが、
本格的に暖かくなったら、模様替えをしようかと思います。
あと、YouTubeもお借りしました。ありがとうございます。

2019/03/23 (Sat) 02:06
きろろ

Akiraさん、きろろの日本語解釈がわるいのでしょうか?
注)ページをフェイドインさせたい場合はこの一行削除
の、2行を削除したのですが、ページに変化がないのですよ。
これってきろろ側の環境でしょうか?
お暇なときに見てあげてくださいませ。

2019/03/23 (Sat) 02:16
vanillaice (Akira)
Akira
To きろろさん

きろろさん、こんにちは ('0')/

行内は全て削除です。要するに「コメントアウト状態を外す」ということなのでコメントが付いていたら機能しません。

× (きろろさんの今の状態)
/* 1/2
animation: fadeIn 1s ease-in;
2/2 */


animation: fadeIn 1s ease-in;

よろしくお願いします。

2019/03/23 (Sat) 13:19
きろろ
To Akiraさん

お返事ありがとうございます。

animation: fadeIn 1s ease-in;
}
で、あっていますでしょうか?
もしかして } もいらないとかでしょうか?

見た目は変わったような気がします!
ありがとうございますm(_ _)m

2019/03/23 (Sat) 23:57
vanillaice (Akira)
Akira
To きろろさん(完了のご報告)

こんばんは。

指示のある箇所以外は消さないようにしてください。記号は残さないとCSSが壊れてしまいます。
今の状態で合っていますよ。
お疲れ様でした :)

2019/03/24 (Sun) 23:08
きろろ
To Akiraさん

お手数をおかけしました!
ありがとうございます(^_^)

2019/03/25 (Mon) 00:34

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

テンプレート