私はコードをいじる初心者です...ブロガーのコメントフォームをカスタマイズしようとしていました。chromeで要素をなぞってみたところ、Iframe srcからブロガーのコメントフォームのみのhtmlファイルまで見つかりました。コメント フォーム ソース html から、カスタマイズする必要があるすべての CSS を含む外部 CSS リンクを見つけました。
ただし、テンプレートに空のsrcが見つかりました。上記のようにホストを編集して HTML ファイルを編集すると (css リンクを編集して)、iframe css をカスタマイズできますか? それとも、ブロガーによって (トークンで?) 制限されていますか?
または、css を javascript/jquery で上書きする方法はありますか?
(ソースへのリンクを投稿できません。リンクは巨大で、stackoverflow では許可されません)
iframe のスタイリングにはアクセスできません。これは、ページ内の別のブラウザ ウィンドウとして表示する必要があります。ページの Css は影響を与えず、javascript でアクセスすることはできません。それがiframeの欠点です...
わかっていれば可能です。編集：しかし、クロスドメインでは機能しません。セキュリティ上の理由からメイビー。
まず、このリンクを読む必要があります http://benvinegar.github.com/seamless-talk/
洗練された iframe コメント フォームを備えたBlogger テンプレートをいくつか見たことがあります...だから可能だと思いました...実際、これは Blogger の新しい (おそらく以前から存在していたので更新されたという意味です) コメント フォーム スキンです。
多分それは何人かの人々を助けるかもしれないので、ここにトリックがあります:
1) 現在、Blogger テンプレート バージョン 2 を使用していることを確認してください。そうでない場合は、テンプレートの上に次のコード行を追加して更新します (これにより、いくつかの csswidgetとsectionクラスが追加され、デザインが台無しになる可能性があるため注意してください)。
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
</b:skin>2) Blogger HTML エディターでタグの直前にこれらのコード行を追加します。
/* Variable definitions ====================
<Group description="New Comment Required – Dont edit">
<Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left" />
<Variable name="body.font" description="Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 14px Arial" />
<Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222" />
<Variable name="body.text.font" description="2" type="font" default="$(body.font)" value="normal normal 14px Arial, sans serif" />
<Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff" />
<Variable name="body.link.color" description="7" type="color" default="#ffa015" value="#ffa015" />
<Variable name="body.link.visited.color" description="8" type="color" default="$(body.link.color)" value="#ffa015" />
<Variable name="body.link.hover.color" description="9" type="color" default="$(body.link.color)" value="#ffa015" />
<Variable name="blog.title.font" description="10" type="font" default="$(robotoBold45)" value="$(robotoBold45)" />
<Variable name="blog.title.color" description="11" type="color" default="#fff" value="#ffffff" />
<Variable name="header.icons.color" description="12" type="color" default="#fff" value="#ffffff" />
<Variable name="tabs.font" description="13" type="font" family="$(body.font.family)" size="$(body.font.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)" />
<Variable name="tabs.color" description="14" type="color" default="#ccc" value="#cccccc" />
<Variable name="tabs.selected.color" description="15" type="color" default="#fff" value="#ffffff" />
<Variable name="tabs.overflow.background.color" description="16" type="color" default="$(posts.background.color)" value="#ffffff" />
<Variable name="tabs.overflow.color" description="17" type="color" default="$(posts.text.color)" value="#222222" />
<Variable name="tabs.overflow.selected.color" description="18" type="color" default="$(posts.title.color)" value="#212121" />
<Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121" />
<Variable name="posts.title.font" description="20" type="font" default="$(robotoBold22)" value="$(robotoBold22)" />
<Variable name="posts.text.font" description="21" type="font" default="$(body.text.font)" value="normal normal 14px 'roboto', sans-serif" />
<Variable name="posts.text.color" description="22" type="color" default="$(body.text.color)" value="#222222" />
<Variable name="posts.icons.color" description="23" type="color" default="#ffa015" value="#ffa015" />
<Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)" />
</Group>
*/
注: 色とフォントは簡単にカスタマイズできます (元の Blogger のアクセント カラーは です#ffa015) 。
3）すべて
data:post.commentFormIframeSrc
を
data:post.commentFormIframeSrc + "&skin=contempo" + data:variantParam
Tadam... iframe のカスタマイズに時間を費やす必要はもうありません。