「Open Live Writer」の使い方

2018年3月5日

インストール方法や初期設定

改行の方法

改行の方法は「Enter」を押すのと「Shift + Enter」の二種類あります。

そのまま「Enter」を押すと段落が分けられます。

Enterで改行すると下のような感じになります。

Enterでの改行

1行

2行

3行

挿入されるコード

<p>Enterでの改行</p>
<p>1行</p>
<p>2行</p>
<p>3行</p>

Enterだとpタグが新しく作成されてそのpタグに入力した文字が挿入されるので段落が分けられて行と行が離れてしまいます。

そこで「Shift」を押しながら「Enter」を押すことでHTMLタグで改行を意味する「brタグ」を挿入できるので行と行が離れずに改行できます。

Shift+Enterで改行すると下のような感じになります。

「Shift+Enter」での改行
1行
2行
3行

挿入されるコード

<p>「Shift+Enter」での改行
1行<br>
2行<br>
3行</p>

リボン

初期設定

  • 保存
  • 元に戻す
  • やり直す

の機能が有効になっていて、ウィンドウのタイトル部分の付近からクイックアクセスできるようになっています。

▼みたいになっている部分をクリックすると、他の機能にもクイックアクセスできるように設定できます。

Homeタブ

挿入されたHTMLタグがどういう風になるかを載せていますが、ブログによってスタイルが違うのでここに載せている見た目と違う感じになってる部分があると思います。

Clipboard

Cut – 文字や画像などを選択した状態でクリックすると「切り取り」

Copy – 文字や画像などを選択した状態でクリックすると「コピー」

Paste – 切り取った文字や画像などを貼り付ける

ペーストには、「通常のペースト」と「ペースト スペシャル」があります。

Paste specialを選択するとクリップボードの中身によって表示が違いますがHTMLなどがクリップボードにある場合に下の画像のような機能が表示されます。
Windows Live Writerの時の日本語の説明を参考に書いています。

  • Remove Formatting
    • 改行以外の書式を削除されて、リンクと画像は保持されたまま貼り付けることができるのでコンテンツのみをコピーするときに使うみたいです。
  • Thinned HTML
    • MS Office 特有の書式、CSSスタイル、表などの特殊な書式を削除し 関連する見出しサイズ、基本書式、配置はブログテーマと共に保持されます。
  • Keep Formatting
    • ブログに正しく表示されない可能性のある書式を含む、すべての書式を保持します。セキュリティ上の理由によりスクリプトタグは削除されます。

どれを選択するか迷った場合は、選択肢の右側にどういう風になるかのイメージ(Lorem ipsumと書かれている文章がある、選択肢の右側の部分)があるので参考にして選ぶといいかもしれません。

Publish

  • Publish
    • 記事を公開
  • ブログ名
    • ▼みたいな部分をクリックすると、他に登録したいブログを追加したり複数投稿先がある場合はここから投稿先を選択できます。
  • Post draft to blog
    • 下書きを投稿 Open Live Writerで下書きを書いてブログで一度編集し直してから公開する方法がおすすめです。

Font

Font familyとFont size

「Calibri」となってる部分がフォント名で数字の部分がフォントサイズです。

フォントを「UD デジタル 教科書体 NK-R」にしてフォントサイズを「24」にするとこんな感じです。

作成されるHTMLはこんな感じです。

<span style="font-family: 'UD デジタル 教科書体 NK-R'; font-size: xx-large;">フォントを「UD デジタル 教科書体 NK-R」にしてフォントサイズを「24」にするとこんな感じです。</span>

太字

こんな感じです。

作成されるHTMLはこんな感じです。

<strong>こんな感じです。</strong>

イタリック体

こんな感じです。

作成されるHTMLはこんな感じです。

<em>こんな感じです。</em>

下線

こんな感じです。

作成されるHTMLはこんな感じです。

<u>こんな感じです。</u>

打消し線

こんな感じです。

作成されるHTMLはこんな感じです。

<span style="text-decoration: line-through;">こんな感じです。</span>

下付き文字

こんな感じでここが下付き文字です。

