ワード プレス 見出し デザイン。 SANGOでデフォルトの見出しを変える方法

【コピペだけ!】STORK(ストーク)の見出しをオシャレにカスタマイズ!│旅するように人生を生きよう!

ワード プレス 見出し デザイン

見た目の美しさ (オシャレ)• 多機能でカスタマイズも簡単!• 書くことに専念できる! ということから選ぶ人が続出。 しかし、STORKの利用者が増えたことで… パッと見の印象が他のブロガーと似てしまい せっかく有料テーマを手に入れたのに 訪問者に、 「どこも似たようなデザインだな」と 思われるのは納得がいきませんよね…。 ということで… STORKをあなたのこだわりに合わせて どんどんカスタマイズしていきましょう^^ 今回はブログの中で最も重要なポイント h2〜h4までの見出しのカスタマイズ方法を いろいろとご紹介致します。 細部の調整方法まで説明しますので コピペだけでなくあなたの手でいろいろ調整してみてください。 調整もすごく簡単です! 目次• コピペだけ!STORK(ストーク)の見出しをカスタマイズしよう! こちらの記事にも書きましたが… STORKで一番残念なのは見出しのデザインです。 STORKの見出しはデフォルトのデザインが… こんな感じですよね…。 残念すぎる… h4の見出しに至っては単なる文字でしかありません。 それって見出しといえるのか?^^; ということで、早々に見出しをカスタマイズしてしまいましょう。 見出しのデザインを変更するには 本来、HTMLとCSSの知識が必要になりますが あなたには一切必要がありません。 今回は初心者のあなたでも コピペだけで簡単に変更できるように 私が見出しテンプレートをいくつかご用意致しました。 なので、見出しデザインのサンプルを見て あなたのお気に入りが見つかったら ぜひコピペしてカスタマイズしてみてくださいね。 また、今から説明するCSSコードの記述先は2通りあります。 css) に記述する方法• 念のため、カスタマイズが初めてというあなたのために… CSSコードのコピー先を画像で説明致します。 css)を選択。 スタイルシートの以下の部分にCSSコードを記述してください。 追加CSSの以下の部分にCSSコードを記述しましょう。 CSSコードの記述先が確認できたら いよいよ見出しデザインのカスタマイズです。 STORK(ストーク)の見出しテンプレレート12選 それでは見出しのテンプレートをご紹介致しますね。 主にh2、h3としてありますが、h4にも使えます。 テンプレートによっては 初期設定の表示を切り替える必要がありますので 合わせて確認してください。 シンプルな見出し まずは シンプルな見出しの紹介です。 色の変え方によってはかわいらしくもクールにもなります。 1)二重線の見出し 非常にシンプルですが h3やh4では使いやすい見出しのデザインです。 初期設定:ボーダー) クリックでCSSコードを表示. 色はお好みで変えましょう。 初期設定:ボーダー) クリックでCSSコードを表示. important; border-bottom: dotted 4px 5ab9ff! 5ab9ffにお好きなカラーコードを入れてください。 4pxの数字を変えると点線の大きさが変わります。 dottedをdashedに変えると破線になります。 solidに変えると1本の下線に変わります。 3)上下に線のある見出し 上下を線で囲んでちょっとクールに。 初期設定:ボーダー) クリックでCSSコードを表示. important; padding: 0. 364e96にお好きなカラーコードを入れてください。 3pxの数字を変えると線の太さが変わります。 4)背景色と下線のある見出し 背景色と下線の色を統一するとオシャレになります。 初期設定:シンプル) クリックでCSSコードを表示. 010101、 516ab6にお好きなカラーコードを入れてください。 3pxの数字を変えると下線の太さが変わります。 5)左にボーダーと背景色のある見出し デフォルトの味気ないタグよりはしっかりと目立ちます。 初期設定:シンプル) クリックでCSSコードを表示. 5em; color: 494949! 494949、 fffaf4、 ffaf58にお好きなカラーコードを入れてください。 5pxの数字を変えると線の太さが変わります。 6)立体感のある見出し 上記を似たような形でも影が少し入るだけで印象が変わります。 初期設定:シンプル) クリックでCSSコードを表示. 4em 0. 494949、 f4f4f4、 7db4e6にお好きなカラーコードを入れてください。 5pxの数字を変えると線の太さが変わります。 オシャレな見出し 次はオシャレ系の見出しです。 7)途中で色の変わる下線の見出し 色の組み合わせによってはオシャレにできます。 初期設定:ボーダー) クリックでCSSコードを表示. そうすることでh3の左の線を消すことができます。 cce4ff、 5472cdのカラーコードを変えると色が変わります。 8)リボン風の見出し 私が今使ってるh2の見出しがこれです。 初期設定:シンプル) クリックでCSSコードを表示. 0a69ddのカラーコードを変えると色が変わります。 9)ステッチ風のかわいい見出し この見出しを使うと、女性らしいかわいい雰囲気に早変わり。 初期設定:シンプル) クリックでCSSコードを表示. 5px white; color: 454545; margin: 60px 10px; padding: 0. dfefffのカラーコードを変えると色が変わります。。 10)背景がストライプの見出し 背景がストライプのポップなデザインです。 初期設定:シンプル) クリックでCSSコードを表示. 3em 0. 7が実装されておりますので、最新版のFont Awesome5を実装しなくても、以下のCSSコードは使用できます。 11)シンプルなチェックマークの見出し 私がh3の見出しで使っているデザインです。 h2用とh3用コードを分けてあるのは 検証した時に、設定を変えないとバグが出たからです。 初期設定:シンプル) クリックでCSSコードを表示. 初期設定:シンプル) クリックでCSSコードを表示. 下線の色を変更する場合はgrayの部分を から始まるカラーコードをいれてください。 12)円のアイコンとバーを付けた見出し 円のアイコンが目をひくかわいいデザインです。 こちらのデザインを使う場合も h2かh3の使いたい方のコードを選択してください。 初期設定:シンプル) クリックでCSSコードを表示. 初期設定:シンプル) クリックでCSSコードを表示. ただし、CSSを変更する際に気をつけて欲しいのは… 必ず半角英数字のみで編集するということ。 CSSは全角スペースや全角文字が入った瞬間に機能しなくなります。 なので、もしも、CSSを編集していて 「あれ?」と思った時は… どこかに全角文字が入っていないか確認してみてください。 また、コードの中には! importantという表記が混ざったものがありますが 私はどうしても変更したい場所にのみこのコードを使用しています。 importantというコードは見ても分かる通り 「すごく重要だから、こっちを優先してね!」というコードです。 だから、どこもかしこも! importantだらけになってしまうと 結局「どのコードが一番重要やねん!」となってしまいます…^^; つまり、! importantは多用し過ぎると SEO的にはあまりよくないんですね…。 コードは正しく書かれてこそSEOに強くなります。 なので、もしもあなたが自分で 「がんばってカスタマイズしよう!」という時は… 必要以上に! importantを多用せず、必要最低限のところで! importantのコードを使うように気をつけてくださいね。 また、CSSコードを使用する際には 必ず直接コピペするようにしてください。 例えば、メモ系のソフトや ワープロ系のWordなどに一度コピーしてしまうと CSSコードが正しくコピーされず、正常に表示されなくなる可能性があります。 もしも、あなたがWindowsを使っている場合は ワンクッション挟むのなら TeraPadにコピーするのが一番安全です。 まとめ:STORKの見出しをもっとカスタマイズしたいあなたへ 今回、私がご紹介したコードは サルワカ先生のページを参考に STORKならではのバグを取り除き 私なりにバランスを取り直したCSSコードになります。 サルワカ先生のサイトには私が紹介した見出し以外にも いろいろありますので 我こそは!と思う方はぜひのページを参考に いろいろとカスタマイズしてみてくださいね。 あなたのブログがオシャレでかわいく素敵になり さらに愛着が湧いてくれると嬉しいです。 最後までお読みいただきありがとうございました!.

