JetPack by WordPress.comのカスタムCSSを外部サイト(外部HTML)から参照する
2014/11/22
JetPackを利用してCSSのカスタマイズを行っている場合に、
外部サイトや投稿内に対して、HTMLファイルなどをiframeなどで埋め込むような場合、
JetPackカスタマイズCSS(サイト上に適用しているCSS)と同じスタイルを適用して表示したい場合があります。
そうした場合にJetPackカスタマイズCSSと同じスタイルを別途用意することなしに、
読み込まれるHTMLファイルからJetPackカスタマイズCSSを読み込ませる方法をご紹介します。
はじめに
JetPackのカスタマイズCSSの機能は非常に便利な機能で、
CSSの変更をFTPなどを介することなく変更しすぐに反映することができます。
履歴の機能も備えている為、変更前の状態に戻すことも非常に簡単です。
JetPackカスタマイズCSSの機能詳細については、以下でご紹介しています。
21.カスタム CSS－Jetpack by WordPress.com
JetPackカスタマイズCSSソースの参照
さて、このJetPackカスタマイズCSSは非常に便利なのですが、
HTMLのタグ上で外部HTMLなどをiframeなどで個別に読み込んで表示するような場合に、
iframe内のHTMLにまでは影響が及びません。
例として以下のような表示です。
カスタムCSS未参照埋め込み
フレームで以下の文書を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JetPack カスタムCSS未参照</title> </head> <body> <div class="algo_notice_info" id="content"> <h1>JetPack カスタムCSS未参照</h1> <p>段落のスタイルです</p> <h2>h2タグスタイルです</h2> <p>以下はリンクです<br /> <a title="Go to ええかげんブログ(本店)." href="http://algorhythnn.jp/blg">ええかげんブログ(本店)</a></p> <h3>h3タグスタイルです</h3> <p>以下は引用です</p> <blockquote> <p><b>引用文</b><br /> 引用した文字のスタイルです</p> </blockquote> <h4>h4タグスタイルです</h4> <table class="algo_table"> <tbody> <tr> <th>ヘッダ行１列１</th> <th>ヘッダ行１列２</th> </tr> <tr> <th>ヘッダ行２列１</th> <td>セル行２列２</td> </tr> </tbody> </table> <h5>h5タグスタイルです</h5> <ul> <li>リスト１</li> <li>リスト２</li> </ul> <h6>h6タグスタイルです</h6> <p>このようにして外部ドキュメントをフレーム表示します。</p> </div> </body> </html> |
実際に埋め込んで表示を行います。
<iframe style="width: 725px; height: 630px;" src="http://algorhythnn.jp/pblic_doc/external_html_normal.html"></iframe>当サイトのCSSスタイルが影響していない状態で埋め込まれたHTMLが表示されます。
この表示をJetPackで定義済みのスタイルで表示したいと思います。
カスタムCSS参照埋め込み
では次に、フレームで以下の文書を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JetPack カスタムCSS参照</title> <link rel="stylesheet" href="http://algorhythnn.jp/blg/?custom-css=1&csblog=1"> </head> <body> <div class="algo_notice_info" id="content"> <h1>JetPack カスタムCSS参照</h1> <p>段落のスタイルです</p> <h2>h2タグスタイルです</h2> <p>以下はリンクです<br /> <a title="Go to ええかげんブログ(本店)." href="http://algorhythnn.jp/blg">ええかげんブログ(本店)</a></p> <h3>h3タグスタイルです</h3> <p>以下は引用です</p> <blockquote> <p><b>引用文</b><br /> 引用した文字のスタイルです</p> </blockquote> <h4>h4タグスタイルです</h4> <table class="algo_table"> <tbody> <tr> <th>ヘッダ行１列１</th> <th>ヘッダ行１列２</th> </tr> <tr> <th>ヘッダ行２列１</th> <td>セル行２列２</td> </tr> </tbody> </table> <h5>h5タグスタイルです</h5> <ul> <li>リスト１</li> <li>リスト２</li> </ul> <h6>h6タグスタイルです</h6> <p>このようにして外部ドキュメントをフレーム表示します。</p> </div> </body> </html> |
実際に埋め込んで表示を行います。
<iframe style="width: 725px; height: 630px;" src="http://algorhythnn.jp/pblic_doc/external_html_with_jetpack.html"></iframe>当サイトのCSSスタイルが適用された状態で埋め込まれたHTMLが表示されます。
カスタムCSSの参照方法
このJetPackのカスタムCSSの参照方法として、外部HTML側には以下の参照コードを設定しています。
<link rel="stylesheet" href="http://algorhythnn.jp/blg/?custom-css=1&csblog=1">このコードにてJetPackが動的に生成しているCSSを取得しています。
実際、サイトを表示している場合には、他のパラメータが付加された以下のような参照になっています。
<link rel="stylesheet" id="custom-css-css" type="text/css" href="http://algorhythnn.jp/blg/?custom-css=1&csblog=1&cscache=6&csrev=942">後半部分の「csrev=942」などはカスタムCSSの保存をしていくと、
バックアップのリビジョンの作成の度にカウントが増えていきますが、
省略することで最新バージョンを返してくれます。
さいごに
細かな点ではより詳細に検証すべきだとは思いますが、ちょっとフレーム内に読み込んだHTMLなどに対して、
JetPackに定義してあるスタイルを一緒に適用したいなと思った際には、
簡単に読み込むことができて便利です。
Rakuten Promotion
関連記事
-
-
wordpressサイトにさりげなく表示されたスマイルマーク（^-^）は何か
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
12.一括検索－Jetpack by WordPress.com
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
無料ブログサービスのHTMLタグ構造とコンテンツ挿入位置の割り出し方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
好きな画像をサイドバーウィジェットにJetpackを利用して表示する
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™AdSense広告のレイアウトをCSSでセンタリングする方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
05.購読－Jetpack by WordPress.com
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
16.WP.me 短縮 URL－Jetpack by WordPress.com
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
19_02.音楽プレーヤー表示には、Jetpackのaudioショートコード埋め込み
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
JetPackを2.3.5にアップデートすると飛躍的に便利な検索が利用できる
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
JetPackのサイト統計が初期化(0pv)になったらサポートに頼ろう
Google or AdMax Promotion(it) 禁断の機能がau公式 …