WordPressの簡単カスタマイズ!FFFTPでstyle.cssを上書きして見栄えを変えよう!

シェアされると喜びます♪

  • このエントリーをはてなブックマークに追加
  • 36
a0002_001625_m

WordPressを使い始めて4か月経過しました。

文章を書くだけなら、最初から特に困ることはありませんでしたね。
プラグインの『TinyMCE Advanced』のインストールが必須ですけど。

初心者にとって、最初の難関はレンタルサーバーを借りて、WordPressの初期設定をするところだと思います。
これも、ネットにたくさんの情報がありますので、そんなに苦労することはなかったです。

参考までに、自分が設定した流れも簡単にまとめてます。

WordPressでブログの形を作るためにやったこと。1日目はここまで出来た!
WordPressでブログを作るのは、「WordPressでブログを作ってみるぞ!」と、思い立って5秒後に始められるほど簡単じゃないです。ブ...
WordPressでブログの形を作るためにやったこと。2日間で一応の形ができたよ!
前回の記事ではWordPressをインストールした初日にやったことを書きました。今回はその続きで、外観→カスタマイズの設定について書きます。...

今回の記事では、初心者のための簡単カスタマイズの方法をお届けします。
ちなみに私のWordPressの運用状況はこんな感じです。

・レンタルサーバーはエックスサーバー です。

・テーマはSimplicity です。

すっごくお気に入りの組み合わせです!

最初に書いておきますが、カスタマイズはあくまでも自己責任で。

スポンサーリンク
簡単デイズ336

子テーマをインストールしよう!

WordPressは、自分が気に入るテーマを使うのがおすすめです。
私のおすすめはもちろん、Simplicityですけどね。

すると親テーマと子テーマというものがあります。

親テーマだけでもブログを運営することは可能です。
ですが、色々とカスタマイズしたあとに、親テーマのアップデートをすると、その新しいバージョンに書き換えられて、せっかくのカスタマイズが消えてしまいます。

そういったことを防ぐためには『子テーマ』をインストールしておいて、そちらでカスタマイズを行います。
そうやると親テーマのアップデートの際に、子テーマには影響しませんので心置きなくカスタマイズをしておいて良いわけです。

子テーマに関してはこちらの記事がすごく参考になります!

Wordpress既存テーマをカスタマイズするなら子テーマを使うべきと思います。これは、Wordpress codexにある子テーマの項目でも推奨されています。ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われ

私はSimplicityを前提として記事を書いていますので、インストールの仕方はこちらをご参考にどうぞ。

FTPクライアントソフトウェアを使おう!

WordPressのカスタマイズには、FTPクライアントソフトウェアが必須ですね。

FTPクライアントソフトウェアとは、FTPを使ってファイルの送受信を行うソフトのこと。
このソフトを使って、パソコンからサーバーにアクセスして、ファイルを書き換えるんです。

私が使っているのは、タイトルに書いた『FFFTP』というソフトです。
理由はフリーウェアであることと、使い方を調べればたくさんの情報が出てくるところですね。

ちなみに私が良く読ませてもらっているサイトはこちらです。

FFFTPの使い方をまとめた総合マニュアルです。初歩的な「使い方」から「各種設定方法」まで順番に解説しているので初心者でもFFFTPを使いこなせます。

FFFTPは「style.css」の上書きでも使いますが、バックアップでも使ってます。
カスタマイズには興味がない人も、バックアップ目的で使ってみたらいいかもよ。

style.cssってどこにあるの?

少し見栄えを変えたいな、と思ったら子テーマの『style.css』というスタイルシートをいじります。

その『style.css』というやつはどこにあるのでしょう?

FFFTPを使っていると仮定して説明します。

1.FFFTPを起動してサーバーに接続します。

2.画面の右側、サーバー側の中身を確認します。

3.このブログなら『kantandays.com』をクリックします。

4.次に『public_html』をクリックします。

5.次に『wp-content』をクリックします。

6.次に『themes』をクリックします。

7.次に『simplicity-child』をクリックします。

はい!その中にありましたね!!

私の事例を紹介します。

私はこんな記事を書けるほど、スタイルシートを

いじっておりません!!

でもね。同じような初心者の人がいるはずです、きっと。

H2の見出しを変更していますので、参考までにやり方を紹介します。

私がSimplicityをインストールしたときの、子テーマのstyle.cssはこうなっていました。

@charset “UTF-8”;
@import url(“../simplicity/style.css”);

/*
Theme Name: Simplicity child
Template: simplicity
*/

/* Simplicity子テーマ用のスタイルを書く */

この下側に、次のように書きました。

/* h2.角が丸い囲み */

.article h2{
border-left:1px solid #CC3366;
background-color: #CC3366;
color: #FFFFFF;
border-radius: 10px; /* 4つのコーナーを半径10pxの角丸に */
padding-left: 20px; /* 左パディングを20px */
}

そのstyle.cssファイルをFFFTPを使って、サーバー側に上書きします。
すると、今、このブログで使っているH2見出しの完成です!

お洒落な見出しはこちらの記事が参考になりました!

昨日は、グローバルナビメニューについて書きましたが、今日はH見出しのサンプル集です。 ナビメニューと違って、見出しは比較的簡単にCSS設定ができてしまいます。 ただ、簡単に設定できることと良いデザインになることはまた別の話です。僕の

プログラムもサーバーの仕組みも軽くしか理解してませんので、詳しいことは書けません。
ただ一番重要なポイントは、

上書きする前のstyle.cssのバックアップを取っておくこと!

これをしておかないと、もとに戻せなくなった初心者はアウトですよね…

まとめ

まだまだ勉強しないと本格カスタマイズはできませんが、簡単なやつはやれますね。

カエレバとヨメレバのボタン化もこちらを参考にしながら変更しました。

Amazonや楽天へのアフィリエイトリンクを一瞬で作れるブックマークレットのカエレバ・ヨメレバ・ポチレバ。その中で商品へのリンクをテキストからボタンに変えるCSS(私が使っているやつ)を紹介します。

ヨスさん、ありがとうございます!

WordPressはSimplicityという無料のテーマをはじめ、これマジで無料っすか?
というような情報があふれてます。

それを活かせるかは自分次第なので、結局は自分が勉強するしかないんです。

次に狙ってるのは『Windows Live Writer』を使いこなすこと。

便利そうなんだよな~。

とにかく使ってみるとしますかね。

スポンサーリンク
簡単デイズ336

シェアされると喜びます♪

  • このエントリーをはてなブックマークに追加

フォローされると喜びます♪