次の

簡単!ワードプレスの見出しデザインをプラグインで装飾設定・使い方

ワード プレス 見出し デザイン

「テーマがいろいろあるのは良いけど、もっと個性を出したい!」 ワードプレスでブログを制作していると、ブログの見た目にもこだわるようになってきますよね。 ワードプレスにはテーマが豊富で、簡単に自分の好きなようにデザインを変えるとことができます。 カスタマイズ機能を利用すれば、ヘッダー画像や背景画像も思いのままです。 しかし、それでもまだまだ満足できないというブロガーの方もいるのではないでしょうか? 例えばタロログでは見出しテキストが以下のようになっています。 こちらはタグを利用した場合。 文字の背景色がオレンジになっています。 続いてはタグを用いた見出しテキストです。 文章の左にオレンジの縦線が入っていますね。 これらのテキストは、あらかじめ設定をしておくことで編集画面で見出しに指定するだけで、装飾が施されるようになっています。 その都度タグなどを記述する必要がないのです。 ということで今回は、ワードプレスで見出しを変更する方法を解説します。 見出しの重要性 そもそも、皆さんは見出しテキストを正しく活用できていますか? 見出しテキストは、SEO的にもユーザビリティー的にも重要な役割を担っています。 正しい使用方法でなければ、サイトの評価に悪影響を及ぼしかねません。 まずは、ウェブサイトの見出しについて軽く解説します。 ユーザビリティーを上げる 見出しの一番大きな役割は、 本文の要点を分かりやすくして構成を正しく伝えることです。 これは、ユーザーと検索エンジン双方に対してということになります。 ブログで文章を投稿していると、どうしても文字数が多くなることがありますよね。 タロログでも、1記事数千文字なんてことも珍しくありません。 文章が長くなると、どうしても読者は読むのを躊躇してしまいます。 そこで、• 段落や改行を多くする• 難しい用語を使わない• 文章の語尾に変化を持たせ、リズム感を生み出す などのテクニックで、読者に飽きさせないように心がけて文章を書くことが大事になってきます。 見出しテキストも非常に有効です。 長い文章を適切に分けて見出しを用いることで見出しを読むだけでも大体の内容を理解させることが可能になります。 読者は、見出しを読んで自分の欲しかった情報か見極めやすくなるのです。 検索エンジンに正しく理解させる また、SEOにおいても大事な施策となっています。 検索エンジンも、見出しを読み取ることで文章の内容を把握しているのです。 見出しタグの使い方を間違えてしまうと、検索エンジンが文章の内容を誤って認識する可能性もあるので注意して使用するようにしましょう。 見出しの装飾方法 見出しの重要性は、お分かりいただけたと思います。 そこで大事なのは、見出しをしっかり見出しとして認識してもらうことです。 検索エンジンであれば見出しタグ(やなどのhtmlタグのこと)で認識できますが、読者は見た目でしか判断できません。 その文章が見出しなのか、それともただ文字サイズを大きくして太字にしただけのテキストなのか、しっかりと差別化を図りましょう。 CSSの編集 見出しタグの装飾を変更する場合、CSS(スタイルシート)が必要です。 CSSと聞くと難しそうな印象ですが、今回はそこまで難易度は高くありません。 子テーマを作成しておくと、変更前の状態のCSSが残るので変更後が気に入らなかったときなど元の状態に戻すことが可能です。 またテーマをアップデートしたときに、子テーマにはアップデートが適用されないので勝手に変更されることがありません。 CSSの編集画面に移りました。 ここでstyle. cssというファイルを編集するのですが、ここで一つ注意なのが先ほどの子テーマのstyle. cssを選択することです。 他のテーマ(元の親テーマも含む)のファイルを変えてしまわないよう注意しましょう。 編集画面右上に現在編集しているテーマが表示されるので、しっかり確認してください。 例えば、見出し2のテキストに黒の下線をひくとします。 style. cssの最後に以下のテキストを貼り付けてください。 headline2」でこの設定のクラス名を設定しています。 最後に「ファイルを更新」をクリックして、CSSの編集は終了です。 実際に表示させる まだ、CSSの編集が終わっただけで実際のブログの表示には適用されていません。 ということで、続いて投稿画面をテキストエディターで開きます。 見出しにしたいテキストをとで囲み、更新してください。 実際の表示は、次のようになります。 cssの中の「headline2」の要素を呼び出してこのように表示させているのです。 これで、見出しタグの装飾の仕組みはお分かりいただけたと思います。 もっと簡単にする 「いちいちテキストエディターを開いて、見出し2タグを記載するなんて面倒だ!」 という方も多いですよね(というより、誰もが思うはずです)。 そこでもっと作業を簡単にしてみましょう。 同様に使用しているテーマのstyle. cssの編集画面を開きます。 先ほどは、クラス名を指定していたのですがこの「. headline2」を「h2」に変更して「ファイルの更新」をクリックしてください。 このように記述することで、全て見出しタグ2にこの装飾が施されるようになりました。 装飾いろいろ 見出しの装飾を変える方法はわかりましたが、結局CSSの記述は必要です。 でも、安心してください。 CSSを学ばなくても、ネット上で簡単に調べることが可能です。 見出しジェネレータ こちらのサイトでは、以下のような設定項目を選択するだけで必要なソースを自動で生成してくれます。 あとは、style. cssに貼り付ければOKです。 賢威カスタマイズ研究所 style. cssに貼り付けてすぐに使用出来るソース文が、多数公開されています。 見本も掲載されているので、非常にわかりやすいです。 サルワカ CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 シンプル系やおしゃれ系など5種類のデザインコンセプトで68種類の見出しが紹介されています。 こちらもコードをコピペでOKです。 自分のブログにあった色に変えてみよう 最初に紹介した 見出しジェネレータであれば、自分で色を指定できるので好きな色に設定できますね。 しかし、コピペで使える見出しデザインでは色がすでに決まっています。 タロログであればオレンジを基調にデザインされているのですが、コピペしてきた見出しデザインだけ青かったら不自然ですよね? 例としてサルワカさんで紹介されていたコードを使用させてもらいました。 このままでは不自然です。 ではどうするかというと、まずは合わせたい色のカラーコードを調べましょう。 カラーコードというのは、 の後ろに6桁のアルファベットか数字が書かれた【 f5f5f5】こんな感じのやつです。 みたことがある人も多いのではないでしょうか。 既存の見出しデザインと色を合わせたい場合 検証ツール(開発者ツール)を使ってカラーコードを確認する方法をご紹介します。 今回はGoogle Chromeを使用した場合の検証ツールの使い方を説明しますね。 自分のブログで右クリックして検証という項目を見つけます。 1番下にある 検証をクリックします。 クリックすると、 右側に検証ツールが表示されました。 続いて、右側にある検証ツールの左上にあるマウスカーソルのような形をした部分をクリックしてみましょう。 赤い枠で囲んだ部分をクリックしてください。 すると、 黒かったボタンが 水色に変わります。 その状態で見出しの上にカーソルを持っていくと、 このようになります。 その状態で見出しをクリックしてみましょう。 すると、見出しに適用されているCSSが検証ツールに表示されます。 あとは適用されているカラーコードをコピーすれば、見出しに使用されているカラーコードを取得できました。 サイト内の画像と色を合わせたい場合 ブログのロゴとして使用している画像などと色を合わせたい時もありますよね。 画像の場合は検証ツールではカラーコードを取得できません。 そのため、画像からカラーコードを取得できるwebサービスを使います。 今回使用するwebサービスはこちら イロミル まずは調べたい画像のアドレスを取得する必要があります。 赤い枠で囲んだロゴ画像のカラーコードを調べて行きたいと思います。 まずは画像の上で右クリック。 画像アドレスをコピーを選択して画像アドレスをコピーします。 コピーができたらを開きます。 先ほどコピーした画像URLを貼り付けてください。 すると、画像が反映されました。 カラーコードを取得したい部分をクリックすると、 カラーコードが取得できました。 コードを編集してみよう ここまでで適用したいカラーコードの取得は完了しました。 続いてはコピペで使いたいCSSを編集していきましょう。 僕がメモしてあるカラーコードは【colorが fffff】【backgroundが ff9b00】なので、それに当てはめていきます。 まずはこちらの見出しの場合 ソースコードはこのようになっています。 5em; color: white; border-radius: 0. whiteは fffffと同じ白なので、このままでOKです。 1行目のbackground: b0dcfa;をbackground: ff9b00;変更してみます。 すると、 背景色がオレンジに変更されました。 5em; color: white; border-radius: 0. 簡単に色を変更できますね! 続いで別の見出しデザインでも色を変更してみましょう。 こちらもサルワカさんからコピペして使用させてもらいました。 2em 0. こちらもカラーコードを変更してみましょう。 すると、 このような状態になります。 周りに青が残っていて不自然ですね。 もう少し修正してみます。 3行目にあるbox-shadow: 0px 0px 0px 5px dfefff;の色も変更。 この部分のカラーコードも同じオレンジ色をつけてみます。 まだ少し、違和感が残っていますね。 見出しの周りにある点線の色が青いので、こちらを白に変えてみたいと思います。 どうでしょうか?さっきよりよくなったのではないでしょうか。 2em 0. 基本的には colorと background、この2つのカラーコードを変更すれば自分のブログにあった見出しの色に変更できるので試してみてください。 まとめ 見出しを変えてブログに個性を出そう! いかがでしたか? 見出し文が豪華になれば、また一段とオリジナリティーの高いブログになりますよね。 見た目に変化が出ると、読者も飽きずに読みやすくなるでしょう。 CSSの編集も、難しく感じなかったと思います。 これを機に、高度なテーマのカスタマイズにも挑戦してみてもいいかもしれません。

