OpenLiveWriter 編集画面のカスタマイズ

記事を書くのに、OpenLiveWriterを使うようになりましたが、編集時の見た目がよくない。具体的にはこんな感じ。右側が実際のページ、左側が、編集中画面。

OpenLiveWriter側には、CSSが適用されていないので当たり前っちゃ、当たり前。今回は、これを何とかします。

ローカル用のＣＳＳの場所

OpenLiveWriter も表示用の設定を持っているはず。Previewで持ってこれたりするかテストしてみたものの、（標準のテンプレだと、そこそこにはなったが、）あまり上手くいかない。

素直に、実態のフォルダを探しにいくと、ありました。ここです。

ユーザーフォルダ下、AppData/Local/OpenLiveWriter/app-0.6.3/template の下です。

ここの defaultstyle.css に書き込んでやると、採用してくれます。

このCSSへ書き込む注意点

テーマ内のCSSをコピペしてくれば、そのまま反映されますっ、ってわけないです。QooQのテンプレだと、記事部分のCSSはこんな感じ。しかも、色は、カスタムプロパティを使ったりしてます。

  /* 個別記事本文 */
  #single-content{
	margin-top: 1em;
	line-height: 1.8;
  }
    #single-content p{
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }
  #single-content a{
      color: blue;
	  //text-decoration: underline;
  }
  #single a:hover{
  	 
  }
  #single-content h2 {
    font-size: 2.26rem;
    font-weight: bold;
    padding: .8em .5em;
    margin-bottom: 1em;
    margin-top: 1em;
    border-radius: 2px;
    line-height: 1.2;
    background: transparent;
    color: var(--font-color);
    position: relative;
    color: white;
    padding: 0.3em 0.5em 0.2em 1.8em;
    background-color: var(--background-base-color);
    border-radius: 10px;
  }
  #single-content h2::before {
    position: absolute;
    top: 52%;
    left: 0.7em;
    transform: translateY(-50%);
    content: '';
    width: 10px;
    height: 10px;
    border: solid 5px white;
    border-radius: 100%;
  }

これだと、Blogger側でくっついてくる、#single-content みたいな classやidがないため、反映されません。なので、中身だけ移します。例えば、h2の見出しだけならこんな感じ。

class や id 指定は取っちゃいます。また、色は直接コードを書き込みします。

h2 {
    font-size: 2.26rem;
    font-weight: bold;
    padding: .8em .5em;
    margin-bottom: 1em;
    margin-top: 1em;
    border-radius: 2px;
    line-height: 1.2;
    background: transparent;
    color: #312114;
    position: relative;
    color: white;
    padding: 0.3em 0.5em 0.2em 1.8em;
    background-color: #4D4136;
    border-radius: 10px;
  }

以前に、追加したオリジナル Blogcard なんかだと、class や id は、同じになるので、コピペでオッケーです。

出来栄え

だいたい、似たような雰囲気になりました。編集時だけの話なので、気になるところだけ弄っておきました。これで、編集がとっても楽になりますので、是非、お試しください。編集時専用のスタイルとかがあってもよいかもしれませんね。

補足

PreView の Update theme ってボタンがあるの、気になりますよね。これで、合わせてくれるんなら最高なんですが、QooQ のテンプレートだと機能しないです。標準のテンプレートだと、そこそこ、見える形にはなりました。こんな感じです。

もし、中身の記事重視のブログ運用で、標準テンプレートを使っているのであれば、この Update theme ボタンであわせるだけでもよいと思います。