ラベル Windows Live Writer の投稿を表示しています。 すべての投稿を表示
ラベル Windows Live Writer の投稿を表示しています。 すべての投稿を表示

2015年12月25日金曜日

ブログ (Blogger) への投稿は Windows Live Writer から Open Live Writer へ乗り換えた

1. Windows Live Writer でブログが投稿できない

SnapCrab_Windows Live Writer_2015-12-13_17-24-0_No-00これまで Blogger への投稿は、Windows Live Writer (WLW) を利用してきた。しかし、最近、Blogger 接続できなくなり、使えなくなってしまった。
症状は、WLW で投稿、及び、接続を試みると「パスワード」が間違っているとの警告ダイアログが表示される。
原因は、Blogger へ接続するクライアントアプリの認証方式が変わったため。
Convert Google Blogger ClientLogin to OAuth 2.0 · Issue #5 · OpenLiveWriter/OpenLiveWriter · GitHub によると、
Google Blogger deprecated ClientLogin in 2012 but Open Live Writer is still using it.

2. オープンソース化され Open Live Writer となった

ところで、Windows Live Writer はオープンソース化され、Open Live Writer (OLW) として生まれ変った。
SnapCrab_NoName_2015-12-21_0-14-8_No-00
Announcing Open Live Writer - An Open Source Fork of Windows Live Writer - Scott Hanselman によると、
Today is the day. An independent group of volunteers within Microsoft has successfully open sourced and forked Windows Live Writer. The fork is called Open Live Writer (also known as OLW) and it is part of the .NET Foundation and managed by this group of volunteers. Read the fantastic announcement at the .NET Foundation Blog! Download Open Live Writer now!
Windows Live Writer 2012 was the last version Microsoft released and can still be downloaded from http://www.windowslivewriter.com. If you're not comfortable using Open Source Software, I recommend you stick with classic WLW.

3. Open Live Writer で Blogger へ接続できるようになった

オープンソース化された当初 (v 0.5.0.) 、WLW と同様に Blogger へ接続できなかった。
SnapCrab_About Open Live Writer_2015-12-20_23-54-8_No-00ほどなくして、2015-12-21 現在、OLW のバージョンは、0.5.1.2 となり、Blogger へ接続できるようになった。
Release Blogger V3 API Support · OpenLiveWriter/OpenLiveWriter · GitHub によると、
This release provides the initial version of Blogger support using their latest API to unblock users of Blogger.

a. OLW のインストールと Blogger への接続
Open Live Writer よりダウロードして、インストーラーを実行。
Configure Open Live Writer で Next を選択。
SnapCrab_Open Live Writer_2015-12-13_17-25-26_No-00
What blog service do you use? において、Google Blogger を選択し、Next を選択。
SnapCrab_Open Live Writer_2015-12-20_23-50-56_No-00

b. Google で認証
Provide Google Blogger Login において、Sign in を選択。
SnapCrab_Open Live Writer_2015-12-20_23-51-3_No-00
Google おいて、認証画面が表示されるので、「許可」ボタンを選択する。
SnapCrab_許可のリクエスト - Mozilla Firefox_2015-12-20_23-51-6_No-00
Select blog において、複数のブログを作成してある場合、対象のブログを選択する。
SnapCrab_Open Live Writer_2015-12-20_23-51-14_No-00
最後に、Your blog has been set up ダイアログにおいて、Finish ボタンを選択。
SnapCrab_Open Live Writer_2015-12-20_23-51-36_No-00
これで、ひどまず OLW を使って投稿できるようになった。^^

2014年3月24日月曜日

Windows Live Writer のプラグイン Dynamic Template plug-in で「アンカー」「日付」「ソースコードの整形」をテンプレートで挿入する

1. テンプレートを挿入する Snippets Manager の起動でエラーが表示される

Windows Live Writer でテンプレートを挿入するプラグインとして、Snippets Manager  を利用していた。

このプラグインを起動するとき、エラーが表示されるようになってしまった。

SnapCrab_No-0879

使用上は問題ない。しかし、エラー表示が気になるので、同じような機能を持つプラグインに乗り換えることにした。

 

2. Dynamic Template plug-in に乗り換えた

