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

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

名称
Lilting
りるてぃんぐ
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 疑似メイソンリー
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.20
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.22
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ユーザビリティの最適化
  • メイソンリーの仕様を若干変更しました
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • グリッドアイテムを全体リンクに変更
  • コメント削除アラート追加
  • その他UI調整

カラム入れ替えや記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

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

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("posted-prev-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("posted-next-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("posted-prev-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("posted-next-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

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

更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.11.24
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

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

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

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

①について

<li class="comment-btn-list"> で検索するとhtml内に4箇所あります。2つ目の

<li class="comment-btn-list"><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん"><svg class="svg-stroke-inline svg-inline-reply" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a>

を以下の通り 変更

<li class="comment-btn-list"><!--comment_author--><!-- <!--/comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん"><svg class="svg-stroke-inline svg-inline-reply" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%author_name>さん"><svg class="svg-stroke-inline svg-inline-reply" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author-->
②について

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

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

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

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

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

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

続いて #comment_form { で検索するとスタイルシート内に1箇所ありますので text-decoration: none; の直下に padding-top: var(--navi-height);追加

③について

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

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

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

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

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

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてすぐ下にある #inner-contents {line-height: 1.9; の直下に margin: 20px 0;追加

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

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

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

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

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

サンプル

Samples

TOP 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

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

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

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

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

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

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

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

ご利用の前に

Important notice.

本テンプレートはメイソンリーレイアウトなので 時系列が重要になるブログでの利用には向きません ので事前にしっかりと検討を行ってください。

メイソンリーはレンガ状の配列を重視しますので、都合の良い形に並び替えを行います。そのため、並びの両サイドが時系列の前後と一致するとは限りません。

また、ハイパフォーマンスを維持するために、オリジナル画像の縦横比を踏襲しない方式でメイソンリーを実現しています。オリジナル画像の縦横比をそのまま活用したい場合は以下のテンプレートが適しています。

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

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

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

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事フッターの管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

ぼっちん
2018/12/10 (Mon) 12:16

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

Akiraさん、こんにちは ^^

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

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

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

vanillaice (Akira)
Akira
2018/12/10 (Mon) 15:55

To ぼっちんさん

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

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

ぼっちん
2018/12/10 (Mon) 16:26

そうでした

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

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

To ぼっちんさん

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

-
2018/12/13 (Thu) 18:02

管理人のみ閲覧できます

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

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

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

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

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

-
2018/12/13 (Thu) 20:20

管理人のみ閲覧できます

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

-
2018/12/13 (Thu) 20:22

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/13 (Thu) 21:12

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

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

-
2018/12/18 (Tue) 20:26

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/18 (Tue) 21:19

To Lilting IEの件 内緒さん

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

> 日本の中小企業のパソコンがIEが多い〜

これはよく耳にするんですが、「仕事中にネットすなや」って話です(笑)
職場の流れで個人的にも〜という言い訳はかなり苦しいと思いますよ。仕事だけするならアレですが、それこそ個人的にサーフィンするのにIEを使う理由が無いですよね。
OS単位で「会社がWindowsだから個人のパソコンもMac買わずにWindows」なら理解できます。

> しかしやめない人はやめないのでどうしましょう〜

セキュリティサポートが切れるのは2020年です。
彼らは実際に行き詰まらないと何も行動しないですよ。「見られなくなったら変える」それは誰でもそうです(笑)
「そろそろ見られなくなりますよ」--- まだ変えない, 何もしない
「もう見られなくなりました」--- 慌てて代替手段を探す(今頃?)
こんな感じでしょうか (´・ω・`)

ホントに記事を読みたい人は変えてくれますよ。だってブラザダウンロードするだけで済むのですから ^^;
Microsoft自体が「もうIE使うの辞めてお願い…」と必至で頼んでいるような状況なので個人でサポートする義理があるとは思えない(笑)
いずれにしろ内緒さんの采配でお願いします。

今年もお世話になりました(* ¨̮*)/♡
2018/12/27 (Thu) 05:48

きろろ

今年もお世話になりました。
薬のアナフィラキシーで現在病院におります( ̄^ ̄)ゞ
退院したら、また遊びにきます。
良いお年をお迎えくださいませ、AKiraさんm(__)m

vanillaice (Akira)
Akira
2018/12/27 (Thu) 14:51

To 今年もお世話になりました(* ¨̮*)/♡さん

きろろさん、こんにちは (●'0'●)/

ご丁寧にありがとうございます。こちこそお世話になりました。
って、アナフィラキシーだなんて大変じゃないですか ( ̄∀ ̄;)
お大事になさってくださいね。
きろろさんもどうぞ良いお年を :)

ハルトモ
2019/07/30 (Tue) 18:20

投稿の画像差し替えについて

こんにちはお世話になります。ハルトモです。私が使わせて頂いているlilyingテンプレートの質問はここで良いのでしょうか? 多分そうだとしてご質問させていただきます。

画像付きの記事を投稿をしてから、画像を差し替えたいというケースが私の場合しばしばあります。それで記事管理から画像を差し替えるのですが、その場合にブログのトップ画面の最新記事紹介の画像は差し替えても古いままです。また各記事のトップの画像も古いままになります。今は一旦記事を消去してから再投稿したりしていますが、コメントがついたりすると消去もしずらく難儀しております。投稿後に画像を差し替える方法はなにかあるのでしょうか? もし仕様でそういうものだということであればそれでいいのですが、何か上手い方法があればご教授お願いしたく質問いたしました。お忙しいところ初心者がお手を煩わせ恐縮です。お時間があるときにでもお返事いただけると助かります。以上よろしくお願い申し上げます。

vanillaice (Akira)
Akira
2019/07/30 (Tue) 20:13

To ハルトモさん

ハルトモさん、こんばんは ('0')/

はい。こちらで合ってます。ご協力ありがとうございます。
差し替えた画像がトップページサムネイルに反映されない件については以下の記事をご参照ください。

記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】
https://vanillaice000.blog.fc2.com/blog-entry-625.html

よろしくお願いします。

ハルトモ
2019/07/30 (Tue) 22:04

To Akiraさん

ありがとうございます! 解決しました。トップ画面であまりおしゃれでない画像が並ぶのは嫌だなと思っていたのですが、これでバッチリです。本当にありがとうございます。

vanillaice (Akira)
Akira
2019/07/30 (Tue) 22:40

To ハルトモさん(完了のご報告)

FC2ブログは機能の変更を細かく広報してくれないので困る時がありますね。
お疲れ様でした :)

ハルトモ
2019/09/03 (Tue) 17:01

コメントにプロフィール画像を表示したい

お久しぶりです。いろいろ調べているのですがわかりません。自分のブログにコメントをいただいて返信するときに自分のプロフィール画像を載せたいのです。

https://harutomo.fc2.net/blog-entry-3201.html

のように載った時もあるのですが、その後はどうやっても載りません。返信はマックのPCです。ログオンしている状態でも表示されません。
コメント欄については、テンプレートをいじってleave replyを日本語で、コメント投稿、変更はしました。触ったのはそれだけだと思います。

恐縮ですがご教示いただくと助かります。

vanillaice (Akira)
Akira
2019/09/03 (Tue) 17:30

To ハルトモさん

ごめんなさい。返信しましたが一旦削除しました。既に読まれた後でしたら作業を一旦中止し、以降の内容を最優先で確認してくださいね。

個人設定の中に
https://admin.blog.fc2.com/control.php?mode=setting&process=2#res

コメンテーターのクッキーに関する設定がありますので、その項目が「記憶する」になっているのを確認してテストコメントを投稿し、プロフィール画像表示の有無を確認。
恐らく「記憶しない」になっていると思います。

クッキーを記憶させていない場合「名前」「URL」を毎回入力しなければいけません。今そうなってますでしょうか。記憶されていればこの2項目の再入力の手間は生じていない(既に記載されている)はずです。これは管理者・閲覧者ともに同じです。
ログイン状態の確認もクッキーの手助けが必要なので、この個人設定が原因であることが濃厚です。
設定が「記憶しない」になっていた場合には「記憶する」に切り替えた後コメントのテストが二度必要です。一度目が初回投稿、二度目は一度目の投稿で記憶されたクッキー情報を引き継いでの投稿です。

ハルトモ
2019/09/03 (Tue) 19:03

To Akiraさん

ご返信ありがとうございます。ご指摘の件確認しました。記憶するになっておりました。念の為一旦記憶しないで更新して再度記憶するで更新してコメントしてみましたが、やはり状況は改善いたしません。

ハルトモ
2019/09/03 (Tue) 19:07

To ハルトモさん

なおFC2管理画面から返信しても、またブログ記事からコメントしても、ハルトモという名前は出てきますが、WEBアドレスなどは表示されません。

vanillaice (Akira)
Akira
2019/09/03 (Tue) 19:14

To ハルトモさん

うーん。こちらから予測すると「記憶しない」になってるはずなんですよね。何故ならハルトモさんのブログへお邪魔してコメント欄を拝見しても私のクッキー情報がありません。

①ハルトモさんのページ
https://file.blog.fc2.com/vanillaice000/cap5/capharutomosan----1000.png

②他の方のページ
https://file.blog.fc2.com/vanillaice000/cap5/capbocchinsan----1000.png

通常は②のような状態になってなければいけないんですね。例え初めての訪問であったり、この方に一度もコメントをしたことが無くても、です。
お手数ですが個人設定のスクリーンショットを見せてもらえませんでしょうか。
あと「更新」のボタンはちゃんと押されてますよね。念の為の確認ですが。
ここを確認してそれでもやはりダメということですと、最初に書いた内容をお試し頂くことになります。その前に再度検証したいと思います。

vanillaice (Akira)
Akira
2019/09/03 (Tue) 19:18

To ハルトモさん

お返事が前後しましたので

> なおFC2管理画面から返信しても、またブログ記事からコメントしても、ハルトモという名前は出てきますが、WEBアドレスなどは表示されません。〜

この件について。クッキーというのは「一度記載した内容を保存する」というものです。ですから初期状態では何も記載されません。
能動的に「名前」「サイトアドレス」を入力してテストコメント、これが一度目の作業です。
二度目の作業時に「名前」「サイトアドレス」が投稿前に記載されているかどうかを確認します。
クッキーが正しく保存されていれば二度目の作業時に事前入力が確認できるはずです。この時点でまず「クッキーの保存の有無」が確認できます。
この後二度目のテストコメントを送信し、この作業で「プロフィール画像表示の有無」の確認ができます。

今回の検証では管理画面からの返信を使わないようにしてください。ご自身のブログから直接コメントをしてくださいね。でないと検証にならない ^^;


* 外出しますのでお返事遅れるかもしれません。ごめんなさいね。

ハルトモ
2019/09/03 (Tue) 19:56

To Akiraさん

AKIRAさん、返信ありがとうございます。名前もサイト名と入力してコメントしました。サイト名も名前も保存されます。したがってクッキーは保存されているようです。しかしながらプロフィールの画像は表示されません。ためしにAKIRAさんのpinboardにテンプレートを変更したら同じくプロフィール画像は表示されませんでした。これはテンプレートの問題ではないような気もしてきました。

vanillaice (Akira)
Akira
2019/09/03 (Tue) 20:41

To ハルトモさん

出先からです。

ハルトモさん、ドメインの変更をされてませんか。以前は.comだったはずですが、今.netですよね。
もしかしたらFC2の独自変数が.netに対応できていないのかもしれません。

帰宅次第できる範囲で調べてみます。しばしお待ちください。

vanillaice (Akira)
Akira
2019/09/03 (Tue) 21:48

To ハルトモさん

訪問履歴からランダムに.netドメインの方のブログコメント欄を拝見してみて、いまのところ言えるのは「.comと.netに互換性が無い」という点です。
互換性というか、どの言葉を使うのが適切なのか迷いますが、ともかく.comドメイン同士はクッキー情報が正常に渡されているけれども、.comと.netではそれが機能していない、そして.net同士は不明。

ちょっと検証結果とするにはサンプルが少ないです。.netドメインは旧Yahoo!ブロガーさんに多いと思うんですが、Y!ブロガーさんはIE利用率が高いため私のテンプレートを選ぶ人自体かなり少ないはず(笑)
確認できたものでも「管理人プロフィール表示」に対応しているテンプレートが無かったため、管理人判定変数が効いているのかどうかは不明。ただハルトモさんの現状を考えると「効いていない(判定されていない)」のではないかと推測します。

今ハルトモさんの最新記事にコメントしました。.netドメインへは初コメントです。
承認されないと削除できませんので、差し支えなければハルトモさんの方で削除をお願いします。

で、ハルトモさんのページでは私のクッキーが有効になりました。ですが他の.netドメインの方のコメント欄では無効。つまりコメントを行った人のページでしか有効にならないようです。

-----
で、このクッキーなんですが、FC2ブログ運営が自動的に blog_res.js というスクリプトファイルを適用することで操作しています。この内容が.netドメイン上では問題があるようです。あるいはそういう仕様とするつもりかもしれませんが、既存の.comドメインのクッキーとは明らかに異なる仕様ということになりますね。それじゃ困るんだけど(笑)

管理人コメント変数が効いているかいないかは今の所私では判断できません。何故なら.netの管理者ではないからです。
ハルトモさんの場合は過去に.comドメインだったはずで、途中から切り替えをされているはずです。それが原因で「管理人とみなされていない(.comの方で管理人と判定され続けている)」のか「.netドメイン自体が独自変数適用外になってしまっている」のか判断ができないという意味です。

というわけなんで、今できるのはFC2ブログ運営に直接問い合わせをすることです。
.net管理者が実際のページURLを提示して尋ねるのが一番良いと思いますので

・過去に.comドメインだった時には管理人コメント変数<!--comment_author-->と<!--/comment_author-->が効いていたが、.netに変更したら無効化された
・.netのブログでクッキーが有効にならない
・テンプレートカスタマイズに関する問い合わせではなくシステム不具合ではないかと考えている(これをはっきり書かないとずさんな返信「カスタマイズの相談は承りません」という内容の返信でサポート放棄されることがあります)

この3点を明記して問い合わせされると良いと思います。私の方からも問い合わせしてみます。
返事が届きましたら返信概要を教えて下さいね。

結論として
・.netドメインで変数及びクッキーが効かない
・.comの時のコメントと.netのコメントが混在しているから(旧.comドメインが管理人として紐付いているから)
のどちらかではないかと思います。
ブログ開設当初から.netドメインで、管理人プロフィールが「表示されている」という方から情報がもらえれば確定できるのですが。ちょっと今後も継続してサンプルを探してみますね。
よろしくお願いします。

---- 追記

後者のようです。site:fc2.net検索で調べました。開設当初からドメインが一貫している場合は.netでも管理人アイコンが表示されています。なのでドメインを変更したことによるハルトモさんの独自環境が原因だと思います。
いずれにしろサーバーサイドの処理は手の出しようがありませんので問い合わせをお願いします。
その前に最初に私が投稿した内容をコピペしますね。

Akira
2019/09/03 (Tue) 22:19

To ハルトモさん

以下初回コメントのコピペ

こんにちは。

ハルトモさんはドメインを何度か変更されてませんでしょうか。
.com → .jp → .net など
ログイン状態が確定しているのにプロフィール画像が出ないということはドメインを疑うしかありません。

過去のドメインがFC2の独自変数<!--comment_author-->と<!--/comment_author-->に紐付いてしまっているのが原因ではないかと思います。これはユーザー側では操作できませんので、以下の手順をお試し頂いて改善が無ければお問い合わせフォームから運営に問い合わせをお願いします。


ブラウザのクッキー情報をクリアする。Chromeならば以下のページを参照。
https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DAndroid&hl=ja&oco=0


自身のブログのナビゲーション内にある「管理画面」のリンクをクリック

管理画面が開けばログインしています/ ログイン画面が開けば非ログイン状態ですからログインしてください


管理画面から一旦「ログアウト」し、再度「ログイン」を行ってテストコメントを投稿してプロフィール画像表示の有無を確認

①〜③の操作を実行し、結果をお知らせくださいね。
また、FC2はコメント用のクッキー情報を保存するJSが自動適用されます(サーバーサイドの処理)ので、テンプレートの再DLで解決する可能性もあります。その場合は既存のLiltingテンプレートの名称を「Lilting1」などに変更した上で公式配付ページからLiltingをダウンロードしてください。そして新しい方を設定状態にしてテストコメントを投稿して確認。

よろしくお願いします。

*本コメントはスマホからログアウト状態で行ったのでプロフアイコンが表示されていません。混乱されるといけませんので念のためお伝えしておきます(笑)

ハルトモ
2019/09/03 (Tue) 23:12

現れました

AKIRAさん、お手数かけます。自分のブログでは画像が現れました。一旦fc2からログアウトして、さらにsafariで履歴を消去したら現れました。ただここでは出ないようです。とにかく一歩前進した気はします。いろいろとありがとうございます。
https://harutomo.fc2.net/?no=3224#comment

vanillaice (Akira)
Akira
2019/09/03 (Tue) 23:41

To ハルトモさん(完了のご報告)

こんばんは。

> ただここでは出ないようです。〜

ここでは出ません。ここの管理人はワタクシなので出るのは私だけです(笑)
FC2ブログは他ブログサービスのように「全ユーザーのプロフアイコンを表示」という仕様ではなく、今のところできるのは「管理人のみ」です。
(CSSを利用して他者アイコンを表示させることは可能です, 面倒だし非効率的ですが)

ログイン&アウトで解決したんですね。難しく考えることなく初回コメントのまま残しておけば良かった ^^;
いずれにしろ解決したということで、お疲れ様でした :)

* ハルトモさんのページで送信したテストコメントは削除しておきました。
あと、全体クッキーが機能しない点については.jpとかも同じでした ^^;

ハルトモ
2019/09/04 (Wed) 06:54

完了の確認

Akiraさん、本当にお忙しいところありがとうございました。テンプレートの問題ではなかったにも関わらず親身になっていただき本当に本当に感謝の念に堪えません。今後ともよろしくお願いしますでは冗談にもなりませんが、、とにかくありがとうございました。

vanillaice (Akira)
Akira
2019/09/05 (Thu) 21:24

To ハルトモさん(終了のご報告)

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

改善されてなによりです。お疲れ様でした :)

Nami
2021/08/11 (Wed) 13:55

グローバルナビゲーションについて質問です

Akiraさんのデザインが大好きで、いくつも使わせていただいています!
ありがとうございます。
最近 Liltingを使い始めたのですが、質問させてください!

Liltingのグローバルナビゲーションにも「カテゴリー」を追加できますか?
もし可能でしたら教えていただけると助かります。m(_ _)m

先日までテンプレートFrancescaを使っていたのですが、
カテゴリーがとても便利だったのでよろしくお願いいたします!

vanillaice (Akira)
vanillaice (Akira)
2021/08/13 (Fri) 15:35

To Namiさん

お返事遅くなりました (*_ _)

グローバルナビゲーション内にカテゴリへのリンクを羅列する、というのは無理がありますので、以下の方法をおすすめします。

参考記事: ナビゲーションにメールフォームを追加する方法
https://vanillaice000.blog.fc2.com/blog-entry-537.html

htmlの内容、.modal-wrapの中身をメールフォームからカテゴリリストに変更します。以下の通り。

<div class="modal-wrap">
<!--category-->
<div &align>
<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->
<!--category_sub_end-->┗<!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
</div>
<!--/category-->
</div>

あとは手順に従って導入してください。よろしくお願いします :)

Nami
2021/08/13 (Fri) 16:52

To Akiraさん

お忙しいところお返事いただきありがとうございます!m(_ _)m

カテゴリー追加できたのですが、ナビゲーションのsearchを押しても
Categoryになってしまいました(^^;;
すみません、せっかく教えていただいたのに!
もう一度よく読んでやってみます。

vanillaice (Akira)
vanillaice (Akira)
2021/08/14 (Sat) 01:45

To Namiさん ②

こんばんは ('0')/
修正すべき点がいくつかありますので、注意深く作業してください。あと私がいい加減な内容を書いてしまいましたので、そこも修正をお願いします。ごめんなさい (*_ _)

------ 【全角スペースの混入削除】
<label for="modal-trigger" id="modal-trigger-label">SEARCH</label>
の </label>の直後に 全角スペース が利用されていますので削除します。html内で全角スペースの使用は絶対にしてはいけないルールなので注意してください。
(参考記事はお時間のある時にでもお読みくださいね)

また、1つ目の
<!-- FC2カウンター ここまで -->
の下の行にも全角スペースが3つ含まれていますので削除。カウンターが表示されていないですよね。恐らく表示されないために重複して記載してしまったのかなぁ、と思います。全角スペースを削除した上で重複させずに記載してください。

参考記事: ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ
https://vanillaice000.blog.fc2.com/blog-entry-647.html

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

----- 【余分なテキストの削除】
もしかするとhtmlをマウスドラッグでコピーされたのかもしれません。右上に「copy」ボタンがありますのでそこをクリックしてくださいね(今行う必要はありません)

<script>
で検索して最初の1つ目の付近に
Markup
Copy
という2行が出てきますのでこれを削除。

----- 【id名の変更】
今回の「検索も反応してしまう」原因はid名の重複です。説明が足りませんでしたね。ごめんなさい。

<li><label for="modal-trigger" id="modal-trigger-label2"> CATEGORY</label>

こちらも CATEGORY の前に半角スペースがあるため若干右に寄ってしまいますので削除。</label>の直後の半角スペースも念の為削除。

何かを追加する際にはhtmlの見た目を整えるためのインデントは使用しなくてOKです。周りのhtmlを意識しすぎるとミスに繋がりますので、スペースや改行だけ気をつけてインデントは付けない、というのが一番安全です。

スペースを削除したら、modal-trigger を modal-trigger2 に変更。以下の通りです。
<li><label for="modal-trigger2" id="modal-trigger-label2">CATEGORY</label>

続きまして、</footer>の下に追加したhtmlを一旦削除し、以下の内容を改めてコピペ。

<input id="modal-trigger2" type="checkbox">
<div class="modal-overlay">
<div class="modal-wrap">
<label for="modal-trigger2">close</label>
<!--category-->
<div>
<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->
<!--category_sub_end-->┗<!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
</div>
<!--/category-->
</div>
</div>

先回のお返事で記したhtmlの中に &align というのがあるんですが、これは不要です。プラグインからコピペして削除し忘れました (*_ _)
いずれにしろ上記をそのままコピペしてください。

続きまして、スタイルシートに追加したCSSも一旦削除し、以下の内容を改めてコピペ
雛形内容がメールフォームなので不要なものが含まれますのでそちらも除去しています。そしてカテゴリ用のCSSを追加しています。
背景色もsearchのそれと揃え、画面内にリンクが収まらなかった際の処理(スクロールボックス)も追加しました。

/* category modal */
#modal-trigger-label2 {
display: inline-block;
color: white;
cursor: pointer;
position: relative;
z-index: 3;
}

.modal-overlay {
background: rgba(149,131,127,.95); /* 注)モーダル背景色 */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
text-align:center;
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transition: all .75s cubic-bezier(.65,-.55,.265,1.55); /* 注)cubic-bezier以降を削除するとイージングが多少変わります 1/2 */
transition: all .75s cubic-bezier(.65,-.55,.265,1.55); /* 注)cubic-bezier以降を削除するとイージングが多少変わります 2/2 */
z-index: -999;
}

.modal-wrap {
margin: 0 auto;
width: 100%;
height: 100%;
padding-top: 60px;
position: relative;
overflow-y: auto;
}

.modal-wrap > div {
margin: 10px 0;
}

.modal-wrap > div:last-of-type {
margin-bottom: 80px;
}

.modal-wrap a {
color: white;
}

/* 注)closeテキストの指定 */
.modal-wrap label {
display: block;
width: 100%;
height: 100%;
color: white;
cursor: pointer;
padding-top: 20px;
position: absolute;
top: 0;
left: 0;
font-size: 16px;
text-transform: uppercase; /* 注)closeテキスト大文字縛り解除はこの一行削除 */
}

#modal-trigger2 {
display: none;
}

#modal-trigger2:checked ~ .modal-overlay {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
z-index: 100005;
}

これでできるはずなのでお試しください。
別件ですが、楽天アフィリエイトのscriptがhttpなので混在コンテンツになっています。httpからhttpsに変更し、動かなければ改めて楽天側から新しいscriptを取得してくださいね。
よろしくお願いします。

Nami
2021/08/14 (Sat) 21:38

Akiraさんへ(3)

Akiraさん!とても丁寧な返信をありがとうございます(ToT)
大変、お時間とお手間をとってしまったことと思います!感謝いたします!
教えていただいた通り、注意深くひとつずつやってみたところ
おかげさまで、search項目、Category、表示されました!ありがとうございます!

私のhtml、cssの入力ミスでしょうか?!
私の使用しているブラウザ、mac Firefox, safari、ios Safariでは
Category別の表示はされたのですが項目をクリックしても結果に移動できないようです。
全角スペースを入れないという、基本的なことも出来てなくてすみませんでした!

もし、改善が可能な場合は、Akiraさんのお時間がある時に(いくらでも待ちます!)
お返事いただけたら嬉しいですm(_ _)m
大変な場合は、ページ下部のカテゴリー別を使用しますので!!

なんどもすみませんが、よろしくお願いいたします。m(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2021/08/14 (Sat) 21:59

To Namiさん ③

こんばんは ('0')/

.modal-wrap > div {
position: relative;
z-index: 3;
}

をスタイルシートの最後に追加してみてください。

-----
カウンターの全角スペース3つが削除修正されていません。プラグインの方へ記載したのであれば、編集を開いて削除してください。
そして楽天ウィジェットは「active mixed content」(脅威の高い混在コンテンツ)としてブラウザにブロックされて表示されていません。言い換えれば「あなたのサイトには危険なものが掲載されているから表示させません」という判断をブラウザが行っている、ということです。

上記2点は修正必須で最優先事項ですから必ず行ってくださいね。よろしくお願いします :)

----- 追記 同日
</fotter>の下に記載した追加内容を差し替える際に</div>をひとつ巻き込んで削除してしまったようです。

<script>
で検索し、一番最初に出てきたものの直前に </div> と追加してください。
こちらも修正必須です。

Nami
2021/08/15 (Sun) 16:11

ありがとうございました!

Akiraさん、こんにちは。早速のご回答ありがとうございます!
おかげさまでカテゴリー、動作するようになりました(ToT)
助かりました!
その他、プラグインの方の全角スペース、楽天など、削除もできました。
何度もお手数おかけしました。感謝いたします!

vanillaice (Akira)
vanillaice (Akira)
2021/08/15 (Sun) 16:29

To Namiさん(完了のご報告)

こんにちは ('0')/

修正を確認できました。こちらの不手際もありご面倒おかけしました。
お疲れ様でした :)

-
2021/09/02 (Thu) 20:46

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/09/03 (Fri) 14:24

To Liltingテンプレートの件 内緒さん

こんにちは ('0')/

まず確認ですが、デバイスは横375px以上でしょうか。
というのは、Liltingテンプレートはデバイス横幅374以下の場合は1列並びになるためです(狭い画面幅で2列表示は見づらいため)。まず閲覧デバイスの画面サイズを教えて下さい。不明な場合は機種名をお伝え頂ければ私の方で調べます。
(例: iphone SE など)

ただ、「サンプルのように、キレイに横2列に〜」とありますので、デモ画面では2列になっている、ということですよね。
私の環境下ではデバイス横幅375pxなのでlucaさんのトップページは2列で表示されています。
* iphone のchrome及びsafari及びfirefoxで確認, Android未所有
* 内緒投稿されているのでスクリーンショットの提示ができません。今後の展開次第でコメントの公開も視野に入れて頂けると助かります。

まずそこを確認したいのでお返事をお願いします。該当する場合は1列に変更するタイミング(break point)を変更します。該当しない場合、デフォルトでは存在しないJSエラーが出ていますので、それに起因する可能性があります。
まずはデバイスの確認をお願いします :)

-
2021/09/03 (Fri) 15:56

管理人のみ閲覧できます

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

-
2021/09/03 (Fri) 16:21

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/09/03 (Fri) 17:35

To Liltingの件内緒さん ②

サンプルの件
そうだったんですね。実際にデモ画面をモバイルで開いたわけではなく掲載イメージのみで判断した、ということですね。

2列にしたい場合はbreak point設定を変更するだけなので至って簡単な処理です。ただし画面が狭いため、以前と同じように「これで良い」と感じるかどうかはそれぞれなので、一度目視で確認をして決定してはどうでしょう。

#grid-container
で検索すると3箇所あります。2つ目が

@media screen and (min-width: 375px) {
#grid-container {
grid-template-columns: 1fr 1fr;
}
}

こういう内容のはずなので、

@media screen and (min-width: 1px) {
#grid-container {
grid-template-columns: 1fr 1fr;
}
}

に変更します。これで良ければそのまま終了で良いですし、良くないと思われましたら元の 375 に戻せばOKです。

-
2021/09/03 (Fri) 18:15

管理人のみ閲覧できます

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

-
2021/11/11 (Thu) 15:50

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/11/11 (Thu) 21:01

To masaさん

こんばんは ('0')/

確認ですが、
「第三者が」「内緒さんのブログに」コメントすることができない
のではなく、
「内緒さんが」「第三者のブログに」コメントすることができない
ということで合ってますでしょうか。その場合は相手方のテンプレート、あるいは設定の問題なので私ではどうしようもないです。ごめんなさい。

アラート内容が
「恐れ入りますが、もう一度やり直してください」
ということなので、サーバーエラー(システム, プログラムエラー)か、NGワードが含まれている可能性もあります。
いずれにしろ内緒さん側のテンプレートで解決できる問題ではないので、何もできない ^^;
お役に立てず申し訳ないです。

-
2021/11/12 (Fri) 06:16

管理人のみ閲覧できます

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

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)