◆　ブログとツール

 

　ブログの更新の方法は色々ありますが、オンラインで更新する方法と、オフラインで記事を書いてアップロードする方法がりあます。
 
　この場合、テキストだけだと問題なくアップロードができるのですが、複雑なものだとツールでは対応できない場合もあります。
 
　

 

  ブログの記事の構造

 
ブログの場合、画像などは一旦サーバにアップロードする仕組みなっているので、オフラインで作成したリッチテキストをそのままアップロードすることはできません。そのため、画像迄アップロードできるツールがあれば話は変わってきますが、画像を読み込んで配置と言う条件だと画像とテキスト部分の作業は分けて考えることになります。そのため、
 
 
■　html部分
■　画像部分
 
をアップロードしてオンラインで整形することになります。
　

 

  テキストの部分

 
画像にちいては、画像ファイルなので書くまでもありませんが、テキスト部分はhtmlですから、レイアウトを行うタグの構成を記述すればそのまま記事内でも反映させることができます。
 
　ブログの場合、アカウント取得後に用意されたテンプレートを使う方法と、カスタムを選択してCSSなどの指定を行い、常にそれを使えるようにする方法があります。
 
　これがブログ自体の構造になりますが、記事内ではタグのみ使用できますから、CSSの記述はタグ内に記述することになります。
 
　この条件で考えると、画像や外部参照を行う部分をダミーにしておけば、記事の部分は作れるのでHTML表示にして記事に貼り付ければ同じレイアウトを使用することができます。
　

 

  ＨＴＭＬとエディタ

 
HTMLファイルを作る場合、マークアップランゲージ部分だけであれば、テキストエディタでも作れますが、ワープロソフトにもHTMLのエクスポート機能があるので、WYSWYGで記事を書いて、HTMLでエクスポートした後にタグの表示にしてそれをコピー＆ペーストすればそのままテキスト部分を反映させることができます。
 
　ただし、オフィースソフトのOLEも使えるようなので、
 
 
のようにLibre OfficeのCALCを開いて範囲選択後にコピーを行い、ブログ側で貼り付けを行うと
 
 
のようにテーブルが反映されていました。
 
 
テーブルはワープロソフトのWRITEでも組めますが
 
１ ２ ３
AAA BBB CCC
○○○ ■■■ ▲▲▲
--- --- ---

 

のような構造をそのまま持ってくることができます。

 

 
と言っても、ブログのレイアウトに合わせた表を持ってくることになるので、幅の成約は受けますが、そのまま表を持ってくることができます。
 
　CSSなどもそのまま適応できますが、こうした処理は専用のエディタのほうが作業がしやすいと思います。
 
ワープロソフトの場合、直感的に文章のレイアウトができるので、状態を見ながら構造を作ることができますが、
　
 
のように記事の雛形を作ったとにコピーを行い、ブログに貼り付けると
 
 
 
のように反映されます。
　

 

  Markdown

 
HTMLを作る場合、Markdownで記述してからHTMLに変換する方法があります。
 
　Visual Studio Codeだと
 
 
のようにMarkdownに対応していますが、
 
 
を使用することで、HTMLファイルでエクスポートすることもできます。
 
 Visual Studio Codeでも
 
 
のようにプレビュー画面をコピーして貼り付けてみるとブログに反映されました。
 
 
アドオンを使うとHTMLがMDファイルと同じ階層に作成されるのですが、
 
 
のようにCSSの設定も行われており、その上でタグの記述になっていました。
　

 

  CSS

 
　HTMLでは、＜B＞文字列</B>のような形でタグを指定することで装飾やレイアウトをすることができますが、タグに対して効果を追加することができます。これは、タグのプロパティの指定でも行えるのですが、個別に細かく指定する際にはCSSを使用します。
 
