人力検索はてな
ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら
i-mobile
はてなのﾌﾞﾛｸﾞｶｰﾄﾞに､背景色をつけたいと思って､いろいろいじくってみたんですが､どうしてもできません｡
地の部分が真っ白なので､少し色があったほうが､見やすいし､自分のﾌﾞﾛｸﾞにも合うと思うので､できれば､つけたいんですが｡
どなたかやりかたをご存知の方､教えていただけると助かります｡よろしくお願いいたします｡
●質問者: Michiko_70554148
●ｶﾃｺﾞﾘ:はてなの使い方
○ 状態 :終了
└ 回答数 : 1/1件
▽最新の回答へ
▽1 ● meefla
ﾍﾞｽﾄｱﾝｻｰ

CSS で行けるんじゃないかと思います｡

CSS では背景色は変更できなかったので､JavaScript による回答に修正しました｡
ｺﾒﾝﾄ欄で述べたように､自ﾌﾞﾛｸﾞの過去記事限定で､他のはてなﾌﾞﾛｸﾞの記事を引用したﾌﾞﾛｸﾞｶｰﾄﾞには適用されません｡

 <script type="text/javascript">
 var blogCardBgColor = "#E6E6FA"; //背景色
 var blogCardBorderColor = "black"; //枠色
 window.onload = function() {
 var article = document.getElementById("main");
 var blogCard = article.getElementsByTagName("iframe");
 for (var i = 0; i < blogCard.length; i++) {
 blogCard[i].style.backgroundColor = blogCardBorderColor;
 try {
 var blogbody = new Array;
 blogbody[i] = blogCard[i].contentWindow.document;
 } catch(e) {return;}
 var wrapper = new Array;
 wrapper = blogbody[i].getElementsByTagName("div");
 wrapper[0].style.backgroundColor = blogCardBgColor;
 }
 }
 </script>

上記をｺﾋﾟｰして､管理画面の [ﾃﾞｻﾞｲﾝ]→[ｶｽﾀﾏｲｽﾞ] から､ﾌｯﾀの｢HTMLを記述できます｣の欄に貼り付けてください｡
最初の2行が色の設定ですので､お好みで｡

1記事に複数のｶｰﾄﾞがある場合でも有効なようにしたつもりです｡
ﾃｽﾄ環境でのｽｸﾘｰﾝｼｮｯﾄ｡

f:id:meefla:20151227100643j:image
(ﾃｽﾄに使用したはてなﾌﾞﾛｸﾞは非公開です)

最初の読み込みで適用されない時は､ﾍﾟｰｼﾞをﾘﾛｰﾄﾞしてみてると適用されるかもです｡
お試しください｡

なお､私は基本的にﾌﾟﾛｸﾞﾗﾑの人ではないので､そもそも動作しないとか､もっとｴﾚｶﾞﾝﾄな方法があるという可能性もあります｡
誰とは言いませんが a-kuma3 さんのような人が赤ﾍﾟﾝ先生になってくれると期待しています｡


追記です｡(2015年12月27日 午後11時10分)

ｺﾒﾝﾄ欄で a-kuma3 さんから頂いたご助言を反映した修正版です｡

 <script type="text/javascript">
 // see http://q.hatena.ne.jp/1450950546
 var blogCardBgColor = "#f8f4e6"; //背景色
 var blogCardBdColor = "#b3b3b3"; //枠色
 window.onload = function() {
 var article = document.getElementById("main");
 var blogCard = article.getElementsByTagName("iframe");
 for (var i = 0; i < blogCard.length; i++) {
 try {
 var blogBody = blogCard[i].contentWindow.document;
 var wrapper = blogBody.getElementsByTagName("div");
 wrapper[0].style.backgroundColor = blogCardBgColor;
 blogCard[i].style.backgroundColor = blogCardBdColor;
 } catch(e) {
 // NOP
 }
 }
 }
 </script>

修正のついでに､この質問の URL をｺﾒﾝﾄに入れておきました｡
色の指定もお使いの色使いに変えてあります｡
ﾌﾞﾗｳｻﾞ上の動作は変わりないと思いますけど､こちらのほうがｴﾚｶﾞﾝﾄですので､お手数ですが差し替えていただければ幸いです｡

