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

投稿 2018年09月19日
18
テンプレート
HTML5CSS4RWD
Bron-Broenテンプレート

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

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

ぶろん ぶろーえん

サンプル

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設定を有効化 してください。
メタタグの設定

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

Cautions before asking for something.

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

18 COMMENTS

There are no comments yet.

素姓乱雑  

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

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

2018/09/22 (Sat) 08:17
vanillaice (Akira)

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) 00:18

素姓乱雑  

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

2018/09/23 (Sun) 03:20

靉霧(あいむ)  

To 素姓乱雑さん

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

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

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

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

2018/09/23 (Sun) 07:29

素姓乱雑  

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

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

2018/09/23 (Sun) 11:30
vanillaice (Akira)

Akira  

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

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

2018/09/24 (Mon) 17:19

-  

管理人のみ閲覧できます

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

2018/09/30 (Sun) 16:53
vanillaice (Akira)

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) 19:18

-  

管理人のみ閲覧できます

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

2018/09/30 (Sun) 23:05
vanillaice (Akira)

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/01 (Mon) 16:33

-  

管理人のみ閲覧できます

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

2018/10/02 (Tue) 13:43
vanillaice (Akira)

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/02 (Tue) 16:30

はんのすず  

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

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

2018/10/03 (Wed) 23:00
vanillaice (Akira)

Akira  

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

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

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

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

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

2018/10/04 (Thu) 00:46

はんのすず  

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

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



2018/10/08 (Mon) 17:07
vanillaice (Akira)

Akira  

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

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

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

2018/10/10 (Wed) 16:45

-  

管理人のみ閲覧できます

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

2018/11/02 (Fri) 17:05
vanillaice (Akira)

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/11/03 (Sat) 16:24

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)