副業で稼ぐ仕組みの作り方

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

投稿日:2017年1月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対策的には完全にアウトになってしまうんで、わかりやすく使いやすい物を目指していきたいですね。

-副業で稼ぐ仕組みの作り方
-, ,

執筆者:


comment

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

関連記事

【webnode】無料でGoogleアナリティクスコードを埋め込む方法

webnodeではGoogleアナリティクスを無料プランでもご利用頂けます。

httpsにアクセスできるがSSL化されていない場合

SSL化にしてhttpsにアクセスできるがセキュリティ設定がうまくいっていない時の解消方法です

画像を簡単に軽く出来るサイト

画像を軽くさせるために縮小したり解像度を低くするのは時代遅れです。

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている際の反映されるまでの時間を調べてみました。

画像をクリックしてテキストを表示させる

画像をクリックしたらlightboxのようにテキストを表示させる方法をご紹介させて頂きます

人気の副業記事(24時間で更新)