BookdownドキュメントのCSSカスタマイズ

Question

Bookdownのリーフレット・マップのコントロール・ボタンのデフォルト・スタイリングは私の好みではなく、私はそれを変更したいと考えています。具体的には、右上のコントロールボタンの透明度を削除し、ボタンイメージが正しく表示されていることを確認します。私が欲しいもの

：それは現在のように見える何

は、EDIT 1：このドキュメントのライブバージョンがhereを見つけることができます。これは、libs/gitbook-2.6.7/css/style.css:9とlibs/gitbook-2.6.7/css/style.css:16にCSSファイルから来ている

.book .book-body .page-wrapper .page-inner section.normal a { 
    color: #4183c4; 
    text-decoration: none; 
    background: 0 0;  <-- this line 
} 

：

ソースをチェックアウトした後、透明性の責任と不足している画像CSSスタイルがあるようです。私はいくつかのアドバイスが欲しいどの

つの質問：ユーザーが自分の本の外観をカスタマイズするために編集し何のCSSファイルを

• をbookdown必要がありますか？ [EDIT 2：回答：./css/style.css]
• 画像のフルスクリーンボタン画像が消えるのを防ぐには、特定のcssコマンドが必要ですか？

ありがとう！

EDIT 2：this answerで提供の提案に続いて、私は、コントロールボタンのbackground-colorを調整することができました。そうすれば、透明性の問題を解決できます。私はまだフルスクリーンのボタンイメージを表示することができないようです - 私はbackground-image: initial;を設定しようとしましたが、それはそれを変更しません。提案は大歓迎です。

Answer 1

あなたの問題は、おそらくCSSの特殊性です： https://www.w3.org/TR/CSS2/cascade.html#specificity これは、より具体的であるため、チラシのスタイルを上書きすることを意味します。

これを修正するには、リーフレットのCSSファイルにたくさんのクラスを追加することができますが、それはちょっと汚いかもしれません（もっと重要なのはもっと重要な修正です）。 私はちょっと調べて、次の文書を見つけました。問題はiFrameで地図をリンクすることで解決されました。あなたのリンクからhttps://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

： https://bookdown.org/yihui/bookdown/web-pages-and-shiny-apps.htmlおそらくシャドウDOMでカプセル化を使用することが可能であろう将来的には

のは、ファイルがmathjax-number.html命名されたと仮定しましょう、そしてそれあなたの書籍のルートディレクトリ（すべてのRmd ファイルが格納されているディレクトリ）の にあります。このファイルは、in_header オプションを使用してHTMLヘッドに挿入できます。、

カスタムCSSファイルを作成し、ブックのルートに保存することができます。私がそれを取る方法は、.htmlファイルである必要があります。あなたがより高い特異性を付与します.book .book-body .page-wrapper .page-inner section.normal .leaflet-bar aに.leaflet-bar aのようなものを変更することができますファイルでhttp://www.w3schools.com/tags/tag_style.asp

： は、コンテンツを使用すると、スタイルのタグを含める必要がHTMLの頭の中で書かれているように見えるので。 だけでなく、以下のCSSの特異性を更新することに留意してください：どうやらbackground: 0 0;が背景位置だけでなく、背景色だけではなく上書きされるため

.leaflet-bar a, .leaflet-bar a:hover { 
    background-color: #fff; 
} 

これがあります。

Answer 2

@サンドロの提案は、ソリューションの基本フレームワークを提供します。最後に

私は./css/style.cssファイルに以下を追加しました：

.leaflet-top .leaflet-control { 
    margin-top: 10px; 
    background-color: white !important; 
} 

.leaflet-control-fullscreen-button .leaflet-bar-part { 
     background-image: url("../_book/libs/fullscreen-1.0.1/fullscreen.png") !important; 
} 

、今ボタンが、私は彼らが望んだ道をレンダリングしています。

注：!important;タグが必要です。そうでない場合、ギフトブックのスタイリングは残ります。

Answer 3

この問題は、他のコントロール、伝説、属性などの他のリーフレット要素でも発生する可能性があるため、かなり劇的なアプローチをとっています。 私は本のルートディレクトリにbookletleaflet.cssとしてleaflet.css全体をコピーし、ブックダウン階層に特有のすべての要素を作成しました。

https://gist.github.com/bhaskarvk/acc14421598d76f65da6a2c153a07865

これはやりすぎかもしれないが、私はそれが1つのスクープにリーフレットマップのすべての要素を扱うため、この方法が優れている、と私はことを一人ひとりの要素をデバッグする必要はありませんそれをやって思いました問題を引き起こす可能性があります。