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

関連記事

phpとワードプレスのランダム表示

副業で広告やバナーを掲載する時にランダム表示をしたいなぁって時に役立つ内容を紹介します。 はじめに

記事を読む

日付の分岐を簡単に導入する方法

これでオートメーション化が捗ります はじめに ブログを書く時って、私のように稼げる副業をしている

記事を読む

ワードプレスでメンテナンスモードを終わらせる方法

メンテナンスモードが終わらない・・・だと・・・ はじめに ワードプレスではコアファイルやプラグイ

記事を読む

サクラで日本語ドメインを使う方法

サクラサーバーで日本語ドメインを利用するちょっとした裏技をご紹介いたします。 はじめに

記事を読む

no image

アフィリエイトだと気付かせないリンクのつけ方

商品や情報を探していた時にアフィリエイトのURLだと気が付いた時ってわざとそのコードを外してアクセス

記事を読む

カスタムフィールドでチェックを入れた記事のみ表示

ワードプレスではカスタムフィールドを使う事で特定の記事のみ表示させる方法もございます。 はじめに

記事を読む

ワードプレスにグーグルアドセンスを導入する方法

ワードプレスにアドセンスを導入する際に効率の良い導入方法をご紹介いたします。 アドセンスの設定をす

記事を読む

画像を特定のサイズで表示させる方法WordPress

カスタムフィールドで登録した画像を指定のサイズで表示させる方法をご紹介いたします。 はじめに

記事を読む

Jetpackのパブリサイズ共有

ブログ投稿するだけじゃなく、ツイッターやフェイスブックにも共有したいですよね はじめに ワードプ

記事を読む

クリックで位置を強調する方法

プレゼンテーションや画面が小さい時に役立つ強調系ソフト紹介です。 はじめに 副業でよくある動画コ

記事を読む

Message

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

現在の総記事数: 325件

特定のアカウントのツイートのみを通知させる方法

その人が発言したらすぐに確認したいですが全員を通知していると携帯が鳴り

ネスタリゾートを100%遊びたい人へ【宿泊あり】

実際にネスタリゾートに行って感じた事や、お勧めの利用方法などをご紹介い

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ はじめに

EC-CUBE特定の商品ステータスのみを特定の箇所に表示させる

代引きが出来ない商品やメール便が対応できない商品を目立たせたい時などに

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

→もっと見る

PAGE TOP ↑