頑張らない!でも諦めない!必死にならずにええかげん

JetPack by WordPress.comのカスタムCSSを外部サイト(外部HTML)から参照する

      2014/11/22

Google or AdMax Promotion(it)

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未参照埋め込み

フレームで以下の文書を読み込みます。

実際に埋め込んで表示を行います。

<iframe style="width: 725px; height: 630px;" src="http://algorhythnn.jp/pblic_doc/external_html_normal.html"></iframe>

当サイトのCSSスタイルが影響していない状態で埋め込まれたHTMLが表示されます。

この表示をJetPackで定義済みのスタイルで表示したいと思います。

カスタムCSS参照埋め込み

では次に、フレームで以下の文書を読み込みます。

実際に埋め込んで表示を行います。

<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の保存をしていくと、
バックアップのリビジョンの作成の度にカウントが増えていきますが、
省略することで最新バージョンを返してくれます。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

細かな点ではより詳細に検証すべきだとは思いますが、ちょっとフレーム内に読み込んだHTMLなどに対して、
JetPackに定義してあるスタイルを一緒に適用したいなと思った際には、
簡単に読み込むことができて便利です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - CSS, jetpack ,

  関連記事