サポート » 使い方全般 » 旧サイトからWPへの一部CSSの移動について

  • 解決済 yzk

    (@yzk)


    こんにちは、お世話になります。

    初歩的なことで申し訳ないのですが、どうしても分からないので教えてください。
    (Codexも読んでみましたが、やっぱり分からないので教えてください!)

    以下ご質問です。
    主にhtmlとcssで作ってある旧サイトから、一部のCSSをWPにうつしたい(コピー&ペーストでうつしたい)と考えています。

    ぐぐったりしながらやってみたのですが、うまく移動できません。
    WPのCSSに関して、根本的な間違いや思い違いをしているかもしれませんので、その場合は教えていただけますと嬉しいです。
    どうぞよろしくお願い致します。

    以下、やってみた作業です。

    (1)CSS自体が間違いなく機能しているかのテスト

    今回試しに移動したいのは、「class指定してあげれば、CSSで定義したテーブルが出現する」というCSS指定です。まずはこれがちゃんとコピペで再現できるか、試しにhtml/cssで構成されたサイト間でコピペしてみました。
    実験したのは、「旧サイト → そのCSSが指定されていないhtml/cssで構築されたサイト」の間です。

    移動したCSS

    td.memo{
    background:url(../store/image/store_memo.gif) no-repeat left top;
    padding : 5px 10px 100px 10px;
    }

    td.memo_wide{
    background:url(../store/image/store_memo_wide.gif) no-repeat left top;
    padding : 25px 15px 25px 25px;
    }
    *実際には..部分に、URLをhttp://からフルで入れリンクをつなぎました

    CSSをcssファイルにコピー&ペーストし、htmlファイルには<class=”memo”>が含まれるソースを丸ごとコピペしました。
    そうしましたら、実験対象のサイトに、class指定したテーブルが出現しました。

    (2)同じCSSをWPのテーマCSSに移動

    同じCSSを、WPのテーマCSSに移動しました。フォントやパンくずリスト、グローバルメニューなどのCSS指定がなされているCSSファイルです。
    ここの「本文エリア」の欄に、上記CSSをコピペでつけ足しました。

    その上で、WPポストのhtmlタグに<class=”memo”>を含むソースを丸ごとコピペしましたが、何も起こりませんでした。

    (3)同じCSSをWPのstyle.cssに移動

    CSSの移動先を間違ったのかと思い、今度はstyle.cssにCSSをコピペしてみました。
    上記のCSSをstyle.cssに書き足し、WPポストのhtmlタグに<class=”memo”>を含むソースをペーストしましたが、何も起こらずです。

    もしかしてWPの仕様からして、私のCSS理解ややり方が根本的に間違っているのでしょうか。
    致命的な間違いがありましたら、ご指摘いただけますと助かります。

    初歩的なことで本当に恐縮ですが、どうぞよろしくお願い致します。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • style.css にCSSを追記しても本当に効いていないのか、まず確認してみてはいかがでしょうか。
    たとえば以下を追記して全てのテキストが太字になればCSSは正しいファイルを変更していることになると思います。
    * { font-weight: bold; }

    同じCSSを、WPのテーマCSSに移動しました。フォントやパンくずリスト、グローバルメニューなどのCSS指定がなされているCSSファイルです。
    ここの「本文エリア」の欄に、上記CSSをコピペでつけ足しました。

    その上で、WPポストのhtmlタグに<class=”memo”>を含むソースを丸ごとコピペしましたが、何も起こりませんでした。

    画像に関して、アドレス指定が間違っていませんか?
    background:url(../store/image/store_memo.gif)
    この場合、仮にテーマファイルフォルダに直接style.cssがあったと仮定した場合、最初の../でテーマファイルフォルダを抜けてしまいます。その後storeというテーマフォルダを探し(ないと思いますが・・・)その中のimageフォルダを探すということになりますが、そこに画像がなければ当然表示しませんね。

    umbrella_processさん、shokun0803さん

    こんにちは! 大変お世話になります。
    お忙しいところ、ご返信ありがとうございました。

    まずは、お二人からいただいたご返信で、自分がまったく的外れなことをしているのではないと分かり、本当にホッとしました。基本的に私が仮定している操作で、WPにCSSが反映できると分かり、原因の大きな切り分けができました。
    どうもありがとうございました。

    そしてumbrella_processさん、アドバイスありがとうございます。
    さっそくやってみました。
    具体的には、一番の元ファイルになるテーマCSSファイルに、いただいたソースコードを書き込んでみました。
    そうしましたら、反映しました!

    ですので、書き込む位置は間違っていないようです。そして、ファイルがおかしいなどの理由も、ないようです。
    アドバイス、どうもありがとうございました!

    shokun0803さん、こんにちは。
    リンク元に関するアドバイス、ありがとうございます。
    umbrella_processさんにいただいたアドバイスが効いたとなると、やっぱりリンク関係がアヤシイですね。

    私の書き方が分かりにくかったかもしれませんが、WPにコピペのテストをする際に、「..」の部分は、フルにURLを記載して、一切選択肢が出ないようにしました。
    つまり画像格納先は、そのものズバリのURLで絶対指定しました。

    それが

    *実際には..部分に、URLをhttp://からフルで入れリンクをつなぎました

    の部分だったのですが、分かりにくくてごめんなさい。

    また念のため、WPのthemesフォルダの中に、上で指定したフォルダとまったく同じ「image/store/……」というフォルダを作ってあります。
    その中に、まったく同じ画像を入れてあります。
    WPが賢すぎて、万一リンク先を迷っても、WP内のimageフォルダに飛んでこられるようにです。
    (URLを絶対指定にしているので、それもないと思うのですが……)

    このような土台を作っての作業ですので、ましてや、謎なのです。
    そのため、私の知らないWP特有の仕組みなどあるのかと思い、こちらにご質問させていただきました。

    umbrella_processさんにいただいたアドバイスが効きましたので、方向性は間違っていないことが確認できました。
    次はshokun0803さんにいただいたアドバイスどおり、もう一度丁寧にURLを指定し直して、ちょっとやってみます。

    どうぞ引き続きアドバイスのほど、宜しくお願い致します。

    そしてお忙しい中、ご返信ありがとうございました。
    重ねてお礼申し上げます!

    また念のため、WPのthemesフォルダの中に、上で指定したフォルダとまったく同じ「image/store/……」というフォルダを作ってあります。

    なるほど、ちゃんと読んでいませんでしたね、すみません。
    一度その絶対アドレスで、画像が表示できるか確認はした方が良いと思いますよ。
    あと、「<class=”memo”>を含むソースを丸ごとコピペ」の部分ですが、それは記事を実際に表示した場合もちゃんとソースにありますか?WordPressにはxhtmlでソースを整形しなおす機能がありますので、ちゃんとソースにあるかどうかを確認すると良いかと思います。FireFoxのFireBugなどで確認すると確実ですよ;)

    こんにちは、大変お世話になっております。
    重ねてのご報告をお許しください。

    なんと、できました!
    手順としては、以前数度やったのと同じことをやったのですが、なんで以前できなかったのか分からないぐらい、CSS指定したテーブルがちゃんと出てくれました。
    アドバイス、どうもありがとうございました。

    できたのは結果なのですが、でも、以前よりもWP内での関係がしっかり分かって、WPのCSSに関しての正しい理解が深まりました。
    umbrella_processさん、shokun0803さん、アドバイスどうもありがとうございました!
    心から感謝申し上げます。

    shokun0803さん

    こんにちは、大変お世話になっております。
    ちゃんとできたことに興奮しすぎて、コメントがすれ違ってしまいました。
    (失礼しました!)
    ですので、追加でお書きさせてください。

    WordPressにはxhtmlでソースを整形しなおす機能がありますので、ちゃんとソースにあるかどうかを確認すると良いかと思います。FireFoxのFireBugなどで確認すると確実ですよ;)

    ありがとうございます!
    WPは自動整形になっているのですね。おかげさまで、またひとつ、WPに関する知識が増えました。
    旧サイトは多分、htmlで書かれていると思いますので(私が書いたのではないのですが、時期的に多分そうだと思います)、これから様々なソースを移す時に、htmlとxhtmlの差に気をつけます。

    重ねてありがとうございました。
    そして、今後ともどうぞよろしくお願い致します!

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「旧サイトからWPへの一部CSSの移動について」には新たに返信することはできません。