attention admin about comments trackbacks you may also like

Life-is - FC2ブログテンプレート

2016年10月08日
テンプレート
8
HTML5 CSS3 RWD
Life-isテンプレート

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

最終更新 2019.11.5
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Life-is
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大810px
サイド --- 260px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.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 右(デバイス幅依存) サイドメニュー --- 下
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 構造化マークアップを追加

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

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

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

①について

</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"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </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エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

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

サンプル

Samples

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

カスタマイズのコツ

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 before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(8)

There are no comments yet.

はる

2017/03/09 (Thu) 00:33

FC2アクセス解析が機能しません

<!-- 注)アクセス解析貼り付けはここから -->

<!-- [FC2 Analyzer] http://analyzer.fc2.com/ -->
<script language="javascript" src="//analyzer54.fc2.com/ana/processor.php?uid=*******" type="text/javascript"></script>
<noscript><div align="right"><img src="//analyzer54.fc2.com/ana/icon.php?uid=*******&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
<!-- [FC2 Analyzer] -->

<!-- 注)アクセス解析貼り付けはここの間 -->

*******は伏字

これで合っていますか?
FC2アクセス解析が機能しません。
どこが間違っているのでしょうか?
どうぞ宜しくお願い致します。m(._.)m

今朝になったら、アクセス解析できるようになっていました。
お騒がせして申し訳ありませんんでした。m(._.)m

はる

2017/03/09 (Thu) 10:52

FC2拍手のタグ貼り付け位置について

度々申し訳ありません。m(._.)m

FC2拍手のタグの貼り付け位置ですが、
<!--topentry--><!--/topentry-->が6か所あって、全てにペーストしてみましたが
拍手ボタンすら表示されません。
具体的に、どの行の下に挿入したら良いのか教えて頂ければ助かります。
どうぞ宜しくお願い致します。m(._.)m

注1) ブログ用のタグは機能しませんが、サイト用だと機能します。
   なのでFacebookにシェアするの上にサイト用のタグをペーストしています。

<!-- FC2拍手タグここから -->
<a href="//clap.fc2.com/post/****/?url=http%3A%2F%2Fmegoneko.blog.fc2.com%2F&title=%E3%82%81%E3%81%94%E3%81%AD%E3%81%93" title="web拍手 by FC2"><img src="http://blog-imgs-104.fc2.com/m/e/g/megoneko/055796.png" alt="web拍手 by FC2" style="border:none;" /></a>
<!-- FC2拍手タグここまで -->

<a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_enc_utftitle>" target="_blank" title="Facebookでシェアする">


注2) ページ毎の拍手解析をするため、記事毎にサイト用のタグを付けています。


Akira

2017/03/09 (Thu) 16:49

To はるさん

こんにちは。
アクセス解析・拍手共に1月18日にFCブログ運営から公式なアナウンスがありましたので、以下のページから公式ブログへアクセスして内容をご確認ください。
リンク先ページ内容は関連内容ですので目を通して頂くと良いと思います。

http://vanillaice000.blog.fc2.com/blog-entry-463.html

コードの確認をしたいところですが、現在アクセス解析・web拍手ともにログインができなくなっている状態です。
不具合でしょうかねぇ (´・ω・`)

コードを貼り付ける場所ですが、はるさんがどこに貼りたいかによります。
記事内末尾であるのか、それともSNSアイコンの並びに加えるのか。
拍手は基本的に1ページにひとつあれば良いと思いますので、どこに掲載したいのか具体案をまずお願いします。
それよりもまずssl化に伴うコード変更の確認を先にお願いします。
今すぐにはアクセスできないと思うけど ^^;

====== 追記

上記内容を書いた直後にアクセス(ログイン)可能になりました (´・ω・`)

Akira

2017/03/09 (Thu) 16:57

To はるさん

今お邪魔して現状確認しましたが、色々とレイアウトに問題が生じているようです。
アクセス解析・拍手の方の作業をされる前にまず最新版の再DLをお願いできますでしょうか。

http://admin.blog.fc2.com/control.php?mode=design&process=download&no=45166

一旦全てをクリアにしてから修正された方が良いと思います。
現在だとヘッダーの位置が狂っていますし、スマホ用画面サイズに切り替わった際にヘッダー背景が表示されていません。
(位置ずれなどはアクセス解析コードに起因するものです)
URL超過ですのでアドレスコピー、文頭にhttp:を手入力して開いてください。

・正しい状態
//i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/wef9w9efth_zpsa0dbvpny.jpg

・はるさんの状態 (背景が表示されない, ヘッダー位置が下へ下がって上部に空白ができている)
//i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a9e8fuw9qeth_zpsppkzdjkq.jpg

