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

word
おかぴーおかぴー

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

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

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

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

 

『今回のポイント』

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

 

目次

今回のご相談内容

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

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

おかぴーおかぴー

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

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

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

 

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

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

word 文章作成

 

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

word 文章作成

 

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

word 文章貼り付け

 

「・・・おや??」

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

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

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

 

解決策

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

『テキストエディタ』

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

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

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

 

おかぴーおかぴー

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

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

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

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

 

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

[sitecard subtitle=合わせて読みたい url=https://okap01.com/text-editor target=]

 

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

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

 

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

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

おまけ

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか?

みみこ

あるあるですね(笑)なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし!また記事を書こうかな〜って思えるし、書いたものを見返して

「 はぁぁぁぁ〜(*´꒳`*)ウキウキ 」

ってなります(笑)

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目(デザイン性)とか、作り込み(WordPressの操作)に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか?もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る=WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。(ゴールを見失います)

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか?と思ったんですが、どうでしょうか?(*^^*)

具体的には、こんな内容を盛り込む予定です↓

  • WEBデザインの知識を活かして魅力的なメインビジュアル(ブログのメイン画像・アイキャッチ画像)を楽しみながら作れるようになれる
  • カスタマイズが一定レベルでできるようになれる
  • パソコン自体の知識も身に付く
  • 程よい範囲のWEB知識がつくから、情報リテラシー(※)が高くなる
  • 登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー:世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

チェックしてね
「お気軽にどうぞ〜」
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次