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

投稿 2018年06月30日
40
テンプレート
HTML5CSS4RWD
La_Vitaテンプレート

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

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

Facebook連携がAPI単位で廃止されるようですがFC2は広報しなくて良いのだろうか (´・ω・`)

ら ゔぃーた
承認されました。ありがとうございます。

サンプル

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.

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

IE非対応

This theme is incompatible with Internet Explorer.

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

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

旧ブラウザ向け啓蒙コードについて - カスタマイズ

GirlOnWire リリース時から提供させて頂いてます『旧ブラウザ利用者に向けてアップグレードを促す』ための啓蒙ソースコードですが今回 表示される画像を変更しました変更したのは「解像度」のみアップグレードのハイパーリンクに使用しているブラウザアイコンが対象です高解像度ディスプレイ向けに画像解像度自体を調整しました無駄だなー と思いつつ作業(笑)高解像度ディスプレイでアクセスしているということは比較的新しい機種...

コード書き出しの <!--[if lt IE 9]><!--[if IE]> に変更すると「全てのIE」が対象になります。

ドミナントカラー

Dominant colors

本作からCSS変数(variables)を導入しています。
カラーコード等の繰り返し指定を避けコーディングを効率化するためのものです。

作業効率は上がりますが、W3Cによるバリデートではエラーになります。

OGP情報などもかつてはそうだったように、まだドラフト段階です(CSS Level4)
記述の内容が間違っているのではなく現時点では各ブラウザの先行実装扱いになります。
特にSEO上で問題になるようなことはないので過敏になることはありませんが、気になる方はお手数ですがご自身で書き換えをお願いします。

root で検索されますとCSSソースの上方に見つけられます。
カスタムプロパティ名: 値;
という形で記されていますので、ガイダンスを見ながらどこに該当するのかをご確認ください。
値の変更により同じ色指定が為されている部位については一括で書き換わります。
カスタムプロパティ名は変更されませんようご注意ください。

例)

--bg-color: red;
var(--bg-color)
--bg-color: green;
var(--bg-color)

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

About thumbnails in pager

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

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

Cautions before asking for something.

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

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

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

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

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

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

40 COMMENTS

There are no comments yet.

-  

管理人のみ閲覧できます

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

2018/06/30 (Sat) 14:49

-  

管理人のみ閲覧できます

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

2018/06/30 (Sat) 15:28

-  

管理人のみ閲覧できます

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

2018/06/30 (Sat) 17:39
vanillaice (Akira)

Akira  

To La_Vita 諸々の件 内緒さん(完了のご報告)

こんばんは。記事のUPが遅くなりお手数おかけしました。
ページ送りサムネイルとパララックス双方が正常に機能したようで安心しました。

> トップページのヘッダー画像をオリジナルに変更したい場合は〜

はい。おっしゃる通りその2箇所の変更で合ってます。
念の為デフォルトURLは
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/pink-tulips-from-below-picjumbo-comthth.jpg
でhtml内に2箇所ありますので2つ変更してくださいね。

> コンソールのwarningsが、どうやらhttps://ad.ad-arata.com/static/embed.jsという物が原因のようなのですが〜

こちらももうそろそろ修正してくれると良いんですけどねぇ (´・ω・`)
document.writeを辞めてinnerHTMLに直すだけなのに。
arata adはその他にもちょっとした問題が。
いずれにしろこの件は対処不可能(有料登録以外)なので放置するしかないと思います。
お疲れ様でした

2018/07/01 (Sun) 00:31
vanillaice (Akira)

Akira  

To La_Vita DLリンクの件 内緒さん

私またやっちゃいましたか。
これもう恒例になってますよね。
私がミスし、内緒さんが指摘してくれるという通過儀礼(笑)
今後もご指摘よろしくお願いします ^^;

2018/07/01 (Sun) 00:33

-  

管理人のみ閲覧できます

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

2018/07/01 (Sun) 01:01

hige  

あっ これ いいですね

 このテンプレは
 タイトルバックに指定画像が入れられるし、primaryのmargin-topを0にすると、折角Akira氏が凝ったレイアウトを残念な普通に変更出来るし。
 これでようやく要約表示のデザインに移行出来そうです。(親爺ギャク)
 テンプレのdonnaに乗換えようとしていたのですが、タイトルのバックの画像処理がめんどくさくて、集中力のなくなった年寄りの私は諦めかけてました。タイトルバックの画像には私がアップした画像の縦横比が出来るだけそのままであって欲しいので。
 これで出来れば、INDEX(トップ)ページの記事の表示が2列表示だと非常に嬉しい。
 と、暗に催促してみる。
 とりあえず乗換える準備を着々と(遅遅と)自力準備中です。
 https://blgid1974.blog.fc2.com/?template=La_Vita01&index

 で、エントリーページのタイトルバックにその記事の画像が出てくるのは、最初は違和感があったのですが、これはこれでおもしろいですねぇ。
 画像のない記事の時には初期指定の画像が出てくるのも秀逸です。

 ひとつ疑問があるのですが、PCでサイドカラムが右に表示されている時、ページの最下段に移動してから上方に移動する時、サイドカラムがすぐにスクロールされなくて、サイドカラムとメイン(primary)の縦のサイズが同じになった時(と思われる時)に、サイドカラムがスクロールし出すようです。
 いつの時期にか何かの理由があって、この様な仕様にされたのだとは思いますが、私は上方へのスクロールはサイドカラムもすぐに付いてきて欲しいなぁ と。

 Akira氏のテンプレを採用されたブログを拝見した時にそれぞれ色々カスタマイズされておられるようですが、それがどのテンプレなのかを知ることが出来ません。
 なにか知る方法は無いのでしょうねぇ。何か埋め込むことなど出来るのでしょうか?

2018/07/01 (Sun) 20:33
vanillaice (Akira)

Akira  

To ファイル名称の件 内緒さん

こんばんは ('0')/

そういえば内緒さんは全記事リストにも画像を掲載されてましたよね。
なるほど納得です
FC2が全記事リストのサムネイル変数を作ってくれると良いんですけどね。
ただこのページは特殊でどのページ種と比べてもダントツに重たいので現実的ではないかもですね。

2018/07/01 (Sun) 21:52
vanillaice (Akira)

Akira  

To higeさん

higeさん、こんばんは (●'0'●)/

カスタマイズ拝見しました。とても良い感じにできてますね

スクロールアンカーの件ですが、La_VitaではCSSのみで実装しています。
higeさんが言われる動作を実現するにはhtmlのラッパーをいくつか増やすのと、jQueryが必要になります。
今回はjQueryを用いずに制作しましたので軽快に仕上がっているはず。

動作的にはこれまでのスクロールアンカーの方が遥かに良いのですが、モバイルファーストとスピードの点で今回はこの形を取りました。

参考記事: サイト改装 脱jQueryなど
https://vanillaice000.blog.fc2.com/blog-entry-724.html#toc-3

------
どのテンプレかすぐにわからない件については、独自変数にテンプレート名を表示させる <%style> というのがあるのですが、多くのユーザーさん(管理人)にとっては正直不要というか、テンプレート製作者の名前があるだけでも疎ましいと感じる人もいらっしゃるかも(笑)
あまりこう、ドーンと私や私のテンプレートを主張するのもどうかと思うので利用していません ^^;

毎回CSSの書き出しに Website skin name としてテンプレート名を記していますので、右クリックソース開示からCSSファイルを開いて頂くことで確認できます。めんどくさいけど。

全記事リストの二列並びはカスタマイズで可能ですよ。
確かにパソコンからだと記事幅が広いのでちょっと見た目がアレでソレに感じますよね。
ただ番号のついた(ついているべき)リストなのでやはり縦一列が理想かもしれません。

2018/07/01 (Sun) 22:08

hige  

多謝

スクロールアンカーの件、解りました。
この記事読んでました。でも忘れてました。申し訳ありません。

テンプレ名の件、ご指摘の部分にテンプレ名が書かれているのは解っていたのですが、他サイトのHTMLは表示出来てもCSSを表示する方法が解らずにいました。でAkira氏の説明従って試行錯誤の末見つけました。
HTMLの中に書かれてるんですね。
この
<link rel="stylesheet" href="<%css_link>" media="all">
ってなんかのおまじないなんですかね。ていうか、ここで該当のテンプレ専用のCSSを読み込んでいるというか、指定してるというか、のかな?

あと、ごめんなさい!(^_^;)
INDEXページの件。
テンプレートの管理画面でDLしたテンプレ名をクリックするとプレビュー出来ますが、その表示ページのURLの最後の文字がINDEXになってたので、そう表記しました。
私が書きたかったのは全記事のarchivesのページではありません。INDEXという単語が示す意味を間違ってました。私が書きたかったのは一番最初に開くHOMEページのことでした。
もう少しよく吟味してから書くべきでした。
記事も書いて戴いたのに、ほんとにごめんなさい。

このところ、軽率なことばかりやっててちょっと落ち込んでます。

2018/07/02 (Mon) 21:37
vanillaice (Akira)

Akira  

To higeさん

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

<%css_link> が各ユーザー専用CSSファイルのアドレスを出力する変数です。
サーバーからレスポンスが返って来た時にはURLに書き換わっています。

