特定の記事ページだけデザインを変える方法 - ウェブリブログ新システム・CSS編集

css56.jpg


前のウェブリブログのシステムでは、記事ごとにデザインテンプレートを変えることができましたが、新しいシステムではその機能は廃止されました。


お手軽に記事ごとにテンプレートを変えることは出来なくなってしまいましたが、新しいシステムでも特定の記事ページだけデザインを変える方法を考えてみました。


CSSは基本的に後から記述した設定が適用されるので、例えば、同じCSS内に以下のような記述をした場合、下に書いた方の「width: 1000px;」が適用されます。


body {
width: 800px;
}

body {
width: 1000px;
}


文章とデザインを分離するという考え方を重視するなら、なるべくCSSはHTMLとは別の外部のファイルに記述し、HTMLの中に直接CSSを書くことは避けた方がいいのかもしれないですが、HTMLの中に直接CSSを書き込んで、外部ファイルのCSSの設定を上書きすれば、特定の記事だけデザインを変えることができます。


HTMLの中に直接CSSを書き込む場合、以下のように書きます。


<style type="text/css">この部分にCSSを書く</style>

css48.jpg

↑の例は、記事ページのページ全体の背景色と文字色を変える


記事を投稿する時に、本文の中にCSSを記述すれば、管理画面のCSS編集で設定したCSSの値を上書きでき、さらにそのCSSの設定は記事ページのみに反映されるので、CSSを記述した記事ページだけデザインを変えることが可能です。


css46.jpg


この時注意しないといけないのが改行の設定で、改行HTMLタグ変換の設定を「変換する」にしている場合、記事ページに記述したCSSに余計な改行タグが追加され、CSSが無効化されてしまいます。


この問題を回避するために、改行HTMLタグ変換の設定を「変換する」にしている場合は、記事ページに書くCSSは一切改行を入れずに書く必要があります(「変換しない」にすれば改行してもいいですが、その場合本文に自分で改行タグを入れないといけなくなります)。


さらに、CSS内にURLがある場合は、URL補完を「補完しない」に設定しておかないと、CSS内に余計なタグが挿入されてCSSが無効化されてしまうので注意。


あと、デザインを選ぶときに「全文表示」を選んでしまうと、記事ページ以外のページでも記事に追加したCSSが適用されてしまうので、「全文表示」のデザインではこの方法は使えません





■ウェブリブログのテンプレートを利用して記事ページのデザインを変える方法


自分で1からデザインを変えるのは大変なので、前のシステムのようにウェブリブログのデザインテンプレートのデザインをそのまま特定の記事ページだけに反映させる方法を紹介します(ここで紹介する方法はあくまで一例です)。


「WinMerge」のような2つのテキストを比較できるソフトを使い、自分が現在使っているテンプレートと記事ページに反映させたいテンプレートのCSSを比較します。


WinMerge


css47.jpg


2つのCSSを比較して、値が異なる部分を抽出してそれを記事ページに埋め込めば、記事ページのデザインを丸ごと違うテンプレートのものに入れ替えることができます。


ただ、この方法を試すには結構めんどくさい作業が必要になるので、ウェブリブログのテンプレートのCSSから記事ページのデザインを丸ごと違うテンプレートに変えるために必要な箇所を自動で抽出できるちょっとしたプログラムを作りました。


ウェブリブログのテンプレートのCSSから記事ページに埋め込むCSSを抽出するプログラム


<上のプログラムを使って記事ページのデザインを変える手順>


css49.jpg

ブログ管理画面のデザイン「ウェブリブログ」の項目から、抽出したいCSSを選択(サイドバーの位置はどれでもOK)



css50.jpg

CSS編集の画面で、無編集状態のCSSをそのまま全部コピー(右クリック→すべて選択でコピーをすると楽)



css51.jpg

コピーしたCSSをプログラムに貼り付け、抽出ボタンを押して記事ページに埋め込むCSSを抽出

