Webデザイナーでブロガーな個人事業主”リンゴ”が、【個人事業主・起業家のブログとHPでの発信&集客】【Apple中心にPC&ガジェット】【ワークスタイル】の情報を発信するブログ

当ブログについて

筆者について

リンゴプロフィール

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

リンゴをSNSでフォローするならこちら


ブログ運営・集客したい人へ

-

ブログ運営や集客・活用方法について届けます。

当ブログを運営して学んだこと、他ブログのコンサルで気がついたことを、お教えします。

今の時代、”情報発信するブログ”は誰が何をするにおいても重要。

もし、あなたがこれから独立開業するのであれば、開業届を出す前にブログで発信を始めましょう!

この記事は「ブログ運営・集客したい人へ」カテゴリーの記事

Post Title

WordPressのビジュアルエディタが見づらい!エディタを実際のページと同じ見た目にする方法は?



Webデザイナー”Ringo”完成形を見ながら編集できるので、成形しやすくなります。

Webデザイナー”Ringo”おはようございます。
美容サロンと一緒に働くWebデザイナー、Re:birth DesignのRingo(@rebirth_design)です!毎朝8時に、このブログをアップしています。

このブログはWordPressで構成されています。

WordPressの投稿はブラウザで管理画面を開けば、専用のエディタが用意されていて「Microsoft Word」等のテキストエディタっぽい感覚で、記事の執筆ができますよね。

「ビジュアルエディタ」と「テキストエディタ」の2つモードが用意されています。

皆さんがよく使っているであろう「ビジュアルエディタ」は、HTMLのタグを入力する必要なく、直感的に文字や画像を入れ込んでくだけで、HTMLが自動で挿入されて記事を簡単に作れるので便利ですよね。

ただ、「ビジュアルエディタ」を使っていて、こんな風に感じたことはありませんか?

アナタ「プレビュー」で確認したときと見た目が違いすぎて直さなきゃ。面倒くさい…。

フォントが明朝体だったり、長文を入力した場合に改行されずに横に続くから見づらいとか、Retinaディスプレイ用に大きめの画像を入れたら大きく表示されてしまうとか…色々と不満点がありません?

正直、僕は嫌でした。笑

だから「ビジュアルエディタ」の見た目をカスタマイズする方法がないか探したんです。

カスタマイズ性の高いWordPress。「ビジュアルエディタ」もちゃんとカスタマイズ出来るんです。

WordPressのビジュアルエディタを実際のページと同じ見た目にする方法。

「ビジュアルエディタ」の見た目をカスタマイズするには、まずブログで使っているテーマの中に入っている「function.php」を編集する必要があります。

下の一文を「function.php」内に追記します。

エディタの見た目をカスタマイズするための「editor-style.css」を読み込むようになる設定です。

add_editor_style( ‘editor-style.css’ );

次に「editor-style.css」を作成、編集します。

使っているテーマの投稿記事の部分で使われているCSSをコピペしていきます。

ここが少しややこしく感じるかもしれません。

編集が終わったらアップロードします。

上手く反映されていれば、エディタの見た目がかわっているはず。

このブログの場合はこんな感じ。

大分、実際に公開されるページと見た目が近くなってるんじゃないでしょうか?

改行もされてるし、画像サイズもピッタリです。

まとめ

Webデザイナー”Ringo”今回は「WordPressのビジュアルエディタが見づらい!エディタを実際のページと同じ見た目にする方法は?」って話でした。

実際、僕は記事を書く時にビジュアルエディタを使っていません。

Mac専用のアプリ「MarsEdit」を使っています。

ただ最終確認やアイキャッチ画像の指定はブラウザからするので、その時に役立っています。

ビジュアルエディタが見にくい…と感じていたらカスタマイズしてみては?

Mac専用ブログエディタ「MarsEdit」。値段が高くても使うメリットとは?
「MarsEdit」は、やっぱりオススメのアプリです。あなたがブログ記事を毎日のように書くブロガーなら導入してみては?

ということでまた明日も朝8時に記事を更新しますので、ブックマーク&チェックお願いしますね!

あと、このページをSNSでシェアするのも是非お願いします。ではまた明日!


  • オススメ記事&スポンサーリンク


この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアして下さい!記事を書くモチベーションが上がります!
  • 起業家・個人事業主の発信×集客はブログを使うべき理由は…↓

  • スポンサーリンク

こんな記事にも興味がありませんか?

リンゴから記事を読んでくれたアナタに

ブログや仕事、PCの事で困ったことはLINEで今スグ、Ringoに相談してください!

RingoのLINE@に登録して、いつでもどこでも何でも即相談

WebデザイナーRingoのLINE@アカウントを開設しました。

LINEから、友人や家族にメッセージを送るのと同じくらい気軽に相談をして頂けます!

これまでに「お店でブログを始めたいけど、どうすればいいの?」や「新しくMacBookを買おうと思うけど、このスペックで失敗しないかな?」等の相談を頂いています。

友だち50人(登録者50人)になるまでは、相談は無料で乗ります!(あと41人)

今スグに「友だち追加」ボタンを押して登録&相談をして下さい!

RingoのLINE@に登録

この記事を書いたのは「リンゴ」

筆者「リンゴ」について

リンゴプロフィール

リンゴをSNSでフォローするならこちら

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

Webデザイナーでブロガーな個人事業主のリンゴ(Ringo)です。

当ブログ『リンゴノマド』では【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】に関する情報を毎日発信。

ブログを通してWebやガジェット等、デジタル関連の物が持っているワクワク感を伝えていきます!

仕事は【個人事業主・起業家のブログ発信×集客サポート】を中心に、【ブログ記事の執筆】【Webサイトや印刷物等のデザイン】をしています。

依頼・相談は問い合わせページ、もしくは各SNSにてお願いします。(返事が一番早いのでLINEがオススメです。写真下の『@』アイコンからメッセージ下さい。)

他にも、気になったことがあれば「ブログみた」と気軽に声をかけてください。

詳細プロフィールを見る

リンゴに仕事を依頼・相談する

  • 起業家・個人事業主の発信&集客は、ブログを使うべき理由は…↓

筆者について

リンゴプロフィール

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

リンゴをSNSでフォローするならこちら

ブログ全体の新着記事

Apple好きへ

泣きを見る前に!簡単だからMacのバックアップは必ず取れ!Tim…

Apple好きへ

iPadは量販店で買うべき!僕がAppleオンラインストアを使わ…

Apple好きへ

【2018年冬】MacBook vs MacBook Air。選…

Apple好きへ

【随時更新】Macで遊んだけど、いまいちオススメしたいと思わなか…

Apple好きへ

Apple創設者スティーブ・ジョブズの人生を漫画で知ろう!おすす…

Apple好きへ

Apple純正キーボード『Magic Keyboard』 テンキ…

新着投稿をもっと見る

ブログ運営・集客したい人への新着記事

ブログ運営・集客したい人へ

ブログやHPで使える!6千万枚以上の画像素材を販売する『PxBe…

ブログ運営・集客したい人へ

無料で使えるフリー画像素材にブログ読者は飽きてる!?他と差をつけ…

ブログ運営・集客したい人へ

ホームページの作り方を調べている起業家のあなた。今やるべきことは…

No Image

ブログ運営・集客したい人へ

WordPress『ContactForm 7』で送信エラー。く…

ブログ運営・集客したい人へ

Q.「これからブログを始めたいけど衰退していきませんか?」。We…

ブログ運営・集客したい人へ

個人事業主として開業したらまずは集客。あなたのビジネスに人を集め…

「ブログ運営・集客したい人へ」の一覧を見る

ブログ全体の人気記事

Apple好きへ

【追記有】Apple PencilとiPad Proの接続が出来…

Apple好きへ

【随時更新】Macで遊べるオススメのゲームをまとめて紹介!(iM…

楽しく生活したい人へ

MacはWindowsに比べて、ゲームに向いていない!?その通り…

Apple好きへ

iPadでもIllustratorを使いたい!そんなあなたにはコ…

Apple好きへ

【検証】MacBookをクラムシェルで使うと、本当にバッテリー劣…

楽しく仕事したい人へ

【追記】ニコちゃんマークこと「スマイリーフェイス」。皆よく使って…


▲最上部へ