--
    --.--

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    このエントリーをはてなブックマークに追加
    2013
    05.14

    AppleScriptHTMLで外部CSSを適用してみた(2) 操作編

    外部CSSの設定ですが、実際の操作メモをさらします。
    一応成功していると思いますが、素人仕事なので凡ミス注意です(汗
    参考程度・自己責任でご活用下さい(^-^;



    (1) CSS部分だけを取り出し(AppleScriptHTMLでの作業)

    以下の設定でCSSだけを吐き出させ、ファイルに保存します。
    コードをHTMLに変換=OFF, スタイルシート=内部、スクリプトリンクを生成=OFF



    (2) CSSを自分好みの設定に書き換え(テキストエディタでの作業)

    改行コード等を変更できるエディタで開いて編集。
    私はmiを使って編集しました。
    編集後、文字コードをUTF-8, 改行コードをLF(UNIX)に指定して、
    適当な名前"AppleScriptHTML.css"で保存。

    ちなみに変更部分はこんな感じ。

    background-color:#f8f8f8;
    ->バックグラウンドの色を指定しています。

    line-height: 130%;
    ->行間を指定しています(やや詰め気味にしました)

    その他、好みに合わせて値や単位などを若干変更した結果、
    CSS終盤の.SourceCodeと.scriptButtonの部分はこんな感じになりました。

    .sourceCode  {
    position: relative;
    background-color:#f8f8f8;
    font-family: sans-serif;
    line-height: 130%;
    margin: 0.5em 2em;
    padding: 2em;
    border: solid 1px black }
    .scriptButton {
    position: absolute;
    top : 0.5em;
    right: 0.5em;
    text-align: right;}




    (3) 書き換えたCSSファイルをアップロード(ブラウザでの作業)

    FC2のファイルアップロードにてアップロードしました。
    アップロード後、画面の下の方にファイルのリンクが表示されるのでメモしておきます。
    例:http://blog-imgs-50.fc2.com/w/6/o/w6o6n/AppleScriptHTML.css

    注意:上書き保存の場合、アップロードの画面では「ファイルが更新された」と表示されるのに、(プレビューボタンや実際の挙動では)前のファイルのままのことがあります。実際に更新されるまでしばらく待ちましょう^-^;



    (4) 外部CSSに依存した形に変更

    AppleScriptHTML)今後は以下のような設定でhtmlを生成します。
    コードをHTMLに変換=ON, スタイルシート=なし(クラス名のみ)、スクリプトリンクを生成=ON
    クリップボード経由でブラウザのブログ編集ウィンドウにペースト。

    (ブラウザ)(2013.5.17訂正) 外部CSSファイルを指定するため、ブログのhtmlに設定を仕込みます。

    FC2ブログの設定コーナーの「テンプレートの設定」のHTML編集のところで
    htmlの先頭にある<head>タグの中に次の一文を追加
    <link href="http://blog-imgs-50.fc2.com/w/6/o/w6o6n/AppleScriptHTML.css" rel="stylesheet" type="text/css" />


    注意:下線部のところには自分のCSSファイルのURLを貼って下さい。

    最後にブログの編集画面で「改行の扱い=HTMLタグのみ」に設定して、
    テキストの改行を<br />に置き換えればできあがり!



    おまけ:ブログで上記の<head>などを画面に表示させるためには「エスケープ処理」が必要になります。
    今回はmiを使ってエスケープ処理しました。
    メニューのドキュメント>モード>HTMLにしてから、範囲を指定して、
    メニューのツール>その他>選択範囲の<>&を文字実体参照に変換 とすると出来ますよ♪
    関連記事

    このエントリーをはてなブックマークに追加
    トラックバックURL
    http://w6o6n.blog.fc2.com/tb.php/23-3049b772
    トラックバック
    コメント
    管理者にだけ表示を許可する
     
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。