Bron-Broen - FC2ブログテンプレート

Bron-Broenテンプレート

Bron-Broenテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Bron-Broen
ぶろん ぼぉえん
動作確認ブラウザ
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 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.15 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.20
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 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("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("prev-cate-a");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("next-cate-a");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要素を利用する方向け)
【重要】テンプレートの変更点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内に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 { で検索するとスタイルシート内に1箇所ありますので text-decoration: none; の直下に padding: var(--navi-height) 0 20px;追加

③について

<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 {
  margin: 1.9em 0;
}

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

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

最終更新 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.21
  • サイドメニュー部input要素のCSS変更
  • Google Adsense用レイアウト調整CSS追加

不具合修正ではありませんので旧バージョンのままお使い頂けます。adsenseをメインコンテンツ側に掲載される方は少し楽できるかと思いますので再DLをご検討ください(adsense掲載方法の指南は行いません)

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

ぶろん ぼぉえん

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

お受けできないご質問・ご相談

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'●)/

素姓乱雑
2018/09/22 (Sat) 08:17

右クリックを禁止にしたいのですが

いつもありがとうございます。標記の件でご指導願います。
<script>
$(function(){
$('body').on('contextmenu',function(e){
return false;
});
});
</script>
を</body>の前に入れたのですが構文が違っているのか、または、場所が違っているのか
機能しません。ご指導いただけたらありがたいのですが。

vanillaice (Akira)
Akira
2018/09/23 (Sun) 00:18

To 素姓乱雑さん

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

jQueryとしての構文は合ってますよ。場所は確認のしようがありませんのでわかりません。
Bron-Broenについては仕様表に明記のあるとおりjQueryは未導入ですからVanilla JSを利用するかjQueryを導入してください。

ご質問の前に「テンプレあるある」
https://vanillaice000.blog.fc2.com/blog-entry-220.html#right-click

下のコード(Vanilla JS)の方をご利用になる場合は</body>の直前に記載してください。
よろしくお願いします。

素姓乱雑
2018/09/23 (Sun) 03:20

ありがとうございます。
それと過去記事を読んでいて誤りに気付いても
管理画面に戻るボタンがありません。
どこかに有れば有難いのですが。

靉霧(あいむ)
2018/09/23 (Sun) 07:29

To 素姓乱雑さん

私にわかるご質問なので、横から失礼いたします<(_ _)>

各記事の個別ページからその記事の編集画面へのボタンは、
「関連記事」枠と「COMMENTS」欄の間にある、「プロフィール画像 + Posted by お名前」の「プロフィール画像」です。
(画像にポインタを重ねると、画面の隅にリンク先urlが表示されます)

私が拝借している[Bullet]にも同様の工夫がされています。
一見わかりにくいですが、読者が誤ってクリックする心配が減りますし、デザイン的にもおしゃれですし、
個人的には隠し扉みたいな遊び心を勝手に感じて楽しいですし(Akira様、すみません^ ^;)、ステキな工夫だと思います。

素姓様もきっとお気に召されると思い、横から失礼してしまいました。あしからず。

素姓乱雑
2018/09/23 (Sun) 11:30

靉霧(あいむ)さまありがとうございます。

靉霧(あいむ)さま、素敵な仕掛けですね、今まで気が付きませんでした。ありがとうございます。
Akira さまのテンプレートは緻密で驚くばかりです。
靉霧(あいむ)さま、ありがとうございます。使う楽しみがまた一つ増えました。
しかしAkira さまは不思議な方ですね。こちらが望む仕様のテンプレートを
知っていらっしゃるのですから。新作が出るたびわくわくします。

vanillaice (Akira)
Akira
2018/09/24 (Mon) 17:19

To 靉霧さん・素姓乱雑さん

こんにちは。時間が取れなかったので大変助かりました。靉霧さん、ご協力感謝します。
お二人ともありがとうございます :)

-
2018/09/30 (Sun) 16:53

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/30 (Sun) 19:18

To Bron-Broen諸々の件 内緒さん

こんばんは ('0')/

① ブログカード
② marquee
の2点の前にいくつか確認させてくださいね。

-------
【スライダーの横サイズ】
こちらは意図的に小さく設定されたのでしょうか。恐らくそうだと思いますが念の為確認です。
意図的であれば特に問題ありません。

-------
【 ブログカードジャンプ JS】
このJSはjQueryの記述ですがBron-BroenにはjQueryファイルが含まれませんので機能しません(JSエラー)
jQueryファイルを導入するか、ネイティブ(Vanilla JS)に書き直すなどの処置をお願いします。
(jQueryファイルを導入することで初回ページ表示スピードが若干低下します。二度目以降はキャッシュが効きますので気にならないはずです)
ただこのJSのためだけにjQueryを導入してスペックを落とすのはもったいない気がします。

-------
ここから本題。

まずluminousのJS内容をhtmlに記載する際、htmlではなくCSS用のコメントアウトを用いています。

×
/***------------------------------------------
Luminous
------------------------------------------***/


<!-- Luminous -->

コメントアウトはhtml, CSS, JSそれぞれ書き方が違いますので正しく用いるようにしてください。
参考記事: ソースの不要部分をコメント化する
https://vanillaice000.blog.fc2.com/blog-entry-383.html

-------
×
<a class="luminous"href=""

<a class="luminous" href=""

クラス属性とhref属性の間のスペースが欠如していますので修正してください。

-------
alt属性抜け(html構文エラー)

×
<img src="" style="width: 450px;" xxxxマルハル〜" border="0">

<img src="" style="width: 450px;" alt="xxxxマルハルコウソウ">

------
ダブルクォーテーション欠損(構文エラー)

×
<img src="" style="width: 300px; alt="xxxxスープ" border="0">

<img src="" style="width: 300px;" alt="xxxxスープ">

他にも画像の記述内容にエラーがあるようなので一度精査してみてください。
正しい書き方は

<img src="" style="" alt="">
です。クラスを付けるならば
<img class="" src="" style="" alt="">
属性の順序は入れ替わっても問題ありませんが、属性間の半角スペースと、一番大事なのはダブルクォーテーション( " )の位置や数が正しいかどうかです。

------
現時点で記事内容の構文エラーが多いため問題を特定するのが困難な状況です。
まず綺麗に修正されまして、再度状況を確認したいと思います。
よろしくお願いします。

----- 追記
恐らく修正箇所を見つけるのに苦労されると思いますので、やっつけですがブックマークレット用のJSを載せておきます。

javascript:var u='https://validator.w3.org/nu/?showsource=yes&doc=';var h=encodeURIComponent(window.location.href);var w=window.open(u+h,'_blank','width=800,height=500');void(0);

上記内容をブラウザブックマークバーのお気に入りに登録し、検証したいページ(個別記事)でクリック。
別窓でW3C validationの結果が表示されるはずです。

-
2018/09/30 (Sun) 23:05

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/10/01 (Mon) 16:33

To Bron-Broen諸々の件 内緒さん②

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

昨日書き忘れてしまったのですが、
・ブログカードが掲載されているページ
・marqueeが掲載されているページ
にダイレクトに飛べるURLをください。
私が1ページづつ開いて探すというわけにはいきませんので、直接飛べるようアドレスの提示をお願いします。

------
あと、最近稀に発生する(でもない。結構ある)のですが、実際のhtml内容とDLページの内容が違うようです。
今念の為上書きして正しい内容でDLできることを確認しましたので差し支えがなければ再DLをお願いします。
ただ今回の件と関わりはないはずです。お手数おかけします。

------
> background-size: auto 60%;としました〜

こちらについてはご本人がこれで良ければ良いのですが、本来は#list-slider divのbackground-sizeで行うのではなく、#list-sliderのwidthで調整される方が良いのではないかと思います。
とりあえずここはお任せします。

------
> ネイティブ(Vanilla JS)に書き直す方法がわかりません〜

その場合はjQueryを導入してください。
該当JS内容のすぐ上に
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
を追加。
該当JS内容については私が提供したものはありませんので自己責任・自己管理でお願いします。
カード全体をaタグで囲うことで全体リンクにする目的のように思いますが、本来2つあるリンクのうち一つ(引用元の代表ページへのリンク)が潰れてしまう点は理解した上でお使いください(あまり好ましくありません)

-------
再DL → htmlにluminous内容追加 → htmlにブログカード用JS追加(jQueryファイルを忘れずに) → CSSにブログカード・marquee・luminous内容追加
の手順でお願いします。

-
2018/10/02 (Tue) 13:43

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/10/02 (Tue) 16:30

To Bron-Broen諸々の件 内緒さん③

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

まずhtml内luminousですが、このコメントアウトはダメですよ ↓

<!------------------↩
Luminous↩
--------------------------->

先日コメントアウトについての参考記事を掲載しましたが、その記事内にある通りの記述を行い、アレンジは避けてください。正しいコメントアウトはこうです ↓

<!-- Luminous -->

htmlは
<!-- コメント内容 -->
CSSは
/* コメント内容 */
JSは
// コメント内容
または
<!-- コメント内容 -->

これはルールですから守るようにしてください。
htmlコメントアウト内での2つ以上のハイフン連続はエラーです。
コメントというのは何かの「目印」に使うものではなく、何かの「説明」に使うものですから、目立たせるためだけに記号を連続させないように注意してください。
テンプレートデフォルトCSS内などは製作者が敢えて目印的にイレギュラーな書き方を行っていますが、それはみなさんのカスタマイズの利便性を考慮しているからで、コメントアウトのルール・特性を理解した上でのことです。
ユーザーさんが自身でコメントを付ける際にはオーソドックスな書き方をするようにしてくださいね。

luminousは内緒さんのブログ内でかろうじて動いてはいますが、本来はもっと滑らかに展開されるはずです。

あと、luminousのCSSファイルが記載されていません。
https://vanillaice000.blog.fc2.com/blog-entry-742.html
上記ページ内容をよく読まれましてhtmlソースにCSSファイルのlinkを追加してください。
その上で、luminous展開後にスライダーと重なり、スライダー画像が上位(重なり順)になってしまいますのでCSSに

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

を追加してください。

------
> ブログカードも表示されました。とくにJSファイルを導入しなくてもOKでした。〜

JSファイルはブログカードを全体リンクにするために入れていたと思いますので、JSを取り除けば当然その動作が不能になりますが大丈夫でしょうか。
ここはお任せします。

------
> 画像の高さが元のままなのですが、どこのheightを調整すれば良いでしょうか?〜

#list-slider {
で検索するとCSS内に3箇所あります、その3箇所それぞれに height の項目がありますのでブラウザの横幅を変更して確認しながら適切と思われる数値に変更してください。

最初のheightがスマホでの高さ、2番目(min-width: 768px)がタブレットサイズの高さ、3番目(min-width: 920px)がパソコンでの高さです。

------
あとまだimg要素の「No space between attributes(属性間スペース欠如)」が点在していますのでお時間の許す時に修正をされると良いですね。

はんのすず
2018/10/03 (Wed) 23:00

すっかりお世話になりありがとうございました。

”W3C validationのブックマークレット用JS”を作っていただいたり、luminousのcssファイルリンクが抜けているのを指摘していただいたり、それからW3C validationのエラーについての詳しい解説記事もとても役立ちました。
初心者は、”全文表示タイプより要約タイプのテンプレートがオススメ”なのも、良くわかりました。でもAkira先生のおかげでここまでミスを修正できたので、しばしこちらのテンプレートを楽しんで(記事アップの際にはバリデートをかけて これは、ずっとですよね)要約タイプのGreetingsに変更しようと思います。
本当にありがとうございました。 

vanillaice (Akira)
Akira
2018/10/04 (Thu) 00:46

To はんのすずさん(終了のご報告)

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

まだluminousのCSSファイルが記載されていないようですので修正作業前でしょうかね。
CSSファイルを入れないとオーバーレイが出ない・アニメーションが付かないといった状態になりますので忘れずに追加してくださいね。
お疲れ様でした ('0')/

------ 追記
ごめんなさい。luminousのCSSは個別記事に限定されたんですね。
luminous自体がトップページでも起動する設定になっていますので方針を揃えた方が良いと思います。
個別記事に限定するならばluminous CSS及びluminous JSを
<!--permanent_area-->

<!--/permanent_area-->
で挟んでください。
トップページでも利用するならば上記の独自変数は不要です。
現在はCSSだけが独自変数で挟まれています。挟むなら両方挟む(トップページでは起動せず個別記事のみで動作)、挟まないなら挟まない(トップ・個別記事双方で動作)よう揃えましょう。
(個人的にはトップで起動させる必要は無いと思います)

はんのすず
2018/10/08 (Mon) 17:07

"利用上のお願い"の記事を読みました。

”最後のボール”の、<!--permanent_area--> と <!--/permanent_area-->で、luminous CSS及びluminous JSを挟むか挟まないかについて、まだご報告していなかったと思いだして、遅くなってしまいましたが、報告させていただきます。
両方とも、挟みました。トップページでは起動せず、read more をクリック後に起動するようにしました。
先生の最終コメント後の返信が遅れて、申し訳ございませんでした。気が緩んでしまってました。
これからも、よろしくお願いします。



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

To はんのすずさん(完了のご報告)

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

ご報告ありがとうございます。伝わっていたようで安心しました。
お疲れ様でした :)

-
2018/11/02 (Fri) 17:05

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/03 (Sat) 16:24

To Bron-Broen背景色反転の件 内緒さん

ご無沙汰しております。ありがとうございます ('0')/

文字色の変更は
/* 注)基本文字色 */
で検索すると出てきますのでカラーコードの
rgb(51,51,51)

white
に変更。

背景色は
-webkit-tap-highlight-color: rgba(0,0,0,0);
で検索すると1箇所ありますのでその直下に以下を追加
background: black;

もちろんblackではなく rgb(30,30,30) など一段落とした色指定でもOKです。
よろしくお願いします。

ナニワの激オコおばちゃん
2018/12/21 (Fri) 15:26

Akiraさん、とっても素敵なテンプレートに出会い、ど素人なのに大胆にも写真まで差し替えて、使わせてもらっています。
初日にfc2のアクセスが突然下がったので調べたら、
<!-- アクセス解析はここから -->
<!-- ここの間 -->
の間に貼り付けることがわかり、これで解決しました。
ところがその後、Google Adsenseも入れていたことに気付き、チェックしたら、貼り付けるべきコードはちゃんと引き継がれていました。
これです。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-4674618112368865",
enable_page_level_ads: true
});
</script>
これは自分で入れてはいないので、自動で入るんですね?
そしたらしばらくして、トップページの
HOME INDEX ABOUT RSS LOG IN SEARCH
が広告で隠れてしまい、しかも広告も下半分がちょん切れてしまいました。
INDEX はめっちゃ嬉しくて、手を叩いて喜んだのに。
これはグーグルさんのせいなんでしょうかね?
アドセンスはけっこう勝手に自動で広告を張り替えるので、そのうち正常に表示されるのかな?と思っています。
ホンマにど素人で申し訳ありません。
ご教示のほど、よろしくお願いいたします。

