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

Hymnテンプレート

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

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

自身で修正される場合は

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

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

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/hymn_ver16.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.19
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.5
  • スクロール時のナビゲーションに関連するCSSの記述ミスを訂正
更新履歴 2023.8.10
  • IE用対応終了
  • Font Awesomeの利用を停止
  • Twitter名称・ロゴ変更に対応
  • blog lovin' シェアリンク削除
  • jQueryの利用を停止
  • スクロールアンカーJSの利用を停止
  • カスタムプロパティ導入
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

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

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

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

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

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

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

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

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

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

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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("prev-a");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("next-a");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("circle-left");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("circle-right");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>var start_pos=0;$(window).scroll(function(e){var a=$(this).scrollTop();if(a>start_pos){$('.side-pager-left,.side-pager-right').removeClass('appear')}else{$('.side-pager-left,.side-pager-right').addClass('appear')}start_pos=a});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

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

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

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.4.1
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

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

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

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

【重要】テンプレートの変更点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-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<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"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

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

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 5px 0 4px;
}
②について

#community" で検索するとhtml内に2箇所あります。2箇所とも #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 {
  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;
}

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

④について

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

.contents {
  padding: 20px 0;
}

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

#inner-contents {
  margin: 20px 0;
}

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

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

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

履歴更新 2018.12.15
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • ページ表示直後のアニメーション秒数調整
  • サイドメニュー部プロフィール画像の幅制限解除(元画像依存, 最大値はサイドメニューの横幅と同等)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

最終更新 2018.1.20

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みを導入しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップのシンタックスをJSON-LDに変更しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

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

スマートフォンのフローティング広告が少しづつ少しづつ悪質になっていく (´・ω・`)
以前は画面の半分より下あたりから降りてきていたように思いますが、今は半分よりも上から降りてくる。
しかも下部に到達するまでの秒数も増している。
誤タップ率高すぎ。

現在ではフローティングが廃止され固定になりました(サイズは大きくなりましたが)

ひぃむ
承認されました。ありがとうございます。

サンプル

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.

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

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

Cautions before asking for something.

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

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

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

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

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

べえ
2017/11/07 (Tue) 19:55

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

このテンプレート、すっきりしていて良いですね。見出しの問題もあるので、Velonica からこちらに今から移行してみます。

vanillaice (Akira)
Akira
2017/11/07 (Tue) 20:05

To べえさん

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

「見出し」で思い出しましたが、記事内で使える見出しレベルを書こうと思って忘れてた ^^;
ちなみにHymnのナビゲーションの高さは40pxですので、見出しリストのJSを移設する際にスムーススクロール部分の数値をチェックしてくださいね。

黒猫
2017/11/07 (Tue) 22:12

こんばんは!

こういうシンプルなテンプレートは好きです!
切り替えるかどうかは検討中です(^-^;
(まだ確定ではありませんが時間的に余裕が出てきたら変えたいと思っています)

話は変わりますがこの前の目次の記事のコメントでh1タグを結構いじっている人がいて笑ってしまいました(^-^;

色々と勉強になりました!

べえ
2017/11/08 (Wed) 00:01

ナビゲーション

こんにちは。

下にスクロールするときにナビゲーションが消えて、
上にスクロールするときにナビゲーションが現れるのは
仕様でしょうか?

そのため、目次のジャンプで位置がずれてしまいます。

https://beebaku.blog.fc2.com/blog-entry-1244.html

Akira
2017/11/08 (Wed) 01:14

To べえさん

ごめんなさい。そうでした。
こちらはスマホでの閲覧時に画面を奪わないよう、下向きスクロールでは引っ込んで上向きスクロール時に出てくるナビゲーションにしたんでした。

変更する箇所は同じですので、以下の内容に差し替えてください。

$('#toc a').click(function(){var a=$(this).attr("href");var b=$(a=="#"||a==""?'html':a);var c=b.offset().top;$("html, body").animate({scrollTop:c},800,"swing");return false});$('.back-toc a').click(function(){var a=40;var b=$(this).attr("href");var c=$(b=="#"||b==""?'html':b);var d=c.offset().top-a;$("html, body").animate({scrollTop:d},800,"swing");return false})

よろしくお願いします。

* 上向きと下向きで処理を分けていますので、テンプレートに元々入っているスムーススクロールの処理(除外指定)を確実に行なってください。

vanillaice (Akira)
Akira
2017/11/08 (Wed) 01:15

To 黒猫さん

黒猫さん、こんばんは ( ゚Д゚)ノ

そうなんです。同じ方が結構多かった ^^;

はい。機会があればご利用ください。
いつもありがとうございます :)

べえ
2017/11/08 (Wed) 07:11

ありがとうございます

上手く動作しました。ありがとうございます ^^

Akira
2017/11/08 (Wed) 13:39

To べえさん(完了のご報告)

べえさん、こんにちは ( ゚Д゚)ノ

またしても二度手間になっちゃってごめんなさいね。
気を利かせて40pxとお伝えしたつもりが全然足りてなかった(笑)

べえ
2017/11/09 (Thu) 23:20

移行完了

こんにちは。やっと移行が完了しました。

今回はh3からh2、h4からh3への記事の書き換えと言う難関があり、上手く移行できるかどうか心配でしたが、FC2のデータバックアップツールで、全データをダウンロードしてから見出しを使っている記事を検索することで確実に移行できました。バックアップしたデータを書き換えてアップロードする勇気はありませんでしたが、可能だったのかな?

vanillaice (Akira)
Akira
2017/11/10 (Fri) 15:17

To べえさん

べえさん、こんにちは (o'ω')ノ

インポートはもうにっちもさっちも行かなくなった時の最終手段だと考えた方が良いと思います。
これまでのログのURLが狂ってしまいます。
(欠番が詰めて埋められるため)
ですから面倒ではありますが、一つ一つ修正して「更新」という形がベストだと思いますよ。インポートによる「新規投稿」ではなく。
お疲れ様でした :)

匿名くん
2018/01/29 (Mon) 22:10

FC2動画の埋め込みが表示されません

はじめまして。
このテンプレートについてご質問があります。

該当のブログはこちらです・
http://testsite20180129.blog.fc2.com/blog-entry-1.html

●質問内容
PCでサイト表示したときにFC2動画の埋め込みだけ表示されません。
youtubeの埋め込み動画は無事に表示されるのですが、
FC2動画だけがダメです。
更に、スマホであればFC2動画も表示されます。

PCでもFC2動画の埋め込みを表示させたいので
改善方法を教えてもらえないでしょうか。

とても綺麗なデザインでレスポンシブで大変感謝です。
良ければお答え頂けますようお願いいたします。

Akira
2018/01/29 (Mon) 23:37

To 匿名くんさん

ありがとうございます ( ゚Д゚)ノ

> PCでサイト表示したときにFC2動画の埋め込みだけ表示されません。

まず最初に「PCでサイト表示したときに」とありますのでスマホ専用版を併用されているという解釈でよろしいでしょうか。
Hymnはレスポンシブテンプレートですのでスマホ版は不要です。
理解した上で敢えて設定しているのであれば強制は致しません。

今更だけど「レスポンシブ」ってなんぞ?
https://vanillaice000.blog.fc2.com/blog-entry-491.html

------
本題です。
原因はスクロールアンカーとの衝突です。
実際にはJS内容というよりもJSで付加されるtransformというCSSプロパティの方ですが。

スクロールアンカー不要の方ここから削除
で検索されまして該当部分を削除してください。
FC2動画はスクリプトを利用して表示していますのでこれしか方法がないですね。すみません (´・ω・`)

匿名くん
2018/01/30 (Tue) 01:36

No titleTo Akiraさん

Akira様
ありがとうございます。
本ブログ(掲載したテストブログとは別)で
テンプレートを編集したところ無事PCでも表示されました!

ご忠告ありがとうございます。
スマホの方は無しにしております。

こんなにも早く対応して頂き、感謝です!
ありがとうございました(_ _)

vanillaice (Akira)
Akira
2018/01/30 (Tue) 02:11

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

いえ。こちらこそ教えて頂かなかったらずっと知らないままでした ( ̄∀ ̄;)
ありがとうございます。お疲れ様でした :)

あーたろう
2018/02/04 (Sun) 16:29

記事内リンクについて

こんにちは。素敵なテンプレート、ありがとうございます。
とても気に入っています。
そして、今回は2回目の質問です。

記事内でURLリンクを貼ると、何故か自分のホームページのトップページに返されてしまう不具合があって困っています。

URLを挿入するときは、例)AAAのように飛びたいリンク先アドレスを入れています。
実際にページをアップすると、リンク名が例)https://oyakoryugakumalta.blog.fc2.com”AAA”のように、自分のトップページがついてしまいます。

httpで始まるリンクや、.comで終わるリンク先の場合は問題なく指定したリンク先に飛べるのですが、それ以外のリンクの場合に不具合が起きてしまいます。

もしかすると、テンプレートを少し書き換えた際に、いじってはいけない所を変えてしまったのかもしれません。
何か解決する方法がありましたら、是非ご教授をお願い致します。

お手数をおかけして申し訳ございません。

vanillaice (Akira)
Akira
2018/02/04 (Sun) 17:53

To あーたろうさん

