スポンサーリンク

CSSの知識無しでWordPressの見出しのデザイン変更やっとできた…(iPhoneだけで全部やる)

この記事は約4分で読めます。

【重要】WordPressの見出しタグh1は1回しか使っちゃいけない?
↑重要なのでh1タグは使わないようにしてください。暇があれば上記記事一読もお願いします。

見出しデザインのコードを取得

CSSとか全然詳しくないので1年前に奮闘して挫折して以来、諦めていましたが、ようやく変更できました。

なかなか痒いところに手が届く記事が見つからなくて苦労しました…

CSSの知識はほぼ要りません。ネットにあるコードを拾ってくることでデザイン変更します。(現状の僕にはそれが限界…)

あと、iPhoneだけで完結させます。諸事情によりPC持ってないので。

まずはどこかからコード拾ってきてください、ここがオススメです(CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68)

そして申し訳ないのですが、

h2 {なんとかかんとか}

みたいな形式のコードでしか実現できてませんのですみません。

好きなデザインをコピーしてきてください。

追加CSSにコードを追加

どこにペーストすればいいかというと、

↑WordPressにログインして左の項目の「外観」→「CSS編集」をクリック。

見出しデザインCSS(.entry-content h2)

↑この真ん中の欄(左に1、2、3…と番号が書いてある右の欄)にペーストします。(初期状態だと空欄です)

んで、ペーストした「h2 {なんとかかんとか}」を「.entry-content h2 {なんとかかんとか}」に変更します。

つまり、前に「.entry-content」を付与します。

ここでもし、「h2 {なんとかかんとか}」のままで終わらせてしまうと、ブログのタイトルや記事のタイトルにまでデザインが反映されてしまいます

なので「.entry-content」を記載して、記事内の見出しだけに限定させる必要があります。

ちなみに画像にあるとおり、「/*なんとかかんとか*/」と記入すれば、プログラムに影響を及ぼさないコメントを書くことができます。

あとから「これなんのためのコードだっけ?」とならないようコメントを書いておくことをオススメします。

これ全部iPhoneでやったんですが、この欄に記入するのがめちゃくちゃ難しくて、思うようにカーソルが動かないし選択も難しくて苦戦します。できるならここはPCから入力する方がいいのかもですね。(PC使わなくてもメモ帳アプリかなんかで記入してからコピペするといいのかもしれません。特に恐ろしく入力しづらいのがコメント入力です。これほんとやばいです。これこそ他で書いてコピペすべきです)

実際に変更されてるか確認

ここまでしてブログを見に行ってみると、

こんなふうに、見出しのデザインが変更されてると思います。

今回は「h2」の見出しについてだけ変更したので、他の見出しも個別に変更する必要はあります。

あ、そういえば僕がめちゃくちゃつまずいたのが、「そもそも見出しってどうやって設定するの??」っていうすんげえ初歩的なところだったのですが、一応説明しとくと、

ブログ作成画面のこのバーの「H」のアイコンでひとまとまりの文章見出しとして設定できます。

「見出し」ってちゃんと書いてるのにわからなかったのは、「目次」は知ってても「見出し」という言葉がわからなかったからです…^^;

見出しコマンドは文字サイズの変更だと思ってました…(;^ω^)

デザインを自分で変更してみる

コピペだけだとオリジナリティに欠けるので、せめて色くらいは変更してみようと思います。

見出し色変更

僕のデザインの例で言うと、この黄色の下線を引いた箇所が、色を意味しております。

ネットで「カラー コード」とでも検索すればHTMLカラーコード一覧表が出てくるので、そこから選んで、#114514みたいな6桁の16進数をコピペすれば色を変えられます。(実際やってみてください)

あと、数値の部分も変えたら色々変わるのでしょうが、そこは省きます。

おわりに

この追加CSSという項目に入力することで、見出しに限らず、タイトルとか背景色とか、ブログのいろんな部分を、根本的なCSSを変更することなく、後付け的に改造することができます。

なので、根っこからCSSを変更してバグってどうしようもなくなるみたいなことを防げるので、初心者はここをいじっとけみたいな感じですかね。

まぁ主にデザインは選んだテーマで決まるので、気に入ったテーマをまず選んで、細かい部分をCSSをいじくることで色々やっちゃったらいいんじゃないすかね。

今はブログタイトルや記事タイトルのデザインをどうすれば変更できるのかわからなくて調べてます(´・ω・`)

0
ブログランキング参加中です!クリックしてもらえるとありがたいです!
ブログランキング・にほんブログ村へにほんブログ村

コメント

タイトルとURLをコピーしました