.. meta:: :keywords: syntax2html, syntax2htmlドキュメント, ブログ, メール, サイト, ソースコード, 設定方法, 貼り付け, ソースコード表示, コード ***************** syntax2htmlの活用 ***************** ここでは `syntax2html `_ を、ブログやwebサイトでどのように活用するか、簡単に説明します。 説明はサービス別に行なっていきます。 .. contents:: 設定項目 :local: Blogger ======= HTMLコード 構文からHTMLコードを生成したら、ブログ記事の必要な箇所に貼り付けます。この時投稿画面のモードは「HTML」にします。 CSSコード | CSSコードはBloggerメニューの「テンプレート」から「カスタマイズ」を選択し、「テンプレートデザイナー」を開きます。 | テンプレートデザイナーのメニューから「アドバンス」を選択し、さらに「CSSを追加」を選びます。 | カスタムCSS追加画面を開いたら、コピーしたCSSコードを貼り付け、「ブログに適用」ボタンを押します。 参考: `Google Blogger `_ Googleサイト ============ GooleサイトではCSSの設定ができないようです。このため syntax2htmlでは、 **インラインCSS** をチェックし、HTMLコードにCSSを含めるようにします。 Googleサイトの記事の編集時に、「HTMLソースを編集」をクリックし、HTMLモードで構文のHTMLコードを貼り付けます。 参考: `Google サイト `_ .. _google_gmail: GMAIL ===== GMAILではHTMLメールを扱うことが可能です。 GMAILでHTMLメールを送信するには、通常HTML入力機能を持つメーラなどを使用します。 しかし今回は、GMAILのWebインターフェース上で構文のHTMLを貼り付けて、HTMLメールを送信する方法を紹介します。 出力画面のプレビュー表示を選択し、コピーします。 .. figure:: images\syntax2html005.PNG :class: img-border :width: 500 px 出力画面 Webインターフェース画面のメール本文の編集画面に貼り付けます。 ※ 背景色はPREタグではなくDIVタグに設定されているため、コードだけ選択しコピーしても貼り付けは出来ません。 .. figure:: images\syntax2html006.PNG :class: img-border :width: 500 px GMAIL画面 構文のフォントを Sans Serif などに変更し整えます。 また、コードの幅を制限したい場合は、入力画面の「PREタグCSS」に **width** で幅を指定します。試しにPREタグCSSに次のように指定してみます。 .. raw:: html
padding:.5em;width:300px;
		
するとコードは次のように指定の長さで区切られます。 .. figure:: images\syntax2html007.PNG :class: img-border syntax2html 出力例 これをGMAIL画面に貼り付けると、次のようになります。 .. figure:: images\syntax2html008.PNG :class: img-border :width: 500 px GMAIL画面 参考: `GMAIL `_ Hotmail 及び Windows Liveメール =============================== 手順は :ref:`google_gmail` と同様です。 .. figure:: images\syntax2html009.PNG :class: img-border :width: 500 px Hotmail画面 参考: `Hotmail `_ Yahooメール =========== 手順は :ref:`google_gmail` と同様です。 .. figure:: images\syntax2html010.PNG :class: img-border :width: 500 px Yahooメール画面 参考: `Yahooメール `_ FC2ブログ ========= HTMLコード 構文からHTMLコードを生成したら、ブログ記事の必要な箇所に貼り付けます。 CSSコード | 管理画面の「環境設定」→「テンプレート」設定を開き、使用しているテンプレートの「編集」リンクを開きます。 | テンプレートのソースが表示されますので、「スタイルシート編集」にCSSコードを貼りつけて、「更新」ボタンを押します。 参考: `FC2ブログ `_ ブログサービスでのインラインCSS =============================== この他、各ブログサービスでの :ref:`inline_css` の出力例があります。 インラインCSS は特別な設定なしに、記事にHTMLの出力コードを貼り付けるだけで、ソースコードを表示します。 .. include:: outline.rst :start-after: inline_sample_start :end-before: inline_sample_end