WordPressプレミアムプラン CSS変更方法

2 comments
rolleiflex, Wordpress CSS変更

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 Mac インストール手順はこちら

Firefox Add-ons Firebugインストールはこちら

では、詳しく見ていきましょう
(解っている人には、こんな簡単なこと!と言うかもしれませんが、これがなかなか理解できないのは私だけでしょうか? ^ ^;)

1. Firefoxを開きFirebugをインストールするとブラウザ画面右上に虫のアイコンが表示されます
変更を試してみたいページを開いてFirebugのアイコンをクリックしましょう

01csschange

 

2. Firebugが表示された状態です

02csschange

 

3. 変更したいところのCSSを表示してみましょう(解説はブログタイトルの色変更)
1.Pick an erement from the pageをクリック → 2.ブログタイトルをクリック
(今回はh1サイトタイトル)

03csschange

 

4. htmlではh1のサイトタイトルが青で表示、CSS側でサイトタイトルのカラー変更が見つけられます
直接入力できますがカラーピッカーも便利です

04csschange

 

5. h1サイトタイトルのカラーが変更できました

05csschange

 

6. WordPress上で正式に変更(更新)するために先ほど変更したCSSをコピーします

06csschange

 

7. 正式にCSS更新するために別ウインドウを開きWordPress上でカスタマイズ画面へ進みます(左上の参加サイトをクリックしてみてください)
ダッシュボード→外観→カスタマイズ
もしくは 左上の参加サイトをクリック→テーマ横のカスタマイズ

07csschange

 

8. カスタマイズメニューのCSSを選択

08csschange

 

9. CSS変更履歴を選択(このページに直接入力することも可能らしいですが今回はしません)

09csschange

 

10. 管理画面の外観→CSS→管理画面の外観内CSSスタイルシートエディターにたどり着きます
この画面の一番下に変更したいCSS(先ほどコピーしたCSS)を貼り付けます
右上にあるスタイルシートを保存して完了です

10csschange

 

11. 補足なのですがブログ全体のCSSを表示させてコピーしておくとバックアップになります
下のスクリーンショットCSS内に表示された矢印の部分をクリックしてみてください
数字をクリックするとhtmlが表示されていた場所にブログテーマCSSの全てが表示されます

11csschange

 

12. タブがStyle Editorに変わり開いているブログのCSS全てが確認できます
テーマによっては4000番以上表示されますが、1からスクロールできますので全てコピーしてバックアップしておきましょう
後々元に戻せますのでオススメします(何か不具合があったときは9. CSS変更履歴を選択の画面に直接全てのコピーを貼り付け→保存することで元に戻せます)

12csschange

追記です
写真10のスクリーンショットには右側にCSS変更履歴が表示されています
変更後に前回に戻すことができます
このスタイルシートのように以前変更済みのCSSを手直し(フォントサイズ変更など)してスタイルシートを保存すればブログ表示は更新されます

*ブログCSSの変更や更新は自己責任でお願いします

Posted by

Hello everyone! I am Japanese. Self-development and self-print using a film camera is a hobby. Use camera. Rolleiflex 2.8C Planar. Rolleiflex 2.8F Planar. Leica M6 TTL & Summicron 50mm / f2.0 2nd. Wordpress blog post is not all been Rolleiflex photography. Introduce my other sites! Flickr URL. [ https://www.flickr.com/photos/rolleirollei/ ] tumblr URL. [ http://rolleirollei.tumblr.com/ ] Let's enjoy your photography♪

2 thoughts on “WordPressプレミアムプラン CSS変更方法”

  1. 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. : )

Leave a comment.

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s