Wordで文章を作り、WordPressに貼り付けると表示が変になる件

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

 

今回も「JIN」のテーマを使っている松浦さんからご質問をいただきました。

記事作成時に、Wordのソフトを利用して文章を書いてから、ワードプレスの投稿で貼り付けをして改行すると、行間がなぜか変になるというご相談です。

 

『今回のポイント』

  • Wordで文章を作成している
  • 作成した文章をそのままワードプレスに貼り付けると、意図しないコードが付いてきてしまう

 

今回のご相談内容

松浦さん松浦さん
お世話になってます。ブログ記事の行間についての質問です。
Wordで記事を作成して、ワードプレスに張り付けているのですが
改行すると行間が、少し空きすぎている気がします。

もう少し幅を狭めるにはどうしたらいいのでしょうか?

おかぴーおかぴー

松浦さん、こんにちは。
ご質問ありがとうございます^^

実は「Word」で文章を作ると意図しない指示(コード)が勝手に入ってしまいます。

文字の大きさ・行間など目に見えない指定をされるので、ワードプレスにそのまま貼り付けると意図しないコードを連れてきてしまうので、表示が変になっている可能性が高いです。

 

たとえば、僕のMacbookの「Pages」というMac版のワードと言えるソフトでやってみたところ、下の図のような感じになりました。

文章作成はこんな感じ↓(普通に文字打っただけ)

word 文章作成

 

これをコピペして、「ビジュアルモード」で貼り付け↓

word 文章作成

 

貼り付けた文章を「テキストモード」に表示を変えてみたところ、こんな感じに↓

word 文章貼り付け

 

「・・・おや??」

なぜか変な<span class="s1">というタグが入っているのが気になります(笑)。
そして、赤枠内全部が意図しないタグが出てしまっています。

Wordではこのように何かしらのHTML・CSSのコードを作成するため、そのまま貼り付けると表示がおかしくなるということです。

ですので、今後カスタマイズするときにも役に立つツールで文章を作成するのがいいのではないかと思いました。

 

解決策

今回の解決策の一つとして「テキストエディタ」を利用して文章を作成→貼り付けるのがおすすめです。

『テキストエディタ』

文字打ちに特化したツール。
画像の貼り付けはできず、装飾などもあまりできないですが動作が非常に軽いことが特徴。

さらには、Wordのソフトと違い、各プログラミング言語のコーディングにも対応していて、ワードプレス上のデータのバックアップにも利用できます。

WEB制作の現場でも常に使われるツールです。

 

おかぴーおかぴー

テキストエディタを使えば、最初から余分なコードが入らずに文章が作成できますし、

松浦さんのパソコンはWindowsということなので、「TeraPad」というテキストエディタが個人的にはおすすめです。

無料ですし、動作も軽いので文章作成には困らないと思います。

松浦さん松浦さん
ありがとうございます。
テキストエディタも試してみますね。

 

Windows・Macで利用できる使いやすいテキストエディタは、
こちらの記事でインストール・設定方法など詳しく解説していますので参考にしてみてください^^↓

合わせて読みたい

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。 みみこ ワードプレスで[…]

Mac Windows対応 おすすめのテキストエディタをご紹介

 

先ほどの「ビジュアルモード」での貼り付けを説明していた画像があったと思いますが、
逆に「テキストモード」に貼り付けるとほぼ同じようにコピペすることができました。

それ以外に「Word」を使ってそのまま貼り付けて作成できる方法がないかは、
別途検証していきたいと思います!

 

個人的にはテキストエディタは文章作成もできるし、
バックアップを簡単に取れるツールにもなっています。

何か1つでもテキストエディタを使えるようになると、
ブログ作成が一段とはかどるようになると思いますよー^^

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG