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

投稿 2018年12月06日
9
テンプレート
HTML5CSS4RWD
Liltingテンプレート

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

名称 Lilting
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大1020px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
*各記事サムネイル対象画像横500px程度の場合
固有機能 ・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下

りるてぃん
メイソンリーのシングルレイアウトです。

今回からスピードスコアをGoogleのPage Speed Insightsに切り替えました。スピードアップデートも既に開始され、今後はスマートフォンでの表示スピードが最も重要、ということでモバイルスピードの計測です。
もうデザインだけ上手いことやってれば良い時代は終わりましたね。今後はいかに速く表示するかもポイントかなぁと思います。
製作者的には試練(笑)

サンプル

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

画像の縦横比について

About image aspect ratio

メイソンリーですが 元画像のアスペクト比を守りません
その代り通常のメイソンリーよりも表示は速いはずです。また、OGP画像のサイズは推奨がありますので、常に一定のサイズにしている方もいらっしゃるかと思います。そんな場合でもメイソンリーを楽しむことができます。

IE非対応

This theme is incompatible with Internet Explorer.

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

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

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

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

ドミナントカラー

Dominant colors

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

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

記事編集リンクについて

Location of edit icon

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

Google+ シェアアイコンについて

About Google+ share icon

Google+は2019年8月でサービス終了を迎えますが、今回までは入れておきます。
次回作からは削除する予定です。

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

Cautions before asking for something.

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

9 COMMENTS

There are no comments yet.

ぼっちん  

サムネイル付き関連記事リストが

Akiraさん、こんにちは ^^

Bullet からこちらの Lilting に乗り換えようと、見映えをちょこっとカスタマイズして利用し始めていたんですけど、今になって「あれ? サムネイル付き関連記事リストが表示されていないよ(笑)」ってことにやっと気がつきまして、とりあえずデフォルトのもので表示させても、やはりサムネイル付き関連記事リストが表示されません (^^;; アセ

今現在はちょっとカスタマイズしたもので表示しておりますが、デフォルトでも表示されるのか、恐れ入りますがちょっと検証して戴けませんでしょうか?

----------
追記させて戴きます ^^
サンプル画像下段の個別記事画像には、その「関連記事リスト」が表示されているものですから、このままでは利用者さんが ?? っと首を捻ってしまうと思いますので (^^ゞポリポリ

2018/12/10 (Mon) 12:16
vanillaice (Akira)

Akira  

To ぼっちんさん

ぼっちんさん、こんにちは (o'ω')ノ

Bulletを設定される時に個人設定の「関連記事リスト 表示場所」を「テンプレート変数のみ」に変更されているはずです。
FC2ブログのデフォルト設定は「個別記事ページの記事下」なので能動的に変更していなければ表示されますよ。
テンプレート変数に設定した時にはhtmlに関連記事のhtmlが含まれていないと表示されません。そしてこちらの方が特殊な設定(FC2の自動出力を利用しないという意味で)です。
Bulletはスピード対策とhtmlバリデートのために自動出力を利用せずに私が書き直したものを使うようにしています。一般ブロガーさんが「テンプレート変数のみ」を選ぶことはまず無いと思います(自分でhtmlとCSSを書かなきゃいけないから)
よろしくお願いします。

2018/12/10 (Mon) 15:55

ぼっちん  

そうでした

あっ 
Bulletを設定される時に個人設定の「関連記事リスト 表示場所」を「テンプレート変数のみ」に変更されているはずです。
これ、もううっかり忘れ切っておりました、いや、お恥ずかしいです ポッ(*^。^*) ← 赤面している様子(爆)
納得と解決致しました、ありがとうございます ^^

2018/12/10 (Mon) 16:26
vanillaice (Akira)

Akira  

To ぼっちんさん

いえいえ。私もDEMOサンプル作る時によく変更し忘れます(笑)
また関連記事出てないじゃん!みたいな(笑)

2018/12/10 (Mon) 16:27

-  

管理人のみ閲覧できます

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

2018/12/13 (Thu) 18:02
vanillaice (Akira)

Akira  

To アニメーションの件 内緒さん

こんばんは (●'0'●)/

そうですね。Bulletのアニメーションはopacityだけですがこちらは opacity+scale なので
spinner + LQIP + (opacity + scale)だとちょっと脂っこいというか、LQIP表示が間に合わないと思いますのでspinnerと組み合わせるだけで十分だと思います。間に合わない、というのはほとんど気づかれることがないという意味です。
それにLQIPは別の画像を作らないといけないので面倒ですよね ^^;

2018/12/13 (Thu) 20:00

-  

管理人のみ閲覧できます

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

2018/12/13 (Thu) 20:20

-  

管理人のみ閲覧できます

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

2018/12/13 (Thu) 20:22
vanillaice (Akira)

Akira  

To アニメーションの件 内緒さん②

そうですよね。dataURIのことですよね。
絵文字のLQIPを作るなんて大変だなぁ、と思いました(笑)

2018/12/13 (Thu) 21:12

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)