それから、FC2アクセス解析の「ソーシャルタイプ」はレイアウト崩れの原因になります。
できればアイコンタイプへの切り替えをお願いしたいところです。
(ソーシャルタイプを利用するメリットは私では確認できません。メリットは特に無いと思います。)
お手数ですがよろしくお願いします。

今試したところ、ブログ用コードでも掲載できました。
一応コメント(<!-- コメント -->)付きで載せておきますが「拍手『タグ』なんていうデタラメな用語はやめてほしいなぁ、と思う次第(笑)

<!-- FC2拍手タグここから -->
<span id="_clapfc2com"></span><script type="text/javascript">(function(d, name){var text="拍手を送る";var href="アドレス"+"?"+"url=<%topentry_enc_link>&title=<%topentry_enc_utftitle>";var param={href:href,title:"拍手を送る",target:"_blank"};var image=d.createElement("img");image.setAttribute("src", "http://blog-imgs-104.fc2.com/m/e/g/megoneko/055796.png");var anc=document.createElement("a");for (var prop in param) {anc.setAttribute(prop, param[prop]);};anc.appendChild(image);var parent = d.getElementById(name);parent.parentNode.appendChild(anc);parent.parentNode.removeChild(parent);})(document, "_clapfc2com");</script>
<!-- FC2拍手タグここまで -->

======

まとめ
① テンプレートの再DL
http://admin.blog.fc2.com/control.php?mode=design&process=download&no=45166
② アクセス解析コード内容が新しいものになっているかどうか確認 (できればアイコンタイプを選択)
http://analyzer.fc2.com/
③ 拍手貼り付け場所の具体案を提示&ブログ用拍手コード取得
http://clap.fc2.com/

サイト用拍手はあくまでも「サイト全体」に対する拍手ですので、記事毎に掲載されていても記事に対する拍手にはなりません。
ですから「ブログ用」の正しいコード取得をお願いします。
(一応上のコメントで掲載しておきましたが、念のためご自分でも取得してください。
また、参考記事内で「スキーム省略」を勧めていますが、拍手コード内の画像アドレススキームは省略しないようお願いします。表示自体はされますが、JS内部エラーが生じます。)

はる

2017/03/10 (Fri) 06:38

To Akiraさん

早速のお返事ありがとうございました。m(._.)m

今、再ダウンロードしようと思ったのですが、追加済みになっていて
できませんでした。😢
色々な所を触りまくってレイアウトを崩してしまったんですね。
本当に申し訳ありませんでした。m(._.)m

別のAkiraさんのテンプレートにしようかと思います。
本当にありがとうございました。😊

追伸:一度削除したら再ダウンロードできました!
今日一日頑張ってみます!ありがとうございました!😃

Akira

2017/03/10 (Fri) 17:27

To はるさん

こんにちは

再DLの仕方をお伝えしておけば良かったですね。
気が利かなくて申し訳ないです ^^;
名称が同じだとDLできませんので、再DLの際はお手元のテンプレート名の末尾に英数字を追加して名称を変更します。

例) Life-is → Life-is1

その上でDLし、新しい方に設定します。
旧ソースの比較が必要な時もあると思いますので覚えておかれると良いですね。

で、既にお伝えした内容は再DLしたものでも、もっと言えば私のテンプレート以外でも同じ要件ですので、

● ヘッダー下がりを避けるためには「ソーシャル解析」を利用しない
● 拍手「ブログ用」コードを確認する

上記は必須です。
よろしくお願いします。

はる

2017/03/12 (Sun) 15:43

To Akiraさん

Akiraさん、こんにちは~(^^♪

簡潔かつ解りやすいアドバイスありがとうございました~!😊

・テンプレートをコピーし、再ダウンロードしました。
・「アイコン解析」にしました。
・拍手は記事に「サイト用」を記事毎に貼ります。
 あちこちいじくって、又、おかしくしてしまうのが怖いです。😅
 Akiraさんの美しいレイアウトが気に入っているので崩したくないんですよ~!😆
 記事毎にHTMLソースを変更する手間はありますが、ページ数を
 変えてコピペするだけなので。

色々とご面倒をおかけして申し訳ありませんでした。🙇
何度もお付き合い頂きまして、本当に本当に有難うございました~!🙌💖✨
 

Akira

2017/03/12 (Sun) 22:25

To はるさん

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

まだ変更前でしょうかね。
解析コードがソーシャルタイプですけども(笑)
拍手の件は結局それが一番確実かもしれませんね。
こちらこそありがとうございます

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

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