投稿のビジュアルにcssを反映させる

公開日: : 最終更新日:2017/01/28 副業で稼ぐ仕組みの作り方 , ,

ビジュアルと実際のデザインが違うんだが・・・・

はじめに

自作のテーマを使った場合、ワードプレスの投稿ページの「ビジュアル」と実際のデザインがずれていたりしませんか?
今回はビジュアルで現在のデザインを表示させる方法をご紹介させて頂きます。

注意事項

functionをいじるので、気を付けてくださいね

見た目が違いませんか?

オリジナルのテーマを作成した場合、実際に表示されるデザインと投稿ページの「ビジュアル」のデザインが違っている人って結構多いと思います。これは、オリジナルのテーマのcssとビジュアルに反映されているcssが違うため起きてしまっているのです。

ビジュアルエディターの見た目

edit01

実際の見た目

edit02

どうでしょうか?見出しタグが特に違っていますよね。これは完全にcssが反映されていないのがわかるので、さっそくビジュアルにcssを反映させてみましょう

cssを用意しよう

まずは、繁栄したいcssを用意します。

cssの名前は何でも構いません。他と被らないように「editor.css」と名前をつけておきましょう。

cssの内容は、現在の見た目の内容をそのままコピペでOKなのですが、注意事項としてはクラスは全て外して、タグのみにしましょう。


.post h1 {font-size:150%;}

これだとクラスが入ってしまっているので、投稿ページにうまく表示されません


h1 {font-size:150%;}

このようにタグのみにする事でうまく反映されます。

functionに情報を追加しよう

もし、現在function.phpがない方は追加しましょう。
functionに追加する情報はこちらです。


add_editor_style( 'editor.css' );
 
function custom_editor_settings( $initArray ){
  $initArray['body_class'] = 'editor-area';
  return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

これはそのままコピペして頂いた方がわかりやすいでしょう。

こちらをアップして早速見てみましょう。

edit03

どうでしょうか?少し情報が違っていますが、この辺りは微調整すれば何とかなりそうですね。

以上で投稿のビジュアルにcssを反映させる説明を終了いたします。

さいごに

クライアントに納品するなら必要

オリジナルのテーマで稼げる副業をされている方であれば、ビジュアルで見た場合と実際に見た場合が違うというのはわかっている前提でブログの更新をされますが、クライアントに納品する場合はまったくわからない状態ですよね。

なので自分だけでなく、第三者が使用する場合は必ずこのカスタマイズは導入しておく方が良いでしょう。

htmlやcssの事をまったく知らない人だと文字を大きくする場合、フォントサイズではなく見出しタグをいじる人が多いんですよね。これだとSEO対策的には完全にアウトになってしまうんで、わかりやすく使いやすい物を目指していきたいですね。

関連記事

no image

大容量ファイルをメールで送る方法

写真や音楽データ、その他メールでは送信できない大容量ファイルをメールで送る方法です。実際はメールで送

記事を読む

ECキューブに商品登録する時はCSVを使おう

ECキューブで最低限の設定が終わったら次は商品の登録です。 はじめに ECキューブは管理

記事を読む

ワードプレスとツイッターの連携が可能SimpleTweet

ワードプレスとツイッターを連携できるプラグインSimpleTweetの設置方法のご紹介 はじめ

記事を読む

シーサーブログの作り方

副業やお小遣い稼ぎも出来るシーサーブログの作り方の紹介です。 はじめに 副業をやるならア

記事を読む

WordPressのビジュアルとテキストの切り替えが出来ない時

ビジュアルとテキストの切り替えができない・・・そんな時の対策をご紹介 はじめに ワードプレスでは

記事を読む

ワードプレスで簡単にステップメールを使えるプラグインARGWA FREE Autoresponder

ワードプレスでステップメールを使いたい場合、一番簡単に使う事が出来るのはARGWA FREE Aut

記事を読む

ワードプレスでページごとにレイアウトを変える方法

ワードプレスでブログを運営中で特定のページだけカスタマイズしたいなんて事ありませんか? はじめに

記事を読む

ワードプレスをアップデートしたらログイン出来なくなった人へ

ワードプレスのアップデートが原因でログインできなくなった人へ はじめに ワードプレスからアップデ

記事を読む

もしもドロップシッピングの登録方法

無料でドロップシッピングがはじめられるもしもドロップシッピングの登録方法です。 はじめに

記事を読む

Jetpackのスペル&文法チェック

日本語であれば特に必要のない機能ですね。 はじめに 日本語は他国の言語に比べて文法が非常に難

記事を読む

Message

現在の総記事数: 319件

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

PHPのランダムを任意の数だけ表示させる方法

PHPのランダムを使い方をもう少し調べたらこんな使い方ができました

ECCUBEのポイント関連のバグ

最終保持ポイントがマイナス表示にならないように調整して下さい。って出て

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 はじめに

EC-CUBEで各カテゴリーページに情報を表示させる方法

EC-CUBEでカテゴリーページごとに情報を入れる方法をご紹介

→もっと見る

PAGE TOP ↑