ナニワの激オコおばちゃん
2018/12/21 (Fri) 15:52

Akiraさま
一からやりなおしたのですが、やはりちょん切れた広告が入ってきました。
アドセンスが何か言ってくるまで待ってみます。
お騒がせしました。

vanillaice (Akira)
Akira
2018/12/21 (Fri) 19:20

To ナニワの激オコおばちゃんさん

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

> 初日にfc2のアクセスが突然下がったので調べたら〜

Bron-Broenはレスポンシブテンプレートですがナニワさん(略称で失礼します)はレスポンシブ設定をされていませんのでスマートフォンではFC2ブログのデフォルトスマホ専用テンプレートで表示されます。
確認したところそちらにはアクセス解析が記載されていませんのでスマホからのアクセスは一切でデータに出てこないですよ。
スマホ版のテンプレートにもアクセス解析を設置するか、せっかくレスポンシブテンプレートをお使いになるのですから記事内にある通り「スマホ版非表示設定」(レスポンシブ設定)を済ませて統一されてはいかがでしょうか。
パソコンとスマホのテンプレートが統一されますので取りこぼしが起こりません。またURLも統一されますので(スマホ版のURLは末尾に?spが付きます)のでサイト評価も分散されなくなりますし、広告やアクセス解析などの設置作業も一度で済みます。

