Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › ヘッダーをカスタマイズしたい
- このトピックには9件の返信、1人の参加者があり、最後に
kishinoにより8年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2018年2月3日 6:15 PM #58555
kishino
ゲストSimplicity2の子テーマを編集してサイトのカスタマイズしています。
トップページは手動で編集したいので固定ページを使っています。全体のデザインやレイアウトはこんな感じにしたいです。
https://prottapp.com/p/27e2d3#/s/5a74172686e465086c8625fe今サイトはこんな感じです。
http://nstyle.cms.am/ヘッダーの背景を白30px とグレー30px にして、右側にはサイトロゴ、左上には総合ロゴ(このサイトはあるグループのサイトなんですよーーと匂わせたいので)を付けたいです。
1)ヘッダーの背景は幅2ピクセル高さ60ピクセルのGIFを連続の横並びにすればいいのかなぁと思ったりしてるのですが、その背景になるGIFはどこのフォルダに入れて呼び出せばいいのかわかりません。
2)左上の総合ロゴ(画像)はどうやって入れたらいいでしょう?
-
2018年2月3日 7:49 PM #58556
かうたっく
ゲスト具体的にどのような表示にしたいか、イメージがわいてませんが
その背景になるGIFはどこのフォルダに入れて呼び出せばいいのかわかりません。
メディアにアップロードしても良いし、子テーマ内のimagesフォルダや子テーマ内に新規フォルダを作って入れても、画像のパスをキチンと指定していれば大丈夫です。
リンク先があるなら
<a href="http://nstyle.cms.am/betu/"><img src="画像のパス" alt="ほげほげ" class="site-hoge-img"></a>などしても良いかもしれません。子テーマimagesフォルダ内hoge.pngの場合、
/images/hoge.png” />
今メディアにアップロードした場合は画像のパスはこのようになるので。
https://domain.com/wp-content/uploads/2018/02/hoge.png2)左上の総合ロゴ(画像)はどうやって入れたらいいでしょう?
左上に領域:例えば
<p class="hoge">を作成して、そのなかに画像を入れる領域をまた作成すれば良いと思います。全てのHTMLに特有のclass指定を入れるとCSSで装飾できるので。 -
2018年2月3日 7:53 PM #58557
かうたっく
ゲスト子テーマimagesフォルダ内hoge.pngの場合、
/images/hoge.png” />codeタグの入れ忘れ。
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/hoge.png” /> -
2018年2月5日 1:06 AM #58563
kishino
ゲスト>かうたっくさん
いつもアドバイス、フォローありがとうございますw1)について
今は応急処置で
子テーマのstyle.cssに以下のコードを書いてます。
/************************************
header
************************************/
#header {
background-color: #e6e6e6;
border-top: 30px solid #fff;}
高さのあるボーダーをトップに入れて白とグレー背景のヘッダーにしてます。
本当はあらかじめ見せたい高さに合わせて作ったGIFファイル(bg.gifとする)と
以下のコードをスタイルシートに書いてヘッダー背景にしたいのですが、#header {
background-image: url(どこなんだろ?/bg.gif);
background-repeat: repeat-x;
}どこなんだろ?にあたる階層は simplicity-child2の中のimagesフォルダでいいんでしょうか?
2)について
/images/hoge.png” />
....( * * ) こんな難しいこと書かないと右上にロゴが置けないのでしょうか?
style.cssにロゴをPタグかDIVタグの背景としてロゴを呼び出し、<p id=”home”></p>か、
<div id=”home”></div>とかにしてheader.phpに書く、だけじゃだめなんでしょうか? -
2018年2月5日 1:08 AM #58564
kishino
ゲスト追記です。うまくコピーできてませんでした。
2)について、で、難しいことと私が言っているのは、
はてなマークから始まってphp echo get_stylesheet_directory_uri();なんちゃらと書いてある部分です。
-
2018年2月5日 7:19 AM #58567
かうたっく
ゲストどこなんだろ?にあたる階層は simplicity-child2の中のimagesフォルダでいいんでしょうか?
画像のパスをキチンと指定していれば大丈夫です。
#58556簡単な方法でしたら、メディアに画像をアップロードして、画像のパスを指定してください。
見出し:添付ファイルのURL・ 画像のURLをコピーする。
-
2018年2月5日 10:59 PM #58570
kishino
ゲスト>かうたっくさん
ヘッダーの背景に画像を入れることはできました。
ありがとうございます。子テーマ内のimagesフォルダに背景として使う画像を入れ、そこから読み込むようにcssを書きました!
右上にロゴを入れる予定なので、今は左上のサイトロゴが中途半端な縦位置に置かれてますが、
これは後で修正できると思います。どなたか助けてください。こまってますw
子テーマのstyle.cssに以下の記述をして
/************************************
corp-logo
************************************/
div.corp-logo {
width; 150px;
background-image: url(images/corp_logo.png);
background-repeat: no-repeat;
text-align: right;
}親テーマのheader.phpの中の<div id=”header-in”></div>の中に以下の記述をしてみましたが、
<div class=”corp-logo”></div>右上どころかヘッダーのどこにもロゴが表示されません。
(><)CSSの指定がおかしいのか、置くべきところに置いてないのか、わかりません。
-
2018年2月6日 11:28 PM #58605
kishino
ゲスト報告です。
なんとかできました。ヾ(*´∀`*)ノ
やったことは、
1.右上に表示させたい画像corp_logo.pngをWP管理画面のメディアアップローダーでアップロードし、
絶対パス「http://nstyle.cms.am/wp-content/uploads/2018/02/corp_logo.png」をメモ帳にコピーぺースト。2. 親テーマsimplicity2の中にあるheader.phpの中の<div id=”header-in”>の中に以下を入れる。
<!-- 右上ロゴ --> <div class="corp-logo"><a href="飛ばせたいサイトアドレス" target="_blank"><img src="http://nstyle.cms.am/wp-content/uploads/2018/02/corp_logo.png"></a></div>3.子テーマsimplicity2-childの中にあるstyle.cssに以下を書く。
/************************************
corp-logo
************************************/
div.corp-logo {
text-align: right;
margin-top: 10px;
margin-right: 10px;
padding-right: 30px;}
div.corp-logo img {
width: 140px;
}結果はこれです。
http://nstyle.cms.am/ -
2018年2月7日 12:07 PM #58607
kishino
ゲスト最初の質問で誤字がありましたので訂正です。
1)ヘッダーの背景は幅2ピクセル高さ60ピクセルのGIFを連続の横並びにすればいいのかなぁと思ったりしてるのですが、その背景になるGIFはどこのフォルダに入れて呼び出せばいいのかわかりません。
2)左上の総合ロゴ(画像)はどうやって入れたらいいでしょう?
訂正:右上 でした。
左上にサイトロゴ、右上に任意のロゴを表示したかったのでした。
m(_ _)m
-
2018年2月11日 11:49 AM #58693
kishino
ゲスト追記です。
この投稿を参考にされる方へ
親テーマ内のPHPファイルを編集しても、テーマの更新があると元に戻ってしまうので、
いじりたいPHPをコピーして子テーマに持っていき、そこで変えたいところを変える、追記を入れる、のが安全なで確実なやり方です。
ただ、こちらのフォーラムでは親テーマのPHPの改変はサポートしていないのと、初心者にはハードルが高く、場合によってはFTPでアップロード後、画面真っ白にもなり兼ねないのでお勧めしません。私は自分でできる範囲内でカスタマイズしています。
-
-
投稿者投稿
- このトピックに返信するにはログインが必要です。