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

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

ただいまの
回答率

90.51%

  • Emacs

    155questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,169

yu-ki0

score 66

こんにちは。

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

#+STYLE: <link rel="stylesheet" type="text/css" href="org2.css"/>
一応cssファイルは同じディレクトリにおいてあります。

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

org2.cssの内容は以下になります。
/*
 * Org-mode の HTML 出力用スタイルシート
 */

/* 文書全体 */
html {
    font-family: sans-serif;
    font-size: medium;
}
body {
    color: black;
    background-color: white;
    line-height: 1.3;  /* IE 8 では "1.3" と "130%" と "1.3em" とで <h1> などの出力が異なるので注意 */
    margin: 2%;
}

/* リンク */
a:link {
    color: #c00000;
}
a:visited {
    color: #400000;
}
a:active {
    color: #ff0000;
}
a:hover {
    color: #ff0000;
}

/* タイトル */
h1.title {
    color: white;
    background-color: #c00000;
    text-align: left;
    border: 3px solid black;
    padding: 0.1em 0.3em;
}

/* 目次 */
div#table-of-contents h2 {
    display: none;  /* 目次なのは見れば分かるし、デフォルトでは "Table of Contents" という見出しで分かりにくい */
}
div#table-of-contents {
    margin: 1em 30% 1em 2em;
}
div#text-table-of-contents {
    background-color: #e8e8e8;
    padding: 0.5em;
    border: 1px dotted black;
}

/* 見出し */
h2, h3, h4, h5, h6 {
    padding: 0.2em 0.3em;
}
h4, h5, h6 {
    font-size: 1em;  /* ブラウザによっては本文よりも小さくなってしまうので */
}
h5, h6 {
    margin: 0.5em;
}
h2 {
    border-bottom: 3px solid #c00000;;
}
h3 {
    border-bottom: 2px dotted black;
}
h4 {
    border-bottom: 1px solid black;
}
h5 {
    border-bottom: 1px solid #c0c0c0;
}
h6 {
    border-bottom: 1px dotted #c0c0c0;
}
span.section-number-2, span.section-number-3, span.section-number-4, span.section-number-5, span.section-number-6 {
    color: #c00000;
}

/* 本文 */
div.outline-text-2, div.outline-text-3, div.outline-text-4 {
    margin: 1em;
}
div.outline-text-5, div.outline-text-6 {
    margin: 1em 1.5em;
}

/* 文字装飾 */
b {
    color: #c00000;
}
i {
    color: #600000;
}
code {
    color: #600000;
}
del {
    color: #608080;
}

/* 画像 */
a img {
    border: none;
}
img.figure {  /* 図としての画像 */
    display: block;
    margin: 1em auto;
    border: 1px dotted #c00000;
}

/* ソース、例文 */
pre {
    font-family: "MS ゴシック", "Osaka-Mono", monospace;
    font-size: medium;
    margin: 0.5em;
    padding: 0.5em;
}
pre.src {
    color: #f0f0d0;
    background-color: #101010;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #c0c0c0;
    border-right: 2px solid #c0c0c0;
}
pre.example {
    color: #202020;
    background-color: #f0d0d0;
    border-top: 2px solid #804040;
    border-left: 2px solid #804040;
    border-bottom: 2px solid #d0a0a0;
    border-right: 2px solid #d0a0a0;
}

/* テーブル */
table {
    margin: auto;
}
thead {
    color: white;
    background-color: #c00000;
}
tbody {
    background-color: #f0f0f0;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 0.5em;
}
th {
    font-weight: bold;
}
caption {
    color: #c00000;
    font-weight: bold;
    font-size: smaller;
    white-space: nowrap;
}

/* リスト */
ol, ul {
    padding-left: 2em;
}
ol li {
    /* レベル 1 の数付きリストには数字の横に線を付けてみる */
    border-left: 1px solid #d0d0d0;
    padding-left: 0.5em;
}
ol li ol li{
    /* レベル 2 以下の数付きリストには数字の横に線を付けない */
    border: none;
    padding-left: 0em;
}
ul li {
    border: none;
}
dt {
    font-weight: normal;
    border-left: 0.5em solid #c00000;
    border-bottom: 1px dotted #c00000;
    padding-left: 0.3em;
    margin: 0.3em 0em;
    width: 50%;
}

/* 水平線 */
hr {
    height: 1px;
    background-color: #c00000;
    border-style: none;
}

/* フッタ */
div#postamble {
    text-align: right;
    font-size: smaller;
    border-top: 2px solid #808080;
    padding: 1em 0em;
}
div#postamble p {
    margin: 0.2em 0em;
}
p.creator {
    color: #a0a0a0;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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/11/11 17:28

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

    キャンセル

同じタグがついた質問を見る

  • Emacs

    155questions

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