ウェブリブログのテンプレートのCSSから記事ページに埋め込むCSSを抽出するプログラム



css52.jpg

抽出したCSSをコピーして、記事作成画面の本文に貼り付ける


これで、CSSを記述した記事ページだけに、抽出したデザインを適用させることができます。


css53.jpg


一度作成したCSSを定型文設定に保存しておけば、次回以降簡単に他の記事ページにも適用させることが可能です。


ただし、このやり方で全てのウェブリブログのテンプレートでうまくいくかどうかは検証不足で保証はできません。特に初期の状態から独自にいろいろとデザインを変えている場合は、それに合わせて変更箇所が増えることも考えられるので、今回のやり方はあくまで参考程度ということで。





■スマホ用ページの対策


基本的にPC用のページとスマホ用のページではid名やclass名が違うので、PC用のページのCSSを上書きしてもスマホ用のページに影響を与えることはないんですが、スマホ用のページにも影響を及ぼすbodyタグの「background」と「color」の値も上書きすることになるので、このままだとPC用のページだけでなく、スマホ用の記事ページの背景色と文字色も変わってしまいます。


そこで、スマホ用のページの全体の枠「#wrapper」に、元のスマホ用のページの「body」の値を設定してさらに上書きすることで、スマホ用の記事ページには影響を及ぼさないようにします。


css54.jpg


管理画面のデザインで「スマートフォン」を選択し、CSS編集で「body」とその下にある「a」の「background」と「color」の値をコピーします。


これを次のように書き換え、記事ページのCSSに追加します。


#wrapper {
color: #333333;
background: #F1F1F1;
}
#wrapper a {
color: #AAA;
}

css55.jpg

<改行無しバージョン>

#wrapper { color: #333333; background: #F1F1F1;}#wrapper a { color: #AAA;}





■JavaScriptを使ってCSSを記事内に埋め込む方法


テキストエディタ(メモ帳など)を使い、以下のようなファイルを作成します。


document.write('ここにCSSを記述する');

例:document.write('<style type="text/css">body { background: #B9A581; color: #808080;}</style>');

<メモ帳での作成例>

css57.jpg



css58.jpg


保存する時は、拡張子をjs「〇〇〇.js」、文字コードをUTF-8で保存してください。


今のWindowsのメモ帳はUTF-8で保存可能ですが、昔のメモ帳だとUTF-8で保存できない場合があるので、その時はTeraPadのようなフリーのテキストエディタを使ってください。


次にブログ管理画面からファイルマネージャを開き、先ほど作成したJSファイルをアップロードします(cssみたいな名前で画像とは別のフォルダを作って保存しておくと管理が楽)。


css59.jpg


ファイルをアップロードしたら、ファイル名をクリックして編集ウィンドウを開き、右下のURLをコピーします。


最後に、本文の中に以下のような形で記述します。


<script type="text/javascript" src=""></script>

例:<script type="text/javascript" src="https://userdisk.webry.biglobe.ne.jp/030/489/18/N000/000/000/156567376440030375592.js"></script>

css60.jpg



JavaScriptを使ってCSSを書き込んでいるだけなので、直接書き込んだ場合と結果は同じです。


こちらのやり方の利点としては、ファイルマネージャに保存したJSファイルを削除するだけで記事ページのCSSを無効化できるので、ウェブリブログの仕様が変わってCSSがうまく動作しなくなった場合などに、1つ1つの記事のCSSの記述を削除する手間を省くことができます。





ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(1)「HTML編:開発ツールの使い方とウェブリブログの新システムのレイアウトの仕組み」

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(2)「CSS編:開発ツールを使ったCSS編集のやり方」

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(3)「ボックスモデルを理解してブログのサイズを調整する」

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(4)「フレキシブルボックスレイアウトを理解してコンテンツの並びや配置を調整する」













スポンサーリンク


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。