WordPress CSS変更
WordPress プレミアムプランになるとプログテーマ(Thema)CSSを変更できるようになります
WebでCSSの変更方法を検索しても「理解している人が見れば出来るようになる?」ような記事ばかりで、もう少し初心者向けの説明は無いのかと悩んでいました。プレミアム版を使用しているのであればブログの見せ方を好みの表示にしてみると楽しいです
プレミアムプランだと有料ブログテーマを無料で使用できるのですね! 最新アッデート後にThemaの選択を見たら、昔は金額表示だったテーマが購入済みと表示されていて気付きました。もともとプレミアムの目的がテーマ変更では無かったのですが、知らないって損だなと思いました
使用ブログテーマのタイトルサイズを変更したいとか、マウスを重ねた時のカラーを変えたいなど簡単にできそうです。少し解ってくると投稿画像サイズやブログレイアウトも把握できますので参考までにお伝えします
インターネットを見るブラウザが何かでブログテーマのCSS表示無料版ソフトが変わってきます
私はFirefoxをメインに使っています。Firefoxには表示されているページのhtmlとCSSを確認できる無料ソフトFirebugというのがあります。調べてみると評判が良く使いやすいのでオススメです。WordPress上で変更してませんので表示されているのは仮想状態ですから安心。好みの表示に出来たら「その場所のCSSをコピー」して「WordPress上で貼り付けて保存」すれば部分的な表示変更が可能になります
最新版(2018) Firefox QuantumになりFirebugが使用できなくなりました
Firefox Quantumには標準でFirebugのようなHTMLとCSSを表示変更する機能があります
Firefox Quantumを開いたら Tools→Web Developer→Toggle Toolsと進んでください
これで下掲載の「2. Firebugが表示された状態です」に進めます
Firefox Add-ons Firebugインストールはこちら
では、詳しく見ていきましょう
(解っている人には、こんな簡単なこと!と言うかもしれませんが、これがなかなか理解できないのは私だけでしょうか? ^ ^;)
1. Firefoxを開きFirebugをインストールするとブラウザ画面右上に虫のアイコンが表示されます
変更を試してみたいページを開いてFirebugのアイコンをクリックしましょう
2. Firebugが表示された状態です
3. 変更したいところのCSSを表示してみましょう(解説はブログタイトルの色変更)
1.Pick an erement from the pageをクリック → 2.ブログタイトルをクリック
(今回はh1サイトタイトル)
4. htmlではh1のサイトタイトルが青で表示、CSS側でサイトタイトルのカラー変更が見つけられます
直接入力できますがカラーピッカーも便利です
5. h1サイトタイトルのカラーが変更できました
6. WordPress上で正式に変更(更新)するために先ほど変更したCSSをコピーします
7. 正式にCSS更新するために別ウインドウを開きWordPress上でカスタマイズ画面へ進みます(左上の参加サイトをクリックしてみてください)
ダッシュボード→外観→カスタマイズ
もしくは 左上の参加サイトをクリック→テーマ横のカスタマイズ
8. カスタマイズメニューのCSSを選択
9. CSS変更履歴を選択(このページに直接入力することも可能らしいですが今回はしません)
10. 管理画面の外観→CSS→管理画面の外観内CSSスタイルシートエディターにたどり着きます
この画面の一番下に変更したいCSS(先ほどコピーしたCSS)を貼り付けます
右上にあるスタイルシートを保存して完了です
11. 補足なのですがブログ全体のCSSを表示させてコピーしておくとバックアップになります
下のスクリーンショットCSS内に表示された矢印の部分をクリックしてみてください
数字をクリックするとhtmlが表示されていた場所にブログテーマCSSの全てが表示されます
12. タブがStyle Editorに変わり開いているブログのCSS全てが確認できます
テーマによっては4000番以上表示されますが、1からスクロールできますので全てコピーしてバックアップしておきましょう
後々元に戻せますのでオススメします(何か不具合があったときは9. CSS変更履歴を選択の画面に直接全てのコピーを貼り付け→保存することで元に戻せます)
追記です
写真10のスクリーンショットには右側にCSS変更履歴が表示されています
変更後に前回に戻すことができます
このスタイルシートのように以前変更済みのCSSを手直し(フォントサイズ変更など)してスタイルシートを保存すればブログ表示は更新されます
*ブログCSSの変更や更新は自己責任でお願いします
I translated in english your post: it’s very interesting! But I cannot understand CSS, and I cannot use it, for sure :-)
To tell the truth I fear time will come WordPress will change its system and load only CSS script. If so I will be obliged to close my humble blog because I ate CSS :-P
Ciao
Sid
Hello. Sid!
Most people will find this article difficult. But it’s easy to surmise. If you contract a premium plan. In Japan where I live, I felt like a challenge when trying to know the contents of this time. But that was a misunderstanding. Trying to know everything about CSS is difficult, but it is easy to change part. Try challenging when you are interested too. Thanks for your comment. : )