こんばんは。
すみません。できればその現物が乗っているページURLを頂けないでしょうか。
でないと私が対象を自分で探さなければいけませんので (´・ω・`)

最新記事の記事したのリンクだと仮定しますね。他の部位に関しては探していません。

公式URL
<a href="アドレス/" target="_blank" title="Maltese" carnival="" 2018”="">Maltese Carnival 2018</a>

赤字部分全て不正な文字列です。半角ダブルクォーテーション(")の間に全角ダブルクォーテーション(”)を入れてはいけません。
正しいa要素 ↓

<a href="アドレス" target="_blank" title="タイトル">テキスト</a>

参考記事: レイアウトを崩してしまうhtmlの凡ミスいろいろ
https://vanillaice000.blog.fc2.com/blog-entry-593.html

イベント詳細URL
こちらも同じことが言えますが、さらにhref内の文字列はページURLではありません。
これは拡張子 .docx ですからwordなどのファイル保存用拡張子です。
これをクリックした閲覧者はファイルをダウンロードすることになってしまいます。
意図せぬダウンロードは相手方の不信を招きますのでしっかりと内容を確認してください。

よろしくお願いします。

あーたろう
2018/02/05 (Mon) 00:19

To Akiraさん

いつも迅速かつ分かりやすいフォローありがとうございます。
教えて頂いた最新記事の件で、全て解決致しました。

全角と半角の凡ミスだったことが判明し、無事に修正することが出来ました。

また、意図せぬダウンロードは不信を招くとのこと、知識不足で申し訳ございません。。
勉強して読者の方に役立つブログの運営を心掛けます。
ありがとうございました。

vanillaice (Akira)
Akira
2018/02/05 (Mon) 00:58

To あーたろうさん(完了のご報告)

修正できたようで安心しました。
そうですね。大抵の方はリンクを押すとページ遷移かページ内移動のいずれかだと思っていますので、いきなりダウンロードが始まると戸惑うし疑うと思います。
一言「ダウンロードが始まります」と注意書きがあれば別ですけどね。

お疲れ様でした :)

よしあき
2018/02/24 (Sat) 16:31

Garaging Day's

はじめまして、素晴らしいテンプレートありがとうございます!
すごくシンプルで使いやすいので早速お借りしております。

少し質問させてください。
一点目なんですが、例えばこの Hymmのテンプレートの
ブログタイトル部分に画像を挿入なんてことは可能なのでしょうか?
素人質問で申し訳ありません。
それと、以前のテンプレートの時から記事の最後に
張り付けてありました、はてなブックマークのボタンが
表示されなくなっていますが、これは何か理由がおありなのでしょうか?
レスポンシブ対応ということでスマホにも同じテンプレート設定を
させていただいているのですが、スマホの方には はてなブックマークボタンは
表示されています。特に必要というわけでは無いのですが、
ふと どうしてなのかなぁと思いまして。
不躾な質問で申し訳ありません。
宜しくお願い致します。

vanillaice (Akira)
Akira
2018/02/24 (Sat) 18:21

To よしあきさん

ありがとうございます (o'ω')ノ

> ブログタイトル部分に画像を挿入なんてことは可能なのでしょうか〜

可能ですがレスポンシブデザインですので作成の際には注意してください。
背景画像の有る無しにもよります。

参考記事:
ヘッダー背景画像カスタマイズ時の考え方
https://vanillaice000.blog.fc2.com/blog-entry-566.html

ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】
https://vanillaice000.blog.fc2.com/blog-entry-569.html

背景の組み合わせが必要な場合には上記記事を参照してください。
ロゴ自体についてもこれから作成される場合には以下の点に留意してください。
・ 横幅は最低でも640px必要(スマホ最小横幅320px及び高解像度ディスプレイに配慮)
・background-imageではなくimg要素で入れてalt属性を必ず書く
・画面幅に応じて伸縮することを想定する

固定幅のように簡単にはいきませんので事前にお伝えしておきます。

-------
> はてなブックマークのボタンが表示されなくなっています〜

はてブのAPIとテンプレートのスクロールアンカーJSとが衝突しています。
アンカーを無くせば表示されるようになります。
<!-- 注)スクロールアンカー不要の方ここから削除 -->
を目印にガイダンスに従ってください。
お手数おかけします。よろしくお願いします。

-------- 追記
既に作成済のentry-81.htmlに掲載されている画像をご利用でしょうか。
その場合にはちょっとサイズが足りない気がしますが(高解像度ディスプレイのパソコンでは「ぼやけ」ます)、

<a href="<%url>"><%blog_name></a>

という箇所がありますので以下の通り修正

<a href="<%url>"><img src="画像アドレス" alt="ブログ名"></a>

これでOKです。
alt属性の「ブログ名」の部分はブログのタイトルに置き換えてください。

* ブログ用のロゴはブログ背景色に左右されないよう背景透過PNGで、そして長辺1000px以上で作成されることをおすすめします。


--------
別件でひとつ気づいたのですが、サイドメニューにある「読者登録」のinput要素とコメント投稿フォームのinputのID名が重複(duplicate)しています。
ID重複自体も良くありませんが、inputは他要素との紐づけをしなければいけませんので特に良くないですね。
読者登録の方を変更するのは大変でしょうからテンプレート内で

id="url"

で検索されますと2箇所出てきますので url を別の内容に置き換えてください(2つ共同じ名称でOKです)
例えば id="url2" とか。
ただこれ別のテンプレートに変更された際にはまた恐らく重複になります。
製作者問わず大抵のテンプレートはこの部位に url というIDを割り当てているからです。
(公式テンプレートと公式のJS内容に寄せるため)

よしあき
2018/02/25 (Sun) 07:24

To Akiraさま

!!!!
なんというご対応の速さ!
他の注意点まで 的確にご指示いただきまして!
ありがとうございますーーー!!!!
Akiraさま もう勝手に女神とよばせていただきます!

すみません。感激しすぎて話ソレました。

なるほど、画像挿入に関しては僕のように
CSSを少しいじるぐらいのスキルでは 敷居が高いですね。
Akiraさんのブログを読ませていただいて 勉強します!

その他 ご指摘いただいた部分の書き換えは
出来そうなのでやってみます。

数年後には 
Akiraさん・・・もとい
女神のテンプレートを使わせていただいている
代表のようなブログになるように頑張ります!

本当にありがとうございました。

vanillaice (Akira)
Akira
2018/02/25 (Sun) 16:00

To よしあきさん

いえ。そんな良いモンではないです ^^;

よしあきさんは元々スキルをお持ちですので、新たに作るにしても造作ないことだと思います。
既にあるデザインをPNG化・もう少し大きめにする、というだけで十分ではないかと。
(表示の調整はCSSの方でできます)

こちらこそありがとうございます :)

------ 気づかれるかどうかわかりませんが追記

レスポンシブに関する記事内容に気づけば良かったのですが、例えにされている公式ブロガーの方はレスポンシブデザインではありません。
ご本人もレスポンシブだと思っているフシがありますけれど、残念ながら違います。
ただ単に「PC版とスマホ版のデザインがお揃い」というだけです。
誤解を生まないようお伝えしておきますね。
よろしくお願いします。

よしあき
2018/03/06 (Tue) 17:27

To Akiraさん

今、気が付きました!
えーーーーそうなんですかー???
素人のパッと見 完全にレスポンシブデザインだと思いました。

それにしても、ブログのデザインって
本当に大切なものですねー。
それだけで読者さんが引き込まれるかどうかさえ
決まってしまう場合がありますもんね~

自分だけの お洒落なデザインのHP!
憧れます。。。
もっと勉強せねば・・・

ありがとうございます!!!

vanillaice (Akira)
Akira
2018/03/06 (Tue) 19:48

To よしあきさん

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

そうですね。一見して気が付きにくいですよね。
取り敢えず返信内容に気づいて頂けて良かったです(笑)

なつ
2018/03/07 (Wed) 13:39

質問です。

こんにちは。
先日FC2より、とっても綺麗なテンプレートなので使用させて頂いております。
ありがとうございます。
今日は質問がありコメント致しました。
HOME画面の上部にあるバーの、ABOUTの中に、紹介文を入れるにはどうしたらよいですか?
それから、同じくHONE画面の記事項目の中にある、SNSのリンクアイコンを消すにはどうしたらよいでしょうか?
因みに、文章の中のリンクアイコンは消せました。
ご返答を、よろしくお願いいたします。

vanillaice (Akira)
Akira
2018/03/07 (Wed) 15:39

To なつさん

ありがとうございます (。・w・。)ゝ

> ABOUTの中に、紹介文を入れるにはどうしたらよいですか?〜

こちらはグローバルナビゲーション(リンクの集合体)ですのでテキスト掲載ではなくページ遷移を促すリンクを設定する箇所です。
FC2ブログではいわゆる「固定ページ」はありません。
(プロフィールやブログ説明の専用ページなど)
なのでaboutに該当する内容を「記事」としてアップして頂き、そちらのURLを入れて頂く形になります。
あるいは他サイトなどをお持ちであればそちらへの誘導としてもお使い頂けます。
リンク設定の仕方は記事内の説明にある通りです。

------
> SNSのリンクアイコンを消すにはどうしたらよいでしょうか?〜

sns-navigation-ul
で検索されますとhtml内に1箇所出てきます。
その近接(下)に
<li>
という要素が一行づつあります。不要なものを行単位で削除してください。
(上から4つ目までがSNSリンクに相当します。)
文字列の折り返しがありますので「行」がわかりづらいかもしれません。その場合には対象の <li> から次の <li> の直前までが同じ行です。
4つ目のli要素は <!--not_permanent_area--> の直前までが同要素ですので <!--not_permanent_area--> を削除しないようご注意ください。
個別記事へのリンク(矢印アイコン)もろとも不要という場合には
<!-- 注)記事下SNSシェアボタン不要の方ここから削除 -->
を目印にガイダンスに従ってください。

カスタマイズされそうな項目については記事内にある通り
注)
で検索されますとガイダンスが出てきますので事前にご確認を。

よろしくお願いします。

なつ
2018/03/07 (Wed) 16:49

ありがとうございます。

ご返答ありがとうございます。
ABOUTにつきましては、記事のリンクを致しました。
ありがとうございます!
リンクアイコンにつきましては、教えて頂いた、sns-navigation-ul の検索の仕方が分からず、目で追って行きましたが、どこにあるものなのか見つけられませんでした(><)。
そのままでもいいかなと思いましたが、検索とは、どうするのですか?
分かればやってみたいと思います。

なつ
2018/03/08 (Thu) 10:11

出来ました。

sns-navigation-ul、見つかりました。
何とか出来ました!
ありがとうございました。

vanillaice (Akira)
Akira
2018/03/08 (Thu) 15:05

To なつさん

こんにちは。
お出来になったということで良かったです。
webページ上での文字列検索は Ctrl+F(Windows)/ Command+F(Mac)キーを利用すると便利ですので覚えておかれると良いですね。
お疲れ様でした :)

ホピオ
2018/03/09 (Fri) 17:12

コメント欄に関しまして

こんにちは。
新しくこちらのテンプレートにしようと思ってます。
1つ質問なのですが
コメント欄が最初からオープンになってますよね。
それを最初はクローズになってるんですが
オープンとかいう文字をクリックしたら下にそのまま出てくるようにできますでしょうか?
そしてクローズとか言う文字文字をクリックで見えなくなる。

意味がわからなかったらすいません。
m(_ _;)m

宜しくお願いいたします。

vanillaice (Akira)
Akira
2018/03/09 (Fri) 17:18

To ホピオさん

こんにちは ('0')/

開閉(展開)にしたい、ということでしょうか。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-487.html

JS及びhtmlの追加が必要ですのでご自身でカスタマイズをお願いします。
注意点としてはプラグインの「最新コメント」をクリックしても該当コメントへの位置合わせが行われません。
また、閉じていることに気づかないユーザーさんも出てくると思いますのでコメント受信の機会は減るかもしれません。
よろしくお願いします。

ホピオ
2018/03/09 (Fri) 17:24

No titleTo Akiraさん

さっそくのお返事本当にありがとうございます。

今のブログのデザインからどうしてもこちらに変えたいと思ってたので。
お返事もらえてうれしいです。

そうですね。開閉(展開) と書けばよかったですね
m(_ _;)m

記事を参考にさせていただいて
やってみようと思います。

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

vanillaice (Akira)
Akira
2018/03/09 (Fri) 17:27

To ホピオさん

はい。クラス名指定だけ指定箇所だけ気をつければ実装できると思います。
ガンバです ('0')/

(クラス名関係なかったので訂正です。ごめんなさい)

-
2018/03/28 (Wed) 23:50

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/29 (Thu) 02:53

Yahoo!ブラウザの件 内緒さん

こんばんは。
まずお約束に則ったご質問をお願いしたいところですが、明らかな表示不備があるということと私の方でYahoo!ブラウザの検証はできませんので、致し方ないパターンとさせてもらいますね。
(ご質問時には該当テンプレートを設定状態にして頂くことをお願いしています。カスタマイズの作用等の判断が困難になるためです)

YmobileのAndroidとのことですが、AndroidOSが不明である点、Android機のデフォルトブラウザはあくまでもChromeである点などに加え、繰り返しになりますが私の方では検証が叶いません。
(iPhoneは既にYahooブラウザの提供は終了しています)

レンダリングエンジンやOSの問題かもしれませんし、機種固有バグあるいはもしかしたら遅延読み込みが影響している可能性もあります。
申し訳ないのですが

① 全文
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45923
② 要約
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45890

上記2つのテンプレートをプレビューして頂きまして、双方に問題が生じるのかそれともいずれか一方だけなのかお知らせ頂けると助かります。
②だけの場合には遅延読み込みが関係していると判断できるかと思います。
その場合には遅延を排除して通常の読み込みを行う形に修正を行なって頂くことになります。
(その際には当然ですがページ表示スピードは落ちます)
お手数おかけしますがよろしくご協力をお願いします。
(AndroidOSのバージョンもお知らせください)

また、yahooブラウザの特徴として
・メモリ解放、メモリ最適化
・JS無効
などがあると思いますのでそちらの確認もお願いします。
(特殊な機能はOFFにして頂いた方が良いと思います)

-
2018/03/29 (Thu) 08:59

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/29 (Thu) 15:47

Yahoo!ブラウザの件 内緒さん②

お手数おかけしております。

ではanimationCSSの解釈で間違いないと思います。
ショートハンドでの記述は正しく書いても誤解釈するブラウザがありますので、わざわざ分けて書いたのですがそれが却って良くなかったのかもしれません。

body {

で検索すると3つヒットします。最初のものが対象です。
その括りの中に
opacity: 0;
というのがありますので、これを含まず。その下にある7行を一旦削除してください。
削除した箇所に

animation: fadeIn 1s ease-in forwards;

を追加。
消去した内容と全く同じCSS指定ですがこちらはショートハンドです。
それでもダメな場合にはanimationの削除しかありません。
その場合には先程の7行を削除し、目印にした opacity: 0; も削除してください。

--------
> 古いタブレットにYahooブラウザをダウンロードして見てみたところ、不具合が出ませんでした〜

OSバージョン名などのご協力ありがとうございます。
で、私書き忘れましたがAndroidの方は「機種名」も教えて頂きたいんですね。
OS名ではなく機種名。iPhone6, Xperiaとかそういうのです。

というのはAndroidはご存知の通りGoogleのスマホOSですがAppleのiPhoneと違い仕様の統率がされていません。
iPhoneのiOSはApple独占OSですから「器(ガワ)」になるのもApple社製のiPhone以外には存在しません。
ですがAndroidの場合には例えば富士通であったりソニーであったりと、ガワの製造メーカーがたくさん存在するわけです。
ですから機種固有バグの可能性もiPhoneと比べて遥かに高くなります。
そしてiPhoneの場合、デフォルトブラウザはSafariで他に第三ブラウザの利用もできますけれど、実際にはどのブラウザを利用してもレンダリングエンジンは全てwebkitで統一されています(Appleがそう縛っているから)
例えばChromeはBlinkエンジンですがiOS版Chromeはwebkitです。FirefoxもQuantumですがiOS版はwebkit。
Appleはそういう路線ですがAndroidはそうではないんですね。
ですから「機種固有バグ」「OSバグ」「各ブラウザの独自バグ」などの断定が非常に難しいんです。
Yahoo!ブラウザがiOS版を断念したのもwebkitベースでの開発を諦めたという意味だと思います(開発コスト・技術面両方の意味で)

ちょっとだらだら書いてしまいましたが、Androidのご質問をされる際には私に限らず機種名・OS名及びバージョン・他検証機種があればその情報も同じく詳細に
お伝え頂くことで質疑応答がスムースになるのではないかな、と思います。例えばQ&Aサイトとか。

-------
animationの操作で問題が解消されない場合にはその旨お伝えください。
よろしくお願いします。

-------
ごめんなさい。追加です。
yahooブラウザはwebkitエンジンではないと思いますが(情報が出てこないので不明です)、一応以下の内容も追加してください。

-webkit-animation: fadeIn 1s ease-in forwards;

整理します。
追加する内容は以下の通りで(順序もこのまま)

-webkit-animation: fadeIn 1s ease-in forwards;
animation: fadeIn 1s ease-in forwards;

-
2018/03/29 (Thu) 19:04

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/29 (Thu) 19:19

Yahoo!ブラウザの件 内緒さん(終了のご報告)

こんばんは。
恐らくanimation-fill-modeの誤解釈または未実装が原因だと思います。
forwards値の解釈が上手くできずopacity操作を繰り返しているのではないかと。
そのため初期の値 opacity: 0; (完全透明)が再適用されてしまっているのかなと推測。

Androidが自由なのは良いのですがブラウザ間格差が生じますよね。
そういう意味ではAppleの独裁に反対ではありません(笑)
iPhoneも同じwebkitエンジンとはいえ各ブラウザの特徴・特色はありますのでもちろん独自バグあるいはグリッチというのはあるのですが。
それでも大きくかけ離れることは無いのである程度対処もできるんですけどね (´・ω・`)
Androidはその点が難しいですね。
いずれにしても正しい構文を解釈できないとなるとそれはグリッチか未実装という結論にせざるを得ませんので、個人カスタマイズ・個人レベルの対策ということでお願いします。
お手数おかけします。

