みてみたでご紹介させて頂いているプラグインのバージョンは其々最新のものです。WordPress 4.5.3で動作確認済です。🔌

Sponsor Link

TJ Custom CSS 各CSSファイルを変更しなくてもカスタマイズOK~

20151022_tj-custom-css_image

TJ Custom CSS 各CSSファイルを変更しなくてもカスタマイズOK~

今回はどうしてもっと早く見付けられなかったかなぁ~😟と
後悔してしまったプラグインについてレビューします。
簡単にWordPressにCSSコードを追加できるプラグインTJ Custom CSS に出逢いました😃

私が使用させて頂いているSimplicityにも子テーマのスタイルシート(style.css)があるので、
それにジャンジャン😆必要なコードを足していけばOKですよね。

でも、ダッシュボード(管理ページ)のテーマの編集で書き足しても、行表示なしですし、
うっかり書き間違えしてもその間違えた箇所を探すのも結構面倒。

基本、TeraPadで下書き編集して貼り付ける。という作業をしてはいるですが、
PCに向かえる時間も限られているので、常々、
TeraPadみたく、せめて行表示だけでもしないかなー」と思っていたのでした。

また、スタイルシート(style.css)にてを加えた後の表示確認もイチイチ面倒…。

そんな面倒臭がりの私にはぴったりのプラグインなのです。

Sponsor Link

TJ Custom CSS とは

WordPressにカスタムCSSコードを追加する際は、先程も書いたように、
ダッシュボード(管理ページ)のテーマの編集でCSSをカスタマイズする事になります。

このプラグインを使うとTJ Custom CSS の画面にスタイルコードを書くだけで、
テーマやプラグインのデフォルトのスタイルを自動的に上書きしてくれます。

上書き。と言っても、

テーマやプラグインのスタイルシートが変更される事がないんです。

なので、サイトのカスタマイズをしたいけど、
テーマやプラグインのCSSファイルを編集したくない場合、ありますよね~。
「変に書き足しちゃって、大丈夫かなぁ😶」とか、「元のファイルは弄りたくないなぁ😟」なんて

私もそうなんです。(ホントかぁ~??😈)

弄くりまくりたいけど、あまり元ファイルを触りたくないし、
その為のバックアップを態々ローカル側(PC)に保存しておくのも
余分なファイルやメモが増えて整頓が大変になったり…。

覚えておけばいいんですけど、そんなに記憶できる脳ミソは持ち合わせていませんし🐢

それに、このプラグインは、実にシンプルなんです。使いやすいですよ。

TJ Custom CSSの使い方

tj-custom-css

TJ Custom CSS

TJ Custom CSSをダウンロードして有効化する

https://ja.wordpress.org/plugins/theme-junkie-custom-css/

上記 ページでバージョン 0.1.5 をダウンロードし
ZIPファイルをWordpressに上げて有効化します。

ダッシュボード プラグイン 新規追加 プラグインのアップロード
参照でファイルを選択し ZIPファイルをアップロード。
この流れで有効化するか、
ダッシュボード プラグイン 新規追加
プラグインの検索(画面右上)で「TJ Custom CSS」 と入力、
検索で上がってきたものをインストールし有効化します。

設定~という設定は無し。デス😏 有効化するだけです。

有効化後の TJ Custom CSS エディタ画面で編集する

有効化すると、外観の項目に「Custom CSS」と増えている筈です。

tj-custom-css_image_0

Custom CSS」をクリックすると、TJ Custom CSSの、CSS編集画面です。

tj-custom-css_image_1 

ここに、カスタマイズしたいコードを書きます。

 tj-custom-css_image_2

私は、Simplicityの子テーマのスタイルシート(style.css)の内容をコピペして貼り付けsaveしました。

ページの下部にあるsaveボタンが、設定保存ボタンですので、必要な事を書いたらクリックして下さい。

で、折角なので、テーマの編集の子テーマのスタイルシート(style.css)の内容を削除して
デフォルトの状態(追加記入していない元の状態)に。

最初に書き足しした時は
「おおっー構文のカラーリングも行表示も備わってるぞー」と、嬉しかったですねぇ😄

また、このCSSコードを追加する作業は、この画面だけではないのです。

TJ Custom CSS エディタ画面のセクションタブ「Live Preview

TJ Custom CSSの、CSS編集画面の右上に、「Live Preview」と、
セクションタブが表示されています。

tj-custom-css_image_3 

Live Preview
If you want to add custom css and see the live preview, please go to the Customize page and open the Custom CSS section.


Customize
とリンクされていますね、・・・/wp-admin/customize.php へのリンクです。

テーマのカスタマイザー「Custom CSS」タブ内で視覚的確認をしながら編集

このリンク先は、テーマのカスタマイザー(外観→カスタマイズ)に直接行く事ができ、
カスタマイザーの一番下に以下の様に、「Custom CSS」というタブが増えてます。

tj-custom-css_image_4 

Custom CSS」タブをクリックします。
以下のように、窓が出現し、その窓の中には
先程、TJ Custom CSS エディタ画面で編集した内容が自動でインプットされています。

tj-custom-css_image_5 

因みにこの小窓、初めは書きにくい小窓ですが、マウスドラッグで下に伸ばす事が可能です。

tj-custom-css_image_6 

この窓内に、CSSコードを入れてもOKなんです。
カスタマイザーのライブプレビューを視覚的に確認しながら、CSSコードを追加できます。
ライブプレビュー~使いやすいですよ~

まとめ

元のファイルを変更する事なく、設定できるってところが私にはツボでした。
それに、行表示もアリの、構文カラー(マークアップ、要素もカラー)もでぇ~ので、良い感じです😘

この際、これまでカスタマイズしたスタイルを全部こちらに書き写してしまおうと思います。

追加記入にも、最適だと思います。

あ、因みに、このプラグインは、最新の対応バージョン4.3.1で、
最終更新は1か月前、有効化済みインストールが10,000+です。

検索すると、シンプル過ぎ??の為か、記事にしている人も見かけなかったのでご紹介しました。
こういうの、始めた時に欲しかった・・・😵

この↑wordpressのプラグインディレクトリで、
別の用途のプラグインを探している時にたまたま見つけましたが、

他にもよさげなプラグインを沢山見つけたので(笑)また何れ試して記事にしてみたいと思います。

お粗末でした。