[戻る]
No.2837

ヘッダーメニューの画像とテキスト表示

ラテさん  投稿日:2017/11/28(Tue) 11:36
key

ヘッダーメニューのメニュー一覧で画像を割り当てると画像の表示はされますが、タイトルのテキスト表示がマウスをオーバーしないと表示されなくなります。
画像の下にタイトルをテキスト表示させたいのですが可能でしょうか?
また、表示画像のサイズを大きくする場合はどのようにしますか?

Re: ヘッダーメニューの画像とテキスト表示

おたすけマイショップさん  2017/11/28(Tue) 15:08 No.2838
key

画像とテキストを合わせて常に表示させる場合は、画像登録を行わず(登録画像を削除して)、タイトル欄にHTML形式で記述して頂く必要がございます。

記述例としてヘッダーメニューの設定画面内の案内と同じ内容となりますが、以下の様な記述をお勧め致します。

<div style="display: inline-block; font-size: 90%; line-height: 16px;"><img src="画像の保存先URL(リソースファイルのパスなど)">
テキストのタイトル</div>

通常はヘッダーメニューの高さが50px程度となりますので、画像の高さが大きい場合は、画像側の高さを調整(HTMLコード内に「height="○○px"」を追加するなどで調整、またはヘッダーメニューの高さを調整(スタイル追加にて調整ください)ただく必要がございます。

以上を参照いただき、設定をお試し下さい。


Re: ヘッダーメニューの画像とテキスト表示

ラテさん  2017/11/29(Wed) 11:29 No.2839
key

たびたびすみません、こちら初心者で記述についてはわかりません。

画像の表示はできましたが、画像サイズが大きいのでメニューバー内で画像が切れた状態です。

>通常はヘッダーメニューの高さが50px程度となりますので、画像の高さが大きい場合は、画像側の高さを調整(HTMLコード内に「height="○○px"」を追加するなどで調整、またはヘッダーメニューの高さを調整(スタイル追加にて調整ください)ただく必要がございます。

スタイル追加
https://emshelp.easy-myshop.jp/c-item-detail?ic=add-style&_ga=2.153590782.755412914.1511746252-749395609.1511746252
このサイトを確認しましたが、スタイル貼り付けにはどこからコピーして張り付けるのでしょうか?
このサイトの記述はフォントサイズのようですが、メニュバーの高さを変更する記述がどこにあるのか教えてください。


Re: ヘッダーメニューの画像とテキスト表示

おたすけマイショップさん  2017/11/29(Wed) 11:48 No.2840
key

※スタイルの追加については、HTMLやCSS記述の知識が必要となります。

スタイルはヘルプ内「No.3<style>の貼り付け」にあるようにページレイアウト管理(デザイン設定>レイアウトタブ)を開き、[スクリーン]の設定ボタンから[<head>追加:]に貼り付けます。

貼り付ける内容については、直接枠内に<style>〜〜</style>のタグを直接記載して下さい。
記載する内容については、スタイルを変更する場所のclassに対しスタイルを追加して下さい。

classの確認については、ページを閲覧したのちにブラウザの機能を利用することで確認できます。
対象となるショップページにアクセスして頂き、対象の箇所を右クリックして表示される「要素の検査(IEの場合)」や「検証(Chromeの場合)」などでご確認下さい。

ヘッダーの高さを調整するサンプルのスタイルは以下の通りです。
「○○px」に数値を入れてスタイルを追加して調整して下さい。

<style>
.top_menu_pulldown > li > a {
height: ○○px;
}
</style>

ご案内は以上です。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』