作成されるHTMLはこんな感じです。

こんな感じで<sub>ここが下付き文字</sub>です。

上付き文字

こんな感じでここが上付き文字です。

作成されるHTMLはこんな感じです。

こんな感じで<sup>ここが上付き文字</sup>です。

文字の背景

▼みたいな部分をクリックすると初期の黄色以外の背景も選べます。

初期の黄色での例

作成されるHTMLはこんな感じです。

<span style="background-color: #ffff00;">初期の黄色での例</span>

文字の色

▼みたいな部分をクリックすると初期の黒色以外の文字色も選べます。

こんな感じでオレンジっぽい色にしてみました。

作成されるHTMLはこんな感じです。

<span style="color: #f3a447;">こんな感じでオレンジっぽい色にしてみました。</span>

Paragraph

順序のないリスト

  • 植物
  • 動物
  • 食物

作成されるHTMLはこんな感じです。

<ul>
 	<li>植物</li>
 	<li>動物</li>
 	<li>食物</li>
</ul>

順序のあるリスト

  1. ハンバーガー
  2. ハンバーガーセット
  3. ハンバーガー抜きのセット

作成されるHTMLはこんな感じです。

<ol>
 	<li>ハンバーガー</li>
 	<li>ハンバーガーセット</li>
 	<li>ハンバーガー抜きのセット</li>
</ol>

引用

人間は不遇になった時、はじめて友情のなんたるかを知るものだ。
「前田利家」

作成されるHTMLはこんな感じです。

<blockquote>
人間は不遇になった時、はじめて友情のなんたるかを知るものだ。
 「前田利家」
</blockquote>

左寄せ

←左寄せ

作成されるHTMLはこんな感じです。

<p align="left">←左寄せ</p>

中央寄せ

→中央寄せ←

作成されるHTMLはこんな感じです。

<p align="center">→中央寄せ←</p>

右寄せ

右寄せ→

作成されるHTMLはこんな感じです。

<p align="right">右寄せ→</p>

均等割り付け

わかりにくいので均等割り付けと何もしていないのを並べてます。
右端が整っていると思います。

均等割り付け

あしたば、うど、うり、えのきたけ、おかひじき、かいわれ大根、かぶ、かぼちゃ、からし菜、きくらげ、きゅうり、くわい、ごぼう、さつまいも、さといも、さやいんげん、さやえんどう、しいたけ、ししとう、しめじ、しょうが、じゃがいも、そらまめ、たけのこ、つるむらさき、とうがらし、とうもろこし、なす、なばな、なめこ、にら、にんじん、にんにく、ねぎ、ひらたけ、ふき、ふだん草、ほうれん草、まいたけ、みずな、みつば、みょうが、もやし、やまのいも、ゆり根、らっきょう、れんこん、アカジソ、アスパラガス、アマランサス、アーティチョーク、インゲンマメ、エシャロット、エダマメ、エリンギ、オクラ、カボチャ、カリフラワー、キニラ、キャベツ、キュウリ、クキチシャ、クレソン、グリーンピース、コスレタス、コールラビ、ゴーヤ、ゴーヤ、ササゲ、サツマイモ、サトイモ、シカクマメ、シシトウ、シソ、シブイ、ショクヨウホオズキ、シロウリ、ジネンジョ、ジャガイモ、ジュウロクササゲ、スイカ、スイートコーン、ステムレタス、ズッキーニ、ズッキーニ、セロリ、センゴクマメ、ソラマメ、タアサイ、タチレタス、タマネギ、チコリー、チンゲンサイ、ツケウリ、ツルナシインゲン、ツルムラサキ、トウガン、トウモロコシ、トマト、トマト、トレビス、ナス、ナーベラー、ニガウリ、ハナミョウガ、ハネギ、バイアム、パセリ、ヒユナ、ヒョウタン、ビーツ、ピーマン、ピーマン、フジマメ、ブロッコリー、ヘチマ、マクワウリ、マッシュルーム、ミニトマト、ミョウガ、メロン、モロヘイヤ、ヤマイモ、ヤーコン、ルッコラ、ルバーブ、レタス、冬瓜、大根、小松菜、春菊、松茸、枝豆、玉ねぎ、白菜、空芯菜、食用菊

