サポート » 使い方全般 » 見出し文字と画像の配置

  • 解決済 yusukewatanabe

    (@yusukewatanabe)


    始めましてお世話になります

    自分でいろいろな書籍を読みながらテーマを作ったりしているのですが
    ヘッダーでサイトタイトルと、画像(アイコン)を横並びにしようと思ったのですが
    どうしても上下に配置されてしまいうまく行きません。ご助言お願いいたします

    並び方としては
    (タイトル) (アイコン) にしたいのですが
    アイコンの方のpaddingやmarginを調整してもうまく行きませんでした
    勉強中ですがよろしくお願いいたします。

    header.phpのコード

    <header class="myheader">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <?php bloginfo( 'name' ); ?>
    </a>
    
    <!-- キャラクターアイコンHPにリンク -->
    
    <div class="myheader nowaicon">
    	<figure>
    		<img src="<?php echo get_template_directory_uri(); ?>/lp-custom/img/nowaicon.png" alt="">
    	</figure>
    </div>

    style.cssのコード

    /* ヘッダー */
    .myheader {
    	grid-row: head;
    	justify-self: center;
    	align-self: center;
    	font-family: 'Montserrat', sans-serif;
    	font-size: var(--f3);
    	font-weight: bold;
    }
    
    .nowaicon {
    	height: 50px;
    	width: 50px;
    	padding: 0 30px 30px;
    	margin-bottom: 30px;
    	clear: both;
    }
    
    .myheader {
    	float: left;
    }
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 yusukewatanabe

    (@yusukewatanabe)

    flexboxを使ってタイトルと画像を子要素に指定し、並べてalign-items:centerで解決いたしました。

    お騒がせいたしました。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「見出し文字と画像の配置」には新たに返信することはできません。