WordPress-CSSを編集

記事を書くにあたりやはり気になるのが見た目。そうなるとどうしてもCSSをいじる必要が出てくる。Webなんて学生時代に少々かじった程度の私が四苦八苦しながらやった記録





Point!
編集する前には元のCSS情報をテキストなどで取っておくのがおすすめ。
これは間違いなくやっておいたほうがいいです。なぜって私のようなとりあえずコピペ派はトライ&エラーを繰り返すから。実際差し戻しを行ったので自信がない人はやったほうがいいですね。

フォントの設定

これは一番初めに気になったところ。
明朝体が悪いわけではないがやはりなじみが薄いので編集してみました。

参考にしたのはこちらのサイト。

私の使用しているTwenty Sixteenではここ↓

よーし確認だ!と意気揚々F5キーを押した、、、が変化なし、、、。
悩みました。記述が悪いのかと色々探しました。その結果
どうやらキャッシュが悪さをしている

というわけでキャッシュを削除したら無事に更新されました

■Chromeのキャッシュ削除

いちいちアクセスするのが面倒くさいので
ClearCashというChromeのプラグインを入れて作業にあたっています

Point!
スタイル更新の確認は常にキャッシュをクリアして行うべし!

本当にここに行き当たるまでに時間がかかりました。

見出しの編集

こちらはトライ&エラーに時間がかかったところです。気に入った形、色などを色々試す感じですね。「見出し CSS」で検索をかけるといっぱい出てきます
■テンプレートは主にこちらを参考に

■カラーコードはこちらを利用

私の使用しているTwenty Sixteenではここ↓

h1はHPタイトルに使用
h2は記事のタイトル及びウェジットの項目に使用されている模様

コピペユーザーの私は元のソースを極力いじりたくないため、影響の少なそうなh2~h5のみを改変することにしました。

その際、h6をh1の下に配置しなおさないとh1がh2の見出し設定をひろってしまい、タイトルまでh2に設定した見出しになってしまったので要注意

最終的にはこんな感じです

Point!
不安であれば「/* 文字列*/」でコメントアウトで元のソースを残しておく
というのも一つの手ですね。確定したら削除してました

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fifteen − four =