通常

あしたば、うど、うり、えのきたけ、おかひじき、かいわれ大根、かぶ、かぼちゃ、からし菜、きくらげ、きゅうり、くわい、ごぼう、さつまいも、さといも、さやいんげん、さやえんどう、しいたけ、ししとう、しめじ、しょうが、じゃがいも、そらまめ、たけのこ、つるむらさき、とうがらし、とうもろこし、なす、なばな、なめこ、にら、にんじん、にんにく、ねぎ、ひらたけ、ふき、ふだん草、ほうれん草、まいたけ、みずな、みつば、みょうが、もやし、やまのいも、ゆり根、らっきょう、れんこん、アカジソ、アスパラガス、アマランサス、アーティチョーク、インゲンマメ、エシャロット、エダマメ、エリンギ、オクラ、カボチャ、カリフラワー、キニラ、キャベツ、キュウリ、クキチシャ、クレソン、グリーンピース、コスレタス、コールラビ、ゴーヤ、ゴーヤ、ササゲ、サツマイモ、サトイモ、シカクマメ、シシトウ、シソ、シブイ、ショクヨウホオズキ、シロウリ、ジネンジョ、ジャガイモ、ジュウロクササゲ、スイカ、スイートコーン、ステムレタス、ズッキーニ、ズッキーニ、セロリ、センゴクマメ、ソラマメ、タアサイ、タチレタス、タマネギ、チコリー、チンゲンサイ、ツケウリ、ツルナシインゲン、ツルムラサキ、トウガン、トウモロコシ、トマト、トマト、トレビス、ナス、ナーベラー、ニガウリ、ハナミョウガ、ハネギ、バイアム、パセリ、ヒユナ、ヒョウタン、ビーツ、ピーマン、ピーマン、フジマメ、ブロッコリー、ヘチマ、マクワウリ、マッシュルーム、ミニトマト、ミョウガ、メロン、モロヘイヤ、ヤマイモ、ヤーコン、ルッコラ、ルバーブ、レタス、冬瓜、大根、小松菜、春菊、松茸、枝豆、玉ねぎ、白菜、空芯菜、食用菊

作成されるHTMLはこんな感じです。

均等割り付け
<p align="justify">あしたば、うど、うり、えのきたけ、おかひじき、かいわれ大根、かぶ、かぼちゃ、からし菜、きくらげ、きゅうり、くわい、ごぼう、さつまいも、さといも、さやいんげん、さやえんどう、しいたけ、ししとう、しめじ、しょうが、じゃがいも、そらまめ、たけのこ、つるむらさき、とうがらし、とうもろこし、なす、なばな、なめこ、にら、にんじん、にんにく、ねぎ、ひらたけ、ふき、ふだん草、ほうれん草、まいたけ、みずな、みつば、みょうが、もやし、やまのいも、ゆり根、らっきょう、れんこん、アカジソ、アスパラガス、アマランサス、アーティチョーク、インゲンマメ、エシャロット、エダマメ、エリンギ、オクラ、カボチャ、カリフラワー、キニラ、キャベツ、キュウリ、クキチシャ、クレソン、グリーンピース、コスレタス、コールラビ、ゴーヤ、ゴーヤ、ササゲ、サツマイモ、サトイモ、シカクマメ、シシトウ、シソ、シブイ、ショクヨウホオズキ、シロウリ、ジネンジョ、ジャガイモ、ジュウロクササゲ、スイカ、スイートコーン、ステムレタス、ズッキーニ、ズッキーニ、セロリ、センゴクマメ、ソラマメ、タアサイ、タチレタス、タマネギ、チコリー、チンゲンサイ、ツケウリ、ツルナシインゲン、ツルムラサキ、トウガン、トウモロコシ、トマト、トマト、トレビス、ナス、ナーベラー、ニガウリ、ハナミョウガ、ハネギ、バイアム、パセリ、ヒユナ、ヒョウタン、ビーツ、ピーマン、ピーマン、フジマメ、ブロッコリー、ヘチマ、マクワウリ、マッシュルーム、ミニトマト、ミョウガ、メロン、モロヘイヤ、ヤマイモ、ヤーコン、ルッコラ、ルバーブ、レタス、冬瓜、大根、小松菜、春菊、松茸、枝豆、玉ねぎ、白菜、空芯菜、食用菊</p>