* ちなみにforwards値が原因だとすると
opacity: 0;
の記述を外して
animation: fadeIn 1s ease-in;
を追加するという作業で上手く折り合いがつくかもしれません。
(ただし初回表示時に若干のチラツキは起こるかも)

1010
2018/03/31 (Sat) 10:03

iPhoneでの初期表示

こんにちは。
テンプレートお借りしています。
このブログのどこかの記事で読んだ気がしたのですが、うまく探せなかったので質問させて下さい。

iPhoneで開いたときにアプリ風に見せるように作ってあると思うのですが、それをはずしたいと思っています。
<meta name="apple-mobile-web-app-capable" content="yes">
だけを外せばいけるかな?と思い消してみたのですが、どうも違うような雰囲気になってしまってまた復活させています。

すみませんが方法を教えて下さい。
よろしくお願いいたします。

vanillaice (Akira)
Akira
2018/03/31 (Sat) 11:26

To 1010さん

こんにちは。

その記述はホーム画面に登録した際にのみ有効ですが、「ホーム画面に登録した時に」というのを前提としたご質問でしょうか。
1010さんの現時点での「何が問題で」と「どうしたいのか」が見えてきませんので何をお答えしたら良いのかがわかりません。
もう少し詳細な内容をお願いします。
端末のバージョン、OSのバージョンも併せてお願いします。

ホーム画面からアクセスした際にステイタスバーが必要である、という意味であれば該当metaの削除で合ってますが、ご自身が「これじゃない」と感じているということは違うんですよね (´・ω・`)

1010
2018/03/31 (Sat) 13:14

解決しました

お手数をかけてます。
Akiraさんのブログだいぶ読んでいたつもりなのに、いざ自分が質問するとなると肝心な情報が抜けていて申し訳ないです。
iPhone8plusでiOSは11.2.6になっています。

やりたいこととしては
>ホーム画面からアクセスした際にステイタスバーが必要である、という意味であれば
これなのですが、該当部分を削除後、Safariの全タブを消去し、再度ホーム画面への登録を試してみたのですが、代わりがありませんでした。

iPhoneはこの機種が初めてでPCブラウザ等ではあるキャッシュのクリアも、消去されるのが閲覧履歴だけではないようで躊躇していました。

と、ここまで書いて、iPhoneを再起動してみたところ希望どおりの表示になっていました。
お手数をおかけしてもうしわけありまんでした。

vanillaice (Akira)
Akira
2018/03/31 (Sat) 16:03

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

Safariはキャッシュがかなりしつこいブラウザですのでそういったことも結構起こりますね (´・ω・`)
解決されたということで安心しました。
お疲れ様でした :)

みなみ
2018/04/05 (Thu) 23:42

動画を中央に配置

お世話になっております
質問なのですが画像、文章、動画を中央に配置したく
<div style="text-align: center;">
<img src="アドレス" alt="">
</div>で使用していますが画像、文章は中央(center)になりますが
動画(FC2動画)だけは左になってしまいます。
動画を中央にできますでしょか?
宜しくお願い致します。
アダルトなので非表示でお願い致します。

vanillaice (Akira)
Akira
2018/04/06 (Fri) 00:33

To みなみさん

こんばんは。

FC2動画はテンプレートとは何の関係もありませんので、当たり前のように聞かれると困ってしまいます。
FC2動画に行き、コードを取得し、仕様を確認し… すみませんが以後はご勘弁願います。

FC2動画はJSでの掲載です。吐き出されるコードには識別子が含まれませんので、以下の方法で。

[html]

<div class="xxx">
ここに埋め込みコード
</div>

[css]スタイルシート末尾に追加

.xxx div {
margin: auto !important;
}

xxx は任意文字列。
こちらの方法で生じた不備・不具合などの責任は取りません。事前にお伝えしておきます。
よろしくお願いします。

みなみ
2018/04/06 (Fri) 00:50

ありがとうございます

<div style="text-align: center;">内容</div>
テキスト、画像、youtubeなどの動画はこれで移動できますとありましたので
できるかと思いまして。申し訳ありませんでした。以後気をつけます。

vanillaice (Akira)
Akira
2018/04/06 (Fri) 01:31

To みなみさん

text-alignはdisplay値がinlineあるいはinline-blockなど旧htmlで言うところのインライン要素にしか使えません。
FC2動画はdiv要素(display値blockの代表)の中にiframeが入っており、iframe自体はインラインですがコンテナのdivのサイズとiframeのサイズは同等ですので結局のところはブロックです。
左に寄った横300pxの箱の中に300pxのモノ(iframe)が入っているわけですから、中央に寄せるには中のモノでなく箱自体を移動させる必要がある、という理屈ですね。
ブロックの位置はmarginでないと動きませんのでこの機会に覚えておかれると良いと思います。

よしあき
2018/05/12 (Sat) 06:07

ADSENSE コード設置について

ご無沙汰しております!

Garaging Day's 管理者のよしあきです。
先日は レスポンシブについて いろいろと
ご教授いただきまして ありがとうございました!

今回 ちょっとお伺いしたいのですが
Goodle の dsense審査に通過しまして
広告を張ろうと思っているのですが
FC2ブログのフリーエリアに 広告コードを張り付けても
表示がされません??
HTMLの編集で広告を表示させようと思えば
どの位置にコードを張り付ければいいものなのでしょうか?
毎度 ド素人質問ですみません・・

もしよければお教え下さい。。

vanillaice (Akira)
Akira
2018/05/12 (Sat) 13:07

To よしあきさん

こんにちは。お久しぶりです :)

サイドバーなどがスクロール画面外に流れていかないようにする(スクロールアンカー)ための位置指定を一般的に「sticky position (スティッキーポジション)」と言います。
(CSS用語で言うfixed, absolute, stickyなど全て含む)

GoogleAdsenseはこのsticky positionへの掲載がポリシー違反になりますのでhtml内にある
注)スクロールアンカー不要の方ここから削除
を目印にガイダンスに従ってアンカーの解除を行なってください。
当然ですがsticky状態にはならなくなりますが表示は行われるようになるはずです。

サイドメニューへの掲載もポリシー的な注意点があるはずなので
adsense サイドバー 規約
などで検索すると情報が得られるかと思います。
よろしくお願いします。