INDEXはトップページのことだったんですね。
そうなるともう全く別のデザインなのでまた次回作以降ということで。
いえいえ。語句が統一されていないFC2ブログならでわなので落ち込む必要ないと思います(笑)
私も「全記事リスト」という表現を用いれば良かったと反省しております ^^;

2018/07/02 (Mon) 23:55

-  

管理人のみ閲覧できます

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

2018/07/06 (Fri) 00:34
vanillaice (Akira)

Akira  

To La_Vita colorboxの件 内緒さん

こんばんは (o'ω')ノ

La_VitaのJSはjQueryを使わず全てネイティブで書いています。
ColorboxはjQueryが必要なのでhtml内にある
jQuery必要な方コメント削除
を目印にガイダンスに従ってください。
colorboxはCSSリンクだけでなくJSファイルと実行コードも必要なはずなので jQueryファイルの直下に記載してください。
よろしくお願いします。

内緒さんはお元気でなによりです。
なんか私風引いた気がします。 ( ̄∀ ̄;)

2018/07/06 (Fri) 01:45

-  

管理人のみ閲覧できます

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

2018/07/07 (Sat) 00:12
vanillaice (Akira)

Akira  

To La_Vita colorboxの件 内緒さん

こんばんは (o'д`o)ゝ

先回の(過去の)テンプレートと全く同じ位置に記載するだけですよ。

> jQueryファイルの直下にcssを記載しました〜

CSSファイルは<head>〜</head>内にしか置けません。
<link
で始まるものはCSSファイルですから
<%css_link> で検索してヒットした要素のすぐ下に入れてください。

あとJSファイルもあるはずです。
それが無ければ動きません。
<script src="アドレス.js"></script>
となっているものがそれです。
jQueryの下に入れてください。

その下に他にもう一つ
<script>
jQuery(function($){
省略
})
</script>

こんな感じの実行コードがあるはずですので入れてください。

一言一句同じわけではないのでともかく link から始まってるのか script で始まっているのかをよく見分け、link要素はhead内へ、script要素はjQueryファイルの下へ。
実行コードは必ずcolorbox本体のJSファイルの下に書いてください。

というか過去テンプレートと見比べればすぐにわかると思いますよ。

2018/07/07 (Sat) 02:18

-  

管理人のみ閲覧できます

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

2018/07/07 (Sat) 15:32
vanillaice (Akira)

Akira  

To La_Vita colorboxの件 内緒さん③

こんにちは (o'ω')ノ

先回のテンプレートと同じ記載であるならば先回も動かなかったはずです。
colorboxを動かすには最低でも2つのファイルと一つの実行コードが必要です。

必須2ファイル
<link rel="stylesheet" type="text/css" href="https://ファイル名.css">
<script src="https://ファイル名.js"></script>

必須1実行コード
<script>
jQuery(function($){
省略
})
</script>

------
今内緒さんのテンプレートに記載されている内容は以下の通り

<head>
.
.
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox/colorbox.css" /
.
.
</head>
.
.
<!-- jQuery必要な方コメント削除
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->

無関係な内容

<script type="text/javascript" src="https://ファイル名/jquery-colorbox.js" ></script>
<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox.css" media="screen" />
<script>
jQuery(function($){
省略
})
</script>

内容はこのまんまです。「ファイル名」のところだけ伏せています。
これでは動きません。

----
1. まずcolorboxのCSSファイルがhtmlのhead内とhtmlの後方と2つありますが、head内に入れてあるファイルは消失していますし記述エラーです。
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox/colorbox.css" />
最後のブラケットが足りません。これはhtml構文エラーです。
記述の位置はここで合っていますがファイルが存在しませんので、後方にある
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox.css" media="screen" />
をカットし、head内の間違った内容と差し替えてください。
コピーではなくカットです。後方へのCSSファイルは何度も言いますがルール違反ですから消してください。

2 jQueryのコメント化が修正されていません。
「コメント解除」の意味は
<!--

-->
削除する という意味です。
以下の通り赤字部位を削除。

<!-- jQuery必要な方コメント削除
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->

この作業をしないとjQueryは絶対に動きません。

3. 実行コードがサンプルのままです。
私は
======
<script>
jQuery(function($){
省略
})
</script>
こんな感じの実行コードがあるはずですので入れてください。
======
上記のようにサンプルとしてコードを書き、念の為「一言一句同じわけではない」とも書いておきましたが、
省略 などと書いてあるJS実行コードはありません。
この部分は私のテンプレートとは関係がありませんしcolorboxは私が制作したプラグインではありませんので、私は内緒さんがどんなコードを利用しているのか知りません。
なので「省略」と書きました。このサンプルをそのままhtml内にコピペしろと言ったわけではありません。
今までcolorboxをご利用になっていたのですから、テンプレートを変更する度に移設していたJS内容が必ずあるはずです。
それを書いてください、という意味です。
そしてそれは

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

この内容のことです。これがいわゆる「実行コード」「フックアップ」と言われるものです。

-----
まとめ

1. head内<%css_link>を目印にそのすぐ下に正しいCSSファイルを正しく記載
2. jQueryファイルの有効化(コメント解除)
3. 正しい実行コードを記載(既に記載されていますので「省略」の付いたscript要素を削除)

この3点で動くはずです。
coloboxはもう5年ほど更新がありませんのでjQueryファイルのバージョンと整合性があるかどうかは私ではわかりません。
jQueryプラグインなどテンプレートと無関係な内容については私が管理することはできませんので、ご利用になる内緒さんご自身がファイルや導入方法など常にしっかりと管理を行ってください。
よろしくお願いします。

-----
念の為書いておきます

<head>
<link rel="stylesheet" href="<%css_link>" media="all">
<!--permanent_area-->
<link rel="stylesheet" type="text/css" href="正しいcolorbox用CSSファイル">
<!--/permanent_area-->
</head>
.
.
.
<!--permanent_area-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="正しいcolorbox用JSファイル"></script>
<script>
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

<!--/permanent_area-->


こうですね。
赤字の独自変数はcolorbox利用は個別記事だけでしょうから追加しましたが任意です。
また、html5では type="text/javascript" などは不要な記述ですので削除してあります。
上記内容も丸っとコピペすれば良いわけではないですよ。
<link rel="stylesheet" href="<%css_link>" media="all"> は特に目印として書いただけで既にテンプレートに含まれている内容ですから複製しないように注意してください。
その他書き換えるべきところは書き換え、また、記載する位置もしっかり確認してから行ってください。
内緒さんが加えるべき内容は太字にしてあります。
それ以外は目印だと思ってください。

htmlの終わりは

}]
</script>
<!--/topentry-->
<!--/permanent_area-->

