ワードプレステーマ、stinger5でサイトタイトルをロゴに変えて、

位置を横幅のセンターに持っていきたいのですができません。

cssだけで可能なのでしょうか?
やり方を教えてほしいです。
どなたか指導の方よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/06/19 23:20:38
  • 終了:2015/06/22 17:59:58

ベストアンサー

id:atachibana No.2

atachibana回答回数3ベストアンサー獲得回数12015/06/20 15:58:59

ポイント100pt

別の方法を紹介します。
ここではロゴ画像を指定し、対象の要素にセンタリングを指定します。具体的には「.sitename img」要素に margin を指定します。

margin: 0 auto;

ただし WordPress では直接テーマを編集するのでなく、子テーマを作成した上でカスタマイズすることが推奨されていますので、その手順込みで記述します。

1. 子テーマを作成する。
1-1) wp-content/themes の下に stinger5-child を作成する。
1-2) wp-content/themes/stringer5-child の下に、次の内容で style.css を作成する。
/*
Theme Name: stinger5 child
Template: stinger5ver20150505b
*/
.sitename img {
margin: 0 auto;
}

1-3) wp-content/themes/stringer5-child の下に、次の内容で functions.php を作成する。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

2. 作成した子テーマを選択する。
2-1) 管理画面の左サイドメニューから「外観」->「テーマ」をクリックする。
2-2)「stinger5 child」テーマを有効化する。

3. ロゴ画像を指定する
3-1)「stinger5 child」テーマの「カスタマイズ」をクリックする。または管理画面の左サイドメニューから「外観」->「テーマ」->「カスタマイズ」をクリックする。
3-2) 左サイドメニューから「ロゴ画像」->「画像を選択」をクリックし、ロゴ画像を選択する
3-3) 画面上部の「保存して公開」をクリックする。

面倒な手順はいいから、手っ取り早く実現したいということであれば、上の「3. ロゴ画像を指定する」後に、wp-content/themes/stinger5ver20150505b/style.css の 1048 行目の margin: を以下で置き換えます。
margin: 0 auto;

id:worldkagu

できました!
ありがとうございます!

2015/06/22 17:59:40

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562015/06/20 15:01:19

ポイント100pt

STINGER5 のデモページで試してみました。
http://wp-fun.com/demo/

サイトタイトルって、ここでいう STINGER5 DEMO の部分ですよね?
f:id:a-kuma3:20150620145748p:image

ロゴを人力検索のロゴに変えてみたのが以下の CSS です。
たとえば、style.css の末尾に追加します。

header .sitename {
    background-image: url("http://q.hatena.ne.jp/images/logo_question.png"); /* ロゴの URL */
    background-position: center center;
    background-repeat: no-repeat;
}

header .sitename > a {
    display: block;
    color: transparent;
}

こんな感じになります。
f:id:a-kuma3:20150620145812p:image

ロゴ(サイトタイトル)をクリックしたときにトップページにリンクするのは残してあります。
リンクを消したいのであれば、A 要素を非表示にしてください。

id:worldkagu

こちらの方法もうまくいきました!
ありがとうございます!

2015/06/22 18:01:13
id:atachibana No.2

atachibana回答回数3ベストアンサー獲得回数12015/06/20 15:58:59ここでベストアンサー

ポイント100pt

別の方法を紹介します。
ここではロゴ画像を指定し、対象の要素にセンタリングを指定します。具体的には「.sitename img」要素に margin を指定します。

margin: 0 auto;

ただし WordPress では直接テーマを編集するのでなく、子テーマを作成した上でカスタマイズすることが推奨されていますので、その手順込みで記述します。

1. 子テーマを作成する。
1-1) wp-content/themes の下に stinger5-child を作成する。
1-2) wp-content/themes/stringer5-child の下に、次の内容で style.css を作成する。
/*
Theme Name: stinger5 child
Template: stinger5ver20150505b
*/
.sitename img {
margin: 0 auto;
}

1-3) wp-content/themes/stringer5-child の下に、次の内容で functions.php を作成する。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

2. 作成した子テーマを選択する。
2-1) 管理画面の左サイドメニューから「外観」->「テーマ」をクリックする。
2-2)「stinger5 child」テーマを有効化する。

3. ロゴ画像を指定する
3-1)「stinger5 child」テーマの「カスタマイズ」をクリックする。または管理画面の左サイドメニューから「外観」->「テーマ」->「カスタマイズ」をクリックする。
3-2) 左サイドメニューから「ロゴ画像」->「画像を選択」をクリックし、ロゴ画像を選択する
3-3) 画面上部の「保存して公開」をクリックする。

面倒な手順はいいから、手っ取り早く実現したいということであれば、上の「3. ロゴ画像を指定する」後に、wp-content/themes/stinger5ver20150505b/style.css の 1048 行目の margin: を以下で置き換えます。
margin: 0 auto;

id:worldkagu

できました!
ありがとうございます!

2015/06/22 17:59:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません