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

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

名称	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

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.

• サイドバーの形状変更
• トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
• レスポンシブを固定幅化
• カラム数変更
• トップページ画像表示縦横比変更
• テンプレートと無関係なプラグインなど導入のお手伝い
• テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズのお手伝い

ご利用の前に

Important notice.

本テンプレートは実験的な意味合いで製作しております。
ご質問・ご相談が届くであろうことを想定し、仕様の説明をしておこうと思います。
ご自身の理想や希望などと照らし合わせた上で利用のご検討をお願いします。

トップページサムネイル画像の縦横比は元画像を参照踏襲しません

今回の製作テーマは「メイソンリーレイアウトの表示負荷をいかに抑えるか」です。
グリッド = 全てのアイテムのサイズを揃えて整列させる
メイソンリー(可変グリッド, 変形グリッド) = 個々にサイズが異なるアイテムをレンガ状に配列する

メイソンリーというのは配列前に縦幅の計算が必須ですので、画像の遅延読み込みと大変相性が悪い んですね。
遅延読み込みが適用されたbelow the fold(画面外, ファーストビュー外)の画像はスクロールを行うまで情報の取得が行われません。
html内に逐一 width, height属性を記せば別ですが、テンプレート製作者がユーザー利用画像のサイズを前もって知ることは不可能です。

メイソンリーを実現するには「初回表示時の縦幅計算」「画面及びブラウザサイズが変わった時に再計算(レスポンシブ)」がいずれにしろ必須なのですが、画像遅延読み込みと両立させるためにはそれに足すことの「スクロールで画像が表示された時に再計算」が加わります。
また、メイソンリーは時系列を遵守しませんので、「スマートフォンで縦一列になった際に時系列順に戻す処理」がさらに追加されます(ここは製作者によると思いますが私は行なっています)
メイソンリーというのは人間(製作者)もコンピュータも非常に頭を使うレイアウトです。

既存テンプレートの Mocha や Nostalgia では上記全ての処理をJSで行なっています。
が、やっぱりパフォーマンスが落ちるんですね (´・ω・｀)
そして現在ChromeでrequestIdleCallbackのバグがあり、その影響で計算量の多いスクリプトでは非常に動作が遅くなってしまいます。

参考記事

難しい説明はここでは抜きにして、要するに
画像の縦横比が不明な状態のままでメイソンリー配列を行うとパフォーマンス低下を招く
ことになります。

画像を遅延させず通常の読み込みをすれば多少改善されますが、いずれにしろ画像は一足遅れでの情報取得になりますので結局は再計算が必要です。
メイソンリーで アイテムが重なっている ページ(そしてそのまま直らない)とか目にしたことがありませんでしょうか。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ユーザーへの注意書きが必要な方は以下のページをご参照ください。

ナビゲーションについて

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)	サイドメニュー背景色

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

Cautions before asking for something.

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

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

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

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

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