------
> Google Adsense〜これは自分で入れてはいないので、自動で入るんですね?〜

FC2の強制広告以外の広告が勝手に追加されるというのは有りえません。Bron-Broenの
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
の直下にご自身でadsenseコードを記載されているはずなのでご確認ください。そしてadsenseは表示させたい位置に入れるのであってhead内に記載するものではありません。

レスポンシブテンプレートですから「レスポンシブタイプ」のものを「表示させたい位置」に記載するようにしてください。よろしくお願いします。
(掲載位置に迷うようでしたらその旨ご連絡ください。たぶんヘッダー下に入れたいのかな?とは思っています。その場合には <!-- ヘッダーここまで --> の直下か <div id="main-container"> のすぐ上になるかと思います)

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

ナニワの激オコおばちゃん
2018/12/21 (Fri) 23:02

Akiraさん、迅速なご返信ありがとうございます!
レスポンシブ設定のことも知りませんでしたが、やってみたらスマホ画面がめっちゃカッコ良くなりました!
そして、Adsenseの方は、どうも自分で入れてたみたいでした(恥)。
今、「自動広告」というのと、「AMP自動広告」というのがあるみたいで、ちょっと格闘中です(笑)。
またわからないことが出て来ましたら、よろしくお願いします。
取り急ぎ、御礼申し上げます。

ナニワの激オコおばちゃん
2018/12/21 (Fri) 23:46

Akiraさん、遅い時間に申し訳ありません。
ご都合のよろしい時にご返答賜ればありがたいです。

「自動広告」で指定された
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-4674618112368865",
enable_page_level_ads: true
});
</script>
を、ご教示いただいた <!-- ヘッダーここまで --> の直下及び <div id="main-container">のどちらに入れてもやはり同じようにトップページの広告の下半分が切れてしまいました。
で、試しにプラグインに、A8用に作成してあったところに上のコードを入れたところ、「広告」のところだけでなくやはりトップページに切れた状態で表示されました。
現在、A8の広告は「DearMob iPhoneマネージャー」の広告のみ張り付けています。
このAdsenseのコードはかなり強力なんでしょうかね?
「自動広告」にするとこうなってしまうのかも知れませんね。
すみません、本来はAdsenseに聞くべきことですよね。
ご助言賜れば有難いです。よろしくお願いします。

vanillaice (Akira)
Akira
2018/12/22 (Sat) 00:16

To ナニワの激オコおばちゃんさん

お疲れ様です。自動広告を少し調べてみました。
貼り付け位置は </head> の直前が良いようですね。ただこの方式は自動で掲載位置を判定しているようで、今選ばれているのが「ナビゲーションの中」という状態です。
何故そんなところを選ぶのか全くもって意味がわかりませんが、ともかく「自動」なのですからどうしようもありません。

ユーザーの自由配置ではありませんので、掲載位置に困っている方が多いようです。
参考: グーグルアドセンス「自動広告」設定方法と使ってわかった課題 - 厳風 様
https://gen-fu.com/googleadsense-jido/11153/

対処法としては自動広告をやめて任意の箇所に記載できるものを選ぶしかないのではないかと思います。

---- 追記
と思いましたが今リロードを何度か繰り返したところ、良い感じに表示されてませんでしょうか。
ばらつきがあるようならちょっと考えものですが、とりあえずコードを</head>直前に記載して様子を見て再度ご報告頂けると助かります。
あとついでですがページ最上部に固定されている「FC2検索バー」はFC2の広告で非表示可能ですから非表示をおすすめします。

https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

* 現在既存テンプレートの修正作業中なのでテンプレートがコロコロ変わり、コメントを探しにくくなるかもしれません。ごめんなさいね。

ナニワの激オコおばちゃん
2018/12/22 (Sat) 08:04

Akiraさん、おはようございます。
早速、</head> の直前に入れたら、収まりました!
ありがとうございます!
厳風さんの記事も読ませていただきました。
私は、アドセンスはまだ1か月たったところだったんですが、この「自動広告」はまだ新しいものだったんですね。
とりあえず様子を見てみます。
たしかに強引な感じはしますが、また変わっていくのかも知れませんね。
あと、「FC2検索バー」も気になっていたんです(笑)。非表示にしました。
お仕事中、すみませんでした。
今後ともよろしくお願いいたします!

vanillaice (Akira)
Akira
2018/12/22 (Sat) 15:27

To ナニワの激オコおばちゃんさん

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

またナビゲーションの中に無理やり押し込まれるようなことが無ければ良いのですが(笑)
今の所は塩梅よく表示されているようなので様子を見てくださいね。
お疲れ様でした :)

素姓乱雑
2018/12/22 (Sat) 20:37

Error: Duplicate ID inline-user.の件

https://usodamari.blog.fc2.com/blog-entry-45.htmlをNu Html Checkerで確認していましたら
Error: Duplicate ID inline-user.と出てきました。対処方保を教えていただけないでしょうか。

vanillaice (Akira)
Akira
2018/12/22 (Sat) 20:51

To 素姓乱雑さん

こんばんは。

右クリックを禁止されていますのでこちらからは指摘できません。
デフォルトテンプレートではその指摘は出ませんので再DLされてはいかがでしょうか。

素姓乱雑
2018/12/22 (Sat) 21:04

