🥶

【pandoc】どなたか教えてください🙏 目次の各項目についたアンダーラインを消す方法

2024/10/22に公開

Pandoc

tech

ご存じの方、教えてください！

困っていること

pandocでmdファイルをepub3ファイルに変換するさいに、目次を自動生成しているのですが、以下のように、各項目についたアンダーラインをどうしても消せません...

各項目の色は変えることができたのですが、アンダーラインを消すはずのtext-decoration: none !important;が効きません。

あくまでも予想ですが、スタイルシートでいくら試してもダメだったので、他の設定（defaults.ymlなど）が必要なのかもと考えています...

ソースコード

使っているstylesheet.cssは以下です。

/* Basic Styling */
body {
    /* font-family: "Georgia", serif; */
    font-family: Georgia, serif, 'Segoe UI', Roboto, sans-serif;
    line-height: 2.5;
    margin: 15px;
}
/* html {
    -webkit-writing-mode: vertical-rl;
    -epub-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
} */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: "Arial", sans-serif;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 24px;
    margin-bottom: 12px;
    page-break-after: avoid;
    page-break-inside: avoid;
}

h1 {
    font-size: 2em;
    margin: 0 0 0 0;
    
    color: #34495e;
    /* page-break-before: always; */
}

h2 {
    font-size: 1.75em;
    color: #2c3e50;
}

h3 {
    font-size: 1.5em;
    color: #3b4f66;
}
h4 {
    margin: 1.1em 0 0 0;
    font-size: 1.2rem;
}
h5 {
    margin: 1em 0 0 0;
    font-size: 1.1rem;
}
h6 {
    font-size: 1rem;
}

/* Paragraphs */
p {
    /* margin: 12px 0; */
    /* 先頭文字の字下げ設定 */
    text-indent: 0;
    /* マージン、上下1em、左右0 */
    margin: 1em 0;
    /* 改ページ後のページの行数の最小 */
    widows: 2;
    /* 改ページ前のページの行数の最小 */
    orphans: 2;
    /* 文字の両端揃え */
    text-align: justify; 
    /* 文頭を一文字開ける. 段落ごとに自動でスペースを付与  */
    /* text-indent: 1em; */ 
}

/* Blockquotes */
blockquote {
    margin: 20px;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-left: 5px solid #ddd;
    font-style: italic;
    color: #555;
}

/* Links */
a {
    color: #2c3e50;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

/* Code Blocks */
pre {
    background-color: #f4f4f4;
    padding: 10px;
    /* border: 1px solid #ccc; */
    overflow-x: auto;
}

code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
}

/* Lists */
ul, ol {
    margin: 12px 0;
    /* padding-left: 40px; */
    text-decoration: none;
}

li {
    margin: 8px 0;
}

.toc {
    list-style: none;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

#toc {
    list-style: none;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

#toc-title {
    /* display: block; */   
    /* font-size: 1.4rem; */
    /* font-weight: bold; */
    /* padding-bottom: 0.3em; */
    /* color: #34495e; */
    /* margin-left: 0.1em; */
    margin-bottom: 0.5em;
    border-bottom: 1px solid #34495e;;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* Horizontal Rule */
hr {
    border: 0;
    height: 2px;
    background-color: #959595;
    margin: 24px 0;
}

/* 画像の最大幅とボーダーを設定 */
img {
    max-width: 100%;
    border: 1px solid rgb(73, 73, 73);
}

そして、defaults.ymlです。

#defaults.yml
metadata-file: ${.}/meta.yml
epub-metadata: ${.}/epubmeta.yml
from: markdown+emoji+rebase_relative_paths
to: epub3
input-files:
    - srcs/00_intro/00_intro.md
    - srcs/00_intro/01_intro.md
    - srcs/01_チャプター１/00_database.md
    - srcs/01_チャプター１/01_database.md
    - srcs/01_チャプター１/02_database.md
    - srcs/05_end/05_end.md
output-file: output.epub
standalone: true
toc: true
toc-depth: 3
# ePUBの改ページ(見出し) デフォルトではh1のみ
#epub-chapter-level: 2
epub-cover-image: ${.}/cover.png
css: ${.}/stylesheet.css
highlight-style: tango
resource-path: 
  - .
  - ${.}/srcs/images

試したこと

生成AIに聞きながら、以下をスタイルシートに加えてみましたが、どれもダメでした...



#TOC a:not(:hover) {
    text-decoration: none !important;
} 

nav {
    text-decoration: none !important;
}

nav a {
    text-decoration: none !important;
}

nav ol, ul {
    text-decoration: none !important;
}


nav[epub|type~="toc"] a, 
#toc a, 
.toc a {
    text-decoration: none !important;
    color: inherit !important;
}

nav[epub|type~="toc"] a:hover, 
#toc a:hover, 
.toc a:hover {
    text-decoration: none !important;
}

nav[epub|type~="toc"] a:not(:hover), 
#toc a:not(:hover), 
.toc a:not(hover) {
    text-decoration: none !important;
}

nav[epub|type~="toc"] a {
    text-decoration: none !important;
    color: inherit;
}

a[href^="#"] {
    text-decoration: none !important;
}

nav[epub|type~="toc"] a,
#toc a,
.toc a {
    text-decoration: none !important;
}

困っていること

ソースコード

試したこと

Discussion