Michiko_70554148さんのｺﾒﾝﾄ
CSSでも､記事ｴﾃﾞｨﾀでも､できませんでした｡
a-kuma3さんのｺﾒﾝﾄ
ﾌﾞﾛｸﾞｶｰﾄﾞの iframe は､src が <tt>//hatenablog-parts.com/embed?url=引用先のURL</tt> となっているので､ｽﾀｲﾙｼｰﾄを変更する余地がありません(自ﾌﾞﾛｸﾞの場合は違う？)｡ ﾄﾞﾒｲﾝが違うので javascript でﾌﾚｰﾑ内のｿｰｽもいじれません｡
meeflaさんのｺﾒﾝﾄ
申し訳ありません｡ CSS で変更できるのは枠線だけで､しかも記述が間違ってるようです｡ JavaScript で何とかなるだろうとあれこれやってみましたが､ 自ﾌﾞﾛｸﾞの過去記事限定になってしまいます｡ (JavaScript のｾｷｭﾘﾃｨによる仕様です) 過去記事限定のｽｸﾘﾌﾟﾄで良ければ回答を書き変えますので､ お知らせください｡
a-kuma3さんのｺﾒﾝﾄ
はてなﾌﾞﾛｸﾞ案件なので､要望を出したら通るかも､と思ったりなんかして <tt>:-)</tt>
Michiko_70554148さんのｺﾒﾝﾄ
お手数をおかけします｡ ｢自ﾌﾞﾛｸﾞの過去記事限定｣というのは､どういう意味なのか､よくわからないんですが…｡ 基本的に､扱うのは｢自ﾌﾞﾛｸﾞ｣だけなんですが｡ あとは､記事というのは､基本的にぜんぶ｢過去｣のものなんですが､一度記事をUPしたあとに､編集で記事ｴﾃﾞｨﾀからjavascriptを入れて､UPをし直すという意味なのでしょうか｡ そういう意味でしたら､ちょっと手間はかかりますが､できると思うので､教えていただけると助かります｡ a-kumaさん先日はありがとうございました｡ ﾌﾞﾛｸﾞｶｰﾄﾞに色をつけたいと思っている人は､ほかにはいるのかどうかわかりませんが､ﾕｰｻﾞｰさんは､CSSに慣れている人ばかりではないので､例えば､あらかじめいくつかの色が用意してあって､設定画面から色が選べるとか､そういうふうになっていてもいいかもしれないですね｡ 私の場合には､｢真っ白なもの｣が､あんまり好きではないので､なんでも微妙に色がついているほうが､好きなほうなので､自分のﾌﾞﾛｸﾞからは､真っ白なものをなるべく減らしたいと思って､努力しているんですが笑､ﾌﾞﾛｸﾞｶｰﾄﾞだけは､どうしてもできなくて､悩んでいました｡
Michiko_70554148さんのｺﾒﾝﾄ
意味が分かりましたすいません｡ ﾌﾞﾛｸﾞｶｰﾄﾞのうち､｢自分の過去記事を紹介したい場合だけ｣ということですね｡ それでもけっこうです｡できるなら､やってみたいと思います｡よろしくお願いします｡
meeflaさんのｺﾒﾝﾄ
回答を修正しました｡ うまく動作すると良いのですが｡
Michiko_70554148さんのｺﾒﾝﾄ
できました！ 例えばこのﾍﾟｰｼﾞですhttp://michiko-70554148.hatenablog.com/entry/2015/12/18/051505 ありがとうございました｡
meeflaさんのｺﾒﾝﾄ
動作している事を確認しました｡ お役に立てたようで一安心です｡ 変数名にｽﾍﾟﾙﾐｽがあったので､回答の方を修正しておきました｡ 誤：blogCardBoaderColor 正：blogCardBorderColor ｽｸﾘﾌﾟﾄの動作には関係ない部分ですので､ ﾌﾞﾛｸﾞに貼り付けた方は修正する必要はないと思います｡
a-kuma3さんのｺﾒﾝﾄ
些細なことですが､ - blogbody は配列である必要がない - 自ﾌﾞﾛｸﾞと他ﾌﾞﾛｸﾞが混じってるとﾙｰﾌﾟを途中で抜けちゃうので､try 節は背景色をｾｯﾄするところまでくくって､catch 節は return じゃなくて例外を握りつぶす方が良い かな､とか思いました｡
meeflaさんのｺﾒﾝﾄ
a-kuma3 さん､ｺﾒﾝﾄありがとうございます｡ try-catch の件はご指摘の通りですね｡ 手元で修正しました｡ blogbody の方がよくわからないのですが､ var blogbody = blogCard[i].contentWindow.document; だと動作しませんよね？
a-kuma3さんのｺﾒﾝﾄ
>> blogbody の方がよくわからないのですが､ var blogbody = blogCard[i].contentWindow.document; だと動作しませんよね？ << 試してないですけど､こんな感じでｲｹると思います｡ >|javascript| window.onload = function() { var article = document.getElementById("main"); var blogCard = article.getElementsByTagName("iframe"); for (var i = 0; i < blogCard.length; i++) { blogCard[i].style.backgroundColor = blogCardBorderColor; try { var blogbody = blogCard[i].contentWindow.document; var wrapper = blogbody.getElementsByTagName("div"); wrapper[0].style.backgroundColor = blogCardBgColor; } catch(e) { // NOP } } } ||<
meeflaさんのｺﾒﾝﾄ
試してみましたが､ｲｹてるようです｡ ありがとうございます｡ 回答に修正版を追記しました｡
Michiko_70554148さんのｺﾒﾝﾄ
修正版をﾌｯﾀに入れました｡ このｶｽﾀﾏｲｽﾞは､けっこう重宝すると思うので､知らない人は､早く気がついてもらえるといいと､思います｡ jqueryのﾛｰﾄﾞも要らないし､自分の好きな色を決めて､そこだけ変えて､ﾌｯﾀに入れればいいだけなら､慣れない人でも､すぐにできそうな気がします｡ はてなﾌﾞﾛｸﾞを使っていると､もともとがｼﾝﾌﾟﾙなので､もっとこうしたいとかああしたいと思っている人は､けっこういるのかもしれませんが､自分自身が詳しくないとか､難しそうだと思って､最初から諦めている人が､多いかもしれませんですね｡ それにしても､これはいいと思います｡ この前の､a-kumaさんの､記事の文字数も､すごく重宝しているんですが､あれなんかも､｢できる｣とわかれば､やる人はけっこういそうな気がするんですが､知らないからやらないだけということが､多いかもしれません｡もったいないですね｡
Michiko_70554148さんのｺﾒﾝﾄ
なお､ほかのﾕｰｻﾞｰさんからの｢喜びの声｣などが寄せられるかもしれませんので､あと少しは､このｽﾚｯﾄﾞを開けておきます｡
関連質問
●質問をもっと探す●

0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