質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Emacs

GNU Emacsと拡張性の高い、高性能なテキストエディタです。豊富なライブラリの導入により、統合開発環境やWebブラウザとしても機能させる事が可能です。

Q&A

解決済

1回答

6399閲覧

org-modeのHTML出力CSSについて

yu-ki0

総合スコア69

Emacs

GNU Emacsと拡張性の高い、高性能なテキストエディタです。豊富なライブラリの導入により、統合開発環境やWebブラウザとしても機能させる事が可能です。

0グッド

0クリップ

投稿2015/10/19 07:45

編集2015/10/19 07:48

こんにちは。

現在emacsのorg-modeでいろいろ試しているところなんですが、HTML出力する際にCSSが読み込まれません。
CSSを反映させるのに設定ファイルでなにか記述しなければいけませんか?
org-modeには以下のように設定しています。

org

1#+STYLE: <link rel="stylesheet" type="text/css" href="org2.css"/>

一応cssファイルは同じディレクトリにおいてあります。

OSはUbuntu14.04
emacs24を使用しています。

org2.cssの内容は以下になります。

CSS

1/* 2 * Org-mode の HTML 出力用スタイルシート 3 */ 4 5/* 文書全体 */ 6html { 7 font-family: sans-serif; 8 font-size: medium; 9} 10body { 11 color: black; 12 background-color: white; 13 line-height: 1.3; /* IE 8 では "1.3" と "130%" と "1.3em" とで <h1> などの出力が異なるので注意 */ 14 margin: 2%; 15} 16 17/* リンク */ 18a:link { 19 color: #c00000; 20} 21a:visited { 22 color: #400000; 23} 24a:active { 25 color: #ff0000; 26} 27a:hover { 28 color: #ff0000; 29} 30 31/* タイトル */ 32h1.title { 33 color: white; 34 background-color: #c00000; 35 text-align: left; 36 border: 3px solid black; 37 padding: 0.1em 0.3em; 38} 39 40/* 目次 */ 41div#table-of-contents h2 { 42 display: none; /* 目次なのは見れば分かるし、デフォルトでは "Table of Contents" という見出しで分かりにくい */ 43} 44div#table-of-contents { 45 margin: 1em 30% 1em 2em; 46} 47div#text-table-of-contents { 48 background-color: #e8e8e8; 49 padding: 0.5em; 50 border: 1px dotted black; 51} 52 53/* 見出し */ 54h2, h3, h4, h5, h6 { 55 padding: 0.2em 0.3em; 56} 57h4, h5, h6 { 58 font-size: 1em; /* ブラウザによっては本文よりも小さくなってしまうので */ 59} 60h5, h6 { 61 margin: 0.5em; 62} 63h2 { 64 border-bottom: 3px solid #c00000;; 65} 66h3 { 67 border-bottom: 2px dotted black; 68} 69h4 { 70 border-bottom: 1px solid black; 71} 72h5 { 73 border-bottom: 1px solid #c0c0c0; 74} 75h6 { 76 border-bottom: 1px dotted #c0c0c0; 77} 78span.section-number-2, span.section-number-3, span.section-number-4, span.section-number-5, span.section-number-6 { 79 color: #c00000; 80} 81 82/* 本文 */ 83div.outline-text-2, div.outline-text-3, div.outline-text-4 { 84 margin: 1em; 85} 86div.outline-text-5, div.outline-text-6 { 87 margin: 1em 1.5em; 88} 89 90/* 文字装飾 */ 91b { 92 color: #c00000; 93} 94i { 95 color: #600000; 96} 97code { 98 color: #600000; 99} 100del { 101 color: #608080; 102} 103 104/* 画像 */ 105a img { 106 border: none; 107} 108img.figure { /* 図としての画像 */ 109 display: block; 110 margin: 1em auto; 111 border: 1px dotted #c00000; 112} 113 114/* ソース、例文 */ 115pre { 116 font-family: "MS ゴシック", "Osaka-Mono", monospace; 117 font-size: medium; 118 margin: 0.5em; 119 padding: 0.5em; 120} 121pre.src { 122 color: #f0f0d0; 123 background-color: #101010; 124 border-top: 2px solid #404040; 125 border-left: 2px solid #404040; 126 border-bottom: 2px solid #c0c0c0; 127 border-right: 2px solid #c0c0c0; 128} 129pre.example { 130 color: #202020; 131 background-color: #f0d0d0; 132 border-top: 2px solid #804040; 133 border-left: 2px solid #804040; 134 border-bottom: 2px solid #d0a0a0; 135 border-right: 2px solid #d0a0a0; 136} 137 138/* テーブル */ 139table { 140 margin: auto; 141} 142thead { 143 color: white; 144 background-color: #c00000; 145} 146tbody { 147 background-color: #f0f0f0; 148} 149table, th, td { 150 border: 1px solid black; 151} 152th, td { 153 padding: 0.5em; 154} 155th { 156 font-weight: bold; 157} 158caption { 159 color: #c00000; 160 font-weight: bold; 161 font-size: smaller; 162 white-space: nowrap; 163} 164 165/* リスト */ 166ol, ul { 167 padding-left: 2em; 168} 169ol li { 170 /* レベル 1 の数付きリストには数字の横に線を付けてみる */ 171 border-left: 1px solid #d0d0d0; 172 padding-left: 0.5em; 173} 174ol li ol li{ 175 /* レベル 2 以下の数付きリストには数字の横に線を付けない */ 176 border: none; 177 padding-left: 0em; 178} 179ul li { 180 border: none; 181} 182dt { 183 font-weight: normal; 184 border-left: 0.5em solid #c00000; 185 border-bottom: 1px dotted #c00000; 186 padding-left: 0.3em; 187 margin: 0.3em 0em; 188 width: 50%; 189} 190 191/* 水平線 */ 192hr { 193 height: 1px; 194 background-color: #c00000; 195 border-style: none; 196} 197 198/* フッタ */ 199div#postamble { 200 text-align: right; 201 font-size: smaller; 202 border-top: 2px solid #808080; 203 padding: 1em 0em; 204} 205div#postamble p { 206 margin: 0.2em 0em; 207} 208p.creator { 209 color: #a0a0a0; 210}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

もう、すでに解決されているかもしれませんが。
「#+STYLE」ではなく、以下の「 #+HTML_HEAD」で出力されると思います。

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />
#+HTML_HEAD_EXTRA: <link rel="alternate stylesheet" type="text/css" href="style2.css" />

参照:
http://orgmode.org/manual/CSS-support.html#CSS-support

投稿2015/10/26 14:59

akiruno-oneone

総合スコア815

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yu-ki0

2015/11/11 08:28

回答ありがとうございました。 無事解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問