　CSSはカスケード・スタイル・シートの略ですが、タグの中に記述することで、タグにはない効果を追加することができます。例えば、 <I><B>文字列</B></I> の様な記述を行った場合、斜体のタグに太字の効果を追加した文字列が入っているので、実際に表示をすると 文字列  のようになります。
 
<P>タグには効果がないので
 

文字列

 
のようになりますが、<P STYLE="FONT-SIZE:15PT;FONT-WEIGHT:BOLDER;BACKGROUND-COLOR:#222222;COLOR:#FF9900;">■ 文字列</P>のようにすると
 

■ 文字列

 
のような表示になります。このような記述にすると
 
<DIV>
<P>
     ■ 見出し
</P>
<P>
     文章
</P>
<P>
     リスト
</P>
<P>
     文章
</P>
<P>
     ■ 小見出し
</P>
<P>
     文章
</P>
</DIV>
 
のような構成にした際に各<P>タグに目的のCSSの記述をしておけば、その状態を指定できます。例えば、
 
<DIV>
<P STYLE="FONT-SIZE:20PT;FONT-WEIGHT:BOLDER;BACKGROUND-COLOR:#222222;COLOR:#FF9900;">■見出し １</P>
<P>
     文章
</P>
<P>
     <LI>項目１</LI>
     <LI>項目２</LI>
     <LI>項目３</LI>
     <LI>項目４</LI>
</P>
<P>
     文章
</P>
<P STYLE="FONT-SIZE:15PT;FONT-WEIGHT:BOLDER;BACKGROUND-COLOR:#222222;COLOR:#FF9900;">■ 小見出し</P>
<P>
     文章
</P>
</DIV>
のような構造だと
 

■見出し １

     文章

     

  • 項目１
  • 項目２
  • 項目３
  • 項目４

 

     文章

■ 小見出し

     文章

 
 
のようになります。<P>タグは、文節などを扱う時に使用する物なので、文章の中では使用できませんから、
 
　このテキストは、■ 小見出し を使用しています。
 
のような文章の中に装飾を入れる場合には、<B>タグなどを用いることになります。また、<SPAN>タグを使用しても
 
　このテキストは、■ 小見出し を使用しています。
 
のように文章内の文字列に対して装飾を追加する事が出来ます。
 
　通常のHTMLファイルを作成する場合だと、同じ装飾がある場合だと外部にCSSファイルを作成して、その中の記述を読み込んで使用することになりますが、ブログの場合だとタグ内にCSSの記述を行うことになります。
 
　CSSはヘッダーに記述することもできるのですが、ブログではタグの内部にしか記述ができないので、HTMLファイルの生成時に指定をしておくことになります。
 
　CSSについては、
 
 
の中でも触れていますが、装飾だけでなく画像のフィルター処理などもおこなえるので、自由度の高い処理が実装できるようになっています。
 
　WriteでHTMLの編集をする場合には、{}のアイコンをクリックするとコードとWYSWYGの編集を切り替えることができるので、タグの編集時にCSSを追加することもできます。
　
　画像ファイルはサーバ内にアップしないと参照できないので別の作業になりますが、マークアップランゲージの記述の部分だとOLEの利用が可能で、編集環境の選択肢も複数存在しています。
　

 

  ブログの仕様

 
　ブログでは使用禁止のタグが存在しますが、未対応の機能も存在します。アメブロだと、MathMLは非対応なので、数式についてはタグではなく、LibreOfficeのMathを使って画像を作ってアップロードする必要がありますし、セキュリティーの関係からスクリプトタグは使用禁止となっています。
 
 ブログの場合、使用できる機能の範囲内で記事を書くことになりますが、文字数の制限はプレビュー時の文字数ではなくHTML表示で記述している内容の文字数なのでタグの構成でも文字数が結構違ってきます。アメブロではアニメーションSVGにも対応しているので、文字数を掃討消費島Sが、文字数の範囲内であれば記事に載せる事が出来ます。この場合も、HTML表示で記述した内容を貼り付けることになります 。