稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

投稿のビジュアルに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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

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

画像をクリックしたらlightboxのようにテキストを表示させる方法をご紹介させて頂きます 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 iPhoneで動画をDLしてカメラロールに保存 …

ドメインの申込み方法【サクラインターネット】

今回はオリジナルのドメインを取得する方法です。前回、サクラインターネットにてサーバーをお申込みした方向けの内容となっております。 関連記事: Gmailの取得方法 サーバーの申込み方法【サクラインター …

ワードプレスで画面が真っ白になった時の対処法

ワードプレスって結構画面を真っ白にしている人多いですよね笑 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 【WordPress】lightning proでカスタムフィール …

特定のカテゴリー情報一覧をquery_postsで取得する方法

query_postsを使ってランダム表示一覧で取得したところ、特定のカテゴリー情報しか取得されていなかったので、私と同じような悩みがある人に解決方法をご紹介いたします。 関連記事: phpとワードプ …

Biz Calendarを使いやすくカスタマイズ

営業日カレンダーを導入したけれど、こんな機能が欲しい!って要望があったのでカスタマイズしてみました。 関連記事: 【WordPress】lightning proでカスタムフィールドを表示させる ワー …