申し訳ございません。調べていて右クリックの解除が遅れました。
https://usodamari.blog.fc2.comで調べてみると大丈夫ですが、
個別記事で調べるとすべて出るようです。
私の設定が間違っているのかもしれません

vanillaice (Akira)
Akira
2018/12/22 (Sat) 21:09

To 素姓乱雑さん

たぶんですが、一時期公式ページからDLしたテンプレートの内容がちょっとおかしい時があったんですよね (´・ω・`)
何故かアップした内容と違う内容になっていたり。JSファイルが消えていたり、など。
これはFC2のサーバーの問題で私のテンプレートだけでは無いと思うんですが、それにBron-Broenもひっかかっていたかもしれません。
Behaviorのファイルがおかしいのは気づいてましたがこれもそうだったかな、というかそうだったんでしょうね。きっと ^^;

で、該当の部位は非常に繊細な部分で説明も難しいものですから、できれば再DLが一番良いと思います。
ちなみに今日、というか今(笑)、若干の変更を加えて上書き登録したところなので、差支えがなければ再DLをお願いします。

----
別件ですが「OGP設定」をONにしないと個別記事下のページ送りのサムネイルが出ません。JSエラーになりますのでサムネイルが不要であればJSの削除を行ってください。
OGP設定はSNSシェアで重要視されますのでシェアを許可されているのであれば是非ONにしてくださいね。

削除する場合には
<script>document.addEventListener
で検索するとhtmlの後方に1箇所あります。上記文字列のすぐ上にある
<!--permanent_area-->
から
<!--/permanent_area-->
までを削除です。

素姓乱雑
2018/12/22 (Sat) 21:16

2~3日ご返事が遅れるかもしれませんが
再DLに挑戦してみます
ありがとうございました

素姓乱雑
2018/12/22 (Sat) 21:22

追加のご返事があったのですね。
ただ今「OGP設定」をONにしました

vanillaice (Akira)
Akira
2018/12/22 (Sat) 21:24

To 素姓乱雑さん

んー。ONになっていないと思います(笑)
FC2ブログの設定は一度で切り替わらないことがあるようなので(私は経験したことはありませんが)、何度かやってみてください。
サムネイルが表示されていなければOFFだということです。

再DLの方はカスタマイズも済ませていらっしゃるのに面倒で申し訳ないです。
よろしくお願いします。

素姓乱雑
2018/12/22 (Sat) 21:47

申し訳ありませんが教えてください
「OGP設定」をONにすると個別記事のページ送り部分
だけにサムネイルが表示されるのですね
表示を調べたうえでご報告したつもりなのですが、
確認されてないとなるとおかしいですね
他に表示される部分があるとすれば調べたいと思います

vanillaice (Akira)
Akira
2018/12/22 (Sat) 22:20

To 素姓乱雑さん

今ちゃんと出てますね。設定できてます。
お疲れ様です :)

素姓乱雑
2018/12/22 (Sat) 22:44

Error: Duplicate ID inline-user.の件

Error: Duplicate ID inline-user.の件ですが、再DLしましたところ
大丈夫なようです。ありがとうございました。完了のお知らせです。

vanillaice (Akira)
Akira
2018/12/22 (Sat) 23:11

To 素姓乱雑さん(完了のご報告)

良かったですー。お手数おかけしました。
お疲れ様でした :)

ナニワの激オコおばちゃん
2018/12/23 (Sun) 13:46

こんにちは。
アドセンスさん、また暴れまくっているようです(笑)。
PCはちゃんと表示されているようなのですが、スマホではまた、タイトル下に食い込んできています。
たぶんグーグル側でまた修正してくることと思われますので、放っておくことにします。

vanillaice (Akira)
Akira
2018/12/23 (Sun) 16:44

To ナニワの激オコおばちゃんさん

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

やっぱダメですかー (´・ω・`)
通常のものに切り替えた方が良いかもしれませんね。
ナビゲーションはstickyといって画面上部に固定されます。adsenseは固定表示不可のはずなので規約に抵触するのではないかと。って、Googleが勝手にやってるのになんだかなぁ、って感じだけど。

ナニワの激オコおばちゃん
2018/12/24 (Mon) 19:54

Akiraさん、今日はPCの方はナビゲーション周りからは消えているようです。
スマホはちょん切れたままです(笑)。
ホンマに暴れまくっている感じですね。
ところで実は、今のサイトの次は「まとめサイト」にチャレンジしたいと思っています。
fc2で構築することは可能でしょうか?
少し堅い目の、保守系のサイトです。
今、攻撃に遭ってしまって、広告をはがされてしまっている「保守速報」のイメージです。
http://hosyusokuhou.jp/
↑これです。
もし、ご質問がお門違いでしたらおっしゃってくださいね。
よろしくお願いします。

vanillaice (Akira)
Akira
2018/12/24 (Mon) 21:23

To ナニワの激オコおばちゃんさん

こんばんは。

まとめサイトやバイラルには肯定的な意見を持っていませんので何も言えないです (´・ω・`)
ごめんなさいね。

ナニワの激オコおばちゃん
2018/12/24 (Mon) 23:41

Akiraさん、早速のご返信ありがとうございます!
そうなんですね。
わかりました。
「まとめサイト」がオリジナルかどうかは意見の分かれるところですね。
ありがとうございました。
まだどうするかは決めていませんが、慎重に考えることにします。

vanillaice (Akira)
Akira
2018/12/25 (Tue) 03:52

To ナニワの激オコおばちゃんさん

はい。お役に立てずすみません (´・ェ・`)

-
2019/02/03 (Sun) 20:18

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/02/04 (Mon) 21:30

To Bron-Broen背景色の件 内緒さん(完了のご報告)

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

ご報告ありがとうございます。
いえいえ。ご利用頂いて光栄です。ありがとうございます :)

Orca
2019/05/10 (Fri) 15:10

更新日と公開日について

はじめまして。
10数年ぶりにデザイン変更を考えてテンプレートを探していたところ、非常に素敵なこちらのテンプレートを見つけ使用させて頂いております。本当にありがとうございます。

質問ですが、こちらのテンプレートはブログ記事の公開日と更新日が表示される仕様になっているのが気に入っている点のひとつなのですが、記事をリライトし最新日付にしなおしてFC2で更新するとブログ上の公開日も一緒に最新更新日に日付が変更されてしまいます。
公開日は最初の投稿日として残しておいて、リライトした最新の更新日だけを「更新」欄に表示させるためにはどのようにしたら良いのでしょうか?
全くの素人なので質問の仕方も分かりにくく大変に申し訳ありません。
よろしくお願い致します。

vanillaice (Akira)
Akira
2019/05/10 (Fri) 16:10

To Orcaさん

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

> ブログ上の公開日も一緒に最新更新日に日付が変更されてしまいます。〜

結論から言うと「できません」
まずリライト時に投稿日時を「変更する」理由・意味と目的を明確にしたいと思います。ここからは私の推測です。

記事の並びと日時には2つの主眼があります。
・RSS
・SEO

FC2ブログでの「記事の並び順」に関連するのはRSSの方です。

---
【日時を操作する目的】(推測)
「SEO的な問題, 検索結果には最終更新日で掲載してほしい」