よしあき
2018/05/12 (Sat) 19:11

To Akiraさん

早々のお返事
ありがとうございます!!

以前の はてブボタンの表示にも
ご指摘頂きましたので、
スクロールアンカーは削除させていただきましたー!
毎回毎回、ご丁寧なご指南に
感謝します!
また何かわからない事がありましたら
質問させていただきます。

ホントにありがとうございましたー!

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

To よしあきさん(完了のご報告)

はい。いつでもどうぞ。
お疲れ様でした :)

水海 月子
2018/07/30 (Mon) 20:16

No title

こんばんは。はじめまして、Akiraさんのテンプレートが好きで、その中でも一際シンプルなこのテンプレートを選んでカスタムさせていただいています。
質問なのですが、個別記事用ページナビの背景画像を変更することは可能なのでしょうか?
トップページのNo imageと同じ画像を背景に使いたいのですが、どこを変更すれば反映されるのか分かりませんでした。
お返事お待ちしております。

vanillaice (Akira)
Akira
2018/07/30 (Mon) 22:08

To 水海 月子さん

こんばんは。ありがとうございます :)

トップページと個別記事は
https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/hymnnoimage.jpg
で検索されますとhtml内に2箇所あります。
(うち1箇所(トップページ)は既に変更済みだと思いますので残り1箇所)
このアドレスを差し替えます。

全記事リストは
注)全記事リストページ送り背景画像
で検索されますとCSS内に1箇所ありますのでアドレスを差し替えてください。
よろしくお願いします。

水海 月子
2018/07/30 (Mon) 22:15

To Akiraさん-解決しました

基礎的な質問に、迅速かつ丁寧なご対応をありがとうございました。
無事変更することが出来ました。
これからもAkiraさんのテンプレートを使い続けたいと思います。
この度はありがとうございました。

vanillaice (Akira)
Akira
2018/07/30 (Mon) 22:21

To 水海 月子さん(完了のご報告)

良かったですー。
こちらこそありがとうございます ('-'*)

村上みのり
2018/10/20 (Sat) 18:09

commentの削除、余白について質問です

お世話になっております。
以前、Velonicaをお借りしていたのですが、
シンプルなデザインに惹かれ、先日からこちらのHymnをお借りしています。
いつもステキなテンプレートをありがとうございます。

自分なりに少しずつカスタマイズしているのですが、
個別記事のページについて、わからないところがあるので、質問させて下さい。
https://blog-imgs-111.fc2.com/m/o/m/momongashop/1049.jpg

1:コメントのアイコンを消したいです
…コメントを受け付けてない設定にしているのでカットしたいです。
 htmlとCSS内のcommentソースを消してみたらいけるかなと思ってやってみたのですが、
 レイアウトが崩れてしまいました…。
 どこを変更すれば反映されるのかお願いします。

2:写真と記事の余白を空けたいです
…多分、「individual article」のどこかだろうと思って数字を変えてみたのですが、
 該当する場所がわかりませんでした。
 こちらもどうぞよろしくお願いします。

お手数をおかけしますが、お時間があるときで結構ですので、ご回答よろしくお願いいたします。

vanillaice (Akira)
Akira
2018/10/20 (Sat) 21:00

To 村上みのりさん

こんばんは。ありがとうございます ('0')/

> コメントのアイコンを消したいです〜

【処理①】
<div class="grid-comment">
で検索するとhtml内に1箇所あります。以下のキャプチャを見ながら該当箇所を 削除。

https://file.blog.fc2.com/vanillaice000/capture/capgridcm.png

こちらがトップページのコメントアイコンです。
続いて個別記事アイコンは

【処理②】
<div class="entry-header-content-box" id="entry-comment">
で検索するとhtml内に1箇所あります。こちらもキャプチャを見ながらどうぞ。

https://file.blog.fc2.com/vanillaice000/capture/caparticlecm.png

【処理③】
続いて個別記事アイコンのCSS修正です。
.entry-header-content-box
で検索するとCSS内に2箇所あります。まず最初の方の
width: calc(100% / 4);
4の数字を 3 に変更。

【処理④】
続いて2つ目は
@media screen and (max-width: 720px) {
.entry-header-content-box {
width: 50%;
}
}

こういう形になっていると思います。この内容を全て削除。
削除した後に以下の内容を追加

*::-ms-backdrop, .entry-header-content-box {
width: 33.33%;
}

IE用のフォールバックです(calc functionの解釈にバグがあるため)
IEを無視できるなら記述する必要はありません。

個別記事のコメントアイコンを削除するとスマホでの並びが3つ(著者, 投稿日, カテゴリ)になりますので、投稿日は折返しがかかり見づらいかもしれませんが、カテゴリだけを下にするより見栄えは良いと思いますので3つを並べるスタイリングにしてあります。
カテゴリが下へ繰り下がっても構わない場合には【処理④】の作業は行わずそのまま残してください。
よろしくお願いします。

注意) これらの修正後は仮に一部記事でコメント欄を開放した場合でもコメント数表示は行われませんので予めご了承ください。

村上みのり
2018/10/21 (Sun) 01:33

To Akiraさん(作業終了のご報告)

いつも迅速なご回答、ありがとうございます!
早速書き換えたところ、うまくいきました。
キャプチャを付けて下さっていたので、すごくわかりやすかったです。
注意事項も了解しました。

細やかなご指導をいただき、どうもありがとうございました。

vanillaice (Akira)
Akira
2018/10/22 (Mon) 02:15

To 村上みのりさん(完了のご報告)

こんばんは ('0')/

ごめんなさい。コメント見落としてお返事遅れてしまいました (*_ _)
修正できたということでお疲れ様でした :)

なんちゃん
2019/09/10 (Tue) 00:11

フォントのサイズ変更および画像のドロップシャドウについて

はじめまして!
Yahoo!ブログの閉店(涙)に伴ってFC2に移行して来たばかりの者です。
センスの良いHymnに一目惚れして使用させていただいています。
CSSも全くの初心者なので参考書を購入し少しずつカスタマイズに挑戦していますが、
早速標記の基本的な箇所で頓挫してしまいました。
質問は以下の2点です。
(1)個別記事のフォントサイズを大きくしたい
 →修正すべき箇所(HTML?CSS?)がどうしても分かりません
(2)画像に対するドロップシャドウが反映していない
 →どのタイミングから反映していないのか判然としません
以上、大変初歩的な質問で恐縮ですがご教示いただけると幸いです。
宜しくお願い致します。

vanillaice (Akira)
Akira
2019/09/10 (Tue) 00:33

To なんちゃんさん

こんばんは。Yahoo!からのお引越しお疲れ様です。

> 個別記事のフォントサイズを大きくしたい

#inner-contents {
で検索するとスタイルシート内に1箇所ありますので、
margin: 20px 0;
の直下に

font-size: 数値rem;

を追加。デフォルトは1.4remですから大きくされる場合は1.5、1.6と様子を見ながら変更してみてください。

-----
> 画像に対するドロップシャドウが反映していない〜

ドロップシャドウというのはHymnテンプレート固有のCSS装飾のことでしょうか。それとも以前(Yahoo!からの移転記事やFC2で他テンプレートを利用していたとき)のものでしょうか。
Hymnテンプレートで画像のドロップシャドウを付ける場合は記事作成時(記事掲載時)のhtmlソースに独自クラスの追加記載が必須です。

class="shadow-attachment"

が該当です。詳細は本記事内にあるARTICLE DEMOをご覧くださいね。

なんちゃん
2019/09/10 (Tue) 11:57

To Akiraさん

深夜だというのに迅速なご回答誠にありがとうございました。
お陰様で質問させていただいた2点とも解決することが出来ました!(本人談(^^;)
CSSの基本をもう少しマスターしてみたい思いますので、今後改めて質問することが
ありましたら何卒よろしくご指導いただきますようお願い致します。m(__)m

記事の閲覧パスワードは「20190910」です。
一度ご確認いただけると幸甚です。

vanillaice (Akira)
Akira
2019/09/10 (Tue) 14:53

To なんちゃんさん

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

はい。文字大きさは1.5rem、drop-shadowの方も正しく導入できています。
こちらこそよろしくお願いします。お疲れ様でした :)

-
2020/01/21 (Tue) 18:28

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/01/22 (Wed) 02:28

To Hymn Adsenseの件 内緒さん

引き続き回答します。面倒なページ移動のご協力ありがとうございます :)

> 関連記事リストの真上にも貼れたら嬉しい〜

結論から言うと「簡単にはできない」んですね。これはFC2ブログの仕様です。関連記事リストを表示位置基準にする方法を書きましたのでご覧ください。

参考記事: ランキングバナーやアフィリエイトバナーを好きな位置に表示するには
https://vanillaice000.blog.fc2.com/blog-entry-990.html

第4章の「html内容が複雑な場合, htmlでなくJSの場合」が該当です。この手順に沿って行えば「上」に表示できますのでお試しくださいね。

-
2020/01/22 (Wed) 10:45

管理人のみ閲覧できます

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

-
2020/01/22 (Wed) 12:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/01/22 (Wed) 15:54

To Hymn Adsenseの件 内緒さん(終了のご報告)

こんにちは。

> 参考にさせていただいてる〜のように出来ればと思ったのですが

この方も同じ方法(「テンプレート変数のみ」設定)を取られています。

> 表示場所を「テンプレート変数のみ」に変更すると関連記事自体が表示されなくなりました〜

手順に従って行えば表示されるはずなので、原因は実際の様子を見てみなければなんとも言えません。

-----
関連記事リストの非表示化する、ということで大丈夫でしょうか。
お疲れ様でした :)

-
2020/01/23 (Thu) 12:13

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/02/02 (Sun) 20:19

To Hymn Adsenseの件 内緒さん(終了のご報告)

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

はい。ご自分でお決めくださいね。
お疲れ様でした :)

bon
2020/03/14 (Sat) 15:13

Akiraさん
はじめまして。素敵なテンプレートの数々と、ブログでの丁寧な対応に頭が下がります。
個人的な話で申し訳ございませんが、現在WordPressからFC2に戻ろうと考え作業を進めており、テンプレートを探している中でこちらのテンプレートを見つけて導入させて頂きました。
せっかくお洒落なテンプレなのに、年よりなので日本語に直したり、文字を大きくしたりさせていただきました。申し訳ございません。
本文の文字サイズの変更は、こちらのQ&Aで解決しました!ありがとうございます。
調べてもわからないことがありまして、お手数をお掛けしますがよろしくお願い致します。

画像無しの記事で、No image表示になる部分について。
ブログ設定の「サムネイル代替画像の設定」に画像を登録したのですが表示されません。
自分がちゃんとできていないだけだとは思うのですが…
ファイル名はDSC00399.jpgでカッコはついていません。もしご対応頂けるようでしたら、ご教示ください。よろしくお願い致します。

vanillaice (Akira)
Akira
2020/03/14 (Sat) 20:35

To bonさん

こんばんは。
カスタマイズはどうぞお気になさらず。ご自由に行ってくださいね。

-----
> 「サムネイル代替画像の設定」に画像を登録したのですが表示されません〜

これなんですけども、私も薄々というかなんとなく「あれ?」とは感じていたんですが後回しにしていました。
今ちゃんと確認しまして、仕様面については改めて記事にしようと思います。

