Title: 見出し文字と画像の配置
Last modified: 2020年7月13日

---

# 見出し文字と画像の配置

 *  解決済 [yusukewatanabe](https://ja.wordpress.org/support/users/yusukewatanabe/)
 * (@yusukewatanabe)
 * [6年、 2ヶ月前](https://ja.wordpress.org/support/topic/%e8%a6%8b%e5%87%ba%e3%81%97%e6%96%87%e5%ad%97%e3%81%a8%e7%94%bb%e5%83%8f%e3%81%ae%e9%85%8d%e7%bd%ae/)
 * 始めましてお世話になります
 * 自分でいろいろな書籍を読みながらテーマを作ったりしているのですが
    ヘッダーでサイト
   タイトルと、画像（アイコン）を横並びにしようと思ったのですが どうしても上下に
   配置されてしまいうまく行きません。ご助言お願いいたします
 * 並び方としては
    （タイトル）　（アイコン）　にしたいのですが アイコンの方の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](https://ja.wordpress.org/support/users/yusukewatanabe/)
 * (@yusukewatanabe)
 * [6年、 2ヶ月前](https://ja.wordpress.org/support/topic/%e8%a6%8b%e5%87%ba%e3%81%97%e6%96%87%e5%ad%97%e3%81%a8%e7%94%bb%e5%83%8f%e3%81%ae%e9%85%8d%e7%bd%ae/#post-11665526)
 * flexboxを使ってタイトルと画像を子要素に指定し、並べてalign-items:centerで解決
   いたしました。
 * お騒がせいたしました。

1件の返信を表示中 - 1 - 1件目 (全1件中)

 トピック「見出し文字と画像の配置」には新たに返信することはできません。

## タグ

 * [flex](https://ja.wordpress.org/support/topic-tag/flex/)
 * [float](https://ja.wordpress.org/support/topic-tag/float/)
 * [横並び](https://ja.wordpress.org/support/topic-tag/%e6%a8%aa%e4%b8%a6%e3%81%b3/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1件の返信
 * 1人の参加者
 * 最後の返信者: [yusukewatanabe](https://ja.wordpress.org/support/users/yusukewatanabe/)
 * 最後の活動: [6年、 2ヶ月前](https://ja.wordpress.org/support/topic/%e8%a6%8b%e5%87%ba%e3%81%97%e6%96%87%e5%ad%97%e3%81%a8%e7%94%bb%e5%83%8f%e3%81%ae%e9%85%8d%e7%bd%ae/#post-11665526)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック