syntax2htmlの活用¶
ここではsyntax2htmlを、ブログやwebサイトでどのように活用するか、簡単に説明します。説明はサービス別に行なっていきます。
Blogger¶
HTMLコード
構文からHTMLコードを生成したら、ブログ記事の必要な箇所に貼り付けます。この時投稿画面のモードは「HTML」にします。
CSSコード
CSSコードはBloggerメニューの「テンプレート」から「カスタマイズ」を選択し、「テンプレートデザイナー」を開きます。テンプレートデザイナーのメニューから「アドバンス」を選択し、さらに「CSSを追加」を選びます。カスタムCSS追加画面を開いたら、コピーしたCSSコードを貼り付け、「ブログに適用」ボタンを押します。
Googleサイト¶
GooleサイトではCSSの設定ができないようです。このため syntax2htmlでは、インラインCSSをチェックし、HTMLコードにCSSを含めるようにします。
Googleサイトの記事の編集時に、「HTMLソースを編集」をクリックし、HTMLモードで構文のHTMLコードを貼り付けます。
参考：Google サイト
GMAIL¶
GMAILではHTMLメールを扱うことが可能です。GMAILでHTMLメールを送信するには、通常HTML入力機能を持つメーラなどを使用します。しかし今回は、GMAILのWebインターフェース上で構文のHTMLを貼り付けて、HTMLメールを送信する方法を紹介します。
出力画面のプレビュー表示を選択し、コピーします。
出力画面
Webインターフェース画面のメール本文の編集画面に貼り付けます。
※ 背景色はPREタグではなくDIVタグに設定されているため、コードだけ選択しコピーしても貼り付けは出来ません。
GMAIL画面
構文のフォントを Sans Serif などに変更し整えます。
また、コードの幅を制限したい場合は、入力画面の「PREタグCSS」にwidthで幅を指定します。試しにPREタグCSSに次のように指定してみます。
padding:.5em;width:300px;
するとコードは次のように指定の長さで区切られます。
syntax2html 出力例
これをGMAIL画面に貼り付けると、次のようになります。
GMAIL画面
参考:GMAIL
FC2ブログ¶
HTMLコード
構文からHTMLコードを生成したら、ブログ記事の必要な箇所に貼り付けます。
CSSコード
管理画面の「環境設定」→「テンプレート」設定を開き、使用しているテンプレートの「編集」リンクを開きます。テンプレートのソースが表示されますので、「スタイルシート編集」にCSSコードを貼りつけて、「更新」ボタンを押します。
参考：FC2ブログ
ブログサービスでのインラインCSS¶
この他、各ブログサービスでのインラインCSSの出力例があります。インラインCSS は特別な設定なしに、記事にHTMLの出力コードを貼り付けるだけで、ソースコードを表示します。