解決策として、お手数ですが

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/hymnnoimage.jpg

で検索するとこちらがデフォルトのNo image画像ですので、希望される画像のアドレスに書き換えを行ってください。html内に1箇所あります。

----- 別件
グローバルナビを削除されているようなので残っている不要なJSを削除してください。

<script>var startPos=0;

を目印に検索し、上記文字列を含み</scrip>までを削除(一行で書かれていますので行削除します)
続いて今削除したscript要素のすぐ下に

<script>$(window).on('load scroll'

で始まるscript要素がありますのでこちらも</script>までを削除(同じく行削除)
以上2JSの削除です。よろしくおねがいします。

bon
2020/03/14 (Sat) 21:01

To Akiraさん

こんばんは。
お返事をありがとうございます。

No image画像の差し替え、完了いたしました。

また、グローバルナビ削除にともなう不備につきまして、親切にご指摘下さいましてありがとうございました。
不要部分の削除が完了いたしました。

いずれも大変わかりやすくご教示頂きまして、迷うことなく作業ができました。
ご親切に対応して下さりありがとうございました!

また不明点が出てきましたらお伺いさせていただきます。
どうぞよろしくお願い致します。

vanillaice (Akira)
Akira
2020/03/14 (Sat) 22:29

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

お手数おかけしました。今サムネイル代替画像設定について記事をUPしましたのでお手すきなときにご覧くださいね。
https://vanillaice000.blog.fc2.com/blog-entry-1000.html

お疲れ様でした :)

bon
2020/03/15 (Sun) 20:50

To Akiraさん

こんばんは。記事も拝見しました。
お忙しいなか、丁寧に対応下さり本当にありがとうございました。
今回初めてこちらのサイトにお邪魔しましたが、勉強になるのでさかのぼって読ませて頂きます。
これほどの情報と技術を無料で公開されていることに驚いております。

Akiraさんのテンプレート、どれも素敵なのでいろいろ試させていただいています。
また質問でお世話になるかもしれませんが、その節にはよろしくお願い致します。

vanillaice (Akira)
Akira
2020/03/16 (Mon) 15:41

To bonさん

こんにちは ('0')/
こちらこそお手数おかけしました。またご不明な点があればお気軽にどうぞ :)

-
2020/05/02 (Sat) 16:48

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/05/02 (Sat) 17:55

To Hymnシェアボタンの件 内緒さん

こんにちは。ありがとうございます :)

> 削除し更新ボタンを押しても、変化はありません〜

現時点で確認したところ、html内容が変更された様子は見当たりませんので、正常に更新されていないと思います。
あるいは複製を作った場合は切り替え(適用テンプレートの変更)を忘れる場合もありますのでチェックをお願いします。

で、この「シェアボタンの削除」については
①トップページと個別記事
②トップページのみ
③個別記事のみ
のパターンがありますが、①と解釈して良いでしょうか。その場合
記事下SNSシェアボタン不要の方ここから削除
のガイダンスは文字通り「記事下」のシェアボタンだけですので、こちらの削除作業と同時に

<ul class="sns-navigation-ul">
で検索し、直近の
</ul>
までを削除してくださいね。この作業でトップページなどグリッドアイテム(各記事が整然と並んでいるレイアウトページ)内SNSボタンが取り除かれます。よろしくお願いします。

-
2020/05/03 (Sun) 17:01

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/05/03 (Sun) 17:17

To Hymnシェアボタンの件 内緒さん②

こんにちは。

もう一度手順を説明します。
① 複製を取る --- カスタマイズミスが発生したときのためすぐに復帰できるようにしておくためです。こちらは何も操作しないようにしてください。
② 「記事下SNSシェアボタン不要の方」のガイダンスに従って削除 --- 既に完了しておりカスタマイズ(削除)が反映されています。
カスタマイズをブラウザ上で行っている場合は「テンプレートの設定」画面を開き、Ctrl + Fキー押下で検索窓が出ます ので、そこへ <ul class="sns-navigation-ul"> と入れて該当部位を見つけてください。

要素検証を行う必要はありません。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser20200503----1200.png

③の作業も終えたら「更新」を押します。以上で完了です。
複製は「もしものときのため」なので、カスタマイズが上手く行き、不要であると判断できれば削除して構いません。
カスタマイズ済みの方が設定されていることをよく確認してくださいね。

-
2020/05/03 (Sun) 17:49

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/05/03 (Sun) 17:56

To Hymnシェアボタンの件 内緒さん③

消すのはスクリーンショットで赤くなっている範囲全てです。
<ul class="sns-navigation-ul"> </ul>
ではなく
<ul class="sns-navigation-ul"> から </ul> まで
を削除です。

削除した後は

<%topentry_description>
</div>
</div>
</section>

となっていればOKです。
* デスクを離れますので以降のお返事は遅くなります。ごめんなさいね。

-
2020/05/03 (Sun) 18:09

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/05/04 (Mon) 14:26

To Hymnシェアボタンの件 内緒さん(完了のご報告)

こんにちは。
ただしく編集できているのを確認できました。お疲れ様でした :)

vanillaice (Akira)
Akira
2021/01/07 (Thu) 16:59

To タケシさん

申し訳ないんですが、ブログアドレスの記載は必須なのでご協力をお願いします。
そしてメールアドレスを記載する項目が無い場合は記さないようご注意ください。スパムメールなどが届いてしまう可能性があります。
また、メールでの返信は行いませんので、テンプレート質問時の注意点をよくお読み頂き、改めてご質問をお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-26.html

* 返信あり次第頂いているコメントは削除します(メールアドレスが公開されているため)
よろしくお願いします。

タケシ
2021/01/07 (Thu) 17:58

再 サイドバーのタイトルではなく本文の文字を大きくしたいのですが

申し訳ありません、あらためて送ります。確認なんですがブログアドレスはURLのことでいいのでしょうか。名前の欄下のウェブサイトの欄に記入したのですが、そちらには届いてないでしょうか。この本文のところに入れていいのかわからないので、またウェブサイト欄に記入して送ります。お手数かけて申し訳ありません。よろしくお願いいたします。

vanillaice (Akira)
Akira
2021/01/07 (Thu) 21:16

To タケシさん

ご協力ありがとうございます。ご面倒おかけします。
はい。「ブログアドレス」と「ブログURL」は同じ意味です。

コメント投稿フォームに「メールアドレス」という専用記入欄がある場合は管理人以外に公開されませんが、コメント本文欄への記載は非公開にチェックをしない限り全閲覧者に見えてしまいます。
これはどのテンプレート、どのブログサービスでも概ね同じなのでご注意くださいね。

> サイドバーのタイトルではなく本文の文字を大きくしたい〜

#secondary {
で検索するとスタイルシート内に2箇所あり、最初のものが対象です。
このルールセット内
font-size: 1.2rem;
赤字部位1.2を希望の数値に変更してください。
1.2remは12pxですから、1.3で13px、1.6なら16pxになります。

本文のサイズが1.4rem(14px)ですから、比較してお決めください。
よろしくお願いします :)

タケシ
2021/01/08 (Fri) 01:07

終了しました。

Akira様、ありがとうございました。サイドメニューの本文文字を大きくすることができした。丁寧に教えて頂いて嬉しかったです。どうか今後ともよろしくお願いいたします。ありがとうございました。タケシ

-
2021/01/09 (Sat) 00:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2021/01/09 (Sat) 16:43

To Hymn広告の件 内緒さん

こんにちは ('0')/

広告の件ですが、
注)スクロールアンカー不要の方ここから削除
で検索して頂くと対象が出てきますので、削除処理を行ってください。

サイドメニューへの広告掲載はASPによってスクロール固定(スクロールアンカー)が違反になることがありますので、その場合は自主的にアンカーを削除して頂くようにお願いしています。
今回もこのJSの利用を停止することで問題も解消されるはずです。
その代わり当然ですがスクロールアンカーの機能は失われます。
よろしくお願いします :)

* もちろんそのまま変更して頂いても構いません。おまかせします。

-
2021/01/10 (Sun) 01:04

管理人のみ閲覧できます

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

-
2021/06/16 (Wed) 17:28

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/06/16 (Wed) 22:13

To アイキャッチの件 内緒さん

こんばんは。
こちらこそありがとうございます :)

----- アイキャッチ画像変更
https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/hymnnoimage.jpg
で検索するとhtml内に1箇所ありますので、これをご希望の画像URLに変更してください。

----- バナーがアイキャッチになる件
本来はできません。FC2の法則・ルールに沿うと、例え極小のバナーであっても「本文」にある「最初の画像」なのでサムネイル対象になってしまいます。

なので今後は
・バナーは追記に掲載する
・記事単位ではなくテンプレートへhtmlを記載する
このいずれかをおすすめします。特に「テンプレートへの記載」をした場合には仮に今後何らかの変更、例えばリンク先の変更やバナー画像自体の変更などにもすぐに対応できます(一度の修正で全ての記事に対して有効になる、という意味です)

