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

Greetingsテンプレート

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

名称
Greetings
ぐりーてぃんぐず
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Caveat
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.14 2023.12.22
  • グローバルナビゲーションを固定できるようJSを分離

自身で修正される場合は

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/greetings.js" async></script>

上記赤字部位のURLを下記の通り変更

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/greetings_ver14.js" async></script>

続いて </body> の直前に以下のscript要素を追加。

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/peekaboo_navigation.js" async></script>
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.20
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.5
  • スクロール時のナビゲーションに関連するCSSの記述ミスを訂正
更新履歴 2023.8.19
  • 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.25
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

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

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

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

①について

<li><a class="btn-reply" を目印に以下の内容がhtml内に1箇所あります。

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

上記内容を以下の通り 変更

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

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

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

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

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

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

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

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

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

#comment_form {
  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 { で検索するとスタイルシート内に1箇所ありますので line-height: 1.9; の直下に margin: 20px 0;追加

続いてそのすぐ下にある #inner-contents > p:first-of-type のルールセットを 追加

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

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

更新履歴 2018.12.21
  • サイドメニュー部input要素のCSSを変更
  • Google Adsense用レイアウト調整CSS追加

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。adsenseをメインコンテンツ側に掲載される方は少し楽できるかと思いますので再DLをご検討ください(adsense掲載方法の指南は行いません)

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

海外ドラマは観まくっているのに日本のドラマは全く知らないAkiraでございま (´・ω・`)
いやマジで日本のドラマ全然全くわからん。俳優さんとかも ^^;

ぐりーてぃんぐす

サンプル

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設定「有効にする」

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Common customization.

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

AzTak
2018/09/16 (Sun) 16:42

画像を連続表示する際に少しだけ間をあけたいのです

初めまして。先日から、greetingsを使用させていただいています。

画像を連続表示する際に少しだけ間をあけたいのです。できれば、その画像の外枠を青線で囲みたいと思っています。
このテンプレートではどういう風に行えばよろしいのでしょうか?

vanillaice (Akira)
Akira
2018/09/17 (Mon) 01:05

To AzTakさん

ありがとうございます :)

各個別記事に掲載した画像の「下」に空白を設けたいという意味に捉えてよろしいでしょうか。
スタイルシート(テンプレート管理画面下段)の末尾に以下を追加。

#inner-contents img {
margin-bottom: 数値px;
border: 1px solid blue;
}

赤字の数値はご自身の希望の数値を入れてください。10〜20あたりが妥当かと思います。
AzTakさんの場合は記事下に「関連記事リスト」を「表示しない」設定にされていますので上記内容だけでOKですが、今後サムネイル画像付きで「表示する」設定に変更された場合にはその画像にも青い罫線がついてしまいますので、さらに以下の内容を追加してください。

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
border: 0;
}

------
ブログ個人設定で「OGP」を有効化されますと各記事のページ送りに前後記事のサムネイルが表示されるようになります(サンプルは当該記事本文に掲載しているリンク先(ARTICLE DEMO)でご覧頂けます)
設定画面
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

現在はOGPがOFF設定になっています。強制ではありませんのでご自身で決めてくださいね。
よろしくお願いします。

AzTak
2018/09/17 (Mon) 07:54

有難うございました

すべてうまくいきました。これで、私のブログをアクセスした人も喜んでくれるかと思います。
今後ますますの活躍を祈っています。

vanillaice (Akira)
Akira
2018/09/17 (Mon) 22:14

To AzTakさん

こんばんは。
ご希望に添えましたら幸いです。
励みになるお言葉もありがとうございます。
お疲れ様でした :)

AzTak
2018/09/18 (Tue) 16:37

もう一つご教授ください

中文字、小文字で複数行になる場合、行間を少し狭めたいと思います。
どういうふうに指定したらよいか、お教えください。

vanillaice (Akira)
Akira
2018/09/18 (Tue) 21:06

To AzTakさん

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

まず確認ですが、
使用する文字の大きさによって自動で行間調節を行うといったことはできませんので、AzTakさんが記事内で文字を大きくあるいは小さくする・しないに関わらず一定の行間を指定することになります。

記事行間指定

でCtrl+Fキー検索されますと対象箇所が出てきます。1.9 の数値をご希望のものに(小さい数値に)変更してください。
単位はつけません。1.6ならば文字の大きさの1.6「倍」という指定です。自身のフォントサイズの「何倍」という意味ですね。1.6〜1.7ぐらいが良いかもしれません。

------
文字の大きさに応じた行間設定は

<span style="font-size: 1.3em; line-height: 1.4;">通常よりも大きい文字、行間も狭くする</span>

こんな感じでその都度指定するようにしてくださいね。
よろしくお願いします。

AzTak
2018/09/18 (Tue) 23:28

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

記事行間指定を"1.6"にして私の好みの感じにすることができました。

実はここかなあと思って、値を変更してみてはいたのですが、プレビューボタンでは効果が確認できず、迷いに迷っていました。先に更新ボタンを押して、出来栄えを確認したら、意図したとおりになっていました。そういうものなんですねえ。
後半の記述分は、よほどのこだわりがなければ必要ないんだとよくわかりました。

2度にわたってお手数をお掛けして申し訳ありませんでした。本当にありがとうございました。

vanillaice (Akira)
Akira
2018/09/19 (Wed) 03:21

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

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

ブラウザはキャッシュ(履歴)が残りますのでテンプレートの修正を行った後は思い切って「更新」で上書きをしないと確認できないことが多いんです。

修正できたということでお疲れ様でした。
また何かありましたらお気軽に :)

Dedeko(ででこ)
2018/10/07 (Sun) 22:36

Greetingsでのブログカードについて

Akira様こんにちは。いつも素敵なテンプレートやためになる記事をありがとうございます。

テンプレートだけでなく、Akira様のブログカードも大変便利に使わさせてもらっているのですが、先日当方のテンプレートをHymnからGreetingsに切り替えた際、ブログカードのタイトル部分の上下に大きい余白が出来るようになりました。
できればこの余白をもう少し細くしたいのですが可能でしょうか。

<参考ページ>
https://dedeko7.blog.fc2.com/blog-entry-257.html
(記事下部にブログカードを表示しております)

HymnのときはAkira様のブログにあるような引き締まった収まりの良いブログカードとして表示されていたので、テンプレートが影響しているのかもと思いこちらに投稿させていただきました。

vanillaice (Akira)
Akira
2018/10/08 (Mon) 15:59

To Dedeko(ででこ)さん

こんにちは (o'ω')ノ
ご不便おかけしております。

.blogcard blockquote {
で検索するとCSS内に1箇所あります(ブログカード用CSSとして追加した内容です)
その括りの position: static; の直下に
background: none;
を追加。

続いて
inner-contents p
で検索すると1箇所あります。
上記を
#inner-contents p:not(.blogcard-title, .blogcard-description)
に変更。

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

Dedeko(ででこ)
2018/10/08 (Mon) 18:05

To Akiraさん

Akira様、迅速なご対応ありがとうございます。
できました!
引き締まったスタイルの良いブログカードになりました。
嬉しいです♪誠にありがとうございます!
これからもAkira様のご活躍楽しみにしております。

vanillaice (Akira)
Akira
2018/10/10 (Wed) 16:46

To Dedeko(ででこ)さん(完了のご報告)

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

お手数おかけしました。
お疲れ様でした :)

はんのすず
2018/11/25 (Sun) 23:27

テンプレートをGreetingsに変更しました。

テンプレートをBron-Broen に変更した際には、とても丁寧に説明していただき、本当にありがとうございました。
今回、気をつけてGreetingsに変更しました。とてもステキなテンプレートです。Akira先生の記事を読みながら
変更しました。基調のカラーをサイドメニューにも使用。ルミナスも導入できました。
ブログカードについては、カードのサイズがおかしかったので、コメント欄のDedekoさんとAkira先生の返信を参考にさせていただきました。とても役に立ちました。ありがとうございました。エラーチェックも毎回見ていますが、エラーをちゃんと理解できているか、心配です。
これからも先生のご活躍を、応援させていただきます。今回、お礼のコメントです。

vanillaice (Akira)
Akira
2018/11/25 (Sun) 23:36

To はんのすずさん

ご丁寧にありがとうございます。励みになります :)

1箇所だけ、luminousのJSですが、
<!--/permanent_area-->

最終ブラケットが欠落していますので修正してくださいね。よろしくお願いします。

はんのすず
2018/11/26 (Mon) 23:02

エラー見つけていただきありがとうございました。

気づきませんでした。今回もお世話になりました。
修正しました。ありがとうございました。

vanillaice (Akira)
Akira
2018/11/26 (Mon) 23:50

To はんのすずさん

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

はい。コメント頂いて良かったです(笑)
でなければ私も気づきませんでした ^^;
いつもありがとうございます :)

くぅ
2019/02/20 (Wed) 10:47

テンプレート「Arrival」では大変お世話になりました。
お手数をかけまして申し訳ありません。

プラグインに?エラーがたくさんあると言うことですので、
テンプレートをこちらに変えさせていただきました。
わたしには手に負えかねますが、ゆっくり検討していきたいと思います。


図々しいついでに(汗)ひとつ教えていただきたいのですが、

 「トップページにランキングバナー」

 をつける事は可能でしょうか?
 もし可能であれば、どこにいれたら良いのでしょうか?

急ぎませんのでいつでもよろしいです。
よろしくお願いします。

vanillaice (Akira)
Akira
2019/02/20 (Wed) 17:31

To くぅさん

こんにちは。

えと。全文タイプと要約タイプというのは見た目が違うだけでなく考え方が違いますのでまずその説明をしますね。
全文タイプを選ぶ方はとかくトップページになんでもかんでも詰め込もうとする場合が多いのですが、本来サイトで最も大事なのは個別記事です。
要約タイプというのはトップは記事の選択に集中してもらって、コメントやSNSシェアやランキングクリックなど細々した内容は全て個別記事へ移動して行ってもらう、という考え方です。
一度ご自身の運営方針を明確にされると良いと思いますよ。

ご覧の通り当該テンプレートのトップページは必要最小限の内容で、スマホではグリッドが横2列並びになります。
ですから各記事に許される専有面積は150px程度しかありません。
仮に各記事にバナーを掲載するのであれば150pxに収まる調整とスペースの確保が必要です。バナーは掲載できるとしてもテキストは無理があると思ってください。

強引に入れるとすれば各グリッドの下部でしょうか。
<div class="grid-noimage">
で検索して目印にし、スクショに従ってください。
https://file.blog.fc2.com/vanillaice000/capture2/caperrorerror.jpg

追加内容は以下の通り。

<img src="バナーURL" alt="代替テキスト" width="横" height="縦">

代替テキストはブログランキング名でOKです。
width, heightへの数値指定は単位を付けないよう注意。
例) width="80" height="15"
------
コメント欄から察するに先日お伝えしたspanタグの不整合が今回の原因ではなかったかと思います。
spanが後続のa要素に影響しており、あまり知られていないようですがa要素が壊れると表示が崩れたり動作に影響を及ぼすことがあります。ですからaタグ(リンク)を利用する時は近接の要素の整合性及びa要素それ自体の整合性には気をつけるようにしてください。
コメント内でテンプレートのバグ扱いされているのが非常に心外ではありますが、それはさておきまだエラーは残っていますのであとはご自身で修正をお願いします。該当はプロフィールです。
その他プラグインについては自己責任ですから対処の方もお任せします。
あと、せっかく要約タイプのされるのですから1件あたりの記事掲載数はもっと増やしても良いと思います。
総ページ数が1432あるのですから、1ページあたり3件というのは少なすぎるように思います。
思い切って10件ぐらいに増やされても良いと思います。Greetingsのトップページ画像はlazyloding(遅延読み込み)が行われますので全文と違って表示負荷は最小限です。
過去記事へのアクセス不要、ということならば現状でも問題ありません。

--- 追記
ごめんなさい。リンクつけるの忘れました。改めて追加内容は

<a href="リンク先アドレス" target="_blank" rel="noopener"><img src="バナーURL" alt="代替テキスト" width="横" height="縦"></a>

です。それからこのままだとサムネイル画像の下辺とバナー画像の上辺がくっついてますので離したい場合にはimg要素の方にstyle属性を追加して

<a href="リンク先アドレス" target="_blank" rel="noopener"><img src="バナーURL" alt="代替テキスト" width="横" height="縦" style="margin-top: 数値px;"></a>

にしてください。こちらの指定は逆に単位が必須です。

くぅ
2019/02/20 (Wed) 22:48

ありがとうございます。

またまたご丁寧な説明のご返事ありがとうございます。

長いことブログをやっていますが、
さっぱり解らないわたしで、きっとご説明をも苦労されたでしょうね。
申し訳なく思っています。
そんなわたしですが、Akiraさんの説明を読みましてなるほどと。

トップページへのランキングバナーは、おっしゃるようにやめておきます。
エラー箇所の修正もなんとかやってみますね。

コメント内で大変失礼な記述があった件、申し訳ありません。

今回、色々勉強になりました上に、
つくづく自分の至らなさを実感いたしました。
お忙しいAkiraさんにすっかり頼ることになってしまいましたが、お許しください。

と言いつつ、またお願いに伺うこともあると思います。
その時はまた、よろしくお願いいたします。

vanillaice (Akira)
Akira
2019/02/21 (Thu) 00:34

To くぅさん

こんばんは。

みなさん概ね「改善されている」と判断されているようで安心しました。
元のテンプレートに戻しても同じように問題が出ないのであれば「今回の作業で修正された」ということになりますが、写真メインの方は要約タイプの方が個人的にはおすすめです。

コメントの件はたいしたことではありませんのでどうぞお気になさらず。
ともかくなにか表示上の問題が生じた際には真っ先にバリデートにかけるようにしてくださいね。
プロフィールと全記事一覧のプラグインが未修正のようなのでそちらを修正すればhtml構文的にクリティカルなエラーは無くなるはずです。旧式のプラグインについては700あまりのエラーのほとんどがそちらに起因していますのでどこかで思いきらないと、という感じです。
よろしくお願いします。

くぅ
2019/02/21 (Thu) 14:48

ありがとうございます。

「バリデート」大きな収穫でした。

今回大変助かりました。
ご指摘のプラグイン少し時間がかかると思いますが検討してみます。
ありがとうございました。

vanillaice (Akira)
Akira
2019/02/21 (Thu) 17:20

To くぅさん(終了のご報告)

こんにちは。

はい。なかなか大変だとは思いますが根気よく頑張ってくださいね。
お疲れ様でした :)

みーちゃん
2023/09/05 (Tue) 13:54

ユーザータグの表記について

お世話になります。
今回、廃止になるテンプレートを使っていたブログのテンプレートをこちらのGreetingsに変更して、必要な箇所を移植してるのですが、ユーザータグの表記の件で質問があります。
https://blog-imgs-166.fc2.com/n/f/t/nftlovecollection/20230905134548357.png
こちらのサンプルのようにしたいのですが、
https://blog-imgs-166.fc2.com/n/f/t/nftlovecollection/20230905134550a7d.png
このようになってしまいます。

HMLは
https://blog-imgs-166.fc2.com/n/f/t/nftlovecollection/20230905134551a48.png
以前別のテンプレートのほうでユーザータグの表示が崩れた際にアドバイス頂いた通り、CSSは
https://blog-imgs-166.fc2.com/n/f/t/nftlovecollection/20230905134554e58.png
のように変更しました。

サンプルのようにするにはどのように修正したらいいでしょうか?
お忙しいところ申し訳ないのですが、アドバイスの程よろしくお願いいたします。

vanillaice (Akira)
vanillaice (Akira)
2023/09/05 (Tue) 23:22

To みーちゃんさん

こんばんは ('0')/

タグのアイコン表記が必要だ、という解釈で合ってますでしょうか。
その前にまずお詫びです。CSSに一部ミスがありましたので、お手数でなければ再度DLをお願いします。カスタマイズの進捗などで再DLが難しい場合は変更部位をお伝えしますのでお申し付けください。

タグアイコンの件ですが、先回お伝えした通りFC2の仕様上、ポータル遷移タグの方はclassの追加や要素の挿入などはできませんので、内部タグと全く同じ扱い、スタイリングをすることはできません(模す程度は可能です)
ポータルはa要素全てを一括で書き出すのに対し、内部はa要素を一つづつ書き出す仕組みだからです。

方法としてはSVGアイコンをPNG化し、background-imageとして設定するぐらいでしょうか。アイコンを準備できるようでしたらCSSをお伝えしますので、画像のURLをお伝えください。

みーちゃん
2023/09/08 (Fri) 13:48

To vanillaice (Akira)さん

タグのアイコン表記をするには、自分の方で画像を用意するという感じになるんですね。
アイコンが無くても、タグの機能は果たされているので、今回はこのままいこうと思います。
テンプレートの方のCSSの修正の方も再ダウンロードして、対応します。
いつもありがとうございます。

vanillaice (Akira)
vanillaice (Akira)
2023/09/09 (Sat) 16:44

To みーちゃんさん

こんにちは ('0')/

はい。残念ながら外部タグの方はHTMLのアウトライン以外加えられないのでSVGをそのまま挿入することができないんです。.svg のアップロードができれば良いんですが今のところ許可されていません。
CSS側で記号を差し込むのは簡単ですがアイコンの場合はユニコードを探すか画像を準備することになります。

ご期待に添えず申し訳ないです。

-
2023/10/10 (Tue) 03:51

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/10 (Tue) 22:55

To Greetingsの件 内緒さん

こんばんは ('0')/

> 画像が拡大されてしまい〜PCでの見え方と変わってしまいます〜

この状況がよくわかりませんので、キャプチャ(スクリーンショット)を添付して頂けないでしょうか。また以下の点についてご確認をお願いします。

1. 本ページのDEMOを開いて同じ状態かどうか目視確認
2. 以下のページを参照し、当てはまらないかどうかOSのバージョンを確認
(過去2年以上アップデートしていない、の点です。サポートは現行最新とその一つ前のバージョンのみです)
参考記事: 全テンプレート 修正完了しました + 変更点について
https://vanillaice000.blog.fc2.com/blog-entry-1157.html

内緒さんのデバイスでどう見えているのかがわからなければ原因及び対処をお伝えできませんので、本件はキャプチャ待ちです。お手数ですがよろしくお願いします。

* お返事の際はiOSのバージョン明記を併せてお願いします。また、差し支えなければ最新OSへのアップデートを行ってください。

-
2023/10/11 (Wed) 02:59

管理人のみ閲覧できます

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

-
2023/10/11 (Wed) 05:37

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/11 (Wed) 12:52

To Greetingsの件 内緒さん

こんにちは ('0')/

> DEMOを拝見しましたが、違う状態です。〜

『違う』というのは『自分の状況とは違う』という意味なのか、『自分と同じくPCと見え方が違う』という意味なのかが不明です。

> アップデートして最新の状態(17.03)です〜

承知しました。本件ではこれが最も重要な情報なので、最新と確認できたのでOKです。

> キャプチャをお送りしますので〜

第三者が内緒さんのパソコンの中身を見ることはできません。第三者に保有画像を閲覧させたいときはクラウドなどのサービスにアップロードする必要があります。今回の場合は舞台がFC2ブログですから、FC2ブログのアップローダー(ファイルアップロード画面)を利用してFC2サーバー経由で閲覧可能にしてください。

-----
キャプチャの目視確認ができませんが、今回の内容から
・ 縦横比崩れが起きているわけではない
・ レイアウトが狂っているわけではない
という点がわかりましたので

ごめんなさい。外出の用がありますので中途半端ですが一旦投稿します。ごめんなさい (;ωq`)
(車中から返信できそうならします)

vanillaice (Akira)
vanillaice (Akira)
2023/10/11 (Wed) 13:25

To 内緒さん

変な返信ですみません。

想像ですが、「画像内のオブジェクト表示範囲がPCとスマホで異なっている」ということで合ってますか。
理由はデバイスによってサムネイルサイズの出し分けをしているためです。

<picture>
<source media="(max-width: 500px)" srcset="<%topentry_image_url_760x420>">
<img class="grid-image lazyload" src="https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif" data-src="<%topentry_image_url>" width="760" height="420" loading="lazy" alt="<%topentry_title>">
</picture>

という部位がありますので、ここを

<img class="grid-image lazyload" src="https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif" data-src="<%topentry_image_url>" width="760" height="420" loading="lazy" alt="<%topentry_title>">

に変更してください。スマホでもオリジナル画像表示になります。
ただしスピードスコアは著しく低下しますので、その点を理解してされた上でお願いします。


回答がご質問内容とズレている場合はその旨お伝えください。以降の返信は5〜7日後になってしまうと思います。すみません。

-
2023/10/11 (Wed) 15:45

管理人のみ閲覧できます

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

-
2023/10/13 (Fri) 01:54

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/14 (Sat) 17:20

To Greetingsの件 内緒さん

こんばんは ('0')/

> 画像が縦合わせで、両サイドが切れてしまうのですが、解決策はありますか?〜

『縦合わせ』というわけではなく一定の縦横比を持つ領域に対して画像を上下左右中央に合わせて表示させる設定になっています。
元々縦長を想定したデザインなので比率を横長に変えることで本来のデザイン性は失われますのでその点を踏まえた上でカスタマイズしてください。

スタイルシート内に

--grid-image-aspect: 100/116;/* 画像縦横比, 横/高さ 約分(reducing)可 */

という一行がありますのでガイダンスに従って太字部位を変更してください。例えば
100/60 (約分で 5/3)
16/9
など。

内緒さんがアップロードした全ての画像に対して見切れを発生させない、というのはグリッド形式(各アイテムが同じ表示領域)である以上物理的に不可能なので(全ての画像の縦横比が同一ならば別です)、その点も念頭に置いてください。全ての画像に対しオリジナル縦横比で表示させたい場合は『全文表示タイプ』あるいは『メイソンリー』などのご利用をおすすめします。

-
2023/10/15 (Sun) 00:07

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/17 (Tue) 19:21

To Greetingsの件 内緒さん(完了のご報告)

こんばんは ('0')/
上手く行ったようで良かったです。お疲れ様でした :)

-
2023/10/23 (Mon) 23:51

管理人のみ閲覧できます

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

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