</body>
</html>

こうなっていなければいけません。余分な内容は削除してくださいね。

とにかくcolorboxのJSファイルと実行コードはjQueryファイルのすぐ「下」です。それ以外の場所に入れたり複数書いてしまったりなど無いようチェックしてください。
スクショなどを用いればもっとわかりやすく的確な説明ができますが、非公開コメントなのでできませんというか控えざるを得ません。
これ以上の説明が必要であれば、できれば公開でお願いします。
今回特にファイル名の間違いなどがありますので、非公開の場合にはURLを直接記すとブログの所在が明らかになってしまいますので的確な指摘ができません(笑)

2018/07/07 (Sat) 16:05

-  

管理人のみ閲覧できます

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

2018/07/08 (Sun) 01:56
vanillaice (Akira)

Akira  

To La_Vita colorboxの件 内緒さん④

こんにちは (o'ω')ノ

かろうじてというかなんとなく動いてはいますがソースはぐちゃぐちゃです (´・ω・`)
私の説明を何度もよく読み返し、ポイントとなるところを一つ一つ丁寧にチェックしてください。

今回ファイル名などに伏せ字を用いてご理解頂くのは無理だと判断しました。
なのでブログ名などわかってしまいますが全てオープンで説明させてくださいね。
もう一度書きます。

・head内のCSSファイルは存在していません!
これのこと。クリックしてみればわかります ↓
https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox/colorbox.css
・私の書いた内容を単純にコピペしてはいけない!
・スクリプトファイルなどを重複させてはいけない!
・記述すべき位置は指示に従い、なんとなく適当に入れてはいけない!

-------
現時点での問題
・CSSファイル重複(うち一方はファイル消失)
・CSSファイルはhead以外に入れてはいけない(正しい方のCSSファイルがbody内にある)
・jQueryファイル重複
・記述位置が違う

------
今のところ正しく作業が進んでいるのはjQueryファイルのコメント解除のみです。
スクショです。
注意!
FC2独自変数はブログ管理人にしか見えない仕組みです。第三者には目視確認することができません。
なのでスクショ内には存在しませんが、実際の内緒さんが保有しているソース内には変数が記されています。
なので テンプレートのhtml内容はスクショと全く同じわけではありません

https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/capcbox6676234th.png
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/capcbox778234th.png
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/capcbox009834th.png

スクショに従って修正をお願いします。

-------
どのテンプレートでも毎回やることは同じですよ。
ですから 作業手順をしっかりメモしておくなどしてご自身で管理してください

・CSSファイル(ファイル名末尾の拡張子が .css になっているもの)は必ずhead内に入れる
</head>で検索すればすぐにわかります。この</head>よりも「前」に書かなければいけません。
(<%css_link>の文字列を持つlink要素の直下が妥当)
これのこと ↓
<link rel="stylesheet" type="text/css" href="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css" />

・スクリプトファイル(ファイル末尾拡張子 .js)はjQueryファイルよりも下に入れる
(直下である必要はないが心配なら直下で構いません)
これのこと ↓
<script type="text/javascript" src="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/jquery-colorbox.js"></script>

・実行コード(フックアップ, トリガーコード)はcolobox用スクリプトファイルの直下に入れる
これのこと ↓
<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

-----
またこれも既に書きましたが、記述の仕方は揃えるようにしてください。
空要素(終了タグを持たないもの)末尾のスラッシュはhtml5では不要です
script要素のtype属性はhtml5では不要です

例) 末尾スラッシュ
×
<link rel="stylesheet" type="text/css" href="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css" />

<link rel="stylesheet" type="text/css" href="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css">

例) script要素のtype属性
×
<script type="text/javascript" src="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/jquery-colorbox.js"></script>

<script src="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/jquery-colorbox.js"></script>

特にhead内要素の末尾のスラッシュあり・なしはOGPなどに影響することがあります。
つけるならつける、つけないならつけない、と方針を定めるようにしてください。

2018/07/08 (Sun) 14:43

きろろ  

To Akiraさん

ありがとうございますm(_ _)m
何度も何度もご丁寧に、すみません。
css……
確かにソースから見ると表示されませんね(..;)
おかしいですよねえ……
なので、ファイルアップロードからcssファイルのurlをコピーして張りましたら、
今度はちゃんとcssの内容が見られることができました。
ご指定の場所は直しました。ちゃんと動いています。
なんで今まで動いていたのかしら……(..;)
結構前からhtml5になっていますよね……。
Axisもhtml5? ですよね??
/も、script要素のtype属性もそのまま使っていました。
猛省しておりますm(_ _)m

2018/07/09 (Mon) 00:46
vanillaice (Akira)

Akira  

To きろろさん(完了のご報告)

こんばんは ('0')/

私のテンプレートは全てhtml5ですよ。
スラッシュの有無やtype属性については微々たるものというか、無駄が生じるというだけで動作に影響を与えるわけではありません。
(スラッシュは他の要素と揃っていない場合影響が出ることも)
なので猛省する必要はありません(笑)

より重大なのは何かしらのファイルを重複させたり記すべき位置を間違えることです。
これで直りましたので要点をしっかりメモして同じ轍を踏まないことです。
苦労すればした分だけ理解もついてきますし忘れにくくなるはずです。たぶん(笑)

いずれにしろ修正できたようで安心しました。
お疲れ様でした

2018/07/09 (Mon) 01:21

きろろ  

To Akiraさん

お世話様でした(;▽;)
とりあえず、メモしましたが時代の流れについて行けない歳なのかなあ(・ω・`)