で、既存のものに対してですが、
・JSによる画像アドレスの書き換え
・CSSによる操作
のいずれかです。JSの方はおすすめしません。指定してある画像を半ば無理に書き換える方法になり、この操作が全ての記事で行われるため、バナーの無いページでもJSが仕事をするので非常に無駄が多いんですね (´・ω・`)
なので今回は、こちらもやはり無理矢理ではありますが以下の方法をお試しください。個人的にはおすすめしません(理由は後述)

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

.grid-image img[src="バナー画像アドレス"] {
display: none;
}
.grid-image {
background: url(設定したい画像アドレス) center center /cover no-repeat;
}

赤字部位は書き換えてくださいね。この処理でトップページではバナーが表示されず、指定した画像が代わりに表示されます。
バナー画像(img)を表示させずに、画像表示領域の背景(background-image)として別の画像を表示させる、という方法です。

おすすめしない理由は
・バナー画像「以外」のもの(正しいサムネイルの記事)でも同じ処理が行われる(処理はされますがサムネイル画像が上に乗りますので背景画像は見えません)
・トップページの画像はlazyloadでフワっと表示される = 「背景画像は見えません」と書きましたが、実際には各サムネイルはスクロールするまで表示されませんので、今回指定するbackgroundの画像が先に表示され、スクロールが行われると画像が上に被さるという動作になります。

CSS自体はかんたんなものなので、書き入れて実際の様子を見て判断されると良いと思います。
一度お試しくださいね。

-
2021/06/17 (Thu) 15:44

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/06/17 (Thu) 22:00

To 完了のご報告と追加提案 アイキャッチの件 内緒さん

こんばんは。

別件ですが、以下の点についてご確認をお願いします。

・ カウンターのJSがSSL非対応なので新しいコードの取得・貼り直しをおすすめします。
(混在コンテンツ(httpsサイト内にhttp通信が混ざっていること)の要素は表示されませんし動きません)
・レスポンシブデザインですからできれば以下の個人設定ページで
スマートフォン版の表示設定 > レスポンシブ設定 > スマートフォン専用版の表示設定「無効」
https://admin.blog.fc2.com/control.php?mode=setting&process=2#sp_sup

今の設定ではスマホからの閲覧者はスマートフォン専用版で表示されますので、PCテンプレートへのカスタマイズ内容は反映されません。この設定を行うことでPC・スマホ・タブレットなど全てのデバイスでテンプレートが共通化され、アドレスも統一されますのでSEOの対策になります。

何らかの事情で「スマホではスマホ専用版で表示させたい」、という場合はその限りではありませんのでおまかせします。
設定を変更される場合は
検索バーの設定 > 検索バーの利用「利用しない」
への変更もお忘れなく(タブレットでの閲覧時に検索バー(ページ最上部にある検索ボックス+広告)がユーザビリティを低下させます)

参考記事: スマートフォン版の非表示を勧める理由
https://vanillaice000.blog.fc2.com/blog-entry-579.html

-
2021/06/18 (Fri) 16:55

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/06/20 (Sun) 16:09

To アイキャッチの件 内緒さん(完了のご報告)

こんにちは。お返事遅くなりました (*_ _)

納得のいく形になりましたでしょうか。関係ない画像が一時表示されてしまいますが、バナー表示の回避はできています :)
また、スマートフォンの表示設定等も完了しているようで安心しました。
お疲れ様でした :)

KOZO
2021/08/24 (Tue) 14:52

表示不具合

管理画面(プラグインの設定)のプラグイン項目のフリーエリアについて
編集設定でコンテンツ等の位置設定が効きません
マイブログのサイドメニューの中のランキング・ボタン項目です
中央設定にしてありますが、左にズレです

同様に
ジャンルランキングの編集設定
更新通知登録ボタンの編集設定

左にズレです
よろしくお願いいたします


追伸
後日にカラム左設定変更
サイドバーのプラグイン設定 (すべて左寄り指定)

上記にて暫定的に対処いたしました

根本の問題は未解決ですが
形が整いましたので
これで(今の形で)やっていきたいと思います
悪しからずご了解をお願いいたします
今後ともよろしくお願いいたします


vanillaice (Akira)
vanillaice (Akira)
2021/08/25 (Wed) 19:02

To KOZOさん

こんばんは。
修正方法はありますので後日改めてお返事しますね。

コロナワクチン接種で非常に体調が悪く、ご容赦ください。取り急ぎご連絡まで。

KOZO
2021/08/25 (Wed) 21:13

ご挨拶

ご体調のお悪い中にもかかわらず、お気遣いいただきまして申し訳ございません
どうぞゆっくりと体調を整えてご静養くださいませ
私もワクチンを親子で済ませました
早くコロナが衰退するといいですね
ブログテンプレートの方は日頃楽しませていただいています
おかげさまで更新が楽しいです
多くの喜びをいただきましておかげさまです
またご体調が回復されましたら
お世話になりたく存じます
ご挨拶まで

vanillaice (Akira)
vanillaice (Akira)
2021/08/26 (Thu) 17:00

To KOZOさん(プラグイン位置の件)

改めまして、お気遣いありがとうございます。1日ですっかり元通りになりました(笑)

まず、プラグインの水平位置ですが、できるだけ左寄せをおすすめします。理由なんですが、リスト形式のものにはマーカーというのが付きます。センタリングを行ってしまうとマーカーと文字列の位置が離れてしまうため、非常に見づらい形になってしまうんですね。

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/2021_08_26_user.png

パッと見ると「html構文エラーによる表示不具合かな?」と思ってしまうような見た目 ^^;
プラグインはリスト形式(ul要素, ol要素)が多いので、なるべくセンタリングは避けた方が良いと思います。あるいはセンタリングを優先したい場合にはマーカーを消す、というのも良いと思います。

で、プラグインの更新通知ボタンなんですが、テンプレートに関わらずボタン部位のセンタリングというのはできません。(プラグイン設定でもボタン水平位置は変更できません)
そういう仕様です。これもうFC2運営に頼むしか無いです (´・ω・`)

なので、フリーエリアを利用する掲載方法をおすすめします。プラグインはJavascriptで「iframe」といってユーザーカスタマイズ不可侵の要素を書き出す仕組みで、JSを利用するためページ表示に若干の負荷がかかりますが、以下の方法はリンクで飛ばすだけなので軽量というかほとんど負荷はかかりません。

----- 手順
① プラグイン「フリーエリア」をダウンロードし、タイトルを希望の内容に変更

② 「フリーエリア内容の変更」のボックス内に以下の内容を記載

<div &align>更新通知で新しい記事をいち早くお届けします</div>
<div style="text-align: center; margin: 10px 0 0;">
<a class="fc2_user_update_notification_btn" href="javascript:window.open('https://blog.fc2.com/notification/manage/confirmsubs?id=<%blog_id>', 'mywindow1', 'width=640, height=565, menubar=no, toolbar=no, scrollbars=yes');"><img src="https://static.fc2.com/image/ja/user_update_notification/user_notification_btn_icon.svg" width="12" height="15"> 通知を受け取る</a>
</div>


<style>
.fc2_user_update_notification_btn {
background: #fafafa;
border: 1px solid #e2e2e2;
border-radius: 4px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
color: #4d4d4d;
display: inline-block;
font-size: 15px;
padding: 0.5rem 0.8rem;
text-decoration: none !important;
}
.fc2_user_update_notification_btn:hover {
text-decoratin: none !important;
}
.fc2_user_update_notification_btn img {
vertical-align: middle;
}
</style>

-----------
上記内容の場合、ボタンの見た目はプラグインのそれとほぼ同じです。
「更新通知で新しい記事をいち早くお届けします」の文言はプラグインの「コンテンツの文字設定」で変更できるようにしてあります。

注意点は、style要素(<style>から</style>の内容)をプラグイン内に直接記しているため、html的にはルール違反(構文エラー)です。これはほとんどプラグインが同じなんですが、気になる場合はstyle要素をプラグイン内に記さずにテンプレートの末尾に記載してください。ただしテンプレート変更時には忘れずに移植しないとスタイルが失われます。

カウンターについては表示が行われていないため、なんとも言えないんですが、こちらに該当している可能性が高いのでご一読ください ↓

参考記事: FC2カウンターが表示されなくなる、アクセス解析の画像が出ない、などの不具合が生じた方へ
https://vanillaice000.blog.fc2.com/blog-entry-1015.html

一度お試しください。よろしくお願いします :)

KOZO
2021/08/26 (Thu) 21:18

お礼

この度は詳しくご丁寧に回答をくださり大変感謝しております
私の方でもできる限りの修正をさせていただきました
おかげさまでほぼ全部と言っていいくらい解決したように思います
見た目もかなり整って来ました
これでまたブログの愛情もアップしそうです
この度はありがとうございました
また何かありました時は、よろしくお願いいたします

vanillaice (Akira)
vanillaice (Akira)
2021/08/26 (Thu) 23:31

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

こんばんは ('0')/

マーカーを消す場合は
.side-menu ul {
で検索するとスタイルシート内に出てきますので、

.side-menu ul {
margin-left: 1.5em;
list-style-type: disc;
}

上記ルールセットを削除すれば消えますので、念の為お伝えしておきますね。
お疲れ様でした :)

KOZO
2021/08/27 (Fri) 04:26

重ねてお礼です

ありがとうございます
無事完了しました
私にとっては根気のいる作業でした
これでスッキリすることができ感謝です
大切にテンプレートを使わせていただきますね
素敵なデザインのテンプレートに出会えて嬉しいです
また何かの時は
今後ともよろしくお願いします

vanillaice (Akira)
vanillaice (Akira)
2021/08/27 (Fri) 20:28

To KOZOさん

こんばんは ('0')/
はい。こちらこそよろしくお願いします。お疲れ様でした :)

KOZO
2021/09/02 (Thu) 19:40

プロフィールの画像表示

こんばんは!
質問相談なのですが

プロフィールの画像はjpegなら綺麗に表示できますが
現在のマイブログの表示のように
ロゴをサードパーティサイトで作成したものは
サイズが大きいと綺麗なのですが
小さく表示させると滲んでしまいます
元ファイルが小さいサイズでもダメ
大きいファイルを小さくブログでしてもダメ

ちなみにワードプレスでは公式な指示で

.custom-logo-link {
max-width: 300px
}
.custom-logo-link img {
max-height: 100%;
}

これをCSSに入れると綺麗に表示されます
サイズ指定もGoodです
元ファイルは大きいものでないとダメですが・・・

そこで質問相談ですが
FC2のプロフィール画像でも
綺麗に表示できる方法はありますでしょうか?

よろしくお願いいたします

vanillaice (Akira)
vanillaice (Akira)
2021/09/03 (Fri) 13:56

To KOZOさん

こんにちは ('0')/

プロフィール画像は右サイドメニューの最上部に現在表示されているものでお間違いないでしょうか。
webで表示させる画像というのは基本的に原寸を表示サイズの2〜3倍のサイズで作成してください。Hymnテンプレートの場合はサイドメニューが320pxですから、正方形を仮定した最適なサイズは640〜700pxです。表示サイズを横120pxにしたい場合の最適原寸サイズは240〜300px。理由は以下の記事を御覧ください。

参考記事: スマートフォンで画像がぼやける際の対処と画像容量削減
https://vanillaice000.blog.fc2.com/blog-entry-376.html

参考記事: スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】
https://vanillaice000.blog.fc2.com/blog-entry-627.html

今imacの5Kディスプレイで拝見していますが、現時点で非常に不鮮明です。

-----
CSSの方は無関係なので忘れて頂いて、FC2でだけ同じ画像が不明瞭になるというのは考えにくいんですが、WindowsのChromeで閲覧されている場合は、過去に「pngの縮尺表示でぼやける」件が報告されていますので、もしかするとまだ解消されていない可能性もあります。

念の為確認ですが、「画像加工による縮小(サイズ変更)」ではなく「CSSによる縮尺表示(原寸は大きく、表示サイズだけを変更)」ということですよね。そして原寸は 横120 縦115 で合ってますでしょうか。横950pxのものが存在しているはずなんですが、アップロード時に「サムネイルを同時に作成」にチェックを入れており、プロフィール画像設定時にそのサムネイルの方のURLを利用している可能性はないでしょうか。
なぜなら画像ファイル名の末尾に「s」が付いており、この場合FC2の自動サムネイル作成かまたは任意ファイル名末尾がたまたまsなのかいずれかです。今回の場合950px画像を確認できますので、その画像のサムネイルではないかと思います。

自動作成サムネイルはロスレス圧縮ではないので(極力解像度を保ったままバイト数だけを削減すること)、どうしても不鮮明になります。そしてPNG画像というのは「加工による」拡大でも縮小でも解像度が落ちるという特徴があります。

いずれにしろ、

表示したい横サイズを決定し、その表示サイズに対し2倍程度の原寸を準備。
既に保存してある950pxでも構いませんが、プラグイン内の画像はlazyload(遅延読み込み)対象ではないのでページ表示に若干の影響は出ます。


winのchromeの件が解消されているかわかりませんが、プラグインのプロフィール編集を開くと

<img src="<%image>" alt="<%author_name>">

という箇所がありますので、

<img src="<%image>" alt="<%author_name>" style="backface-visibility: hidden;" loading="lazy">

と修正してください。①の作業を済ませて目視確認をしてから②に移ってください。もしかすると必要のない処理かもしれません。
950px利用ではページ表示に〜と書きましたが、その対策が loading="lazy" の部位なので、backface-visibilityの指定が不要だとしてもこの際ですから loading="lazy" だけ記載しても良いと思います。また、表示サイズがサイドメニュー横幅と同等ではない場合(320pxよりも小さくしたい場合)は

