Windows Live WriterでWordPressにソースコード入力させるプラグインをレスポンシブ対応カスタマイズ

ちょっとづつ賢くなってきている、あきら(@akrwnet)です(^v^)

 

タイトルがめちゃくちゃ長くなってしまいましたが、色々なブログを徘徊していて思うことですが、みなさん見やすい記事を書いてくれますね。

そこで、ソースコードを見やすく表示させる、下図のようなのもは、どのようにするのだろうと疑問に思って来ました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>  はだしで履くスニカー!めちゃくちゃ軽いクロックスのcrosmesh hover lace up</title>

<link rel="alternate" type="application/rss+xml" title="ちぇっくぼっくす☑ RSS Feed" href="https://akrw.net/feed">

 

こんなのが、Windows Live Writerから投稿できたら良いですもんね。

WordPressではプラグインがありそうですが、Windows Live Writerではどうなのだろうか?

何か方法はあるはずです!と思い検索を酷使してみることにします。

Googleさんに感謝!!

 

スポンサーリンク

プラグインを両方に導入すればOK!

検索、検索としていくとやはり見つかるもんですね。

@oyuki_sun さんが、いい記事を書きいてくれています。

 

導入方法は

Windows Live WriterでCode Snippet With Syntaxhighlighter Support for Windows Live Writerのプラグインを導入

WordPress側でもSyntaxHighlighterを導入して有効化しておきます。

※プラグインの追加より検索すれば出てきます。似たようなものがたくさん出てきますがとりあえずこれでOKでした→SyntaxHighlighter Evolved

 

それと、設定を変えておくらしいです。

そしてWordPressの設定。自分はWordPressに「SyntaxHighlighter」のプラグインを入れていたので「すべてのブラシを読み込む」にチェックを入れる。

via:Q-miz blog

よくわかりませんが、動くようになればそれでよし!とうことで、これが何かは調べなかったので割愛!

 

自分が失敗した設定時の注意点

Windows Live WriterでCode Snippet With Syntaxhighlighter Support for Windows Live Writerのプラグインを導入すると、PreCode Code Snippent Managerというプラグインが使用できるようになります。

ソースコードを表示したいところで、このプラグインを起動させると別枠でツールが開きます。

その時の注意点ですが、デフォルトの設定のままでは正常に表示されなかったので、ここでつまずきました。

 

とりあえず、もう少しイジって見ることにします。

Surround WithをPREに設定し、Highligter ClassをXML/HTMLにします。

さらに、Show Rulerにチェック


2012-07-01_11h54_26

 

気がつけばQ-miz blogで画像があるので、それ通りに設定すればよかっただけです・・・

 

Windows Live Writer上では、これでいいの?当具合にソースが普通に表示されてしまいますが、WordPressに投稿すればしっかり表示されるようになるはずです。

2012-06-30_16h40_34

これでもOK

 

実装してはみ出してしまった時の対処法

うまい具合にWordPress表示させることができたと思ったら、完全にはみ出して表示されています。

2012-06-30_07h38_18

全部のテーマでこうなってしまうのかはわかりませんが、少なくともこのブログで使用しているiTheme2ではこのようにはみ出してしまいました。

せっかくソースコードを入れても、これではイケてないですね。

このままではiPhoneなどで表示した時にも、レスポンシブWebデザインの対応はされないでしょう。

 

では、CSSでwidth:100%に編集してしまえばいい、と思ってもどこにあるんだろ??

ということは、前の記事で書いた方法が使えるのでは

はみ出し回避!関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化

これ→width:100% !important;

 

しかし、どういったタグで挿入すればいいのかわからない・・・

どうすればいいのか検索してみたところ、やっとのことでこの記事を発見

 

ここに書いてあるのは

.syntaxhighlighter

これでいいのか?ということで

.syntaxhighlighter{

width:100% !important;

}

 

この記述をCSSに挿入したところ、バッチリ表示されました。

もちろん実機で確認もOK!iPod touchですけど

 

width:100% !important; は、いろんなことに応用ができそうですね♪

ではまた(^‐^)ゝ

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. 紹介ありがとうございます。
    「すべてのブラシを読み込む」のチェックを入れるというのはWordPressの「SyntaxHighlighter Evolved」のプラグインの設定です。
    説明が分かりづらくて申し訳ありませんでした。

    • あきら より:

      おゆきさん
      コメントありがとうございます♪
      わかりづらいんでなく、自分がわからないからスルーしただけです。
      お気遣いありがとうございました(^v^)
      あきら

  2. […] 具合にいかずにWebをさまよっていたのですが、Windows Live WriterでWordPressにソースコード入力させるプラグインをレスポンシブ対応カスタマイズ の記事が大変参考になり、何とか実現するこ […]