1

ソーシャル フォロー リンク ボタンのカスタム イメージを Web サイトのサイドバー メニューに追加しようとしています。今、私は最初のテストとして Facebook のものに行き詰まっていますが、理想的には後で他のものを追加したいと考えています。（私が選択した方法では簡単ではないかもしれないことに気づいています）

さまざまな方法を試してみましたが、これまでに最も成功したのは DIY テーマ (この記事) の方法で、私のサイト style.css に追加したコードは次のとおりです。

#menu-item-127 a {
    display:block; 
    height:83px; width:75px; 
    padding:0px; 
    margin-left:6px; 
    outline:none; 
    /*text-indent:-9999px;*/
    background-image:url('/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png');
    background-position:0 -82px;
}

#menu-item-127 a:hover { background-position:0 0px; }

問題は、リンクの上にカーソルを合わせると、背景画像が消え、スプライトの「アクティブ」バージョンに遷移しないことです。

第二に、テキストは画面からインデントされず、画像の上にとどまります (上記のコードでその部分がコメントアウトされていることはわかっています。何が起こっているのかをテストするためにオンとオフを切り替えたため、違いはありません) )

3 番目の問題は、ホバー アクティベーション エリアが大きすぎることです。画像のすぐ上ではなく、メニュー バーの幅全体に広がります。したがって、画像の右側にいる場合でも、FB リンクをクリックできなくても、「ホバリング」と見なされます。

上記のコードの a:hover 部分を削除しても、背景画像が消えてしまうため、style.css の他の部分に関連しているようです。私はすべての変数を調整し、方法を知っているすべての要素を調べましたが、これには困惑しています。

私のウェブサイトは americagonepostal.com です。基本テーマはハムです。

ところで、私はこれまで CSS を実際に行ったことはありません。私はこのサイトを、技術的に完全に遅れている私のいとこのためにやっていますが、アーティストであるため、非常に具体的な美的期待を持っています. 私は自分が何をしているのかわからないままハッキングしていたので、そのサイドメニュー領域にリンク付きの画像を配置するより良い方法があれば、私はすべて耳にします。ホバーしたときに必ずしも「強調表示」する必要はありませんが、それはいい感じです。

理想的には、Facebook、Twitter、RSS のボタンを同じ汚れたスタンプ スタイルで水平に追加したいと考えています。私が行ったように、カスタム メニューを使用して 3 つのボタンすべてを 1 つの水平方向に配置することは可能ですか?

ありがとう。

4

1 に答える 1

1

これを試して：

#menu-item-127 a:hover {
background: url("/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png") !important;

!importantは、継承されたスタイルをオーバーライドします

テキストのインデント : ブランディング セクションの text-align プロパティを変更します。

#branding { border: 0 none;
            bottom: 0; 
            padding-top: 5em; 
            text-align: none;
            top: 0; }

次に、同じ方法でオーバーライドします。

#menu-item-131 a:hover { background-position: 0 0 !important; 
                         text-indent: -999px !important;}

これは、通常の状態に影響を与える必要があり、インライン スタイリングを使用する必要がある場合の a:hover のみです (ベスト プラクティスではありませんが、この場合は問題を解決します)。

 <li id="menu-item-131" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-131" style="text-indent:-999px"> <a href="facebook.com/AmericaGonePostal"; target="_blank">fb</a> </li>

ホバー アクティベーション領域が大きすぎるという 3 つ目の問題:

#menu-item-131 a{ background-position: 0 0 !important; 
                 text-indent: -999px !important;
                 width:75px !important; }
于 2012-09-07T03:22:58.220 に答える