Dynamic Template plug-in は、テンプレートを登録できるプラグイン。

SnapCrab_NoName_2015-12-2_2-53-0_No-00

特徴は、静的なテンプレートだけではなく、C# を利用して動的に文字列を生成することができること。

より、DynamicTemplate.msi をダウンロードしてインストールした。

 

a. 基本的な書き方

テンプレートの中で C# の文を実行するには、

<% 文 %>

式の結果を得るには、

<%= 式 %>

「選択した文字列」を表す、特別な変数も用意されている。

_selection

 

b. 「アンカー」を挿入する

最初に、Snippets Manger を使ってアンカーを作成したテンプレートと同じものを登録する。

Windows Live Writer のメニューより、挿入 > Dynamic Template を選択。

SnapCrab_No-0878

Insert Template ダイアログで New ボタンを押す。

New Template ダイアログの Name: フィールドにテンプレートの名前を入力する。ここでは Anchor とした。

SnapCrab_No-0883

このテンプレートを使うとき、アンカーを挿入するために、「アンカーの名前」をダイアログで入力する必要がある。

そのためには、Edit Template: 画面で、ダイアログで入力された文字列を受け取る変数 name と、ダイアログに表示するラベル Anchor name を設定した。

SnapCrab_No-0884

Template Body: には、以下のように入力する。

<a name="<%= name %>"><%= _selection %></a>

 

c. 「追記(日付): を挿入する

ブログの内容を後から「追記」するとき、自分の場合、以下の形式で書くようにしている。

追記(2014/3/23): 追記したい内容

「日付」を自動で入力するには C# を利用して、Template Body に以下のように入力する。

<strong>追記(<%= DateTime.Today.ToString("yyyy/M/d") %>)</strong>:

ついでに、「追記」の位置に日付でアンカーを挿入するには、以下のように記述する。

<strong>追記<a name="<%= DateTime.Today.ToString("yyyyMMdd") %>"></a>(<%= DateTime.Today.ToString("yyyy/M/d") %>)</strong>:

 

d. ソースコードを整形する

ブログにソースコードを貼り付ける場合、google-code-prettify を利用している。ブログに内容を貼り付けるには、コードを選択し、 AutoHotKey で自動入力している。

同じようなことを Dynamic Template plug-in で行うには、Template Body に以下のように入力する。

<pre class="prettyprint"><%= _selection %></pre>

このテンプレートを利用するには、

  1. Windows Live Writer にソースコードを貼り付ける。
  2. ソースコードを選択し、上記のテンプレートを実行する。

 

e. HTML のソースを変換する

追記(2014/3/26): HTML のソースを、Windows Live Writer の「編集」モードで記述したときの状態に変換することができる。Level 3 - Using Selection > Watch Example 4 にサンプルが紹介されている。

<%= HtmlDecode(_selection) %>

これにより、例えば、以下の HTML のアンカー表現を、

<a href="http://jutememo.blogspot.jp/">すぐに忘れる脳みそのためのメモ</a>

下記のように変換することができる。

すぐに忘れる脳みそのためのメモ

これにより、書式情報を持つことができないエディタから、HTML のアンカーを貼り付けたものを簡単に変換することができるようになった。

ただし、Windows Live Writer に HTML のアンカーを貼り付けると、下記のように http:// ではじまる部分が自動的にリンクに変換されてしまうので、予めリンクを削除しておく必要がある。

<a href=http://jutememo.blogspot.jp/>すぐに忘れる脳みそのためのメモ</a>

Make Link  で作成 した HTML のアンカーを、Firefox のアドオン QuickFox NotesGoogle Keep に保存したものを活用しやすくなった。

2014年3月22日土曜日

Windows Live Writer のプラグインを削除するにはインストーラーを利用する

1. プラグインを削除したい

Windows Live Writer にインストールしたプラグインを削除したい。

  • アプリケーション ボタン > オプション > プラグイン

より、プラグインを無効にすることはできる。しかし、削除するための操作ボタンはない。

SnapCrab_No-0886

 

2. インストーラーを利用して削除

プラグインを削除するには、プラグインをインストールしたときのインストーラーを利用する。

例えば、アンカーを挿入するプラグインである Snippets Manager を削除したいとする。