2018/07/09 (Mon) 23:49

hige  

なんとか乗換完了

念願のAkira氏の要約表示のテンプレにようやく乗換完了しました。
Akira氏に怒られそうな改造をブログタイトル辺りに施してしまってまして、どうか絶縁状が突きつけられませんように。
要約表示にしてみると、トップページや検索ページなど、記事一覧がすっきり見やすく表示されとても気に入ってます。
で、幾人からか好評の感触があります。
改造の後遺症で、個別記事でもブログタイトルの背景画が、私の指定する特定の画像に固定されてしまいましたが、記事によってはかなり小さい画像のこともあるので、解像度の悪い画像が大写しになるよりこの方がかえって良かったと思ってます。

CSSのrootに、まるで変数の指定箇所

:root {
/* 注)各種カラー指定 */
--base-bg-color: white;/* 全体背景色 */

なんてのがあり、びっくりしました。HTMLでは変数は使用出来ないと聞いていたので、へぇ~っ と。
試しに幾つか自分なりに追加してみるとそれも旨く機能してます。これは便利ですねぇ。

あと、自前のFont Awesomeが表示されなくて四苦八苦しました。
で、
<script>window.FontAwesomeConfig={searchPseudoElements:true}</script>
の一文がHTMLに入ってなかったのでこれを追加してみました。
ところが、疑似要素の
.extlink::after {
display: none;
font-family: "Font Awesome 5 Solid";
content: "\f35d";
}
は表示されないのです。
結局何かの拍子に、ユニコード中の \ をキーボードの¥ではなくバックスラッシュキーで入力し直すと旨くいきます。
何かの加減でバックスラッシュでないのが入力されてたのかも。全角の¥を半角変換してバックスラッシュでない方になってたのかもと、思ってます。

過去記事の要約表示のリストを見ながらご満悦です。
無理矢理やっつけたのでまずいところが出てくるのかもと。

ともあれ
感謝のご報告を。


2018/07/11 (Wed) 14:52
vanillaice (Akira)

Akira  

To higeさん

higeさん、こんばんは (●'0'●)/

カスタマイズお疲れ様でした。
winのバックスラッシュは円記号になりますがmacはバックスラッシュなんですよね。
winはバックスラッシュを表示上円にしていて実際にはバックスラッシュというなんか変なシステムですよね (´・ω・`)
winってたぶんsift-JISのバックスラッシュ文字コードが無いんだと思います。
今回の原因ははっきりとはわかりませんが、winは円とバックスラッシュで問題を起こすことが多々あります。

---------
CSS variablesはずっと使いたかったんですが、IEを切らないことにはどうしようもなかったんですよね。
最近の2つのテンプレートはIE非対応にしたのでようやく使えるようになりました(笑)

2018/07/11 (Wed) 23:18

ぼっちん  

お助け下さい

いつもお世話になっております ^^

今までテンプレートを Axis にてブログライフを楽しませて戴いておりましたが、脱jQueryに於いて素晴らしい構成のこの「La_Vita」にて私もjQueryからの脱出を図るべく、いまいろいろと苦戦しております。(GTmetrixやPSI等のスコアアップ作業はまだ手を付けずです(笑))

さて、この「La_Vita」で超軽量画像拡大スクリプト「Luminous」を導入しようとしましたら、なんと拡大した画像が記事の下(裏側)に潜り込んでしまうことが起きました (^^ゞポリポリ

もしかして「La_Vita」にちょこっと施してあるカスタマイズをヘマしたことが原因?と疑って、まったく手を付けてないデフォルト La_Vita に Luminous を組み込んでも同じ現象が起きました。
今まで利用させて戴いておりました Axis では全く問題なく正常に拡大画像が表示されるのですが、、、。

とりあえず状況を見て戴けるように、テスト用画像を https://oops0011.blog.fc2.com/blog-entry-244.html の記事ページの一番下に貼り付けてありますのでご確認戴けたら嬉しいです。

■ 追記させて戴きます。

同テスト用画像をクリックした時に、アクセス解析に「代替テキスト」と記録されますが、これ何処から現れる文言なんでしょうか? だいぶ不思議です (^^ゞポリポリ

どうぞ、よろしくお願い致します m(_ _)m

2018/07/15 (Sun) 08:48

Akira  

To ぼっちんさん

ぼっちんさん、こんにちは ('0')/

今出先なので症状の確認だけしました。
原因はパララックスのz軸指定です。
translate3dのz軸とz- indexは関わりがあるというか結局は同じです。

帰宅次第対処法など追記しますね。
よろしくお願いします ( ゚Д゚)ノ

---- 追記
.lum-lightbox {
z-index: 4000;
}


これでいけると思いますので一度お試しください。
で、代替テキストの方ですが、画像をクリックするとアクセスとしてワンカウントされるってことなんでしょうか。
私アクセス解析使わないのでよく知らないんです (´・ω・`)
alt属性を拾ってるんだろうとは思いますが、ぼっちんさんはaltをちゃんと書いてますよね。
ちょっとよくわからないです。ごめんなさい (*_ _)
aタグのhrefで開いてるのでそうなるのかもしれないですね。

-----
GTmetrixのスコアですが、単純なことを言ってしまえばトップページのサムネイル表示を
<img src="<%topentry_image_url>">
から
<%topentry_image_w300>
に変更すればすぐ上がりますよ。
結局は「画像の実寸と表示寸の違い」を指摘しているのでここを変えない限りスコアは上がらないと思います。
Axisの場合トップページ最初の1ページ目(index_area)に限ってはCSSの方で画像を差し込んでいましたので600〜800pxなど小さめの画像にできていたかと思いますが、La_Vitaの場合は記事に掲載したサムネイル対象画像の実寸に依存しますのでぼっちんさんの場合は全て1200px以上ということになります。

GTmetrixのGoogleモジュールの結果と、GoogleのSpeed Insightsの結果も違います。
例えば私の今利用しているテンプレートはトップページのGT結果がCからDスコアですが、Speed InsightsだとAの94〜99です。
Speed〜の方はGTのモジュールよりもっとテクニカルな部分(レンダリングパスやラウンドトリップなど)に重点を置いているのでそうなります。
いずれにしろ変数を変更するだけでGTもSpeedもすぐスコア上がります(笑)
それなりのことをすれば99取れると思います。
ただしlazylodingできなくなるので体感速度は落ちると思います。
ここなんですよね。結局は。
スコア上がったけどなんか遅くなった気がする… みたいなの (´・ω・`)

個別記事はまた状況が違いますので高得点取れてるはずです。
サムネイル画像をアイキャッチで指定している場合はなおさら。
ぼっちさんの場合98〜99が平均じゃないですかね。

2018/07/15 (Sun) 12:12

ぼっちん  

ありがとうございました

早速に対処方法をご教示くださってありがとうございました ^^
CSS欄末尾に追加しましたところキッチリと正常表示されました、どうもありがとうございます m(_ _)m
これでまた一歩脱jQueryが捗りました(笑)

GTmetrixやPSI等のスコアアップの件では、何やらGoogleって「画像処理に拘りすぎ!」って感じでだいぶ閉口しますよね (^^ゞポリポリ
もうその辺りは「Googleはそういう傾向だから」ってことであまりムキにならないことにしました(笑)
いろいろと試した結果、他にもスコアアップ方法は「幾らでもあるから(笑)」って余裕も出来ましたし(爆)
これからは「スコアより実速度アップ」を目指そうかと (≧ω≦。)プププ

> alt属性を拾ってるんだろうとは思いますが、ぼっちんさんはaltをちゃんと書いてますよね。

そうなんです、最初「代替テキスト」の文字列に気がついた時にalt書き間違えた?と確認したんですけど、ちゃんと書いてありまして、、、(^^ゞポリポリ

> aタグのhrefで開いてるのでそうなるのかもしれないですね。

他の画像のものはキチンとalt設定通りにアクセス解析にも記録されるんですけど、やっぱりその辺りに原因がありそうですねぇ、解析ツールとの兼ね合いもありそうですから、ちょっと追究してみます ^^

いろいろとご教示をありがとうございました m(_ _)m

2018/07/15 (Sun) 14:27
vanillaice (Akira)

Akira  

To ぼっちんさん(完了のご報告)

修正できているのを確認しました。お疲れ様です

FC2ブログへの要望「サムネイル用変数の見直し」が通れば容易に改善できる問題なんですけどね。
マジで通らないかしら。切実に (´・ω・`)

アクセス解析の方、お役に立てずごめんなさいね ( ̄∀ ̄;)

2018/07/15 (Sun) 17:06

ぼっちん  

増えないですねぇ

Akiraちゃん、おはようございます ^^
昨日はご指導をありがとうございました、ほんとに助かりました m(_ _)m

FC2ブログへの要望「サムネイル用変数の見直し」が通れば容易に改善できる問題なんですけどね。
マジで通らないかしら。切実に (´・ω・`)

Akiraちゃんのテンプレートクリエイターとしての切なるこのリクエストなのに支援が全く増えてなくて、私もちょっと「Akira先生の素晴らしきレスポンシブテンプレートを利用中のユーザーさんみんなで支援してねぇ!」っとヤキモキしちゃってます (^_^; アハハ…
その結果、Akiraちゃんのより素晴らしく進化したレスポンシブテンプレートをタダで利用出来るようになるんですから、支援ポチしないんじゃ罪悪だってば! 言い過ぎ? (≧ω≦。)プププ

このコメントを読まれている皆さん、是非に
https://request.fc2.com/ja/request/9473
このFC2リクエストを「賛成」にポチっと参加して下さいね~ よろしくお願い致します~♪ ^^

アクセス解析の方、お役に立てずごめんなさいね ( ̄∀ ̄;)
いえいえ、全然気になさらないで下さいね~。

2018/07/16 (Mon) 09:30
vanillaice (Akira)

Akira  

To ぼっちんさん

こんにちは (●'0'●)/

変数を一般ユーザーさんが扱うことは稀なので、リクエストを見たところで「???」という感じだと思います(笑)
ただ可能性はあると思うんですよね。
Googleの動向やweb一般の流れを見ていればそれが「必要かもしれない」という予測は立つわけだから。
賛成票が少なくても運営側に意図が伝わればきっと可能性はある… と思いたい!(笑)

2018/07/16 (Mon) 14:49

ぼっちん  

確認をお願いします

毎度お世話になっております ^^

実はいま「La_Vita」のAkiraちゃんスクリプト(笑)
https://blog-imgs-50.fc2.com/tpljs/v/a/n/vanillaice000/pc/La_Vita/201806294edcfbe.js
が存在せず404エラーが起きております。

ご確認くださいまし~ (^^ゞポリポリ

2018/07/30 (Mon) 14:31
vanillaice (Akira)

Akira  

To ぼっちんさん

ぼっちんさん、こんにちは (●'0'●)/

その tpljs の文字列を持つファイルなんですが、これは一時ファイルというか格納されているファイルのコピーみたいな感じです。つまりキャッシュファイルというか。
以前はこの形式で配布されていたように思いますが現在は原本のままDLできるようになっていると思うんですよね。
ところが稀にこのtpljsを引っ張ってくることがまだあるみたいです。
なんでかはわかんない (´・ω・`)
テンプレ編集中のページを右クリックソース開示するとcssファイルなどは一時ファイルになってます。
それと同じです。

公式ページから正常なファイルをDLできることを確認しましたので、申し訳ないのですが再DLをお願いしますー ( ̄∀ ̄;)
というのはファイル名が失せているので何に関するファイルなのか私にもわからないんです。
ぼっちんさんがおわかりになればそのファイルアドレスをここで記して書き換えて頂くだけで済みます。
症状が続くようなら運営に報告しようと思います。ご面倒おかけします。

-------
ごめんなさい。フツーに開けたし((((笑)
開けるってことは動作してると思うんだけどどうなんだろ (´・ェ・`)
いずれにしろこのアドレスに差し替えをお願いします。正規ファイルです。 ↓

https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/rellax_moveTo.js

2018/07/30 (Mon) 15:09

ぼっちん  

ありがとうございます

超特急なお返事をありがとうございました ^^

正規ファイルに差し替えをさせて戴いて、キチンと動作することが確認出来ました。
なにやらサーバーが変ですねぇ、この症状が発生すると、スムーススクロールがスルスル~じゃなくて、シュパッと遷移しちゃうし (^_^; アハハ…
昨日から様子を見てたんですけど、時々そんな症状が出たり復活したり(笑)

まぁ、正規ファイル戴きましたからもう私の分は再発しないでしょうけど(爆)

ほんとに早急なご対応をありがとうございました m(_ _)m

2018/07/30 (Mon) 15:44
vanillaice (Akira)

Akira  

To ぼっちんさん

確かにちょっと嫌な感じですよね (´・ω・`)
前はBehaviorのJSファイルが完全に消失してましたし。
困るっつーの ( ̄∀ ̄;)

2018/07/30 (Mon) 15:48

hige  

スマホの横位置で

Androidのスマホで横位置にすると、ページスクロール:ページトップに移動するアイコンが画面上部に隠れてしまいます。
@media screen and (max-width: 768px) {
#page-scroll {
bottom: 50px;/* org 220px; */
}
}
とやって逃げましたが、このPC表示の場合より大きな幅を取っておられるのは何か意図がおありなんでしょうねぇ。
もしかして、FC2の広告ですかねぇ。

2018/08/12 (Sun) 17:00
vanillaice (Akira)

Akira  

To higeさん

higeさん、こんばんは (o'ω')ノ

「横位置」というのはランドスケープ, 横倒しのことですよね。
おっしゃる通り広告を考慮しています。
公式テンプレートで有料アカウントを基準にするわけにいかないのと、スマホランドスケープモードは小さめタブレットの通常モードとサイズが被る機種もありますのでブレイクポイントとして切り替えるわけにもいかないんです。
なので有料アカウントの方は自主的にカスタマイズして頂けると助かります。

2018/08/12 (Sun) 18:43

hige  

横倒しの時の

やっぱりそうなんですか。
他の方のブログで確認してみました。
画像を大きくして見たい場合、スマホを横倒しでみる時があります。
こんなに広告の専有面積が大きくては、困ったものですね。
写真が中心のブログの方もおられるので、
せめて横倒しで見る時には広告は左右のいずれかに移動してほしいものですが、そんなのは無理なのかな。
まぁ、写真中心のブログの方はスマホなんぞどうでも良いのかも知れませんが。

2018/08/12 (Sun) 20:18
vanillaice (Akira)

Akira  

To higeさん

> せめて横倒しで見る時には広告は左右のいずれかに移動してほしいものですが、そんなのは無理なのかな。〜

テンプレ製作者側で、という意味ならば不可能です。
広告を操作したらアカウント抹消されてしまいます(笑)

better ads standardsは「縦30%を超過してはいけない」という決まりですが、現状のランドスケープではめっちゃ超過します。
これがランドスケープにも適用されるかどうかですよね。されるのであれば広告配信側で適切な切り替えが必要だと思います。
いずれにしても日本でローンチされるまで対応は無いと思いますので早く日本でも始まってほしいな (´・ω・`)

2018/08/12 (Sun) 23:24

-  

管理人のみ閲覧できます

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

2018/11/15 (Thu) 12:24
vanillaice (Akira)

Akira  

To La_Vitaヘッダー画像の件 内緒さん

こんにちは ('0')/

<!-- パララックス -->
から
<!-- パララックスここまで -->
に挟まれている内容を一旦削除、以下の内容と差し替えてください。

<div class="rellax" data-rellax-speed="2" style="background-image: url(ここに画像アドレス);"></div>

上記内容を貼り付けする際、作業をブラウザ上(テンプレート管理画面)で行う場合にはインデントは付けずに、
<!-- パララックス--> の末尾で一度改行したらそのままペーストするようにしてくださいね。
よろしくお願いします。

2018/11/16 (Fri) 10:19