各ページのヘッダー部分の画像編集

解答
受付中

現在、HPデザインの「cutting_edge_business」を使用してHPを作成しているのですが、各ページのヘッダー部分にある画像(ペンを持った人の手の画像)を変更したいのですが、どうもCSS編集をしなければならないみたいで、どの部分を編集すればいいのか分からず困っています。わかる方は、ご教授いただければありがたいです。

また、同じデザインのスマホ版で、HPをスマホで確認すると、メニュー内の文字がアルファベットと数字がとても薄く、見づらいので修正したいのですが、おそらくこちらもCSSを編集しなければいけないと思うので、合わせてご教授いただければありがたいです。

参照URLにHPのURLを掲載しておきますのでよろしくお願い致します。

ご質問者様へ|この問題は解決しましたか?

コメントにより質問の内容が解決したら、解決したことをお知らせしましょう。

解決した!

みんなの回答を見る

  • Userhiguita
  • Calender2021-04-19 16:52:37

CSSの編集って慣れてないとちょっと難しいですよね。

「cutting_edge_business」のテンプレートの場合、以下の場所を変更すると良いようです。
※CSS編集機能はパソコン版とスマホ版があるので、パソコン版だけ変更してもスマホには反映されないことがあります。

●各ページのヘッダー部分にある画像(ペンを持った人の手の画像)
パソコン版:741行目の「pageTtl」が各ページのヘッダー部分なので、その中の「background: url(../../images/208/main_nottop.jpg) no-repeat;」のurl内を変更。
スマホ版:227行目の「page_title」が各ページのヘッダー部分なので、その中の「background: url(../../images/208/main_nottop.jpg) no-repeat;」のurl内を変更。

ファイルアップロード機能でアップロードした画像を使用する場合、「埋め込み用タグ」内のURLにします。

例)埋め込み用タグが「<img src="https://media.toriaez.jp/●●●/▲▲▲.jpg" alt="">」の場合、
CSSのbackgroundを
background: url(https://media.toriaez.jp/●●●/▲▲▲.jpg) no-repeat;
に変更する。

●スマホ版のメニュー内の文字
実際にCSSを確認したところ、フォントによって英数字だけが細くなっているみたいです。
なので、フォントを変えるか文字を太くするのがいいと思いますが、フォントを変えると文字が正常に表示されなくなる可能性があるので太字にすると良いと思います。

CSSを編集する内容としてはスマホ版の26行目の「.tab-bar .menu-icon」が「Menu」という部分、34行目の「.left-off-canvas-menu ul.off-canvas-list li a」がメニューをタップした時に表示される各ページ名部分なので、それぞれの「font-weight: 100;」を「font-weight: bold;」にすると太字になり見やすくなります。

変更後CSSの26行目から38行目は以下のようになります。

--------------ここから--------------
.tab-bar .menu-icon{
font-family: 'Lato', 'Noto Sans Japanese', sans-serif;
font-weight: bold;
}
.tab-bar .menu-icon:hover span{}
.left-off-canvas-menu{
background: #000;
}
.left-off-canvas-menu ul.off-canvas-list li a{
border-bottom: 1px solid #363636;
font-family: 'Lato', 'Noto Sans Japanese', sans-serif;
font-weight: bold;
}
--------------ここまで--------------

これでEitaさんの希望通りになると思いますので、試してみてください。

記事を編集する
次のページ