Googleが「公開日」「最終更新日」どちらを検索結果に掲載するかはGoogleが決めています。
ただこのテンプレートに限らず私の制作テンプレートでは公開日をdiv要素、更新日をtime要素でマークアップしています。
time要素はdiv要素と比べより重要な意味を持ちますので、インデックス済み記事でも再クロールが行われた際にはtime要素の方(つまり更新日の方)を重要視する「だろう」という理論です。
Googleはアルゴリズムを公開しませんのでSEOは理論で行うしかありません。
SEO面を目的としている場合、日時操作は不要です。

---
「RSSの問題, 書き直したのだから閲覧者の目に触れるようにしたい(つまりbump, age)」

FC2ブログでは(というか他サービスでも同じだと思いますが)、記事の並びを操作するには公開日の操作を行うしかありません。編集日時の操作項目もありません。
仮に「最終更新(編集日)が新しい記事順」という並びが採用されれば、たった一文字の誤字を訂正しただけでも最新記事に上がってきてしまいますので現実的ではありません。
そして原則日付の操作はするべきではありません。サイトマップ・RSSのdate項目の整合性が失われますのでスクレイピングされた時にオリジナル証明が叶わないなどの弊害が生じます(URLで証明することはできますがこれはFC2の仕様に頼る独自証明方法です)

-----
できないのが何故か、という理由と仕組みを説明しました。
お役に立てずごめんなさいね。

-----
余談です。
SSL対策は今のうちから進めた方が良いですよ。FC2ブログの強制SSLが執行された時に泣くか笑うかはOrcaさん次第です。今年の夏頃には来るんじゃないか、と思っています。
外部サーバーへの直リンク画像やファイルなどが少なければ大した手間では無いと思います。

wasabi
2019/05/10 (Fri) 16:39

横から失礼します。

はじめてのコメントです。Bron-broenを愛用させていただいているwasabiと申します。
公開日の変更のことをいつか聞きたいと思っていたことろコメントを読まさせていただいて参考になりなりました!
じつは前に他の人に説明聞いてもしっくりこなく、今回溜飲が下がった思いです。

Akiraさんのテンプレートの説明にSEO対策済といれたらいかがでしょうか?前にインドから見たらAkiraさんのブログだけ快速で驚きました。(これもseoと言えるのでは?)他の人のテンプレートはバリデーション(?)すると赤い字が出るのにAkiraさんのテンプレートは出ませんし・・・使いやすい工夫も多くて本当に驚かされます。

余計なことでしたらすみません・・・

vanillaice (Akira)
Akira
2019/05/10 (Fri) 16:59

To wasabiさん

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

個人的に「SEO」というのは例えば「見出しにキーワードが入っているか」「わかりやすく書かれているか」など、「記事の書き方」に依るものが大きいと思っています。テンプレートでできることは「正確性」とあとはhead内の基本情報の「整合性」ぐらいかなぁ、と思います。

バリデートでエラーを出さないというのは当たり前のことですし、ユーザーがSEOをやろうと思った時にテンプレートがinvalidではお話にならないので土台というか基礎の部分ですよね。スピードにしても同様。

テンプレートは基礎であってSEOそのものにはなり得ないと思いますので「SEO対策済みテンプレート」という謳い文句を見ると首をひねりたくなります(笑)
真のSEOを行うのはテンプレートではなくユーザー自身です。私としては土台を綺麗に整えておくだけ、という感じ。
あくまでも個人的意見です。

-
2019/05/10 (Fri) 17:13

管理人のみ閲覧できます

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

Orca
2019/05/11 (Sat) 01:14

Akiraさん、早速の返信ありがとうございます!
私が完全に勘違いしておりました!
更新したら日時を変えずにそのまま更新ボタンというか公開すれば良いのですね!目から鱗です。というか試さずにコメント投稿してしまい返信に時間を使ってもらう結果となり大変申し訳ありませんm(._.)m

投稿日時を変えなくても更新日は認識されて最終更新日が反映される仕様になっているんですね。本当に申し訳ありません。

私は基本的なことを理解しておりませんでした。SEO的な部分は特に考えずに更新したから新しい日時にするためにはFC2上の投稿日をかえるものだとばかり(TT)

AKIraさんのテンプレートにする前には記事冒頭に手打ちで一々記述しておりました。

Akiraさんにとっては、素人とはこんな考えで操作してしまうのか!という驚きかと思いますが、素人の思考をご提供させて頂いたとの大きな心でお許し頂ければと思います。

SSL対応に関してもアドバイスありがとうございます。ブログ内の手動リンクをどうしよう!という悩みがあったのですが、早めの対応を考えようと思います。

貴重なお時間を使っての回答ありがとうございました!

vanillaice (Akira)
Akira
2019/05/11 (Sat) 15:49

To Orcaさん(終了のご報告)

こんにちは。

そういうことだったんですね。
はい。更新日は自動取得ですから手作業や操作は不要です。
お疲れ様でした :)

Orca
2019/05/14 (Tue) 09:23

Chromeでの崩れについて

いつも大変にお世話になっております。
昨日SSL化実行致しました。

SSL化と関係があるかどうかは不明ですが一部エントリーアドレスにてChromeで見るとデザインが崩れてしまう現象が起きております。

例えば以下のアドレス
https://digibibo.com/blog-entry-3350.html
https://digibibo.com/blog-entry-3243.html

Safariでは崩れていないのですが、何が原因か検討は付きますでしょうか?


vanillaice (Akira)
Akira
2019/05/14 (Tue) 15:48

To Orcaさん

こんにちは。

私の環境では崩れていません。Orcaさんの画面で崩れているとすればキャッシュの影響でCSSが適切に読み込まれていない場合があります。
Chromeをご利用の場合はwinなら
Ctrl + Shift + R
macなら
Command + Shift + R
がスーパーリロードです。

一度ご確認ください。

-----
余談です。

OGP設定を有効化することで個別記事下のページ送りにサムネイル画像が表示されるようになります。
また、第三者がSNSシェアを行う際の表示がリッチになり、ブログカードの利用もできるようになります。
個人設定は当該記事内にリンクがあります。

-
2019/05/14 (Tue) 17:25

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/14 (Tue) 17:33

To 表示崩れの件 内緒さん(完了のご報告)

いえいえ。趣味の範疇でやっておりますのでお気遣い無用です。
私はプロではないので金銭の授受は行いません(笑)
お気持ちだけ頂戴しますね。ありがとうございます :)

-
2019/05/14 (Tue) 22:52

管理人のみ閲覧できます

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

Orca
2019/06/13 (Thu) 00:32

関連記事の文字の色の変更について

いつもお世話になりっぱなしで申し訳ありません。
FC2サービスの関連記事を表示させることにしたのですが、表示をすっごい綺麗にカスタマイズされていて感動しました!
個人的に関連記事の個別記事のタイトル色を少し濃くしたいのですが、どこを触れば良いのでしょうか?

CSSにある
#fc2relate_entry_thumbnail_area:before {
content: "You may also like";

この場所は理解しているのですが文字色はどのように変更すれば良いのでしょうか?
いつも質問ばかりで申し訳ありません。

vanillaice (Akira)
Akira
2019/06/14 (Fri) 01:29

To Orcaさん

こんばんは。

ご質問時にはご面倒かとは思いますが毎回ブログURLを記載してください。でないと私がOrcaさんのブログアドレスを探さなければいけません。今回はたまたまこのコメントの直近にありましたのですぐお返事できますが、他の方のコメントなどが混在する状況で探すのは困難で非常に手間がかかります。ご協力をお願いします。

-----
.relate_dl a,
で検索するとスタイルシート内に1箇所あります。

color: rgb(165,164,179)

赤字部位のカラーコードをお好きなものに変更してください。よろしくお願いします。

-
2019/06/14 (Fri) 10:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/06/14 (Fri) 18:36

To Bron-Broen関連記事のリンク色指定の件 内緒さん

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

バトラーアキラ
2019/07/17 (Wed) 08:24

iPhoneのSafariでタップ時にアプリダウンロードに飛ばされる

お世話になります。同じハンドル名のアキラと申します。バトラーアキラとしておきます。
私は女性向けマッサージサイトにこちらのテンプレートを利用させていただいたのですが、iPhoneでブラウザ中にサイドバーで上下移動をしたりメニューに移動しようとしたりした際に、「8q2g.adj.st」という場所が開きアプリダウンロードが開かれる現象がでてしまいます。Androidではこの現象は起きないのでSafari固有の問題なのかもしれません。
タップミスで起こることなのか、fc2の広告が何か悪さをしているのか原因が分からないので解消方法がありましたら教えていただきたいです。よろしくおねがいします。

vanillaice (Akira)
Akira
2019/07/17 (Wed) 09:47

To バトラーアキラさん

こんにちは。

> アプリダウンロードが開かれる現象が〜

まず、Safari固有の問題というわけではありません。
スマホのフッター広告がかなり上の方(画面の2/3以上)からこれまたかなりゆっくり透明から不透明に変化しながら下へ降りてくるというタイプ、つまりフローティング広告です。
フローティングはFC2の一般ブログでは既に廃止されていますがアダルトでは健在ということなのかしら (´・ω・`)
ちょっとアダルトジャンルについては知識が無いので申し訳ないんですが、つまりは広告のせいです。
(Androidは情報追尾系の広告(トラッキング系)はデフォルトでブロックされますのでFC2のほとんどの広告は非適用状態になります)

ページ内移動(top, menu, bottom)のみならず、画面の半分より下あたりでリンクなどを押そうと思うと、広告が邪魔をしてそちらが開かれてしまいます。画面下部に到達するスピードをかなり遅く調整しているのと、画面中間あたりではほぼ透明状態なので広告が在ることに気がつかないんですね。

うーん、これかなり悪質ですよねぇ (´・ω・`)
第三アクセス解析などでこういった広告が出ることがあるんですが、バトラーアキラさんのページを拝見する限りでは見当たりません(見落としかもしれませんので一度ご確認ください)
バトラーアキラさんが無料会員で第三アクセス解析の導入等にお心あたりが無いのであればFC2の広告、ということになりますね。
この広告はbetter ads standards(Googleによる優良広告の基準)にも抵触しているはずですから、運営にその旨訴えても良いかもしれません。
いずれにしてもユーザーが広告の表示及び動作に干渉することは規約上不可なので、直接FC2の方へお申し出くださいね。
その前に第三パーティ製の某のJSを掲載していないかどうかは確認してください。
よろしくお願いします。

----- 追記
アダルトブロガーさんから情報を頂きまして、やはりFC2のフローティング広告のようです。一般ブログでは廃止ですしリクエストも「フローティング広告を辞めてくれ」が「対応済」になっていたのでもう死滅したのかと思ってました。
アダルトはゆるゆる(超低速移動)フローティングがデフォルトなんだそうです。

となるともう有料アカウントを取得するしか方法は無いですね。お役に立てず申し訳ないです。

バトラーアキラ
2019/07/17 (Wed) 22:19

アダルトブログの問題なんですね

Akiraさん、詳細な解決策の調査ありがとうございます。
FC2のアダルトブログを無料で利用する場合でのディフォルト設定が、あの悪質なフローティング広告なのですね。解決策は有料にするしかないのは残念ですが無料で利用させてもらっているので仕方ないと思って機会があれば有料で使用しようと思います。

上の解決策を考えて、追加質問させてください。

ディフォルト設定されているサイドバーを画面の1/3くらいの位置に移動させることは可能でしょうか。たぶんアクセス性は悪くなるのでAkiraさんはおすすめされないと思いますが、アクセスする人が変なところに移動させられるのを防ぎたいので、もしサイドバーを上に移動できる方法の説明がありましたら、解説ページを教えていただきたいです。

vanillaice (Akira)
Akira
2019/07/17 (Wed) 23:00

To バトラーアキラさん

こんばんは。

1/3というのは画面の右に、ということでしょうか。
だとすると、スマートフォン現存機種の最小横幅は320pxしかありませんのでやはり無理があると思います。
テキストは折返しが多くなり読みづらいですし、クローラーには「モバイルユーザビリティエラー」のページと判断されてしまいます。

そして根本的解決にはなりません。テンプレートの段組みを操作しても広告は変わぬサイズ、変わらぬ動作で表示されますし、重なり順序が最上位ですから結局どうレイアウトしたところで画面の下から2/3は広告に持っていかれるという感じです。
仮にサイドメニューをドロワー(画面外に配置しておき、展開ボタンクリックで横からスライドインするもの)にしてもダメですね。つまり「変なところに移動させられるのを防ぎたい」件が解消されることはありません。
とりあえず有料登録を考慮しない方針であれば、スムーススクロールのボタンを削除した方が良いかもしれませんね。だとしても干渉範囲にあるリンクを押せば同じことが起こるわけですが、頻度は減らせる可能性があります。

解釈が間違っていたらご指摘くださいね。よろしくお願いします。

-
2019/07/17 (Wed) 23:16

管理人のみ閲覧できます

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

バトラーアキラ
2019/07/17 (Wed) 23:20

読み損ねていました

先にお送りしたコメントは「スムーススクロール」のボタンを上に移動したいという説明でした。なるほど削除することでも同じですね。Akiraさんの仰るとおり干渉する範囲をタップする頻度は減らせそうなので、スムーススクロールの削除を検討したいと思います。

vanillaice (Akira)
Akira
2019/07/18 (Thu) 21:49

To バトラーアキラさん(終了のご報告)

こんばんは。

サイドバーではなくスムーススクロールボタンのことだったんですね。
はい。削除が一番良いような気がします。
それにしても悪質で驚きました。リクエストに上げても良いかもしれません。

お疲れ様です :)

バトラーアキラ
2019/07/19 (Fri) 23:39

ありがとうございました

Akiraさん、ありがとうございました。
スムーズスクロールを削除して一旦は解決しました。

FC2アダルトブログの悪質広告の陰湿さには私も驚きました。
広告をタップしてしまうと毎回一瞬違うURLが表示されてアプリダウンロードに飛ばされるので
広告主への報告も詐欺的なタップ回数でカウントしているのでは?と疑っております。
FC2の運営方針は前々からよろしくないと感じていますがアダルトブログではそこしかないので
泣く泣く無料で利用していますからリクエストも聞いてもらえない可能性が高いかなと
少々諦めムードで運営が軌道に乗りましたら有料も視野に入れたいと思います。

Akiraさんのテンプレートがなければ作れなかったブログデザインなので感謝しています。
上で会話されていますが、私も感謝の気持ちをAkiraさんへPaypal寄付などできたらと感じたりする方で
Wikipediaなどにも寄付金を出すような人間なので抱いてしまいますが固辞されると思いますから
今後とも趣味での活動よろしくおねがいします。また困りごとがありましたら質問させてください。