最初に Snippets Manager をダウンロードし、インストーラーを起動する。

もし、Snippets Manager が既にインストールされている場合、プラグインの「修復」または「削除」の選択肢が表れる。このとき、Remove Snippets Manager … を選ぶとプラグインを削除できる。

SnapCrab_No-0885

2014年3月21日金曜日

Windows Live Writer を 2012 (v16.4.3522.110) に更新し、WLW Post Downloader Plugin を再インストールした。

1. 長いことアップデートしてなかった Windows Live Writer 2011

SnapCrab_No-0874ブログを書くために、Windows Live Writer を利用している。このアプリケーションを長いことアップデートしてないで使い続けていた。

バージョンを確認すると、

Windows Live Writer 2011, Version 2011 (Build 15.4.3555.308)

Windows Live Writer – Wikipedia によると、

最新版  2011 (15.4.3502.0922) / 2010年09月30日(3年前)

と書かれているが、Windows Live Writer - Wikipedia には、安定版として、より新しいバージョンが記載さている。日付を見ると、割と最近も更新されている

Stable release  2012 (v16.4.3522.110) / February 20, 2014; 25 days ago

MS 製品なので、自動的にアップデートの通位が来ると思っていたが、手動でインストールする必要があるらしい。

古いバージョンのアプリケーションをダウンロードできる FileHippo.com で確認しても、2012 (16.X.XXXX) の系列が列挙されている。

新しいバージョンがあることに気がついていなかった。(+_+)

 

2. Windows Live Writer 2012 に更新

Windows Essentials - Windows Live Essentials より Windows Essentials をダウンロード。

起動して、ダイアログが表示されたら、「インストールする製品の選択」を選ぶ。

SnapCrab_No-0876

「インストールするプログラムの選択」ウィンドウで、Writer のみ選択する。

SnapCrab_No-0877

これで最新の Windows Live Writer 2012 に更新された。

バージョンは Version 2012 (Build 16.4.3522.110)

SnapCrab_No-0875

 

3. WLW Post Downloader Plugin を再インストール

Windows Live Writer をインストール後、投稿した記事を編集する WLW Post Downloader Plugin が正常に動作しなくなった。そのため、再インストールした。

2013年2月19日火曜日

Windows Live Writer で記事を投稿するときにエラーが出続ける

Windows Live Writer で記事を投稿するとき、エラーが表示されてどうしても投稿できない時がある。

リモートサーバがエラーを返しました: (403) 使用不可能

SnapCrab_ファイルを公開できません_2013-2-19_3-12-18_No-00

この場合、何度投稿を繰り返しても投稿できない。

投稿されるためには、Windows Live Writer で開いている記事を一度全て閉じ、再度投稿したい記事を開き、投稿ボタンを押すと良い。

2012年3月5日月曜日

リボンUI を活用するためのショートカットキーの設定 - Windows LiveWriter の場合

1. リボン UI におけるショートカットキー

Windows Live Writer では、リボンUI が採用されている。

リボン (GUI) - Wikipedia によると、

リボンとは、マイクロソフトアプリケーションソフトウェアツールバータブバーで採用しているグラフィカルユーザインタフェース (GUI)である。Microsoft Office 2007で初めて搭載されて以降、徐々にリボンを採用したソフトが増えている。

WLW におけるリボンUI は、以下のようになっている。

img_0065

例えば、文章を書いていて、箇条書きにしたい場合は、

  • ホーム > 段落 > 中黒

を選択。キーボードショートカットを用いるなら、Alt キーを押した後、H を押し、

img_0067

ZP11 を順に押下した後、

img_0066

L1 を順に押す。

img_0068

しかし、この方法では、ショートカットキーが長すぎて、キー入力が面倒。 (+_+)

 

2. 短いショートカットキーを利用する

Windows Live Writer のウィンドウの幅を広げると、中黒が表示される。この場合、

  • Alt, H, L, 1

と順にキーを入力をすると、中黒を選択できる。

img_0070

便利なことに、上記のショートカットは、ウィンドウの幅が狭く、中黒が表示されてない先ほどの状態でも使えること。

 

3. 「クイック アクセス ツールバー」を利用して、ショートカットキーを短縮

