0

ワードプレス21テーマのメインナビゲーションメニューは、デフォルトで左揃えになっています。子テーマのメニューを中央揃えにしようとしていますが、理解できません。助言がありますか？

4

4 に答える 4

1

アドオンの Firebug で Firefox を使用している場合は、ヘッダー メニュー バーの CSS を調べて、適切なコードを見つけることができます。私はたまたま Twenty Twelve の子テーマを使用しており、これも中央揃えのメニュー項目を備えています。

WordPress.org スクリプトを使用して自己ホスト型 Web サイトを使用していると仮定すると、次のように簡単に修正できます。

1) 子テーマをまだ作成していない場合は、子テーマを作成する必要があります。これを行うには、WordPress インストールの「themes」ディレクトリに新しいフォルダーを作成し、「Twenty Twelve Child Theme」のような名前を付けます。子テーマの詳細については、このページを参照してください。

2) 子テーマ用の新しいスタイル シート ファイルを作成し、親テーマ用のスタイル シートを読み込む必要があります。そうしないと、スタイルなしでサイトが読み込まれます。これを行うには、メモ帳を開き、次を追加します。

/*
Theme Name:     Twenty Twelve Child Theme
Theme URI:      
Description:    Child theme for Twenty Twelve
Author:         <You Name here>
Author URI:     
Template:       twentytwelve
Version:        <Add any number to your liking here, for instance '0.5'>
*/


@import url("../twentytwelve/style.css");

アスタリスク付きのスラッシュで囲まれたセクションはコメントです。スタイル シートの任意の場所にコメントを追加して、カスタマイズにラベルを付けて整理することができます。次の '@import' ルールは、親テーマのスタイルシートをロードして、子テーマが Web サイトを単なるスケルトンとしてレンダリングしないようにします。

このファイルを「styles.css」というファイル名で子テーマ ディレクトリに保存し、「ファイル タイプ」リストで「すべてのファイル」を選択することを忘れないでください。

3) 子テーマのベースが作成されたので、カスタマイズ部分に進みます。まず、テーマのナビゲーション メニューの CSS ルールを子テーマのスタイル シートに追加します。このコードは親テーマのスタイル シート内に既に存在するため、実際にはカスタマイズでオーバーライドします。

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom-color: #EDEDED;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #EDEDED;
    border-top-style: solid;
    border-top-width: 1px;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}

この CSS ルール内の宣言は、ナビゲーション メニューの外観をコンテナーとして定義します。メニュー要素を中央揃えにするには、'text-align' プロパティの値を 'center' に置き換えるだけです。

ファイルを再度保存し、Web サイトをリロードします。メニュー項目が中央揃えになるはずです。

于 2013-01-17T23:03:11.027 に答える
1

ダッシュボード > 外観 > エディター内で、「style.css」を開き、見出しが表示されるまで下にスクロールします。

/* =Main content and comment content
-------------------------------------------------------------- */

少し下にスクロールして、残りをそのままにして、行text-align: center;を一番下に追加します。.entry-header .entry-title

..上記を実行すると、私のコードは次のようになります。

.entry-header .entry-title {
    font-size: 20px;
    font-size: 1.428571429rem;
    line-height: 1.2;
    font-weight: normal;
    text-align: center;
}
于 2013-04-04T21:22:41.527 に答える
0

このコード部分をコンテナ div の css に追加します。

margin:0 auto;

divを中央に揃えます。

于 2013-01-10T18:02:29.547 に答える