The other way round

ARTICLE PAGE

in テンプレート

Life-is(リニューアル版)

-8 COMMENT
Life-is


名称 Life-is
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時 下
SP --- フォロワー(左からスライド)
記事幅 可変 最大850px (内寸 810px)
サイドバー幅 固定300px (内寸 260px)
トップページ記事表示タイプ 全文表示(追記以降は個別記事)
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします
Google Feed API廃止に伴いFC2独自変数での表示に変更しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム スライド画像変更


valid-html5.png



更新履歴 2017.1.25


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

参考記事
SNSシェアリンクのエンコード


--------- 以下本文



更新履歴 2017.1.13


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

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更


--------- 以下本文



2016年3月にリリース済みの Life-is テンプレート をリニューアル致しました
Windowsでのリサイズ不具合等修正してあります
また スライドが表示されるまでのタイムラグ等も緩和しました
見た目や機能はほとんど変わっていませんが html内容とJS内容が大きく変わっています



TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO

DOWNLOAD
FAQ



旧作から引き継いだ仕様
・サイドメニュー 背景スライド
・サイドメニューのスライドは画面縮小(デバイス変更含む)でヘッダーに移動します
・サイドメニューは展開タイプ (ページ遷移時は開閉の状態を記憶・保持します)
・サイドメニューはスマホのみ左からスライド
・トップページ以外は記事を探しやすいリスト表示
・カスタマイズのガイドは 注) でCtrl+Fキー検索してください


旧作からの変更点
・リスト系ページのレイアウトを変更しました
・スライド実装のプラグインを変更しました
・一部アニメーション動作をJSからCSSに切り替えました


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など) 及びリスト表示の変更
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更


カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします




背景スライドの画像変更

全体画面幅が大きい時は右サイドに固定されたメニュー内に表示されます
ブラウザ縮小854px以下でヘッダー背景に変更になります

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

注)ヘッダー用画像群

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

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

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

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

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

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



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

プラグインの展開を解除したい方はCtrl+Fキー検索

注)サイドバープラグイン展開解除

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



ドミナントカラー

以下が基本色調です
数字の部分だけを抜き出して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画像変更

使用される場所・ページは
・ 検索結果
・ RSS新着サムネイル
・ 各リストページ(カテゴリなど)

デフォルト画像 (縮尺掲載 実寸600×375 38KB public domain)



//blog-imgs-93.fc2.com/v/a/n/vanillaice000/lifeisnoimage0.jpg

上記が対象画像アドレスですので差し替えてください
html内に1箇所 CSSソース内に2箇所の 計3箇所です



管理人コメントと訪問者コメントを分ける



ハンドルネーム横のボーダーの色を変更できます

.name管理人ハンドルネーム {
  border-left: 6px solid カラーコード;
}

緑の「管理人ハンドルネーム」の部分は普段コメント欄でお使いのお名前に書き換えてください
例) 管理人ネーム: 空条承太郎

.name空条承太郎 {
border-left: 6px solid カラーコード;
}

* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別しています 同じハンネの方がご訪問されると… ごめんなさい (割りきってお使いくださいね)




ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


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

TemplateFC2HTML5CSS3Responsive

  • Share

8 Comments

はる  

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) 00:33 | EDIT | REPLY |   

はる  

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) ページ毎の拍手解析をするため、記事毎にサイト用のタグを付けています。


2017/03/09 (Thu) 10:52 | EDIT | REPLY |   

Akira  

To はるさん

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

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

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

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

====== 追記

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

2017/03/09 (Thu) 16:49 | EDIT | REPLY |   

Akira  

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/09 (Thu) 16:57 | EDIT | REPLY |   

はる  

To Akiraさん

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

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

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

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

2017/03/10 (Fri) 06:38 | EDIT | REPLY |   

Akira  

To はるさん

こんにちは

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

例) Life-is → Life-is1

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

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

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

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

2017/03/10 (Fri) 17:27 | EDIT | REPLY |   

はる  

To Akiraさん

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

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

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

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

2017/03/12 (Sun) 15:43 | EDIT | REPLY |   

Akira  

To はるさん

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

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

2017/03/12 (Sun) 22:25 | EDIT | REPLY |   

Leave a comment

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