WLWからブログにソースコードを その2

前回、Insert Codeというプラグインで何とかソースコードを貼り付けたのだが、何やら結果が思わしくない。
前回と同じコードを試してみたのがこちら。
現実
やっぱり、「投稿」ボタンからの投稿だと、レイアウトが変わってしまう(今回はスタイルシートを弄っているので、貼り付けてあるのは画像だ)。

何が欠落するのか?
前回は結果だけしか示さなかったのだが、もうちょっと原因に踏み込んでみたいと思う。
欠落部分について
コード上段
Insert Codeを使ってWLWで記事を作成し、ブログに投稿する。
すると、何故か全段の上の部分だけが投稿されてしまい、後段の以下の部分は綺麗さっぱり消えて無くなってしまう。
コード下段
スタイルを定義したcsharpcodeというCSSの記述部分が消えてしまうようだ。
解決方法は?
Insert Codeを使ってWLWで記事を作成したあと、投稿する際にスタイルシートの埋め込み部分が消える、ということは送る側に問題があるのか、受け取る側に問題があるのか、いずれかだろう。だが、どちらに問題があるのかは素人の僕にはさっぱり分からない。
前の記事で紹介したように、オンライン編集で直接HTMLにコピペしてやれば反映されることから考えても、転送時の問題だ、ということは予想される。が、解決策は分からない。もしかしたら作者がその辺りを説明しているかもしれないが、英語なのでヘルプがあるかどうかすら分からない状況だ。

Insert Codeを使った際に、「Embed StyleSheet」にチェックを入れると、スタイルコードを生成して、テキストの後ろに付けるのだが、これがアップロードの際に欠落してしまう。

プラグインとして、この現象はちょっと拙い気がするのだが、だからといって改善方法は今のところ思いつかない。

だが、よく考えたらスタイルシートなど、一度決めてしまえばそうそう変更するものでもない。むしろ、ブログ側で弄ってやった方が良いのでは?という気がする。
だとすれば、解決方法としてはスタイルシートはブログ側に直接埋め込んでしまえば良い、ってな話になろう。

ちょうど、このサイトに、関連のことが書かれていて、参考にしながらやってみよう。
「テンプレート>HTMLの編集」で、直接書き込んでおけば、無事に反映されるはず。「Embed StyleSheet」にチェックは外して、WLWで記事を作成して投稿する。

   1:  .csharpcode pre  /* コードを埋め込む */
   2:  {
   3:      font-size: small;  /*  文字サイズ */
   4:      font-family:  Consolas ,"Lucida Sans" ,"Helvetica Neue", Arial, Helvetica, Geneva, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif; 
   5:      color: #2F4F4F; /* 文字色 */
   6:          background-color: #FFEFD5; /* バックグラウンドカラー */
   7:          width : 100%;
   8:          line-height: 1.0em;
   9:  }
  10:  .csharpcode pre { margin: 0em; }
  11:  .csharpcode .rem { color: #008000; }
  12:  .csharpcode .kwrd { color: #0000ff; }
  13:  .csharpcode .str { color: #006080; }
  14:  .csharpcode .op { color: #0000c0; }
  15:  .csharpcode .preproc { color: #cc6633; }
  16:  .csharpcode .asp { background-color: #ffff00; }
  17:  .csharpcode .html { color: #800000; }
  18:  .csharpcode .attr { color: #ff0000; }
  19:  .csharpcode .alt 
  20:  {
  21:      background-color: #EEE8AA;  /* 行ごとの色替え */
  22:      width: 100%;
  23:      margin: 0em;
  24:  }
  25:  .csharpcode .lnum { color: #606060; } /* 注釈の色分け */
 

さらに、こちらのコードを、/*Postの中に書き込んでやろう。
すると、何とか無事に記事にコードの貼り付けが出来たようだ。スクロールバーを付ける、とか折り返しを解除してやる、なんて方法もありそうだが、僕には今のところさっぱりである。

まだまだ無駄なコードがあるし、やりたいことも半分くらいしか実現出来ていない。もうちょっと勉強しないといけないらしいな。



旨く行ったら、また報告したいと思う。


<追記>

どうやら、「Font-size」が反映されていないらしいことと、fireFoxでは折り返してくれないことが判明した。ううーん、どうしたものやら。


ランキングへの応援クリックよろしく!




このブログの人気の投稿

ハンドブレンダーをオススメ

エーハイム2213、呼び水でホースを口で吸うのが嫌な人の為に