CSS 追加 が出来ない!。 どうしちゃったの?、 Blogger さん。
個々の投稿に CSS を埋め込む対処法もありますが、 面倒だし、 スマートじゃないし、 忘れたら駄目だし ... 。
しょうがない!。 テンプレートの HTML を 直接 弄って 独自 CSS を盛り込みましょう。 あぁ、面倒 ... 。
普通、こんな場面に出喰わしたら、 ... 、 お手上げ です。
そう、参考迄に、 大昔の投稿。 こちらです。 Blogger の引用をそれらしく
その手順は テンプレート > カスタマイズ > アドバンス > CSSを追加 と選んで行くと、 カスタム CSS を追加 の画面になります。の筈ですが、 何回やっても、保存出来ないのです。
私のは今までほとんど手を入れていないので、空白で表示されました。
ここで、以下のコードを挿入します。
Https-Blog にしたから でしょうか?。 因みに、この Blog の事ではありません。.
それとも、Blogger の Dashboard が変わっちゃったのか?。
Browser のせい ( IE も Firefox も OUT ) ?。
でも、幸いかな、 過去に対応済みの Blog つまり 過去事例 が手元にあります。 この Blog の事です。.
これを見較べれば OK ですね。 やれやれ。
ちゃんと機能していた頃と同じ場所に (勿論、別 Blog の手付かずのものに) コードを放り込めば良いので ... 。
調べた結果。
Simple テンプレート の場合、
テンプレートの冒頭 <b:skin>...</b:skin> と折り畳まれている部分を展開します。
]]></b:skin> で 終わる その 直前 に カスタム CSS が格納されていました。
そこで、 こんな形で、HTML に直接 手書きします。
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
/* ----------------- Add My CSS before ...</b:skin> Expansion ----------------- */
blockquote {
/* ------ 内容省略 ------ */
}
.table-c {
/* ------ 内容省略 ------ */
}
/* ----------------- End of Additional CSS before </b:skin> Expansion ----------------- */
]]></b:skin>
<b:template-skin>
個々の定義は省略しています。 あしからず。
青紫色が元々のコード、 黒い部分が 書き加えたコード、 緑色はコメントです。
これでは、分らない と言う方も おいででしょうから、 以前の投稿に習って、引用の書式を入れた場合を。
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
/* ----------------- Add My CSS before ...</b:skin> Expansion ----------------- */
blockquote {
margin:10px 2px 10px; /* 枠の外側の余白(上 右 下 左) */
padding:10px 20px 10px 20px; /* 枠の内側の余白(上 右 下 左) */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
background:#c1c1c1; /* 背景色 */
}
/* ----------------- End of Additional CSS before </b:skin> Expansion ----------------- */
]]></b:skin>
<b:template-skin>
ふぅ。
他のテンプレートで、同じ様な 対処法が効く か否か は不明です。 Simple テンプレート の場合 です。
[追伸]
上記の様に、 テンプレート HTML を 直接 操作して、差し当たり、表示には問題が無いと思っていたのですが ... 。
ダッシュボード上で変化がありました。
追加したコードは CSS の追加 のボタンで表示されています。
しかし、テンプレート ボタンで表示される ブラウザ用の画面イメージが 表示エリア でトラブル です。
モバイル用の画面イメージ は正常に表示されますが、
ブラウザ用の画面イメージ は エラーが発生しました。 とアナウンスされています。 Error Code : bX-nqdrrc
実際に、ブラウザ上で、 この Blog の表示は問題ないですし、 他の テンプレート 操作(編集)機能 も 正常 です。
何か、変ですね。
[2015/12/15] 追伸を記入 Error Code 追記
0 件のコメント:
コメントを投稿