anti scroll

ブラウザと小説の新しい関係を模索する

外部の埋め込み作品に独自のスタイルを設定する方法

外部の埋め込み作品に、独自のスタイルを設定する方法を用意しました。

具体的には、作者が自前で用意したスタイルファイルを外部から読み込ませる形になります。

通常の埋め込みコード

まず通常の埋め込みコードですが(先頭部分だけ抜粋すると)こんな感じになっていると思います。

var TbThumb = {
  nid:2980,
  width:640,
  //width:"80%",
  height:480,
  fontSize:20
};

大きさの設定ぐらいは出来るけれども、それ以外の細かい設定はできませんでした。

そこで、こんな風にしてスタイル用のスクリプトを指定できるようにしてみました。

スタイルスクリプトを指定した埋め込みコード

var TbThumb = {
  theme:"http://yoursite/path/to/theme.js",
  nid:2980,
  width:640,
  //width:"80%",
  height:480,
  fontSize:20
};

新しく追加されているのは、

theme:"http://yoursite/path/to/theme.js",

の部分です。

"http://yoursite/path/to/theme.js" の部分はお使いのサーバーのURLに置き換えてください。

theme.jsの中身は例えばこんな風に書きます。

Nehan.setStyles({
  "body":{
    "font-size":"16px",
    "padding":{
        "start":"10px",
        "end":"10px"
    },
    "border-color":"wheat",
    "border-style":"solid",
    "border-width":"5px",
    "border-radius":"5px",
    "background-color":"wheat"
  }
});

このスタイルで埋め込んでみた結果

背景を変えて角を丸くしただけですが、再生すると普段とは違う表示になります。

注意事項

スタイルを設定する際にとりあえず覚えておいてほしい点を二つ上げておくと、

  • CSSプロパティはfont-sizeのようにハイフンを使った書き方になる点
  • margin/border/paddingなどを指定する方向として論理方向(start/end/before/after)を使っている点

です。

CSSのプロパティ名については、例えばfont-sizeのことをfontSizeのようには書けない、ということです。

論理方向については、日本語の縦書き(tb-rl)ならstart/endが上と下、before/afterが右と左、とでも覚えておいてください。

より具体的なスタイルスクリプトの書き方

興味のある人はhttp://tategakibunko.github.io/nehan.js/を参照してください。