Behavior - FC2ブログテンプレート
Behaviorテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。
既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...
vanillaice000.blog.fc2.com</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下を 追加。
<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め </footer> まで(この文字列も含む)を以下の内容に 変更。
<ul class="comment-info">
<li><%comment_year>-<%comment_month>-<%comment_day> <%comment_youbi> <%comment_hour>:<%comment_minute>
<!--comment_edit--><li><a class="post-a" href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
<li><!--comment_author--><!-- <!--/comment_author--><a class="post-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="post-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
<li><a href="#comment-top"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
<li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>続きましてスタイルシート末尾に以下の内容を 追加。
.comment-info li {
display: inline-block;
}#community" で検索するとhtml内に2箇所あります。2箇所とも #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: 40px;
}
<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箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。
.contents {
padding: 20px 0;
}
続いてスタイルシート末尾に以下を 追加。
#inner-contents {
margin: 20px 0;
}
#inner-contents p:not(.relate-title) {
margin: 1.9em 0;
}記事内でp要素を利用している方向けなので必要がある方だけどうぞ。
以上です。よろしくお願いします。
| 名称 | Behavior |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅 | メイン --- 最大900px サイド --- 300px |
| 記事内で使える見出しレベル | h2からh6まで |
| 構造化マークアップ |
個別記事のみ BreadcrumbList(パン屑リスト) BlogPostiong |
| Page Speed Insigtsスコア |
|
| 固有機能 |
・ 画像にドロップシャドウ ・ 動画縦横比固定 使い方詳細ページ テンプレート固有機能説明 |
| 推奨カスタマイズ | 色調変更 |
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
IE非対応
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム | 1 or 2カラム (デバイス幅依存) | 1カラム |
| サイドメニュー --- 右 | サイドメニュー --- 右 or 下(デバイスサイズ依存) | サイドメニュー --- 下 |
日本人という民族は本当に繊細で素晴らしいですよね。
エレベータの保守点検は決められた日時に決められた通りにちゃんとやれ(in あめりか)
何があったかはお察しください (;`ｰ´)o
びへいびあ 
承認されました。ありがとうございます。
サンプル
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.
- サイドバーの形状変更
- トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
- レスポンシブを固定幅化
- カラム数変更
- トップページ画像表示縦横比変更
- テンプレートと無関係なプラグインなど導入のお手伝い
- テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズのお手伝い
ご利用の前に
Important notice.
本テンプレートは実験的な意味合いで製作しております。
ご質問・ご相談が届くであろうことを想定し、仕様の説明をしておこうと思います。
ご自身の理想や希望などと照らし合わせた上で利用のご検討をお願いします。
トップページサムネイル画像の縦横比は元画像を参照踏襲しません
今回の製作テーマは「メイソンリーレイアウトの表示負荷をいかに抑えるか」です。
グリッド = 全てのアイテムのサイズを揃えて整列させる
メイソンリー(可変グリッド, 変形グリッド) = 個々にサイズが異なるアイテムをレンガ状に配列する
メイソンリーというのは配列前に縦幅の計算が必須ですので、画像の遅延読み込みと大変相性が悪い んですね。
遅延読み込みが適用されたbelow the fold(画面外, ファーストビュー外)の画像はスクロールを行うまで情報の取得が行われません。
html内に逐一 width, height属性を記せば別ですが、テンプレート製作者がユーザー利用画像のサイズを前もって知ることは不可能です。
メイソンリーを実現するには「初回表示時の縦幅計算」「画面及びブラウザサイズが変わった時に再計算(レスポンシブ)」がいずれにしろ必須なのですが、画像遅延読み込みと両立させるためにはそれに足すことの「スクロールで画像が表示された時に再計算」が加わります。
また、メイソンリーは時系列を遵守しませんので、「スマートフォンで縦一列になった際に時系列順に戻す処理」がさらに追加されます(ここは製作者によると思いますが私は行なっています)
メイソンリーというのは人間(製作者)もコンピュータも非常に頭を使うレイアウトです。
既存テンプレートの Mocha や Nostalgia では上記全ての処理をJSで行なっています。
が、やっぱりパフォーマンスが落ちるんですね (´・ω・｀)
そして現在ChromeでrequestIdleCallbackのバグがあり、その影響で計算量の多いスクリプトでは非常に動作が遅くなってしまいます。
参考記事
要約タイプテンプレートのメンテナンスを進めている最中ですが、一旦中断しようと思います。 うーん。Chromeの挙動が変 (´・ω・｀) メンテナンスの主な目的は floatレイアウトをflexに変更 画像の遅延読み込み導入 なのですが、ちょっと気になる点がいくつか…...
難しい説明はここでは抜きにして、要するに
画像の縦横比が不明な状態のままでメイソンリー配列を行うとパフォーマンス低下を招く
ことになります。
画像を遅延させず通常の読み込みをすれば多少改善されますが、いずれにしろ画像は一足遅れでの情報取得になりますので結局は再計算が必要です。
メイソンリーで アイテムが重なっている ページ(そしてそのまま直らない)とか目にしたことがありませんでしょうか。heightの計算(及び再計算)を怠るとそうなります。
とまぁいろいろゴチャゴチャありますが、要するに あらかじめ画像の縦横比を決めておく ことが一つの解決策になりますので、今回はこちらを採用しています。
縦横比設定はランダムに行われますのでページを開く度に各アイテムの表示状態、ページ全体の表示状態が変わります。
ここにご納得頂けるかどうかですね。まずは。
- ページスピードを極力低下させないこと(その一環が遅延読み込み)
- メイソンリーデザインが成り立っていること
- スクリプトを最小限に抑えること
今回最も重視したのは上記の点です。
「元画像の縦横比に準ずること」は重要ではない と個人的判断をしました。
何故なら元画像の縦横比というのは画像の持ち主にしかわからないんですよね。
縦長だろうが横長だろうが、画像の持ち主しか「正しい縦横比」を知らないわけなんです。つまり閲覧者にはわからないってことです。
画像の撮影者・保有者はこだわりがあるかもしれませんが、閲覧者はこだわりませんというかわかるわけが無いので、最重要とはしていません。
という事情なので 「トップの画像を元画像と同じ縦横比にしたい」というカスタマイズのご相談はお受けできません。
事前にご理解を頂ければと思います。
現時点ではCSSのみでのメイソンリーは無理なんですよね。
いや、実際には2つばかり実現できる構成がありますけれど。
一つは記事数を制限せざるを得ないケースが出て来るため現実的ではない。
もう一つは「ブログ」を大前提にすると、時系列は左から右へ流すのが絶対条件だと思います。
縦基準に並べて良いのならCSSだけで比較的容易にメイソンリーにできますけどね (´・ω・｀)
ブログでそれはナシだと思うので使わない。
ここがたぶん最も引っかかる点、なんとかしたいという気になる点だと思いますので、理屈のご説明とご相談は承れませんという事前回避策として(笑)
メイソンリーとしてはかなりハイパフォーマンスに仕上がっているはずですので、ここは変更に妥協できない部分です。申し訳ないです。
(たまに初回表示時に一瞬アイテムがグシャっと重なってしまうことがありますが、そこはご愛嬌ということでご容赦ください(汗))
Font Awesomeについて
About Font Awesome
リリース直後は Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。
FAがどうしても必要、という方はhtml内に
注)Font Awesome(JS)必要な方この一行削除
という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。
CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome
JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。
IE非対応
This theme is incompatible with Internet Explorer.
全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。
重要プロパティのobject-fitがEdgeでもようやく実装されましたので、思い切ってIEをサポート外にさせて頂きました。
また、IE対応をやめることによりIEでしか利用しないスクリプト多数を削除することができました。
現在ではIEを開くとMicrosoftからEdgeに移行を勧められるようになっていますし、リリースメーカーが開発を放棄したブラウザをいつまでもサポートする義理はないかと (´・ω・｀)
IEユーザーへの注意書きが必要な方は以下のページをご参照ください。
ぼっちんさん に教えて頂きました。「こんなのあるぜ？」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない？」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...
ナビゲーションについて
The important thing to be careful when adding links to navigation.
ナビゲーションリンクテキストの日本語変更やリンク追加などをされます方は、デフォルト設定よりも早い段階でナビゲーションが折りたたまれるよう調整してください。
(見た目・操作性の問題とスクロール位置のズレ・リンクの重なり回避)
navi breakpoint
で検索されますとhtml内に1箇所、CSS内に1箇所、合計2箇所出てきます。
いずれも直近(すぐ下にあります)の 900px の数値を大きい数字に変更してください。
レスポンシブデザインですので一定の見た目で判断せず、ブラウザ幅を拡大・縮小しながらあらゆるサイズでの目視確認を行ってください。
個別記事横幅調整の仕方
How to increase or decrease width of container of article.
デフォルトは個別記事の最大横幅を 900px に設定しています。
注)個別記事横幅最大値
で検索して頂きますと、CSSソース内に 1箇所 あります。
実寸は900pxに 足すことの 120px で 1020px としてありますので、変更される際にも
希望寸法 + 120px の値を入れてください。
例) 800pxに変更したい場合は 920px と記述
ドミナントカラー
Dominant colors
以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51
| rgb(237,236,238) | ナビ背景色, コメント送信・削除ボタン背景色 など |
| rgb(137,140,163) | 基本リンク色 |
| rgb(250,249,250) | サイドメニュー背景色 |
削除可能なJSについて
Delete specific JS if you want to
特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。
【FC2検索バーを利用しない人は削除】
<!-- 注)FC2検索バー非表示の方ここから削除可 -->
各々上記を目印にガイダンスに従って削除。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
Son-Of-Valkyrie - FC2ブログテンプレート
