• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / プラグイン / Simple Custom CSS and JSってどんなプラグイン?使い方を解説

Simple Custom CSS and JSってどんなプラグイン?使い方を解説

最終更新日:2021年5月8日

目次 非表示
1 Simple Custom CSS and JSってどんなWordPressプラグイン
1.1 Simple Custom CSS and JSの特徴
2 Simple Custom CSS and JSを使うべき方
3 Simple Custom CSS and JSの使い方
3.1 設定内容の確認・変更
3.2 独自コードを追加する
3.3 オプションについて

Simple Custom CSS and JSってどんなWordPressプラグイン

Simple Custom CSS and JSSimple Custom CSS and JS

Author(s): SilkyPress.com

Current Version: 3.42

Last Updated: 2023年1月17日

custom-css-js.3.42.zip

88%Ratings 500,000+Installs 3.0.1Requires

Simple Custom CSS and JSは、独自のCSS・Javascript・HTMLコードを追加できるWordPressプラグインです。

コードはタイトルをつけて、コード一覧画面で管理が行えます。

Simple Custom CSS and JSの特徴

  • コードの出力箇所を選択できる(ヘッダー・フッター)
  • コードの出力方法を選択できる(インライン・外部ファイル)
  • コードの出力範囲を選択できる(管理画面・フロントエンド)
  • 管理者以外でもコード追加が行えるユーザー権限を追加できる

Simple Custom CSS and JSを使うべき方

  • テーマに依存しないCSS・Javascript・HTMLコードを追加したい方
  • コードの有効・無効の切り替え機能が欲しい方
  • コード出力の箇所・方法・範囲を選択したい方

Simple Custom CSS and JSはプラグインなので、テーマを変更しても追加したコード内容は維持されます。

テーマに依存しないカスタマイズを行い方が利用すべきです。

もし、短いCSSのみのコード追加で良い場合は、Simple Custom CSSを選んだ方が良いでしょう。

Simple Custom CSS and JSの使い方

Simple Custom CSS and JSの基本的な使い方を解説します。

Simple Custom CSS and JSの基本的な使い方は、以下の通りです。

  1. 設定内容の確認・変更を行う
  2. 独自コード(CSS・Javascript・HTML)を追加する

Simple Custom CSS and JSを有効化すると、WordPress管理画面のメニューに「カスタムCSS & JS」という項目が追加されます。

設定内容の確認・変更

Simple Custom CSS and JSの設定は、WordPress管理画面のメニューより行えます。

WordPress管理画面のメニューより、「カスタムCSS & JS ≫ 設定」を開きます。

設定項目は、「エディターの設定」と「一般設定」があります。

エディターの設定

  • HTMLエンティティを変換せずそのままに
  • HTMLエンティティを変換
  • エディター内での自動変換・・・エディターで入力を行う際に、入力候補を表示します

一般設定

  • 「ウェブデザイナー」権限を追加・・・管理者権限以外に、Simple Custom CSS and JSの管理を行えるユーザー権限を追加します
  • HTMLからコメントを除去・・・ページにコードを表示させる際にコメントを表示しないようにします。

以下のコードの「start・・・」「end・・・」部分のコメントを表示しないようにします。

<!-- start Simple Custom CSS and JS -->
<style>

p {
    color: red;
}

</style>
<!-- end Simple Custom CSS and JS -->

独自コードを追加する

WordPress管理画面のメニューより、「カスタムCSS & JS」にある項目を選択することで独自コードが追加できます。

追加できるコードは、「CSS」「Javascript」「HTML」の3種類があります。

追加したいコードの種類によって、

  • CSSを追加したい場合・・・カスタムCSSの追加
  • Javascriptを追加したい場合・・・カスタムJSの追加
  • HTMLを追加したい場合・・・カスタムHTMLの追加

を選択してください。

基本的なコードの追加方法は同じですが、利用できるオプションが異なります。

また有料のPro版でのみ、利用可能となるオプションや機能があります。

カスタムCSSの追加

メニューより、カスタムCSSの追加を選択すると、CSSコードの追加画面が開きます。

エディターに追加したいCSSコードを記載し、右上にある「公開」ボタンをクリックします。

オプションには、「リンクの種類」「表示位置」「表示対象」の項目があります。

カスタムJSの追加

メニューより、カスタムJSの追加を選択すると、JSコードの追加画面が開きます。

エディターに追加したいJSコードを記載し、右上にある「公開」ボタンをクリックします。

オプションには、「リンクの種類」「表示位置」「表示対象」の項目があります。

カスタムHTMLの追加

メニューより、カスタムHTMLの追加を選択すると、HTMLコードの追加画面が開きます。

エディターに追加したいHTMLコードを記載し、右上にある「公開」ボタンをクリックします。

オプションには、「表示位置」「表示対象」の項目があります。

オプションについて

Simple Custom CSS and JSでは、コード追加画面に次の3つのオプションが用意されています。

  • リンクの種類
  • 表示位置
  • 表示対象

リンクの種類

リンクの種類は、CSSおよびJSで選択が可能なオプションです。

選択項目は、次の2種類があります。

  1. 外部のファイル
  2. 内部

外部ファイルを選択すると、次のようにコードが追加されます。

<link rel="stylesheet" id="45-css" href="//test.local/wp-content/uploads/custom-css-js/45.css?v=3108" media="all">

内部を選択すると、次のようにコードが追加されます。

<!-- start Simple Custom CSS and JS -->
<style>

p {
    color: red;
}

</style>
<!-- end Simple Custom CSS and JS -->
類似プラグイン
  • Simple Custom CSS
  • SiteOrigin CSS
  • WP Add Custom CSS
  • Simple CSS
関連記事
  • WordPressのカスタムCSS追加プラグイン6個を比較|おすすめはどれ?
  • WordPressでCSSを編集する方法
  • WordPressでCSSが反映されない原因と対処法

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.