ロリポップユーザーに贈る!見出しデザインを変更する全手順 | 真面目に遊んで生きてくレシピ

ロリポップユーザーに贈る!見出しデザインを変更する全手順

疲れ果てて路上に倒れるサラリーマン」 テキスト「ロリポップユーザーに贈る!見出しデザインを変更する全手順」

「WordPressの見出しのデザインを変更する方法を教えてください…!」

こんな疑問を抱え、「WordPress 見出し カスタマイズ」とかで検索すると、それこそ山のように情報が出てくると思いますが、自分のやりたいようにカスタマイズできましたか!?

僕の場合、まぁ知識はあまりないし器用でもないしで、ブログ開設初期は見出しのカスタマイズをするだけでもめっちゃ苦労したので、今回はそのあたりを丁寧に解説しておこうと思います。

見出しなどのブログのデザインを変更するにはCSSカスタマイズをしていくわけですが、初心者にとっては、「CSSのカスタマイズ」って言われても全然わけわからんと思うので、とりあえずはこの記事の順番通りに進めてみてください。
僕と同じ環境であれば、ブログを希望のデザインに変更することができるはずです。

それではまず、僕の環境を説明しておきます。

サーバー ロリポップ
WordPress 4.9.4
テーマ Simplicity2(2.5.3)

CSSのカスタマイズをするには子テーマを導入するのが一般的なので、まだテーマ自体を導入していない、あるいは子テーマを導入していないのであれば、下を参考に導入しておきましょう。

では順番にまいりますよー。

スポンサーリンク

テーマの導入

テーマ&子テーマの導入が済んでいる方はここをクリックしてテキストエディタの導入へ飛んでください。

まだの方は順番に進んでいって、カスタマイズへの準備を整えましょう。

↓まずはこちらを参考に親テーマ&子テーマを導入します。

WordPressの無料テーマ・Simplicity2の親テーマ&子テーマのダウンロードからインストールまでの方法を詳しくご紹介。さらにWordPressのテーマの導入の際に親テーマと子テーマが必要な理由も合わせて解説しています。

テキストエディタの導入

CSSカスタマイズをするには、テキストエディタを導入しておくことが大切です。

CSSのカスタマイズとは?

まず、CSSのカスタマイズとはどんな意味なのかを簡単に解説しておきますね。

CSSのカスタマイズは、

  1. 親テーマのスタイルシート(style.cssというファイル)の中にあるCSSの記述をコピーする
  2. 子テーマのスタイルシート(style.css)にCSSの記述を貼り付け変更し、追記していく

という流れになります。

少しわかりづらいかもしれないので、図にしてみましょう。

CSSファイルの親テーマと子テーマの関係性

つまり、親テーマから変更したいCSSだけを子テーマに追記していくという形ですね。

見出し以外にも、ブログのフォントや行間、レイアウトなど、デザインのカスタマイズをしたいときは上の流れが基本になるので、覚えておきましょうね。

テキストエディタ「TeraPad」を導入する理由

ひとつ注意点としては、実際にCSSを追記していったときにブログがきちんと表示されなかったり、狙い通りのデザインにならなかった場合、すぐに元に戻せるようにバックアップをとっておくことが必須です。

つまり、CSSの記述にミスがあった場合の対策をしておくわけですね。

ただし、ウィンドウズ純正のメモ帳などでCSSの記述を保存してしまうと、文字化けしたり記述ミスが起きやすくなる可能性があるので、「テキストエディタ」というソフトを使って、正しい方法でバックアップをとるようにしましょう。

僕は「TeraPad」というフリーソフトを使っています。

テキストエディタは他にもいろいろありますが、このTeraPadは無料で使える安心の日本製ソフトなので、これひとつだけで充分だと思いますよ!

↓「TeraPad」のインストールから使い方まではここで詳しく解説しています。

シンプルで使いやすいテキストエディタ「TeraPad」の使い方です。ソフトの概要とインストールから導入までを丁寧に解説しています。

ロリポップFTPでCSSの変更をする

ではカスタマイズの準備が整ったところで、実際にCSSを変更していきましょう。

子テーマのスタイルシートを開く

ロリポップにログインして、「サーバーの管理・設定」→「ロリポップ!FTP」を開きます。

そうするとこんな画面になりますね!

ロリポップFTP ルート

「自分のサイトアドレス(公開アップロードフォルダ名)」→「wp-content」→「themes」→「Simplicity2-child」→「style.css」を開きます。

そうするとこんな入力欄が出てきますね!ロリポップFTP style.css

ここが、先ほど画像でも解説した子テーマのCSSファイルです。

つまり、ここにCSSのカスタマイズを追記していくわけですね。

すでにCSSのカスタマイズをしている場合は、追記してある記述内容をコピーして、先ほど紹介したTeraPadに貼り付けておき、うまくいかなかったときにすぐ戻せるようにしておきましょう。

CSSの追記

実際にCSSを追記すると、こんな感じになります。

ロリポップFTP style.css 記述例

注意点は以下の2点。

  • 日本語以外は半角で入力(英数字、ハイフン、スラッシュなどの記号とか全部)
  • スペースをあけるときは半角スペースを入力

覚えておきましょう。

最初のうちは、この暗号のように並ぶ英数字の大群に戸惑うと思いますが、基本的な並び方は決まっているので、カスタマイズに慣れてくれば色々と応用できるようになります。

試しに、今開いているスタイルシート(style.css)に、下の「見出し2を変更するCSS」をコピペで貼り付けてみましょう。

See the Pen RyEEeO by yuji (@codeyuji) on CodePen.


貼り付けたら、下にある「実行」を押します。

これで変更されました!

無事にカスタマイズできたかを確認

見出しのCSSデザイン変更の前後

試しに、自分のブログの投稿画面で見出し2を入力し、プレビュー画面でデザインを見てみましょう。

無事に変わりましたか?
変わってない!?

大丈夫、落ち着いてください。

キーボードの「Ctrl」キー+「F5」を押してみましょう。

「スーパーリロード」という必殺技です。

一応説明しておくと、GoogleChromeやInternetExplorerなどのブラウザは、Webページを読み込むとき、キャッシュというものを溜め込んでいきます。

今の動作で正しく表示された場合は、ブラウザが溜め込んだ古い情報(キャッシュ)が残っていたためです。

CSSのカスタマイズを確認するとき、もし変わっていなかったら、すかさず「スーパーリロード」を繰り出して、古い情報を退治しましょう。

まとめ

いかがでしたか?

自分好みのデザインに変更できれば、サイトの印象もグッと変わりますし、ブログを書くモチベーションもあがりますよね!

ただひとつ注意!!

次の記事でも話してますが、カスタマイズはほどほどにしておきましょう!

Digiprove sealCopyright secured by Digiprove © 2018

この記事が気に入ったら
いいね ! しよう

Twitter で
スポンサーリンク

フォローする