よく使う操作に対して、より素早くアクセスするために、「クイックアクセスツールバー」に登録することができる。

例えば、中黒が、よく使うショートカットキーなら、、

  • 中黒のボタン(アイコン)の上で右クリック > 「クイック アクセス ツールバーに追加

を選択する。

これにより、 Alt, 1 を順に押下することにより、中黒が打てるようになる。

img_0071

2011年11月10日木曜日

ブラウザで表示し見ている記事をその場で即編集 - Windows Live Writer で直接記事を取得する WLW Post Downloader Plugin とブックマークレット

0. 目次

 

1. WLW で過去の投稿一覧を取得するのには時間がかかる

Windows Live Writer (WLW)で、最近投稿したブログの記事を修正する場合、

  • 「ホーム」タブの左横にある Live Writer ボタン > 最近の記事を開く

を選択し、過去の記事を開く。

これに対し、過去の古い記事を修正するには、

  1. Blogger で、投稿した記事を開き、 HTML モードで表示する。
  2. HTML で表示された内容を WLW へコピペ。
  3. 記事を修正する。
  4. WLW で内容をHTML 表示にして、コピーする。
  5. Blogger で、HTML をコピーした元の場所へペーストする。

Windows Live Writer から、直接遠い過去に投稿した記事を編集したい場合は、

  1. 「ホーム」タブの左横にある Live Writer ボタン > 最近の記事を開く
  2. ダイアログが表示されたら、編集したい投稿のあるブログを選択
  3. 「表示する項目の数」で「すべて」を選択
  4. タイトルの一覧が表示されたら、「記事のフィルター処理」に、編集したいタイトルを入力
  5. 対象の記事をダブルクリック

11-10-20111

たくさん記事があると、投稿記事の一覧を取得するの時間がかかる。過去の記事を、直接取得することはできないだろか?

 

2. WLW Post Downloader Plugin を利用して、直接記事を取得

How to edit very old posts with Windows Live Writer」には、プラグイン

を利用して、直接記事を WLW で取得する方法が紹介されていた。早速、上記プラグインをダウンロードして、インストール。

 

記事の取得方法

11-10-20112過去の記事を編集する場合は、

  1. 過去に投稿した、編集したい記事のページを開く。
  2. ロケーションバーに表示されている URL の http wlw に置き換えて Enter キーを押す。
  3. WLWPostDownloader の起動が促されるので、許可する。

ただし、Firefox 8 では、ロケーションバーに http が表示されていないので、URL の先頭に

wlw://

を追加すれば良い。

これで、直接対象の記事を Windows Live Writer で開いてくれる。

追記(2012.4.6): Window Live Essentials 2011 のアップデートを適用したら、WLW Post Downloader Plugin が正常に動作しなくなった。

SnapCrab_No-1621再度、WLW Post Downloader Plugin を実行し、

  • Repair WLW Post Downloader

をする必要がある。

追記(2014/12/20): 上記の方法でも正常に動作しない場合、

  • Windows のコントロールパネル > プログラムのアンイストール

より、WLW Post Downloader を削除した後、再インストールを行う。その後、

  • Firefox のオプション > プログラム

において、

  • ファイルの種類(Content Type); wlw
  • 取り扱い方法; C:\Program Files (x86)\Windows Live\Writer\WLWPostDownloader.exe

に設定されていることを確認する。

SnapCrab_No-1597

 

3. 記事を編集するためのブックマークレット

追記(2012.2.6): ワンクリックで記事を編集するために、ブックマークレット「この記事を編集」をブラウザに保存しておく。

使い方は、

  1. 編集したい記事を、ブラウザで開く。
  2. ブックマークレット「この記事を編集」をクリックすると、WLW で記事が開かれる。

JavaScript の実装

ブックマークレットの内容は、以下の通り。

(function(){
    var l=location, hs=l.hostname.split('.');
    l.href="wlw://" + hs.slice(0,hs.length-1).join('.') + ".com" + l.pathname;
})();

Compress javascript and css. を利用して、上記コードを圧縮した。

追記(2012.3.19): Blogger の URL が .com から .jp へリダイレクトされるようになったので、上記のブックマークレットを修正した。

 

4. WLWPostDownloader.exe の優先度を上げる

