b00k.jp ~積み上げ式読書ノート~
公開日:
最終更新日:2017/05/11

WordPressで記事内に直接JavaScript、CSSを記述する方法

記事に直接JavaScriptを埋め込む

たとえば、JavaScriptのサンプルコードや実際に動くものをWordPressに掲載したい時、記事の更新と同時に、JavaScriptの外部ファイルも更新しないといけなくなります。
記事更新のたびにJavaScriptファイルを編集するのは、非常に面倒ですし、1回しか使わないJavaScriptの関数を外部ファイルには書きたくありません。

そこで、役に立つのが、今回紹介する記事中に直接JavaScriptを埋め込む方法です。
この方法を使用することで、記事ごとに個別のJavaScriptを設定することが可能です。
以下のように<div>タグで囲んで記述することで、WordPressの記事投稿画面から直接JavaScriptを記述することができます。

注意点として、JavaScriptの記述中に空行を入れると、上手くいかなくなります。
空行があると、自動的に</p>タグが生成されてしまうことが原因のようです。
【参考】
WP(WordPress)で個別記事にJavaScriptを入れる方法

記事に直接CSSを埋め込む

同様に、記事中に直接CSSを埋め込むこともできます。
<style>タグ内に記述します。

注意点として、ビジュアルモードに切り替えると、<style>タグが記事から消えてしまいます。
【参考】
WordPressで記事ごとに個別のCSSを設定する方法3選

サンプル

JSやCSSを記事中に直接記述すると以下のようなページを作成することができます。

人生楽しんでますか?人生のバランス度チェックテスト!
○×ゲーム(JavaScript)
JavaScriptでリストの要素を追加、削除する
JavaScript for文のサンプル
JavaScript 配列のサンプル
Canvasを使って動きのある図形を描写する
Canvasを使って図形を描く

広告

カテゴリー: IT

人生について真剣に考えてみましょう


「生きる」を考える

「なぜ自分は生きているのか?」
そのように思うことはないでしょうか。

ただ生まれてきて、生まれてきたからなんとなく生きている。
そのような生き方をしていると、生きていることに意味を感じません。
そして、それは「なぜ生きているのか」という、言いようのない不安感に変わります。

こうした不安感を払拭するためには、「なぜ生きるのか」ということに対し、真剣に向き合う必要があります。
自分は何を望んでいるのか。
何を大切にしていきたいのか。
社会や他人からいいように思われたいだけなのではないか。

こうした様々なことに思いを巡らせることで、はじめて自分の人生に確信を持てます。
「自分はこう生きればいいのだ」という確信です。
本書が、そのきっかけとなれば幸いです。

オススメ記事


PAGE TOP ↑