<img src="<%image>" alt="<%author_name>" style="backface-visibility: hidden; width: 表示希望横サイズ; height: auto;" loading="lazy">

と記します。
一度お試しください。結果の確認もしますので、作業が完了したらお知らせくださいね。よろしくお願いします :)

KOZO
2021/09/03 (Fri) 17:20

試行1

まず、普通のjpeg写真の場合は普通に操作して綺麗に表示されます、問題は感じません

windowsのクロームでもmac book 16のクロームでも、このロゴの場合は滲みは出ます
ロゴ自体に問題があるのでは?

希望表示サイズは120×120です

希望表示サイズの3倍のサイズを使って作成しても滲みます

環境設定のプロフィールの中の画像のurl
ファイルアップロードの時のサムネイルを同時に作成するのボタンを外しても
このurlには末尾にsが付加されます
滲みも同じです

このurlの欄にヒント(この欄にアップロード済みの画像を直接入れても可能)とあり
ファイルアップロード(環境設定)の画像urlを入れると
大きいサイズなら綺麗に大きく(希望外)表示されるが
問題はサイズを小さくして入れると滲む(ex.150.150)

以上、今のところ試してみた結果です

引き続きできそうなことを試行してみます
よろしくお願いいたします







KOZO
2021/09/03 (Fri) 17:49

プラグインの設定〜プロフィール〜htmlの改造欄に以下を入れ替えて
350.350サイズ、そして920.920サイズを入れて
表示120希望にして試しています
結果、どれも滲みは同じです
現在920.920の元サイズで入れてありますが
しばらくこの状態にしておきましょうか? 不要でしょうか?


<img src="<%image>" alt="<%author_name>" style="backface-visibility: hidden; width: 表示希望横サイズ; height: auro;" loading="lazy">


よろしくお願いいたします

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

To KOZOさん ②

>ロゴ自体に問題があるのでは?〜

今設定中の画像が実際に使用しようとしているものであれば問題があります。この画像は先にお伝えした通り、原寸が120×115しかありませんので、解像度が足りません。そのため、表示したいサイズの2〜3倍の実寸を持つ画像への変更をお願いしました。

> 希望表示サイズの3倍のサイズを使って作成しても滲みます〜

質疑応答で大事なのは「目視確認」なので、3倍サイズのものが既にあるのならばそれを設定してください。その画像を見られなければ検証が不可能です。

> ファイルアップロードの時のサムネイルを同時に作成するのボタンを外してもこのurlには末尾にsが付加されます〜

その場合は「ファイル名がたまたまsで終わる」に該当しますので、アップロード時にファイル名末尾がsにならないよう工夫をしてください。そうすればサムネイルなのかそうでないのかはっきりします。

もし「既にやっている」「もう試している」と思われて、現在も「その画像(原寸が横240px以上あるもの)を設定している」ということであれば、実際には設定されていませんので、アップロードやプロフィール画像設定をしっかり正しくやらないといけませんし、「やってみたけどダメだったから元に戻した」のであれば、目視確認ができるように戻さずに作業終了時点の状態を見せてくださいね。
(ロゴを私の方で加工してお渡しすることも可能なんですが、先程お伝えしたように鍵コメントですから掲載ができません)

ともかく作業を終えた時点でご自身で判断せずこちらにお見せくださいね。よろしくお願いします :)

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

To KOZOさん ③

コメントが行き違いになりました。

今確認し、html内容の変更を確認できました。(17:52に確認)
この時点で画像は横920pxではなく横120pxです。なのでやはり画像(または画像URL)自体を誤認しているのだろうと思います。
350サイズと920サイズそれぞれのURLをお知らせください。

あと、ごめんなさい「鍵コメントなので」というのは別の方と混同してしまいました。失礼しました ^^;

----- 追記 18:06
こちらが横920pxのものを私の方で設定したサンプルです。これで「にじむ・ぼやける」と感じるかどうかのご確認もお願いします。
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/hymn_user.html

もし作業で混乱されているようでしたら、プラグイン編集を開き

<img src="https://blog-imgs-144.fc2.com/t/u/t/tutti2021/20210903174133865.png" alt="<%author_name>" style="image-rendering: -webkit-optimize-contrast; width: 120px; height: auto;" loading="lazy">

この内容と差し替えてください。URL出力をFC2ブログ変数に頼らずにダイレクトに指定する方法です。このURLが920px画像のはずです。そして backface-visibility: hidden ではなく image-rendering: -webkit-optimize-contrast に変更しています。いずれもchromeに対する対策ですが、試しにこちらで。ただどちらを指定しても効果は「若干」という感じです。

最大注意点は、ダイレクトにURLを入れていますので、今後プロフィール画像を変更した場合に連動して変わってはくれませんので、その際には再度URLの指定し直しが必要になります。

【URLの整理】
横920px
https://blog-imgs-144.fc2.com/t/u/t/tutti2021/20210903174133865.png
横120px(恐らく920pxの自動作成サムネイルで、現在設定中のもの)
https://blog-imgs-144.fc2.com/t/u/t/tutti2021/20210903174133865s.png
横350px
不明

* このコメント欄に画像URLを記すとクリックで開くことができますので、確認にご利用頂いて構いません。そうすればURLと実際の画像がすぐに結びつきます。

KOZO
2021/09/03 (Fri) 19:17

試行

頭が飽和してますので、とりあえず一つ一つでお願いいたします


管理画面、ファイルアップロードの画像

920.920の元ファイルの場合の
アップロード済み欄のファイル情報url
https://blog-imgs-144.fc2.com/t/u/t/tutti2021/20210903190737ac2.png

環境設定〜プロフィール欄のurl
http://blog-imgs-144.fc2.com/t/u/t/tutti2021/20210903190737ac2s.png




管理画面、ファイルアップロードの画像

350.350の元ファイルの場合の
アップロード済み欄のファイル情報url
https://blog-imgs-144.fc2.com/t/u/t/tutti2021/202109031913134fe.png

環境設定〜プロフィール欄のurl
http://blog-imgs-144.fc2.com/t/u/t/tutti2021/202109031913134fes.png

KOZO
2021/09/03 (Fri) 20:42

成功しました、感謝です

追記 18:06のサンプル
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/hymn_user.html
これは素晴らしく綺麗です

ご教示の通り
<img src="https://blog-imgs-144.fc2.com/t/u/t/tutti2021/20210903174133865.png" alt="<%author_name>" style="image-rendering: -webkit-optimize-contrast; width: 120px; height: auto;" loading="lazy">

これをプロフィールの改造htmlに入れ換えますと
920.920サイズの元ファイルのロゴ画像が綺麗に出ました
350.350サイズの元ファイルでも綺麗に出ました

何がどうなって解決しているのかついて行けず、理解は全然ですが
見事に美しく画像が出て感動しました

時間をかけて文章を読み直して考えてみたいと思います
今回もご丁寧にご指導いただき、大変嬉しく感謝しております
また何かの際はよろしくお願いいたします



vanillaice (Akira)
vanillaice (Akira)
2021/09/04 (Sat) 13:20

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

こんにちは ('0')/
上手く行ったようで良かったです。
「プロフィール画像URLを指定し直す」というのが本来なんですが、今良い具合に表示できているのでこのままにしておいて良いと思います。
くれぐれも画像変更時には「連動しない」点を覚えておいてくださいね。
お疲れ様でした :)

-
2022/04/22 (Fri) 15:30

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/04/23 (Sat) 15:39

To Hymn フォントの件 内緒さん

こんにちは ('0')/
長くご利用頂きありがとうございます :)

CommonSenseとHymnの書体は欧文・和文共に同じです。

Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", YuGothic, Meiryo, "Yu Gothic", sans-serif

欧文は
mac --- Helvetica
win --- Arial
和文は
mac --- 第一 Hiragino Sans、第二 Hiragino Kaku Gothic ProN 第三 游ゴシック
win --- 第一 游ゴシック 第二 メイリオ

文字色の指定も同じで rgb(51,51,51) です。

異なる書体に見える原因は
・フォントサイズ
・フォントの濃さ(normal or bold)
・文字の間隔(letter spacing)
・背景とのコントラスト

に依ることが多いです。例えばCommonSenseのナビゲーションあたりを見て「好み」だと感じられたのであれば恐らく、「letter spacingとフォントサイズ」によるものです。
あるいはCommonSenseは2色構成で、クリーム系の全体背景色があり、記事部位には白系背景、となっており、Hymnの場合は白系1色で構成されています。色バランスによってフォントが違って見えることもあります(デザインというのはそういう全体観も大事です)