HTML styles

これは一気にどんな感じになるか載せたいと思います。
段落と見出しタグです。

作成されるHTMLはこんな感じです。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Insert

Hyperlink

Hyperlinkをクリックすると画像のようなウィンドウが表示されます。

  • Web address:
    • ブラウザのアドレスバーなんかに表示されている「URL」を入力します。(このブログだと[http://tomatocomet.com/blog/])
  • Link to
    • そのまま入力したものを使う場合は「Link to」のままです。 前に投稿したものを使う場合「Previous post」 入力したキーワードを自動的にリンクに変換してくれる機能があるのですがその機能に登録しているリンクから選択する場合「Auto link entry」
  • Text to be displayed:
    • 表示する文字を入力します。
  • Open link in new window
    • 新しいタブで開くようにする場合にチェックを入れます。
  • Automatically link to this text
    • この機能は少し後で書きます。
  • 「Insert」と「Cancel」
    • 「Cancel」は、ウィンドウを閉じます。 「Insert」は、それぞれの入力や設定した項目に応じたタグが挿入されます。
Advanced

Advancedという部分をクリックすると「Title」と「Rel」という部分が展開されます。
これは色々と必要な方向けなので理解している場合に入力すれば大丈夫です。

Automatically link to this text

この機能は、登録した単語を見つけたら自動でリンクに変換するという機能です。

例えばこのブログでやってみると画像のように入力します。 初めて単語を登録する時に「Automatically link to this text」にチェックをいれます。

「Text to be displayed:」が自動変換される単語になります。

この画像では、「Web address:」と「Text to be displayed:」にしか入力していませんがその他に「Open link in new window」や「Advanced」の設定をしていても大丈夫です。

この状態で「Insert」すると【トマトの51ブログ】と入力してスペースキーやエンターキーを入力すると単語として認識されるので(http://tomatocomet.com/blog/)にリンクされます。

どんな感じかの動画

ファイル → Options→ Automatic Linking
から単語を自動リンクに置換する機能のいろいろできます。

単語とリンクを追加したり、追加したものを編集したり削除したりできます。

初期の設定だと1つの単語に一回しか自動置換されないので「Link to each term only once per post」のチェックを外すと同じ単語が二回出てきたらそれぞれにリンクが適応されます。

Picture

From your computer
コンピュータからアップロードする場合に選択します。

From the web
ウェブから画像を貼る場合に選択します。

これ以外にもドラッグ&ドロップでも画像を挿入できます。

Video

From the web
web上の動画を載せる場合に選択します。 YouTubeに対応していますがhttpsをhttpにしないといけないのと短縮URLの方には対応していないみたいです。

From your computer
今のところ私の環境ではログインできなかったです。
YouTubeにコンピュータからアップロードして動画を掲載する場合に使います。

カテゴリーが英語なので日本語を載せておきます。
カテゴリーの変更もYouTube側からできるので気にしなくても大丈夫だと思います。

カテゴリー(英語) カテゴリー(日本語)
Animals ペットと動物
Autos 自動車と乗り物
Blogs ブログ
Comedy コメディー
Education 教育
Entertainment エンターテインメント
Film 映画とアニメ
Games ゲーム
How To & Style ハウツーとスタイル
Music 音楽
News & Politics ニュースと政治
Non Profit & Activism 非営利団体と社会活動
People ブログと同じ扱い?
Sports スポーツ
Technology 科学と技術
Travel 旅行とイベント

From video service
YouTubeにサインインする必要があるみたいです。(エラーが発生してうまく使えないので今のところよくわかっていません。私の 使い方が悪いのかもしれないです。)

Editing

Spelling

どういう機能なのかは動画を参考にしてください。

使い方

赤い波線が出ている時に「Spelling」をクリックすると上の画像のようなウィンドウが表示されます。

「Not in dictionary:」という部分に表示されている単語で大丈夫なら「Ignore」を選択します。
全部、無視するなら「Ignore All」を選択します。

「Not in dictionary:」という部分に表示されている単語を「Suggestions:」に表示されているリストから選択した単語を適応する場合は「Change」を選択します。
上の画像の場合「schoole」というのを「scool」に全部置換する場合は「Change All」を選択します。

「Add」を選択するとそれ以降は、その赤い波線が表示されてた単語が辞書に登録されて赤い波線が表示されなくなります。

Word count

「Open Live Writer」での記事の文字数のカウントを表示します。

2018-03-03 21_45_55-Word Count

Words
単語の数 日本語だとスペースで空白を開けて言葉があると1つと数えられるのであまり役に立たないかもしれませんが参考になると思います。

Characters(with spaces)
スペースを含んだ文字数

Characters(no spaces)
スペースを含まない文字数

Paragraphs
段落数

Closeは、閉じるボタンです。

Find

検索機能です。
これをクリックして表示されるウィンドウは日本語になっているので大丈夫だと思います。

Select all

全選択です。

Insertタブ

「Hyperlink」と「Picture」と「Video」はHomeタブと同等のものなので省きます。

Breaks

Horizontal line

下のような水平線が挿入されます。


作成されるHTMLはこんな感じです。

<hr />

Clear break

画像を選択した状態で画像のような部分で回り込みした時に解除して画像の後から文章を書けるようにする機能です。

例えば下の画像のように画像の右側に回り込むようにすると、改行すると「月の写真ですね。」の下にどんどん文章が追加されていくので画像の下側に追加したくなる場合があるのでその時に使います。

上の画像で「Clear break」を使うと「ここに文章が追加できるようになります!」となってる部分に改行できるようになります。

Clear breakによって作成されるHTML

<br clear="all" />

Split post

続きを読むを挿入します。

先に続きを一行だけ書いてから空行を続きの手前に一行挿入してそれに対して続きを読むを挿入するといいと思います。

Table

テーブル(表)を作成できます。

初期の値で作成されるHTML

<table border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top"></td>
<td valign="top"></td>
</tr>
<tr>
<td valign="top"></td>
<td valign="top"></td>
</tr>
</tbody>
</table>

Table Tools

テーブルが最後の行にある状態でテーブルを選択すると表示されるテーブルツール

Customize table

Customize table Insertタブのテーブルと同じウィンドウでテーブルの設定を変更できます。

Row 行の設定

「Automatically size to content」
行の高さを自動で合わせる

「Fixed height:」
行の高さを設定した数値に固定する

「Horizontal alignment:」
行の文字寄せの設定(水平方向) [Left] 左寄せ、 [Center] 中央寄せ、 [Right] 右寄せ

「Vertical alignment:」
行の文字の位置(垂直方向) [Top] 上揃え、 [Middle] 中央揃え、 [Bottom] 下揃え

Column 列の設定

「Width:」
列の幅を入力してピクセルかパーセントで指定します。

「Horizontal alignment:」 Rowの「Horizontal alignment:」と同じでこちらの場合は列に適応されます。

「Vertical alignment:」
Rowの「Vertical alignment:」と同じでこちらの場合は列に適応されます。

Cell 1つのセルの設定

「Horizontal alignment:」 Rowの「Horizontal alignment:」と同じでこちらの場合はセルに適応されます。

「Vertical alignment:」 Rowの「Vertical alignment:」と同じでこちらの場合はセルに適応されます。

Delete

Dlete row

行を削除

Delete column

列を削除

Delete table

テーブルを削除

Clear cell

セルの中身を削除

Insert

Insert above

上に行を挿入

Insert below

下に行を挿入

Insert left

左に列を挿入

Insert right

右に列を挿入

Move

Move above

行を上に移動

Move below

行を下に移動

Move left

列を左に移動

Move right

列を右に移動

Media

Map

マップを挿入する機能ですが今のところ不安定?

Post Tags

ブログのタグじゃなくて、タグ(単語)のリンクを作成する機能です。

使い方の例

「Post Tags」クリックすると画像のようなウィンドウが表示されます。

「Tag Provider:」をクリックして『(Customize Providers…)』をクリックします。

「Add」をクリックします。

下の画像のように

Provider name:
Yahoo! Japan

HTML template for each tag:
<a href=”https://search.yahoo.co.jp/search?ei=UTF-8&p={tag-encoded}” rel=”tag”>{tag}</a>

Separate the HTML for each tag using:
,

HTML caption for tag list:
Yahoo! Japan Tags: {tag-group}

とそれぞれの項目に入力します。

「Tag Provider:」を「Yahoo! Japan」を選択します。

「Tags (comma separated):」にキーワードをカンマ区切りで入力します。
この画像の場合は「トマトの51ブログ」と「ミニトマト」というキーワードを入力しました。

この状態で「Insert」をクリックすると

こんな感じで入力した単語のリンクを作成してくれます。
リンクをクリックするとヤフージャパンでの検索結果にリンクされています。

作成されたもの

Yahoo! Japan Tags: ,

作成されたHTML

Yahoo! Japan Tags: <a href="https://search.yahoo.co.jp/search?ei=UTF-8&amp;p=%e3%83%88%e3%83%9e%e3%83%88%e3%81%ae51%e3%83%96%e3%83%ad%e3%82%b0" rel="tag">トマトの51ブログ</a>, <a href="https://search.yahoo.co.jp/search?ei=UTF-8&amp;p=%e3%83%9f%e3%83%8b%e3%83%88%e3%83%9e%e3%83%88" rel="tag">ミニトマト</a>

Emoticon

画像(アイコン)の顔文字を挿入してくれます。

こんな感じです。

Smile Open-mouthed smile Winking smile Hot smile

Plug-ins

「Windows Live Writer」の時に凄く便利なプラグインが多かったのですが、一部使えるプラグインは存在するみたいですが公式だと準備中のようです。

Blog Accountタブ

Blog options
ブログ設定

ファイル → Options → Accounts → ブログを選択して「Edit」と同じウィンドウが表示されます。

Shortcuts

View Blog
ブログを表示する

Manage Blog
ブログの管理画面を表示する

Theme

Blog theme
「Open Live Writer」のエディターにブログのCSSを適応するかしないかの選択です。
上のほうにある画像のように「Blog theme」が青くなっている場合はテーマ(CSS)を適応中ということになります。

Update theme
エディタのテーマ(CSS)を更新する時に使います。

カテゴリーとタグと投稿日

カテゴリーの選択

「Set categories」をクリックするとWordPressの場合は作成しているカテゴリーが表示されるのでその一覧から選択します。

カテゴリーの作成

「https://」でブログを登録していると今のところカテゴリーの作成ができないみたいなので「http://」で登録しないと作成できないようです。
私の環境でちょっとだけ試した時なので他の条件があるから作成できないのかもしれません。

「Add Category」の「Category Name」にカテゴリー名を入力します。

(No parent)の部分は、親にカテゴリーを設定する場合に親カテゴリーになるカテゴリーを選択します。

タグ

「Set tags (comma separated)」に記事のタグを設定します。

タグを複数設定する場合は「,(カンマ)」で区切ります。

投稿日を予約

記事の投稿日を予約できます。

画像のマウスカーソルの部分をクリックするとカレンダーが表示されるので日付を選択します。

日付と時刻は、直接数字をクリックすると入力できるので細かく設定したい場合は直接入力するといいと思います。

View all

Categories:
記事のカテゴリーを選択します。

Tags:
記事のタグを選択します。

Publish Date:
記事を公開する日付を選択します。

Comments:
コメントの設定
受け付けるか受け付けないかを選択します。

Pings:
ファイル → Options → Ping Servers
に設定しているPing送信先に更新情報などを送信するかしないかを選択します。

Excerpt:
抜粋を設定します。

Trackback URLs:
トラックバックの送信先を入力します。