ココログでデフォルトCSSを読まないようにするには

ココログ・ベーシックでデフォルトのCSSを変更するには、管理画面のデザイン変更ウィザードに従う必要があります。CSSの知識があっても、当然好きなように編集することはできません。

ココログでは、デフォルトで読みこまれるCSSファイルが2つあるようです。各ページの headタグ内の、titleタグのすぐ次に、以下のようなスタイルシートの読み込み部分があるのがそれです。以下、blogurl とか blogname とかは自分のココログの基本URLやブログ名に読みかえて下さい。"基本URL/ブログ名"でブログのルートになるはずです。私の場合だと、http://jgb.way-nifty.com/marbles です。この意味が分からない人は、Niftyのココログサポートページで、ファイルアップロードの仕方とかを読んで下さい。

<title>ブログタイトル</title>
<link rel="stylesheet" href="http://template.cocolog-nifty.com/all/richbase.css" type="text/css" />
<link rel="stylesheet" href="http://blogurl/blogname/styles.css" type="text/css" />

richbase.css が共通の基本設定で、ブログルート直下に置かれる styles.css というCSSファイルが、ユーザがカスタマイズした部分を担っているようです。

両方ともやり方しだいで読み込ませないようにすることができますが、richbase.css は読み込んでおいたほうが無難なので、styles.css を置き換える方法を考えます。

ココログ・ベーシックでは、記事の作成や変更、再構築などの際に、デフォルトで styles.css を書きだし、読み込む仕様になっていて、意地でもいじくりたい人にはこれがネックになっています。例えば私は、カスタマイズしたCSSファイルを別のディレクトリ(ブログルート/cssなど)に置いて、いじりたおしていま す。そのためこの styles.css には以下のような素っ気ない記述だけ書いてあります。

/* \*/
@import url("http://blogurl/css/styles-basic.css");
/* */

まあ、古〜いブラウザ対策も兼ねてるんですが、この styles.css はブログを再構築するたんびに上書きされるんで、いちいち自分のPCにある styles.cssをアップロードしないといけません。かなりメンド〜...。

で、現在は、JavaScript でブラウザごとにCSSを変えるスクリプトを書き、その中で、各ページの HTML の head タグ内にある、デフォルトの styles.css を読み込む記述を書き換えてしまうようにしています。これで、古いブラウザ対策とデフォルトの styles.css の上書き問題の両方に対処できます。

styles.css を読み込む link タグを、自分のブログ専用に作った基本設定のCSS(ここでは styles-basic.css)を読み込むものに書き換えてしまうので、再構築などで styles.css がどのように書き出されても無視できます。

以下はそのコードです。[import_css.js]

var userSystem = new P5_getUserSystem(navigator.userAgent);

// OS、ブラウザの情報などを得る
var browserInfo =
{
  "os" : userSystem.osLongName,
  "browser" : userSystem.browserLongName,
  "version" : userSystem.browserVersion
};

// 置き換えCSSファイル
var basic_csspath = "http://blogurl/css/styles-basic.css";
var csspath1 = "http://blogurl/css/styles-plus1.css";
var csspath2 = "http://blogurl/css/styles-plus2.css";
var csspath3 = "http://blogurl/css/styles-legacy.css";

// 追加CSSを読ませる場所
var orgcssnode = document.getElementById('css_import');

// styles.css をカスタマイズした基本設定CSSに変える
function replace_basic_css () {
  var new_basic_css = document.createElement('link');
  new_basic_css.rel = "stylesheet";
  new_basic_css.type = "text/css";
  new_basic_css.id = "basic_css";
  new_basic_css.href = basic_csspath;

  var head = document.getElementsByTagName('head');
  var head_elems = head[0].childNodes;
  var n = head_elems.length;
  for ( var i = 0; i < n; i ++ ) {
    if ( head_elems[i].href == "http://blogurl/blogtitle/styles.css" ) {
       head[0].replaceChild(new_basic_css, head_elems[i]);   
    }
  }
}

// 追加CSSの読み込み
function replace_css (path, node) {
  var csspath = path;
  var orgcssnode = node;
  var newcssnode = document.createElement('link');
  newcssnode.rel = "stylesheet";
  newcssnode.type = "text/css";
  newcssnode.id = "css_import";
  newcssnode.href = csspath;

  orgcssnode.parentNode.replaceChild(newcssnode, orgcssnode);
}

// 基本設定CSSを読ませる関数を実行
replace_basic_css();

// ブラウザごとに追加設定CSSを読みかえる
var mj_ver = Number(browserInfo.version.substring(0,1));
if ((browserInfo.browser == "Firefox") && (mj_ver > 1)) {
  replace_css(csspath1, orgcssnode);
}
else if ((browserInfo.browser == "Internet Explorer") && (mj_ver > 5)) {
  replace_css(csspath2, orgcssnode);
}
else
{
  replace_css(csspath3, orgcssnode);
}

このスクリプト中でブラウザ判定に使っている check_browser.js は、以下のアドレスから入手できます。

http://www.plus-5.com/homepage/javascript/check_browser.html

さてこのスクリプトの読ませ方なのですが、よくあるマイリストに張り付 ける方法でなく、サブタイトルの後に scriptタグを書き込む方法をとりました。よくカスタムCSSの読み込みを、このサブタイトルの後に記述する方法が紹介されてますが、同じ場所でJavaScriptの読み込みもできるようです。マイリストに張り付 けるより、こちらの方が簡単です。

サブタイトルの後に、

<link id="css_import" rel="stylesheet" href='#' type="text/css" />
<script type="text/javascript" src="http://blogurl/js/check_browser.js">
</script>
<script type="text/javascript" src="js/import_css.js">
</script>

と書く。この場合JavaScriptファイルは、基本URLの直下に js というディレクトリを作って入れていることになります。この方法で、jQuery などの最近はやりのライブラリもインクルードできます。

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

aBowman

別荘はこちら

  • Marbles2
    音楽、美術、映画、本など趣味的なページはここに移転しました。考えるのが面倒だったので、タイトルは単に2です。
2017年6月
        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  

mail

  • 82pkdick@gmail.com

最近のトラックバック

無料ブログはココログ