同じフォントである以上「内緒さんが何をもってして『違うフォントだ』と認識したか」がわからなければ対処のしようが無いのです。すみません (∵`)

どのテンプレートでもCommonSense感が出せない、ということなので、恐らくは「背景色など全体のカラーバランスによるもの」ではないかと思います。あとこれもたぶんですが「余白感」も影響していると思います。(Common〜はサイドメニューで余白を大きめにとっています)

-----
ブログタイトルの文字大きさ変更

/* ブログタイトル文字大きさ(スマホ) */



/* ブログタイトル文字大きさ(パソコン) */

で検索すると該当箇所が出てきます。それぞれ希望のフォントサイズに書き換えてください。よろしくお願いします。
カスタマイズが予想される内容については、スタイルシート内

注)主要カスタマイズ modification

にまとめられていますので、他にも該当項目が無いかチェックしてみてください。よろしくお願いします :)

-
2022/04/23 (Sat) 22:21

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/04/24 (Sun) 02:23

To ぽんずさん

ご納得頂けて安心しました。ちなみに私は自分で言うのもなんですが凡人ですよ ^^;

はい。また何かありましたらお気軽にどうぞ。お疲れ様でした :)

-
2022/07/05 (Tue) 08:05

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/07/05 (Tue) 18:23

To Hymnの件 内緒さん

こんにちは ('0')/
まずこういうときの対処法と「カスタマイズ」の概念について説明します。

デフォルトのテンプレートを入手し、そのhtmlやスタイルシートに一文字でも「追加」「削除」「変更」をしたらそれは「カスタマイズを行った」ことになります。それを念頭において

> 今度は何もカスタマイズしていないにも関わらず〜

こちらのブログではすでにgoogle広告など適用されていますので、「カスタマイズを行った」ということです。

【カスタマイズ前 (デフォルト)】
テンプレートのダウンロード

【カスタマイズにあたる作業】
広告, アクセス解析 など、テンプレートに含まれない内容の追加

なので、まずはまっさらな状態での表示を確認し、一つ内容を追加するごとに目視確認を行うようにしてください。例えばアドセンスのコードを記載して目視確認、アクセス解析を記載して目視確認、その他ユーザー独自要素を記載して目視確認、といった具合です。
そうすれば原因をすぐに特定することができます。

-----
まずAの方、こちらはお手数ですが再DLを行ってください。FC2によるページ送りのシステム変更が入っており、テンプレートが対応前の旧内容ですから変更を。DLしたら必ず初期確認を行ってください。
この時点で既に表示に悪影響が出ているようであれば、考えられるのはサイドメニュー部にある外部スクリプト(ブログ村ランキング表示)とのJS衝突が原因です。その場合は以下ページを参照し、対処を行ってください。

【参考記事】
FC2カウンターが表示されなくなる、アクセス解析の画像が出ない、などの不具合が生じた方へ
https://vanillaice000.blog.fc2.com/blog-entry-1015.html

初期状態で何も問題が無くともスクロールアンカーは削除しておいた方が良いように思いますので、カスタマイズ前に作業してくださいね。

-----
Bの方、こちらも同様にスクロールアンカーに対する削除作業を行ってみてください。ちなみにサムネイルが表示されていない原因は画像の遅延読み込みが正しく機能していないためです(JSが機能していない、ということです)

> 記事一覧でのサムネイルが表示されない〜

これは関連記事のことだと思いますので個人設定を開き、関連記事リストの項目が「テンプレート変数のみ」になっていないか、件数が「0」になっていないか、など確認してください。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2

-----
情報整理します。

A --- 再DL + スクロールアンカー除去 その後 カスタマイズ(各コードなど内容追加) → 目視確認
B --- スクロールアンカー除去 + 関連記事リストに関する個人設定を正しく → 目視確認

の各作業を行い、結果をお知らせください :)

-
2022/07/05 (Tue) 20:26

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/07/05 (Tue) 21:50

To Hymnの件 内緒さん②

お疲れ様です。

> 何年も前からこちらのテンプレートを〜

という一文から、これまでは問題がなかったという解釈ができるかと思います。そこで考えられるのは、独自ドメインに関するなにかです。
実際に403ステイタス(サーバーに対するユーザー側のアクセス権消失)が出ています。

・独自ドメインを取得した直後であるのか
・独自ドメインをこれまでも利用している場合、支払いが途切れてはいないか

こちらのご確認をお願いします。
テンプレート側の問題という可能性を排除するために、以下のテンプレートをお手数ですがDLして同じ状況かどうか見てもらえないでしょうか。公式テンプレートです。確認後に削除して頂いて構いません。

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

-
2022/07/05 (Tue) 22:48

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/07/05 (Tue) 23:38

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

そうだったんですね。解決してよかったです。
お疲れ様でした :)

-
2023/03/07 (Tue) 14:40

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/03/07 (Tue) 16:38

To グーグルアドセンスが表示されなくなった件 内緒さん

こんにちは ('0')/

一見したところ、FC2ブログ独自変数による整合性が保たれなくなっているようです。独自変数は一旦サーバーを経由すると第三者がソースコード確認をすることはできませんので指南が非常に困難です。

お手元にあるHymnの名称を Hymn1 などに変更し、DLページHymnを再DLしてください。その上で再度アドセンスコードを掲載してみてください。
やはり上手く行かないという場合にはコード掲載箇所のスクリーンショットを添えてその旨再度お知らせください。
また、テンプレートのカスタマイズをされる際は複製を取ってから行うようにしてくださいね。

-
2023/03/08 (Wed) 08:59

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/03/08 (Wed) 13:21

To Hymn アドセンスの件 内緒さん

こんにちは ('0')/

「表示されなくなった」とありますので、以前は(同テンプレートで)表示されていた、と解釈して間違いないでしょうか。ここは重要なので教えてください(NOの場合でかつ初めて掲載するという場合は審査中であることも考えられます)

あと知りたいのは、
・種類(自動 or 手動, 恐らく手動かと思います)
・ソースコードの状態
・本記事中に明記のある通りスクロールアンカーを外したか(外していないようです)

手動広告の場合は貼り付け位置を間違えると表示されませんので、『どこに』『どんな内容を』掲載したか、ミスは無いか等確認する必要がありますので、テンプレートHTMLの、コード掲載した場所の前後10行程度づつを含めた状態でスクリーンショットを取ってください。

> スクショの貼り付けはどこからすればいいか教えていただけますか?〜

ごめんなさい、この意味がよくわからないのですが、
・スクリーンショットの取り方がわからない?

【windows】
[Win]+[PrintScreen]キー
【mac】
[shift]+[command]+[3]キー

・掲載の仕方がわからない?

スクリーンショットをFC2ブログのファイルアップロードページからアップロードして取得したURLをコメント欄に記載してください

スクリーンショットを撮る前に、記事内のガイダンスに従ってスクロールアンカーを削除し、状態を確認してください(ヘッダー付近は関係しませんが念の為)
また、以下の記事を参照し、ご自身があてはまっていないかどうかの確認もお願いします。
外部参考記事: Googleアドセンス(AdSense)の自動広告が表示されない時の対処法は?
https://lolipop.jp/media/auto-ads-not-displayed/

あと、サイドメニューの「アンケート」ですが、コードが古くhttpリクエストになっているため表示されていません(混在コンテンツ)
ここは必ず修正を行ってください(新しいコードを取得、現時点でもhttpsでない場合は掲載をやめる)

-
2023/03/08 (Wed) 14:46

管理人のみ閲覧できます

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

-
2023/03/08 (Wed) 15:01

管理人のみ閲覧できます

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

-
2023/03/08 (Wed) 15:36

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/03/08 (Wed) 17:51

To Hymn アドセンスの件 内緒さん

まとめますと、「昨日まで表示されていた」ということですよね。先日「コードを貼り付けたり消したり」とコメントされていたので、何らかのカスタマイズを行ったためにコードが壊れた可能性を考えましたが、もしかするとアドセンスが表示されなくなったために色々やった、ということなんでしょうか。

これまで正常に表示されていたものが突然表示されなくなったという場合、原因は「提供元サーバーの不具合」「ポリシー違反」などです。
実際、検索に出たサイトと「全く同じ状態」とご自身が判断されていますのでポリシー違反の可能性は排除できません。
ただこの場合は「AdSenseサイト運営者向けポリシー違反レポート」というタイトルで通知が来ていると思います。
ポリシー違反の場合はテンプレートでどうにかできる問題ではありませんので、何が違反にあたるのかご自身で判断及び修正する他ありません。

ads.txtの設定については必須ではないはずですが、利用されるのなら「使用する」を選択しただけでなく、
google.com, pub-
から始まるご自身のIDを記す必要があります。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#advanced_setting

あと可能性は、内緒さんのページはまだ混在コンテンツの状態になっています。楽天のバナーなどがそれにあたります。
https以外のスキームは許可されませんので、テンプレートのデフォルト内容以外でhttpで始まるものを探して全部潰す必要があります。テンプレートには2つ3つhttpがありますが、これは正しいものなので書き換えないようにしてください。
ご自身で追加されたなにか(プラグイン含む)に原因があります。
楽天バナーは貼り替えてくださいね。ただこれまでも混在の状態だったはずなのでこれが原因とは言い切れません。

とりあえずads.txtを修正し、様子を見られてはいかがでしょうか。
「どちらを消すか」の問いについては、『何から』削除するのかわからないのでお答えのしようがありません (∵`)

ドメインペナルティがあるかどうか(FC2がペナルティを受けているか)どうかは私ではわかりません。この場合は独自ドメインを取得することで解消できるかとは思います。

いずれにしろ
・コードが正しい
・これまでは正常に表示されており、何もしていないのにある日突然表示されなくなった(このあたり初回質問時の内容と照らすと怪しいですが)

の条件が揃っているならばgoogleへ問い合わせるしかないと思います。

-
2023/03/09 (Thu) 11:42

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/03/09 (Thu) 15:44

To adsenseの件 内緒さん

こんにちは ('0')/
通知は来ているのですね。もうこれが答えです。
通知が3月2日ですよね。内緒さんが貼り直し作業を行ったのが3月6日なので、たまたま相手側(google)からの処分と内緒さんの作業のタイミングが一致してしまったのだろうと思います。なので「自分がコードを触ったせいでは」とお考えになったのでしょうね。たまたま合致しちゃったから ^^;

肝心な対策なんですが、既に相手が「あなたのサイトはアダルトだ」と断定して警告をしているのが事実です。ポリシー違反の通知は放置してはいけません。自身に心当たりが無いとしても相手は「違反だ」ともう決定づけているのですから、誤解ならばその誤解を解く努力をしなければいけませんし、心当たりがあるならば改善しなければいけません。そして『審査リクエスト』を行います。
心当たりが無いからといって放置はダメ。
とにかくまずはそのままの状態で(何もせずに)「審査リクエスト」を行ってみてください(案外これで解消される可能性もありますよ)

審査リクエストで上手く行かなかったとして。
私からの回答は、参考にされたページの回答者『greenpotさん』と同じです。
googleはどうやら『fc2.com』ドメイン全体が『アダルト』と判断しているようです。「PC関係に疎い」ということなので一応説明すると、内緒さんのブログアドレスは
https://ユーザー名.blog.fc2.com/
で、太字の部位がドメインです。このドメインは全ユーザー共通です(fc2.net という新規ドメインもありますが)
googleはドメイン単位で判断していますので、このドメインを捨てるか、例え同じドメインだとしても「私はアダルトではないのです」と説得するか。(こちらは困難かと思います)

・無料でも独自ドメインを取得できるサービスに引っ越して再審査、国内では『blogger』のみです。
・FC2ブログで独自ドメインを取得する

最終的な対処としてこのどちらかです。
その前に、参考ページの質問者さんが既にgoogleと連絡を取っており、結果的に「FC2ブログで独自ドメインを取得した」ということです。
回答者の中の『ni kkiさん』という方が「この問題をアドセンス社員に報告して回答待ち、結果分かり次第追記します」と言ってくれているので、もしこれが上手くいって誤解が解ける方法があるのであれば、内緒さんにも『説得』という道が開けます。逆に「ダメでした」となれば独自ドメインを取得するしかないでしょうね。

本件については私からできることは皆無なのでお役に立てずすみません。結果だけ教えて頂けると今後の参考になりますので、お手数でなければお願いします。

-----
混在コンテンツについては昨日見たところサイドメニューの『オススメ』の画像がhttpだったんですが、今は解消されています。

-
2023/03/09 (Thu) 16:38

管理人のみ閲覧できます

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

-
2023/04/01 (Sat) 00:53

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/04/02 (Sun) 22:10

To adsenseの件 内緒さん

こんばんは ('0')/
お知らせありがとうございます。
良かったですね。安心しました ^^;

想像ですが、チェックはロボット巡回で行うため一定のアルゴリズムに従っていて、申立が来た場合はスタッフがチェックする、という感じなんだろうと思います。なので「FC2ドメインである」という条件づけでbotが判断してしまうことが多々あるんでしょうね (´・ω・`)

FC2の公式ページにも案内が出てますね。
https://fc2information.blog.fc2.com/blog-entry-2256.html

今後また同じことが起こらない保証はないわけなので、googleやfc2の返答としては「独自ドメインを取ってくれ」がやはり最適解ですね。fc2が言う「.netドメインへの変更」は結局同じ轍を踏むのが目に見えてるのでおすすめしません ^^;
いずれにしろ今回は免れたということで、お疲れ様でした :)

-
2023/04/04 (Tue) 16:38

管理人のみ閲覧できます

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

-
2023/04/04 (Tue) 17:00

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/04/11 (Tue) 19:09

To Hymn バリューコマースの件 内緒さん

お返事大変遅くなってごめんなさい。
自己解決というこで良かったでしょうか。お疲れ様でした :)

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