プログラミングHTMLやCSSがよく分からないという人も安心して使えるように今回は見出し部分のデザインをいくつかご紹介します。初心者の方も簡単に出来るように、詳しく解説しますので、ある程度分かっている人は読み飛ばしていってください。WordPressのテーマSimplicityを使っていることを想定して話を進めますが、他のテーマでもやることは変わりません。見出し・classの変更まとめ見出しとは?見出しとは、この矢印の指す部分を言います。HTMLでは<h1>や<h2>とよばれている部分ですね。文章を書いていく上で、見出しを挿入することで話の区切りや、読みやすさの向上につながるので必ず使うようにしましょう。「段落」という所を押すと出てきます。「見出し1」というのが<h1>、「見出し2」が<h2>...を指しています。これはデフォルトの見出しですのでまったくデザイン性がありません。自分らしくするためにもこれから紹介する見出しを使ってみましょう。見出しデザイン10選とりあえず、見出しデザインを見てみましょう。気に入ったものがありましたら、後述する見出しの表示方法や色の変え方などの部分を読んでください。*/}スポンサーリンクCSSとHTML上記のデザインの中で気に入ったものがありましたら、実際に使ってみましょう。CSSに追加する方法です。WordPressをお使いの方は左のバーの、外観→テーマの編集→スタイルシート(style.css)に上記から選んだCSSコードをコピペしてください。ペーストしたら「ファイルを更新」を忘れずに押してください。上記のように「ビジュアル」編集ではなく、「テキスト」編集の方にHTMLコードを書いてください。「ビジュアル」にした時に求めているものが表示されないかもしれませんが、Webで記事を公開したときには表示されます。これで、オシャレな見出しはできると思います。次に、さらに自分らしさを出せるように色の変更方法を紹介します。文字色や背景色、線の色などは自由に変更してみましょう。CSSコードのなかで、私は16進法の色コードを使っています。#◯◯◯◯◯◯の部分を好きなように変えてみてください。使えるキレイな色をいくつか紹介しますので、いいのがあったら是非使ってみてください。R:230G:0B:18#E60012R:243G:152B:0#F39800R:255G:241B:0#FFF100R:143G:195B:31#8FC31FR:0G:153B:68#009944R:0G:158B:150#009E96R:0G:160B:233#00A0E9R:0G:104B:183#0068B7R:29G:32B:136#1D2088R:146G:7B:131#920783R:228G:0B:127#E4007FR:229G:0B:79#E5004FR:239G:132B:92#EF845CR:249G:194B:112#F9C270R:255G:246B:127#FFF67FR:193G:219B:129#C1DB81R:105G:189B:131#69BD83R:97G:193B:190#61C1BER:84G:195B:241#54C3F1R:108G:155B:210#6C9BD2R:121G:107B:175#796BAFR:186G:121B:177#BA79B1R:238G:135B:180#EE87B4R:239G:133B:140#EF858CR:251G:218B:200#FBDAC8R:254G:236B:210#FEECD2R:255G:252B:219#FFFCDBR:236G:244B:217#ECF4D9R:213G:234B:216#D5EAD8R:212G:236B:234#D4ECEAR:211G:237B:251#D3EDFBR:211G:222B:241#D3DEF1R:210G:204B:230#D2CCE6R:231G:213B:232#E7D5E8R:250G:220B:233#FADCE9R:250G:219B:218#FADBDA16進法のコードを文字色や背景色の部分に適用してあげてください。見本で用意した見出しのHTML&CSSコードはすべて<h1>で作っています。使いたい見出しのサイズに合わせて<h1>の部分を<h2>や<h3>にしてください。今回順番通りにclass名を付けました。みなさんのお好きなようにclass名も変更して構いません。そのときは、HTML、CSSともに該当箇所を変更するようにしてください。class=”my-heading”>のように変えてください。まとめいかがでしたか?好きな見出しデザインを見つけてぜひ、自分らしくSimplicityやその他Webページをカスタマイズしてください。分かりやすく、見やすいときっと人も集まると思います。今回はシンプルな見出しのCSSを紹介しました。オシャレなものも紹介しますのでご期待ください。CSSが効かなくて困っている場合は以下の記事を参考にしてみてください。Chromeを使っていてCSSが反映されない時の対処法を紹介します。World”プログラミング言語はたくさんあって、どれが何に向いているかは気になるところですよね。Pythonの7つを比較してみたいと思います。Chromeを使っていてCSSが反映されない時の対処法を紹介します。\LaTeX$のような数式を表示させる方法を紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイトPROFILE当サイト管理人は基本的に機械チックなものが好きです。見やすく、分かりやすい情報提供を目指しています。