vanillaice (Akira)
Akira
2019/07/21 (Sun) 13:02

To バトラーアキラさん

こんにちは。

お気持ちだけ頂戴しますね。ありがとうございます。
広告ですが、FC2ももう少し足元見ずに改善してくれれば良いんですけどね (´・ω・`)
ちょっとやっぱやりすぎだと思うし ^^;

お疲れ様です :)

neko
2019/09/01 (Sun) 14:50

使わせていただきました

古い人間なのでテンプレートも古いままで使っていました。
今日初めてこのページにお目にかかったので、矢も楯もたまらなくなって挑戦してみました。

トップの画像に入れ替えも出来てとても嬉しいです。

まだあちこち直したい所がいっぱいです。
でもどこを触ったらいいのか分からないのでこれから追々メールして教えを請いたいと思います。
どうぞよろしくお願いします。

vanillaice (Akira)
Akira
2019/09/01 (Sun) 23:01

To nekoさん

こんばんは。

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

-
2019/09/03 (Tue) 22:29

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/03 (Tue) 22:43

To Bron-Broenナビゲーションの件 内緒さん

こんばんは。

> スマホで見た時に"MOVIE"の "IE"あたりが右側に寄りすぎて〜

これは勘違いされているような気がします。このナビゲーションは 横スクロールタイプ です。ナビゲーションにいくつリンクが入るかは個人個人で異なりますよね。いくつになっても画面を超過させないようにするため、部分的な横スクロール状態にしてある、というのが仕様です。

参考記事: Ameba, Yahoo!, Livedoorのスマホ版を比較
https://vanillaice000.blog.fc2.com/blog-entry-924.html
「Ameba 自ブログ用ナビゲーション」の章を参照

現に「MOVIE」の後ろにはまだリンクが一つ残っていますよね。そのリンクは横にスクロールすると画面内に入って見られるようになります。
リンクが右にズレていたり途中で途切れている場合、多くのスマホ利用者は「横スクロールである」と直感的に判断します。現在のスマホのナビゲーションというのは「展開」か「横スクロール」が基本だからです。また逆に画面内にリンクが綺麗に収まってしまうと、まだ右にリンクがあることを見逃されてしまいますので、「右寄り・途切れ」が生じるようにわざと調整する、というのが主流です。

気になってリンクを画面内に収めたい、ということになりますとスマホの最小機種は320pxですから
・リンク同士を密接させる
・日本語を利用しない(横幅が増えるため)
・文字を極小にする
などユーザビリティ面で難が生じます。その点をご一考頂き、どうしてもという場合には余白調整の仕方をお伝えしたいと思います。
よろしくお願いします。

-
2019/09/03 (Tue) 23:30

管理人のみ閲覧できます

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

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

To Bron-Broenナビゲーションの件 内緒さん(終了のご報告)

> このままの状態で〜

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

neko
2019/10/04 (Fri) 20:42

トップ画像を一枚だけにしたいのです

4枚の画像がズームインとズームアウトで示されるテンプレートですが、これを画像がひとつだけで大きくなったところでそのまま表示するようには出来ますか?

庭の花を順番に取り換えながら使いたのです。
季節に沿って度々変えることが出来たらいいなあと欲張りな気持ちです。

教えていただければ幸いです。

vanillaice (Akira)
Akira
2019/10/05 (Sat) 01:23

To nekoさん

こんばんは。

> 画像がひとつだけで大きくなったところでそのまま表示〜

この部位の実際はそれぞれの画像が不透明度変化とスケーリングを同時に持続させることで表現しています。
画像を1枚だけにするとなるとこの方法は使えませんので、初回ロード時に若干薄めに表示させ、徐々に不透明度ゼロ(つまり透明度なし)にしつつ拡大を行う、という動きに変更する必要があります。デフォルトの様子とは異なる表現になりますのでその点を予めご了承くださいね。

まず
#list-slider {
で検索するとスタイルシート内に2箇所ヒットします。最初の方を対象とし、すぐ上にある

@keyframes zoomIn{0%{ 〜 省略 〜 scale(1)}}

この一行の内容を以下の内容にコピペで差し替え。

@keyframes zoomIn{0%{opacity:.8;transform:scale(1)}100%{opacity:1;transform:scale(1.3)}}

-----
続いて
/* 1st image */
で検索し、この内容を含め
/* 4th image */
までのルールセットを全て削除。スクショを参考に。

https://file.blog.fc2.com/vanillaice000/miscellaneous/capuser-images----1000.png

-----
続いて先程削除した内容のすぐ上にある

#list-slider div {
省略
}

このルールセットを以下の内容にコピペで差し替え。

#list-slider div {
width: 100%;
height: 100%;
background: url(画像アドレス) center center /cover no-repeat;
position: absolute;
top: 0;
left: 0;
animation: zoomIn 10s forwards;
}

赤字の10がアニメーション完了までにかかる時間です(ミリ秒指定)
もっとゆっくりにするのなら 15 など大きく、速くするには 8 など数値はご自分で調整をお願いします。

-----
続いて
<div id="list-slider">
で検索するとhtml内に1箇所あります。

<div id="list-slider">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

上記のような内容になっています(実際はインデントが付いています)ので、以下の内容にコピペで差し替え。

<div id="list-slider"><div></div></div>

-----
以上です。カスタマイズする前に忘れずに複製を作成しておいてくださいね。
よろしくおねがいします。

neko
2019/10/05 (Sat) 08:19

To Akiraさん

早速のご教示ありがとうございます。

最初にやることは複製を作っておく事からですね。
出来るか出来ないか分かりませんが、これだけ懇切丁寧に書いて下さっているのですから頑張ってやってみます。

vanillaice (Akira)
Akira
2019/10/06 (Sun) 00:02

To nekoさん

こんばんは。

基本は削除とコピー&ペーストのみの作業ですから、指定箇所で注意深く作業すれば容易にできると思います。
ご自分のペースでやってみてくださいね。

neko
2019/10/06 (Sun) 16:35

To Akiraさん

無理なお願いを聞いて下さって本当にうれしく思いました。
ゆっくりと時間が取れる時を見計らって挑戦してみました。
3回目にやっと希望通りのトップ画像が示されるようになって大感激です。

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

vanillaice (Akira)
Akira
2019/10/06 (Sun) 17:15

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

こんにちは。

お出来になったということで良かったですー。
お疲れ様でした :)

はる
2019/10/12 (Sat) 09:35

記事のセンター表示と時間の追加について

いつも素敵なテンプレートを作成してくださりありがとうございます。
これまでも利用させて頂いておりました。
久しぶりにテンプレートを変更してみたくなり、このテンプレートを見つけました。


質問内容ですが

1.記事が左寄りで表示されますがセンター表示に変更したい

2.更新日に時間も入れたい

どこをどうすれば出来るのか教えていただければ幸いです。
お手数おかけいたしますがよろしくお願いします。


vanillaice (Akira)
Akira
2019/10/12 (Sat) 19:07

To はるさん

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

-----
> 1.記事が左寄りで表示されますがセンター表示に変更したい〜

.inner-contents {
で検索するとスタイルシート内に1箇所出てきます。そのルールセット内の

line-height: 1.9;/* 注)記事行間 */

の直下にコピペで以下の内容を追加。

text-align: center;

注意点ですが、記事内に記した文章だけでなく
・関連記事リスト
・記事下広告のタイトル(「スポンサーサイト」)
・記事内で利用した見出しやfloatや表などの文字列
など全てセンタリングされます。はるさんの場合は関連記事リスト表示なし、float・見出し・表などの該当無し(だと思います)のようなので特に影響は無いと思います。

-----
> 2.更新日に時間も入れたい〜

<time class="modified-datetime"
で検索するとhtml内に1箇所あります。その近接に

<%topentry_modified_day>日 更新

というのがありますので、この部位を以下の通りコピペで変更

<%topentry_modified_day>日 <%topentry_modified_hour>:<%topentry_modified_minute> 更新

上記の場合の表記は
「xx年xx月xx日 yy:yy 更新」
となります。
「xx年xx月xx日 yy時yy分 更新」
にする場合は
<%topentry_modified_hour>:<%topentry_modified_minute> 更新
の部位を
<%topentry_modified_hour>時<%topentry_modified_minute>分 更新
に変更してください。

こちらが「記事更新日」です。続いて「記事公開日」の方は

更新日のhtmlのすぐ下の
<div class="entry-datetime">
を目印に近接の

<%topentry_day>日 公開

を以下の内容とコピペで差し替え。

<%topentry_day>日 <%topentry_hour>:<%topentry_minute> 公開

記号の変更も更新日と同じ要領です。
以上です。よろしくお願いします。

はる
2019/10/12 (Sat) 20:06

ありがとうございました

こんばんは☆彡
早速のお返事ありがとうございました。
教えて頂いた通りにスタイルシートを変更したら
バッチリ希望通りになりました♪
本当に本当にありがとうございました!

vanillaice (Akira)
Akira
2019/10/12 (Sat) 21:39

To はるさん(完了のご報告)

関連記事など現在は利用されていませんが、仮にその場面が巡って来たら改めて方法などお伝えしますので頭の片隅に置いておいてくださいね。
お疲れ様でした :)

-
2020/01/03 (Fri) 21:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/01/03 (Fri) 22:21

To Bron-Broen背景の件 内緒さん

こんばんは。あけましておめでとうございます :)

> バックの背景を、ある画像素材が繰り返し(リピート?)表示される状態にしたい〜

以下の内容をスタイルシート末尾に追加してください。

body {
background: url(ここにシームレス画像アドレス);
}

これだけでOKです。注意点は
・繰り返しなのでシームレス画像であること(でないと継ぎ目が目立ちます)
・記事部分には背景色がありませんので、今回適用する画像の上に直接文字が乗ることになります。可読性を確認してください
・画像の原寸が不明なので模様が大きすぎたり小さすぎたりすることがある(目視確認を行って調整が必要であれば再度お尋ねください)

あと別件ですが、画面上部に固定されている「FC2検索バー」は非表示をおすすめします(個人設定に用意されています)
このバーがあるとタブレットでのユーザービリティが損なわれます(画面幅を超過するため)

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

-
2020/01/03 (Fri) 22:46

管理人のみ閲覧できます

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

MOMONGA
2020/07/15 (Wed) 00:41

記事の公開日表示とスマホでの文字切れについて

Akiraさま

いつもステキなテンプレートをありがとうございます。
以前はHymn11を使用させて頂いていましたが、全文タイプのテンプレートにしてみたくなり、こちらに更新しました。

2つ質問をお願い致します。

<記事の公開日表示について>
記事の更新・公開日を、html内で公開日だけにしてみたのですが、日にちの頭に|という記号が残ってしまいました。
この記号を取り、公開日の文字とカテゴリーの文字をもう少し大きくしたいです。

<スマホでの文字切れについて>
ブログタイトルの下にある、HOME INDEX 〜のうち、最後のSERCHの文字がはみ出して見えてしまいます。
文字を画面内におさめる方法を知りたいです。

お手数をおかけしますが、どうぞよろしくお願い致します。

vanillaice (Akira)
Akira
2020/07/18 (Sat) 20:43

To MOMONGAさん

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

> 記事の公開日表示について〜

.entry-datetime::before,
で検索するとスタイルシート内に1箇所あります。

.entry-datetime::before,
.entry-comment::before {
content: "|";
display: inline-block;
margin-right: .5em;
}

となっているはずなのでこのルールセットをすべて削除。

-----
> スマホでの文字切れについて〜

これは「文字切れ」ではなく「わざと見切れさせて横スクロール状態にしている」ものです。

参考記事: Ameba, Yahoo!, Livedoorのスマホ版を比較(Ameba 自ブログ用ナビゲーション の章を参照)
https://vanillaice000.blog.fc2.com/blog-entry-924.html

これが好ましくないとなるとテキストをスマホの横幅に収まるよう調整するしかありません。

#navi-item li {
で検索するとスタイルシート内に1箇所あります。ルールセット内
padding: 0 25px;
赤字部位を 10 に変更。この数値にしないとiPhone5sなど320px端末で収まりません。ただしパソコンで閲覧した際にもリンクが非常に中央に寄っている印象になってしまいますので、スマホだけ調整する場合は上記の修正は行わずに

@media screen and (max-width: 414px) {
#navi-item li {
padding: 0 10px;
}
}

をスタイルシート末尾に追加してください。ただしリンクの増減が生じた場合は再調整の必要があります。
よろしくお願いします。

MOMONGA
2020/07/22 (Wed) 12:14

To Akiraさん

こんにちは! お忙しいところ、お返事どうもありがとうございました。
教えていただいた通り、スタイルシート内を書き換えすると、うまく表示されるようになりました。
カスタマイズは難しいですが、わかりやすく教えて下さり、感謝です。
また何かありましたら、どうぞよろしくお願い致します。
このたびは、どうもありがとうございました。

vanillaice (Akira)
Akira
2020/07/22 (Wed) 17:36

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

こんにちは。

修正できたということで安心しました。お疲れ様でした :)

-
2022/01/18 (Tue) 09:07

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/01/19 (Wed) 13:25

To Bron-Broen トップページ画像の件 内緒さん

こんにちは ('0')/

> トップページの画像〜個別記事でも表示させる方法〜

念の為確認です。ヘッダーの画像のことですよね。
<div id="list-slider">
を目印に検索すると以下のようになっています(実際にはインデントが付いています)

<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_category_area--><!--not_tag_area--><!--not_date_area-->
<div id="list-slider">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--/not_date_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->

太字の部位を削除してください。

----- 別件
新着記事へのnewマークを意図的に表示させないようにしているかどうかを確認し、意図的であれば
<script>for(var s=2
で検索、このscript要素(<script>から</script>まで)を削除。
意図的でない場合はなにかの拍子に一部を削除してしまったようなので、
n[i].
のすぐ後ろに
innerHTML="NEW!"
を追加。

ここを修正しないとJSエラーが解消されませんので、いずれかの作業を行ってくださいね。

-
2022/01/19 (Wed) 15:31

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/01/20 (Thu) 13:26

To Bron-Broen 完了のご報告 内緒さん

こんにちは ('0')/
変更 + 修正 を確認できました。お疲れ様でした :)

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