syntax2htmlの活用

ここではsyntax2htmlを、ブログやwebサイトでどのように活用するか、簡単に説明します。説明はサービス別に行なっていきます。

Blogger

HTMLコード

構文からHTMLコードを生成したら、ブログ記事の必要な箇所に貼り付けます。この時投稿画面のモードは「HTML」にします。

CSSコード

CSSコードはBloggerメニューの「テンプレート」から「カスタマイズ」を選択し、「テンプレートデザイナー」を開きます。
テンプレートデザイナーのメニューから「アドバンス」を選択し、さらに「CSSを追加」を選びます。
カスタムCSS追加画面を開いたら、コピーしたCSSコードを貼り付け、「ブログに適用」ボタンを押します。

参考:Google Blogger

Googleサイト

GooleサイトではCSSの設定ができないようです。このため syntax2htmlでは、インラインCSSをチェックし、HTMLコードにCSSを含めるようにします。

Googleサイトの記事の編集時に、「HTMLソースを編集」をクリックし、HTMLモードで構文のHTMLコードを貼り付けます。

参考:Google サイト

GMAIL

GMAILではHTMLメールを扱うことが可能です。GMAILでHTMLメールを送信するには、通常HTML入力機能を持つメーラなどを使用します。しかし今回は、GMAILのWebインターフェース上で構文のHTMLを貼り付けて、HTMLメールを送信する方法を紹介します。

出力画面のプレビュー表示を選択し、コピーします。

../_images/syntax2html005.PNG

出力画面

Webインターフェース画面のメール本文の編集画面に貼り付けます。

※ 背景色はPREタグではなくDIVタグに設定されているため、コードだけ選択しコピーしても貼り付けは出来ません。

../_images/syntax2html006.PNG

GMAIL画面

構文のフォントを Sans Serif などに変更し整えます。

また、コードの幅を制限したい場合は、入力画面の「PREタグCSS」にwidthで幅を指定します。試しにPREタグCSSに次のように指定してみます。

padding:.5em;width:300px;

するとコードは次のように指定の長さで区切られます。

../_images/syntax2html007.PNG

syntax2html 出力例

これをGMAIL画面に貼り付けると、次のようになります。

../_images/syntax2html008.PNG

GMAIL画面

参考:GMAIL

Hotmail 及び Windows Liveメール

手順はGMAILと同様です。

../_images/syntax2html009.PNG

Hotmail画面

参考:Hotmail

Yahooメール

手順はGMAILと同様です。

../_images/syntax2html010.PNG

Yahooメール画面

参考:Yahooメール

FC2ブログ

HTMLコード

構文からHTMLコードを生成したら、ブログ記事の必要な箇所に貼り付けます。

CSSコード

管理画面の「環境設定」→「テンプレート」設定を開き、使用しているテンプレートの「編集」リンクを開きます。
テンプレートのソースが表示されますので、「スタイルシート編集」にCSSコードを貼りつけて、「更新」ボタンを押します。

参考:FC2ブログ

ブログサービスでのインラインCSS

この他、各ブログサービスでのインラインCSSの出力例があります。インラインCSS は特別な設定なしに、記事にHTMLの出力コードを貼り付けるだけで、ソースコードを表示します。