Life-is - FC2ブログテンプレート(配布終了 2023年9月16日)

2024/03/01

2016/10/08

RWD LivingStandard Valid ドロワーアコーディオン jQuery

vanillaice (Akira)

配布終了致しました。ご利用ありがとうございました。Sorry, this theme is no longer being developed.

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

名称	Life-is
動作確認済みブラウザ
トップページ記事並び	全文表示タイプ
記事幅	メイン --- 最大810px サイド --- 260px
記事内で使える見出しレベル	h2からh6まで
jQuery導入	あり(v3.4.1)
Font Awesome導入	なし(インラインSVG)
Lazyloading導入	なし
構造化マークアップ	2019.8.1以降バージョン個別記事のみ BreadcrumbList(パン屑リスト) BlogPostiong
Page Speed Insigtsスコア
固有機能	・画像にドロップシャドウ・動画縦横比固定使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ	色調変更
ライセンス	Required 必須事項・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項・Modification 改変・Personal Use 個人利用・Commercial Use 商用利用 Forbidden 禁止事項・Distribution 再配布・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考

パソコン	タブレット	スマートフォン

2カラム	1カラム or 2カラム (デバイス幅依存)	1カラム
サイドメニュー --- 右	サイドメニュー --- 下 or 右(デバイス幅依存)	サイドメニュー --- 下

最終更新 2022.1.6

FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

過去の更新一覧

更新履歴 2020.5.30

ページ送りのJSを修正

更新履歴 2020.4.5

コメント返信のJS変更
jQueryを3.4.1にアップデート

更新履歴 2020.3.25

個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.12.17

パーマリンク設定導入に伴う個別記事URL正規化
パーマリンク設定導入に伴うページ送り変更

更新履歴 2019.11.5

コメント主のリンク表示用JS及びデザインの変更
SVGのIE向け調整

更新履歴 2019.7.29

管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
受信コメント一覧とコメント投稿フォームのセクションを統合
コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
構造化マークアップを追加

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

①について

</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箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に変更。

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><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;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .5em 0 .3em;
}

②について

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

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

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

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

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

#comment_form {
  padding-top: 40px;
}

③について

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

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

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

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

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

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

更新履歴 2019.4.27

C版Safariでモーダル検索背景が白くなる件修正

更新履歴 2018.12.28

Font Awesome(JS)を廃しインラインSVGに変更
別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままお使い頂けます。

更新履歴 2018.3.6

iOS11.2.6でモーダルが開かない件修正
Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップデート
新変数実装による管理人コメント区別(ボーダー色違い)

更新履歴 2017.12.22

大規模なメンテナンスを行いました

詳細は以下のページでご確認ください。

更新履歴 2017.1.25

SNSシェアリンクのUTF-8エンコード

更新履歴 2017.1.13

RSS新着サムネイルをFC2独自変数での表示に切り替えました

本ページの内容は2018年12月28日メンテナンス以降のバージョンが対象です。

サンプル

Samples

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

LIST PAGE DEMO
画像クリックでデモ画面へ

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

目次へ戻る↑

カスタマイズのコツ

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

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

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

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

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

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

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

目次へ戻る↑

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のファイルと干渉しないはずです。

目次へ戻る↑

背景スライドの画像変更

How to change the slider images

全体画面幅が大きい時は右サイドに固定されたメニュー内に表示されます。
ブラウザ縮小及びデバイス変更(タブレットやスマホなど)時、横幅854px以下でヘッダー背景に変更になります

デフォルトではサイド・ヘッダーそれぞれに同じ画像を4枚づつ入れてありますが別々の画像を設定することも可能です。

注)ヘッダー用画像群

注)サイドメニュー用画像群

対象箇所は上記の通り。枚数の増減も可能です。カンマの有無や位置などに気をつけながら作業してください。
また背景上には黒の半透明マスクをかけてあります(文字を読みやすくするための処理です)

ローディング直後に画像が表示されるタイムラグを防ぐために最初の一枚目だけはCSS側にも記載をしてください
ヘッダー・サイドメニューそれぞれ

注)ヘッダースライド最初の一枚

注)サイドメニュースライド最初の一枚

が対象箇所ですので画像のURLを差し替えます。

画像を変更する方は忘れずに必ずやってくださいね。
そのまま放置すると一瞬デフォルトの画像が表示されてしまいます。
また、スライドにせず1枚のみを設定する方はJS内容が不要ですのでhtml内から削除を行なってください。
1枚のみ設定はCSS内「最初の一枚」設定だけで表示されますので、無駄なJSを読み込む必要はありません。

目次へ戻る↑

サイドメニューの折りたたみ解除

How to remove accordions in aside menu

プラグインの展開を解除したい方は

注)サイドメニュープラグイン展開解除

で検索すると 2箇所出てきます(html内1箇所(訳注文としては2箇所), CSS内1箇所)
それぞれガイダンスに従ってください。

目次へ戻る↑

ドミナントカラー

Dominant colors

以下が基本色調です。
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと不透明度つきのものも全て出てきますので上手に活用してください(カラーコードクリックでコピーできます)
例) 51,51,51 で検索

rgb(110,205,212)	基本リンク色
rgb(51,51,51)	基本文字色
rgb(87,119,47)	コメントSENDボタンホバー背景色
rgb(175,70,107)	コメントDELETEボタンホバー背景色

目次へ戻る↑

No image画像変更

How to change alternative image

デフォルト画像 (縮尺掲載実寸160×160 5KB public domain)

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/lifeisnoimage.jpg

上記が対象画像アドレスですので差し替えてください
CSSソース内に2箇所あります。

目次へ戻る↑

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

Cautions when copying pagination in permanent page

2020.3.25バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の  から  までをコピーし、掲載希望場所へペーストしてください。

目次へ戻る↑

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

Cautions before asking for something.

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

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

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

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

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