次の

THE THOR ザ・トール見出し デザイン 一覧

ワード プレス 見出し デザイン

見た目の美しさ (オシャレ)• 多機能でカスタマイズも簡単!• 書くことに専念できる! ということから選ぶ人が続出。 しかし、STORKの利用者が増えたことで… パッと見の印象が他のブロガーと似てしまい せっかく有料テーマを手に入れたのに 訪問者に、 「どこも似たようなデザインだな」と 思われるのは納得がいきませんよね…。 ということで… STORKをあなたのこだわりに合わせて どんどんカスタマイズしていきましょう^^ 今回はブログの中で最も重要なポイント h2〜h4までの見出しのカスタマイズ方法を いろいろとご紹介致します。 細部の調整方法まで説明しますので コピペだけでなくあなたの手でいろいろ調整してみてください。 調整もすごく簡単です! 目次• コピペだけ!STORK(ストーク)の見出しをカスタマイズしよう! こちらの記事にも書きましたが… STORKで一番残念なのは見出しのデザインです。 STORKの見出しはデフォルトのデザインが… こんな感じですよね…。 残念すぎる… h4の見出しに至っては単なる文字でしかありません。 それって見出しといえるのか?^^; ということで、早々に見出しをカスタマイズしてしまいましょう。 見出しのデザインを変更するには 本来、HTMLとCSSの知識が必要になりますが あなたには一切必要がありません。 今回は初心者のあなたでも コピペだけで簡単に変更できるように 私が見出しテンプレートをいくつかご用意致しました。 なので、見出しデザインのサンプルを見て あなたのお気に入りが見つかったら ぜひコピペしてカスタマイズしてみてくださいね。 また、今から説明するCSSコードの記述先は2通りあります。 css) に記述する方法• 念のため、カスタマイズが初めてというあなたのために… CSSコードのコピー先を画像で説明致します。 css)を選択。 スタイルシートの以下の部分にCSSコードを記述してください。 追加CSSの以下の部分にCSSコードを記述しましょう。 CSSコードの記述先が確認できたら いよいよ見出しデザインのカスタマイズです。 STORK(ストーク)の見出しテンプレレート12選 それでは見出しのテンプレートをご紹介致しますね。 主にh2、h3としてありますが、h4にも使えます。 テンプレートによっては 初期設定の表示を切り替える必要がありますので 合わせて確認してください。 シンプルな見出し まずは シンプルな見出しの紹介です。 色の変え方によってはかわいらしくもクールにもなります。 1)二重線の見出し 非常にシンプルですが h3やh4では使いやすい見出しのデザインです。 初期設定:ボーダー) クリックでCSSコードを表示. 色はお好みで変えましょう。 初期設定:ボーダー) クリックでCSSコードを表示. important; border-bottom: dotted 4px 5ab9ff! 5ab9ffにお好きなカラーコードを入れてください。 4pxの数字を変えると点線の大きさが変わります。 dottedをdashedに変えると破線になります。 solidに変えると1本の下線に変わります。 3)上下に線のある見出し 上下を線で囲んでちょっとクールに。 初期設定:ボーダー) クリックでCSSコードを表示. important; padding: 0. 364e96にお好きなカラーコードを入れてください。 3pxの数字を変えると線の太さが変わります。 4)背景色と下線のある見出し 背景色と下線の色を統一するとオシャレになります。 初期設定:シンプル) クリックでCSSコードを表示. 010101、 516ab6にお好きなカラーコードを入れてください。 3pxの数字を変えると下線の太さが変わります。 5)左にボーダーと背景色のある見出し デフォルトの味気ないタグよりはしっかりと目立ちます。 初期設定:シンプル) クリックでCSSコードを表示. 5em; color: 494949! 494949、 fffaf4、 ffaf58にお好きなカラーコードを入れてください。 5pxの数字を変えると線の太さが変わります。 6)立体感のある見出し 上記を似たような形でも影が少し入るだけで印象が変わります。 初期設定:シンプル) クリックでCSSコードを表示. 4em 0. 494949、 f4f4f4、 7db4e6にお好きなカラーコードを入れてください。 5pxの数字を変えると線の太さが変わります。 オシャレな見出し 次はオシャレ系の見出しです。 7)途中で色の変わる下線の見出し 色の組み合わせによってはオシャレにできます。 初期設定:ボーダー) クリックでCSSコードを表示. そうすることでh3の左の線を消すことができます。 cce4ff、 5472cdのカラーコードを変えると色が変わります。 8)リボン風の見出し 私が今使ってるh2の見出しがこれです。 初期設定:シンプル) クリックでCSSコードを表示. 0a69ddのカラーコードを変えると色が変わります。 9)ステッチ風のかわいい見出し この見出しを使うと、女性らしいかわいい雰囲気に早変わり。 初期設定:シンプル) クリックでCSSコードを表示. 5px white; color: 454545; margin: 60px 10px; padding: 0. dfefffのカラーコードを変えると色が変わります。。 10)背景がストライプの見出し 背景がストライプのポップなデザインです。 初期設定:シンプル) クリックでCSSコードを表示. 3em 0. 7が実装されておりますので、最新版のFont Awesome5を実装しなくても、以下のCSSコードは使用できます。 11)シンプルなチェックマークの見出し 私がh3の見出しで使っているデザインです。 h2用とh3用コードを分けてあるのは 検証した時に、設定を変えないとバグが出たからです。 初期設定:シンプル) クリックでCSSコードを表示. 初期設定:シンプル) クリックでCSSコードを表示. 下線の色を変更する場合はgrayの部分を から始まるカラーコードをいれてください。 12)円のアイコンとバーを付けた見出し 円のアイコンが目をひくかわいいデザインです。 こちらのデザインを使う場合も h2かh3の使いたい方のコードを選択してください。 初期設定:シンプル) クリックでCSSコードを表示. 初期設定:シンプル) クリックでCSSコードを表示. ただし、CSSを変更する際に気をつけて欲しいのは… 必ず半角英数字のみで編集するということ。 CSSは全角スペースや全角文字が入った瞬間に機能しなくなります。 なので、もしも、CSSを編集していて 「あれ?」と思った時は… どこかに全角文字が入っていないか確認してみてください。 また、コードの中には! importantという表記が混ざったものがありますが 私はどうしても変更したい場所にのみこのコードを使用しています。 importantというコードは見ても分かる通り 「すごく重要だから、こっちを優先してね!」というコードです。 だから、どこもかしこも! importantだらけになってしまうと 結局「どのコードが一番重要やねん!」となってしまいます…^^; つまり、! importantは多用し過ぎると SEO的にはあまりよくないんですね…。 コードは正しく書かれてこそSEOに強くなります。 なので、もしもあなたが自分で 「がんばってカスタマイズしよう!」という時は… 必要以上に! importantを多用せず、必要最低限のところで! importantのコードを使うように気をつけてくださいね。 また、CSSコードを使用する際には 必ず直接コピペするようにしてください。 例えば、メモ系のソフトや ワープロ系のWordなどに一度コピーしてしまうと CSSコードが正しくコピーされず、正常に表示されなくなる可能性があります。 もしも、あなたがWindowsを使っている場合は ワンクッション挟むのなら TeraPadにコピーするのが一番安全です。 まとめ:STORKの見出しをもっとカスタマイズしたいあなたへ 今回、私がご紹介したコードは サルワカ先生のページを参考に STORKならではのバグを取り除き 私なりにバランスを取り直したCSSコードになります。 サルワカ先生のサイトには私が紹介した見出し以外にも いろいろありますので 我こそは!と思う方はぜひのページを参考に いろいろとカスタマイズしてみてくださいね。 あなたのブログがオシャレでかわいく素敵になり さらに愛着が湧いてくれると嬉しいです。 最後までお読みいただきありがとうございました!.

次の