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

2018年09月19日
テンプレート
70
HTML5 CSS4 RWD
Bron-Broenテンプレート

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

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

【重要】テンプレートの変更点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要素を利用している方向けなので必要がある方だけどうぞ。

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

名称 Bron-Broen
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大800px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 画像ドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム (デバイスサイズ依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイスサイズ依存) サイドメニュー --- 下
最終更新 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.21
  • サイドメニュー部input要素のCSS変更
  • Google Adsense用レイアウト調整CSS追加

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

ぶろん ぶろーえん

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

I'm sorry I couldn't be of any help.

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

IE非対応

This theme is incompatible with Internet Explorer.

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

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

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない?」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

スライダー画像について

About images in slider.

4つの画像を設定できるようにしてあります。
画像の変更はCSS(スタイルシート内)の 1st image を目印に各URLを変更します。

デフォルト画像のぼかし(blur, bokeh)はCSSによるものではなくもともとそういう画像なので変更画像にぼかしがかかることはありません。
デフォルトのようなぼかし画像は鮮明である必要がありませんので 横 1140px になっていますが、ぼかしの無い画像に変更される場合で高解像度ディスプレイに配慮したい場合には 横 1600px 程度のものを用意してください。

縦横比は基本的には不問ですが、領域が横長ですから横長が適しています。

左右カラム入れ替えの仕方

How to reverse the direction of rows.

#main-container で検索されますと3箇所ヒットします。
3つ目display: flex; の直下に flex-direction: row-reverse; を追加。
続いてその直下にある #primarymargin-right: 40px; 緑部位 right を left に変更。

リスト形式のページを全文に統一したい場合

How to delete list layout.

カテゴリ・タグ・月日別などのページは閲覧者による「検索(記事探し)」が行われることを想定し、全文表示形式ではなくリスト形式にしてあります。
これらのページ種もトップページと同じ全文表示に揃えたい場合は以下の修正を行ってください(おすすめはしませんが)

<!-- カテゴリここから --> から <!-- カテゴリここまで -->削除
<!-- タグここから --> から <!-- タグここまで -->削除
<!-- 月・日別ここから --> から <!-- 月・日別ここまで -->削除

<!-- トップページ・個別記事ここから --> を目印に直下にある

<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_category_area--><!--not_tag_area--><!--not_date_area-->

を以下の通り修正。

<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area-->

<!-- トップページ・個別記事ここまで --> を目印にすぐ上にある

<!--/not_date_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

を以下の通り修正。

<!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

閲覧者にとっては 記事探しが困難になるかもしれない という点を踏まえた上、自己責任で行ってください。

ドミナントカラー

Dominant colors

root で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。

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

About thumbnails in pager

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

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

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

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 70

There are no comments yet.

素姓乱雑  

2018/09/22 (Sat) 08:17

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

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

Akira  

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

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 さまは不思議な方ですね。こちらが望む仕様のテンプレートを
知っていらっしゃるのですから。新作が出るたびわくわくします。

Akira  

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

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

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

-  

2018/09/30 (Sun) 16:53

管理人のみ閲覧できます

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

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

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に変更しようと思います。
本当にありがとうございました。 

Akira  

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

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 をクリック後に起動するようにしました。
先生の最終コメント後の返信が遅れて、申し訳ございませんでした。気が緩んでしまってました。
これからも、よろしくお願いします。



Akira  

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

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

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

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

-  

2018/11/02 (Fri) 17:05

管理人のみ閲覧できます

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

Akira  

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

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

Akira  

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

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に聞くべきことですよね。
ご助言賜れば有難いです。よろしくお願いします。

Akira  

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

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検索バー」も気になっていたんです(笑)。非表示にしました。
お仕事中、すみませんでした。
今後ともよろしくお願いいたします!

Akira  

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

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.と出てきました。対処方保を教えていただけないでしょうか。

Akira  

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

To 素姓乱雑さん

こんばんは。

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

素姓乱雑  

2018/12/22 (Sat) 21:04

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

Akira  

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

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にしました

Akira  

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

To 素姓乱雑さん

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

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

素姓乱雑  

2018/12/22 (Sat) 21:47

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

Akira  

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

To 素姓乱雑さん

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

素姓乱雑  

2018/12/22 (Sat) 22:44

Error: Duplicate ID inline-user.の件

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

Akira  

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

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

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

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

2018/12/23 (Sun) 13:46

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

Akira  

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

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

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

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

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

2018/12/24 (Mon) 19:54

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

Akira  

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

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

こんばんは。

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

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

2018/12/24 (Mon) 23:41

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

Akira  

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

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

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

-  

2019/02/03 (Sun) 20:18

管理人のみ閲覧できます

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

Akira  

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

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

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

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

Orca  

2019/05/10 (Fri) 15:10

更新日と公開日について

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

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

Akira  

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

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さんのテンプレートは出ませんし・・・使いやすい工夫も多くて本当に驚かされます。

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

Akira  

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

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

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

Akira  

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

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では崩れていないのですが、何が原因か検討は付きますでしょうか?


Akira  

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

To Orcaさん

こんにちは。

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

一度ご確認ください。

-----
余談です。

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

-  

2019/05/14 (Tue) 17:25

管理人のみ閲覧できます

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

Akira  

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

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";

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

Akira  

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

To Orcaさん

こんばんは。

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

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

color: rgb(165,164,179)

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

-  

2019/06/14 (Fri) 10:31

管理人のみ閲覧できます

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

Akira  

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

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

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

バトラーアキラ  

2019/07/17 (Wed) 08:24

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

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

Akira  

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

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さんはおすすめされないと思いますが、アクセスする人が変なところに移動させられるのを防ぎたいので、もしサイドバーを上に移動できる方法の説明がありましたら、解説ページを教えていただきたいです。

Akira  

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

To バトラーアキラさん

こんばんは。

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

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

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

-  

2019/07/17 (Wed) 23:16

管理人のみ閲覧できます

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

バトラーアキラ  

2019/07/17 (Wed) 23:20

読み損ねていました

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

Akira  

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

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

こんばんは。

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

お疲れ様です :)

バトラーアキラ  

2019/07/19 (Fri) 23:39

ありがとうございました

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

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

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

Akira  

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

To バトラーアキラさん

こんにちは。

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

お疲れ様です :)

コメント投稿

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)