人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ワードプレステーマ、stinger5でサイトタイトルをロゴに変えて、
位置を横幅のセンターに持っていきたいのですができません。

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

●質問者: worldkagu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●100ポイント

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 要素を非表示にしてください。


worldkaguさんのコメント
こちらの方法もうまくいきました! ありがとうございます!

2 ● atachibana
●100ポイント ベストアンサー

別の方法を紹介します。
ここではロゴ画像を指定し、対象の要素にセンタリングを指定します。具体的には「.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;


worldkaguさんのコメント
できました! ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