Bron-Broenテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Bron-Broen |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 全文表示タイプ |
| 記事幅 | メイン --- 最大800px サイド --- 300px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | なし (Vanilla JSのみ) |
| Font Awesome導入 | なし (インラインSVG) |
| Lazyloading導入 | なし |
| 構造化マークアップ | 個別記事のみ BreadcrumbList(パン屑リスト) BlogPostiong |
| Page Speed Insigtsスコア |
|
| 固有機能 | ・ 画像ドロップシャドウ ・ 見出し装飾(手書き風, ドッグイヤー, カール) ・ 動画縦横比固定 使い方詳細はARTICLE DEMOを参照 |
| 推奨カスタマイズ | 色調変更 |
| ライセンス | Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
・ IE非対応
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム | 2カラム or 1カラム (デバイスサイズ依存) | 1カラム |
| サイドメニュー --- 右 | サイドメニュー --- 右 or 下(デバイスサイズ依存) | サイドメニュー --- 下 |
- 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要素を最新バージョンのそれと差し替え。
過去の更新一覧
- ページ送りのJSを修正
- コメント返信のJS変更
- 個別記事ページ送りの複製を可能にしました
複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する
- コメント主のリンク表示用JS及びデザインの変更
- NEWマークJS変更
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白を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 <%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 <%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 <%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要素を利用している方向けなので必要がある方だけどうぞ。
以上です。よろしくお願いします。
- C版Safariでモーダル検索背景が白くなる件修正
- サイドメニュー部input要素のCSS変更
- Google Adsense用レイアウト調整CSS追加
不具合修正ではありませんので旧バージョンのままお使い頂けます。adsenseをメインコンテンツ側に掲載される方は少し楽できるかと思いますので再DLをご検討ください(adsense掲載方法の指南は行いません)
ぶろん ぶろーえん 
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
画像クリックでデモ画面へ
カスタマイズのコツ
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設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
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; を追加。
続いてその直下にある #primary の margin-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 で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。
削除可能なJSについて
Delete specific JS if you want to
特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。
【FC2検索バーを利用しない人は削除】
<!-- 注)FC2検索バー非表示の方ここから削除可 -->
各々上記を目印にガイダンスに従って削除。
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までです。
複製したhtml内容は以下の作業してから希望の位置へペーストしてください。
html冒頭の <div class="pager-wrapper" id="pager-wrapper"> を <div class="pager-wrapper"> に修正(id属性の取り除き)
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.