[WordPress] Web ページの特定の部分に関連するファイル/s を発見

スポンサーリンク

質問

私はここで見ることができるウェブサイトを持っている: Minutify。Web サイトは、ワードプレスに基づいて, とウィジェットの数をインストールしています。それらの 1 つは訪問者のメール アドレスを入力するためです。”購読する MINUTIFY”と呼ばれるボックスのメイン ページの右の手でそれを見ることができます。

見られるように、電子メールを入力するボックスよりも狭い通過外側の白いボックス。ボックスの中央に白い (購読する MINUTIFY)、視覚的に楽しいである 2 つの垂直方向の境界線の行があることを見ることができます。

を持っていないので持つ任意の経験私たちのウェブサイトのデザインと css、html、等。どのようなファイル/s コントロール、web ページの視覚的効果を見つけるよい方法は何ですかと思いまして、たとえばについて話して、ボックスや、問題を修正する方法について話してファイル

たとえば、ページをクリックし、「ページのソースを表示」を選択します (クローム) で書く場合得ることができます私はどのようなファイルを見てくださいどこに手がかり?

答え

要素を検査し、CSS とは何を参照してくださいにはかなり簡単です他の人が述べてきたとおり適用されます。この場合、明示的な幅がない–設定、ブラウザーの既定が有効であります。サイトの CSS をされても結合し、キャッシュに格納される検査官報告していないかもしれない編集するファイルを変更が表示されます。テンプレート ディレクトリ内の CSS ファイルを探します

以下の css では、利用可能なほぼすべての CSS ファイルに含まれている要素に幅を適用するだろう:

.sml_emailinput {
    width: 100%;
    box-sizing: border-box;
    border: none;
}

これは input 要素より統合された外観の結果、使用可能な領域の幅いっぱいになります

< hr/>

外観ウィジェット、上記の検索ボックスのそれに類似している、これを試してください:

p.sml_email {
    background: #d0d0d0;
    padding-bottom: 20px !important;
}
input.sml_emailinput {
    width: 93%;
}

答え

Firebug を使用することができますまたはインスペクター要素スタイルを参照してくださいとインスペクター要素または Firebug のツール (無料のインターネットから得ることができます) を選択する要素を右クリックして

簡単に編集

http://www.minutify.com/wp-content/themes/Zoren/A.style.css,qver=4.1.pagespeed.cf.aQXaS7GeSC.css

ファイル

input[type="text"], input[type="email"], textarea{

を使用してそれを隠すことができますすることができますように

編集

border: 1px solid #ccc;

border: 1px solid #fff;

http://stackoverflow.com/questions/28522729/discovering-the-file-s-relevant-to-a-specific-part-of-a-webpage

スポンサーリンク

Leave a Reply