追記(2014/10/25): アプリケーションの優先度を最適化するために Process Lasso を利用している。できるだけ素早く、Windows Live Writer を起動したいので、WLWPostDownloader.exe の優先度を Hight に変更した。

SnapCrab_No-1563

  • WLWPostDownloader.exe で右クリック > Priority Class > Always > Hight

を選択。ただし、WLWPostDownloader.exe を起動しているときにしか設定できないので注意。

2011年11月5日土曜日

Windows Live Writer で挿入する画像の、余白のデフォルトを設定するには

画像を挿入し、余白を設定する

Windows Live Writer (以降、WLW と略す)に、「画像」を挿入するためには、

  1. 画像ファイルを WLW にドラッグ・アンド・ドロップ
  2. 大きさ、配置、余白などを調整

11-05-20118という手順を踏む。

ここで、「余白」を調整するためには、

  1. 画像をダブルクリックして、画像ツ-ルの「形式」タブを表示させる。
  2. リボンの右隅にある「余白」をクリック。
  3. 上下左右の余白をピクセル単位で入力

 

一度行った設定を「既定に設定」する

余白は、デフォルトでは、上下左右 0 ピクセルとなっている。しかし、実際に画像を挿入するときは、文章との間を少し空けた方が見栄えがいいので、適当に画像の周りに余白を付ける。

この設定を画像ごとに毎回していたら、面倒で嫌になる。デフォルトとなる値を設定しておきたい。

そのためには、一度、ある画像で余白を設定したら、その後、

  • 設定 > 既定に設定

を押しておく。

11-05-20119

これにより、次回から、画像を WLW にドラッグ・アンド・ドロップすると、「既定」とした余白が自動的に適用される。

 

既定に設定の意味

「既定に設定」の説明には、次のように書かれている。

配置、余白、画像のスタイル、及びこの画像のプロパティを他の画像に適用する既定として設定します。

余白以外にも、一番よく使う画像のサイズ、配置などを設定した後、「既定に設定」をしておくと便利。

長いこと WLW 使っていて、この機能があること、最近まで気が付かなかった。。 (+_+)

WLW は画像を扱うのが、面倒だな

と思っていた。。 ^^;

2011年4月29日金曜日

「"Pictures.library-ms" は現在機能していません」のエラーに対する対処

Windows Live Writer では、「画像の挿入」に対して Ctrl + J のショートカットキーが割当てられている。誤ってこのキーを入力すると、いつの頃からかダイアログが開く前後で、

"Pictures.library-ms" は現在機能していません。

が何度か繰り返されるようになり、イライラ… (+_+)

CropperCapture[158]これは Widnows 7 のライブラリに登録されているフォルダに問題があるということ。

修復するには、pictures.library.ms "no longer working" you may delete and not によると、

a. Open Windows Explorer.
b. Right-click on the corresponding library and choose Delete.
c. Click Yes when asked for confirmation.

今回のエラーは、「ピクチャ」フォルダに問題があるので、

  1. エクスプローラを開き、
  2. ライブラリ > ピクチャ を削除。

これでエラーが表示されなくなった。

2011年3月23日水曜日

AutoHotkey でWindows Live Writer にソースコードを貼り付ける (2) - リボンUIを採用したバージョンへの対応

1. Windows Live Writer 2011 にバージョンアップしたら、ソースコードを貼り付けるための AutoHothey のスクリプトが動かなくなった

ブログを書くための Windows Live Writer は、長らく過去のバージョンを利用してきた。リボンUI が採用される前のもの。

ブログにソースコードを載せる場合、google-code-prettify で色付けされるようにしている。このとき、AutoHotKey を利用して、Windows Live Writer にソースコードを貼り付ける処理を自動化した。

最近、Windows LiveWriter を、リボン UI を採用した、Windows Live Writer 2011 にバージョンアップした。その結果、上記スクリプトが正常に動かなくなったので、スクリプトを修正した。

 

2. 修正したスクリプトの起動と使い方

前提 : AutoHotkey ( Installer for AutoHotkey_L ) がインスールされていること。

  1. スクリプト pasteHTMLCode2Writer.ahk  をダウンロードした後、ダブルクリックして起動。
  2. タスクトレイに アイコン 081002-002 が表示される。

 

使い方
  1. Windows Live Writer で、予めソースコードを挿入したい位置にカーソルを移動。
  2. ソースコードが書かれている、アプリケーションのウィンドウをアクティブにし、対象のコードを選択。
  3. Ctrl + Shift + Q を押すと、選択したソースコードが Windows Live Writer に貼り付けられる。

 

3. スクリプトの実装

スクリプトの内容は、以下の通り。

^+Q::                      ; Ctrl + Shift + Q
Send ^c                   ; 対象のソースコードをコピー
Send !{Tab}               ; Alt + Tab でウィンドウを切り替える

; Windows Live Writer がアクティブになるのを待つ
SetTitleMatchMode, 2
WinWaitActive, Windows Live Writer, , 2

; クリップボードの内容を変更
clipboard = <pre class="prettyprint">%clipboard%</pre>

Send !+hvsh{Enter}		; Alt+h v s h Enter
return

( cf. jutememo's gist: 881589 — Gist )

以前のスクリプトは、コードを貼り付ける処理において、Sleep コマンドを利用せざる負えなかった。

今回は、Send コマンドによりキー入力を連続しても問題がなかったので、Sleep コマンドは使わなかった。

2011年2月14日月曜日

Windows Live Writer で投稿前に確認ダイアログを表示させる

Windows Live Writer でブログの下書きをしていたら、誤って投稿ボタンを押してしまった。本当は左隣のクリップボードを押すつもりだったのだけれど。 (+_+)

CropperCapture[72]

そういえば、ブログを投稿する前に

「投稿してもいいですか?」

の確認ダイアログが出ないことにはじめて気がついた。

操作を誤るといけないから、オプションで「投稿前に確認ダイアログを表示する」設定を探したけれど、それらしいものが見当らず。

仕方がないので、使っていない「タグ」の機能を利用して、確認ダイアログを表示させることに。

  • オプション > 基本設定 > 投稿 の「タグが未挿入の場合、投稿前に通知する」をチェック。

CropperCapture[71]

これにより投稿ボタンを押すと以下のダイアログが表示されるようになり、「はい」を押すことによって投稿処理が行なわれる。

CropperCapture[70]

ちなみに「タグ」とは、「挿入 > 記事のタグ」で設定できるようで、

CropperCapture[73]

Windows Live Writer Tips: いろいろタグ挿入 によると、

Windows Live Writer には Blog のシステムに依存しないタグ挿入機能が付いてます。タグをそのまま記事の中にリンクとして挿入するだけですが。…

規定では、Technoratilivedoorはてな などのタグが選択できます。

この機能を使っていないので、苦肉の策として。

しかし、どこかに設定があるのかな?

2010年5月3日月曜日

Windows Live Writer で記事ごとに別ウィンドウで開くには

Windows Live Writer では、「新しい記事を書く」ときや「下書き」「最近投稿した記事」を編集するとき、デフォルトでは既に開いている記事と同じウィンドウに読み込まれる。そのため、書くのを中断した記事を一旦保存する必要があり操作が面倒。 (+_+) 編集している記事を開いたまま、別ウィンドウに他の記事を開きたいときは、別にもう一つ Windows Live Writer を起動していた。

 

オプションの基本設定

しかし、よくよく見たらデフォルトの動作を変更する設定があった。

  1. メニューより 「ツール > オプション > 基本設定」。
  2. 記事ウィンドウの設定において、「記事ごとに新しいウィンドウを開く」を選択。

img05-03-2010[8]

こんな基本的な設定を見逃していたとは。 しかも設定の一番最初。。 (o_ _)o~†

それにしても、こちらの動作の方が随分快適。

2010年3月5日金曜日

Windows Live Writer でアンカーを挿入 – Snippets Manger を使って

後で記事にアンカーを付けたくなる

ブログをメモとして残すために心掛けることは、各記事がなるべく重複せず独立した内容になること。これにより後で引用しやすくなり再利用できる。しかし、一連の内容をバラバラにし過ぎると考えたときの文脈が失われ、後で内容を思い出しにくい。はじめから書くことをコンパクトにまとめることも難しいので、結局、以前の記事を参照するとき、記事の途中に対してリンクしたくなることがしばしば。

Windows Live Writer で文書の任意の場所にアンカーを挿入したい場合、表示を HTML のソースに変更。目的の場所を探して、

<a name=”XXXXX”></a>

と直接書く。でも、これが結構面倒。 (+_+)

 

Snippets Manager プラグインの設定

img03-05-2010[1]Windows Live Writer のプラグインに、定型的な HTML コードを入力できる Snippets Manager for Windows Live Writer があった。これを使いアンカータグを挿入してみる。

ダウンロードしてインストールすると、メニューの「挿入」に `Insert Snippet…’ が表示される。右サイドの作業ウィンドウにも現われる。

Insert Snippet… をクリックすると、Snippets Manager ダイアログが表示。

  1. Category を作成して、適当に anchor と名前をつけた。
  2. anchor カテゴリの下で Snippet を作成。
  3. Details の Title に適当に a name と名前をつけた。
  4. Design タブにおいて <a name="anchorName"></a> と入力。

img03-05-2010[2]

 

placeholder の設定

次に、アンカーの name 属性をダイアログから入力できるように設定。

  1. 上記で入力した Design タブの中の anchorName を選択。
  2. 上部の Mark Placeholder のアイコンをクリック。

img03-05-2010[3]

 

アンカー の挿入

  1. アンカーを設定したい場所にカーソルを移動する。
  2. `Insert Snippet…’ をクリックして、上記で設定した a name を選択
  3. Send to Live Writer タグを選択し、anchorName フィールドにアンカーの name 属性に対応した文字を入力。
  4. Add to post ボタンを押す。

img03-05-2010[5]

2009年12月14日月曜日

Windows Live Writer で編集中のブログテーマ (テンプレート) を CSS で カスタマイズ

1. ブログを書くとき、実際のデザインと同じ状態を表示させたい

ブログを書くときは、できるだけ実際に表示される状態を見ながら書きたい。

Windows Live Writer は、編集モードにおいて、

  • メニューより「表示 > 使用中のテーマを編集

にチェックを入れると、実際のブログで使用している CSS に基いて表示される。

(ショートカートキー: Ctrl + F11 により、チェック状態をトグルできる。)

この機能を利用するには、予めブログのテーマをダウンロードする必要がある。また、ブログのテーマを変更するごとに再設定が必要。

ブログ テーマを更新

メニューより「ブログ > ブログ設定の編集」を選択。

091214-014.png

「編集」のブログテーマにおいて、「テーマの更新」ボタンを押す。

091214-013.png

 

2. ブログテーマの表示をカスタマイズ

ブログのデザインによっては、ブログのテーマで表示させると見にくくなる。

自分のブログは、左にサイドバーを配置し、メインコンテンツは右という構成。

091214-016.png

この場合、Windows Live Write でブログのテーマの更新をすると、サイドバーが表示される。ブログを書くとき、この領域は不必要。サイドバーが表示されないようにしたい。

091214-015.png

ブログ テーマの保存場所

ブログのテーマは、以下のディレクトリに保存される。

Windows XP の場合

  • C:\Documents and Settings\ユーザ名\Application Data\Windows Live Writer\blogtemplates

Windows Vista の場合

  • C:\Users\ユーザ名\AppData\Roaming\Windows Live Writer\blogtemplates\ランダムな文字列\blogtemplates

Windows 7 の場合

  • C:\Users\ユーザ名\AppData\Roaming\Windows Live Writer\blogtemplates\ランダムな文字列

blogtemplates 以下にあるフォルダの名称は、ランダムな文字列。

何度かブログテーマの更新を行った場合、複数のフォルダが保存される。フォルダの更新日時を見て、最新のものを選ぶ必要がある。フォルダ中から、表示に対応している CSS の記述を探し、カスタマイズして保存する。

 

CSS をカスタマイズ

予め、実際のブログを見ながら、Firebug を使い、サイドバーの辺りを

  • 右クリック > 「要素を調査」

して、CSS を確認しておく。

自分の場合、index.html ファイルにおける CSS の記述中の

  • div#main

の以下の属性を削除することによって、サイドバーを消すことができた。

float:right;
width:66%;