WP Mini Tips #2

 
WP Mini Tips #2

20141101-1

ここ数週間でレンサバの仲間が急激に増えました。

私は一足先に無料ブログからレンサバへ移行したので、運営のノウハウがそこそこ貯まっており、そのノウハウを総動員して友人たちのサイト構築のお手伝いをしております(笑)

レンサバへ移行して最初にやるのは WordPress (WP) を使ったブログの構築ですが、拘りが無ければインストールして即運営できます。
がしかし、色を変えたりフォントを調整したりと、外観は自分好みにしたいですよね。
ということで、#1に続き、知っていると便利な事を書いてみようと思います。
しばらくは主に CSS関係になると思いますが、最低限これを知っていれば「???」となる事は無いという基本部分を記事にするつもりです。

シロチドリ

20141101-2

まずは軽く例をば(笑)

たとえば CSSを修正する際、オリジナルを書き換えてしまうと元に戻そうにも数値を覚えていないというハメになったりします。
そんな事にならないような方法を2つばかり書いてみます。

以下の部分は当サイトの当記事「サイトのカスタマイズ」の装飾部分です。

1
2
3
4
5
6
7
.entry-title {
	font-size: 30px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	color: #f16233;
}

オリジナルはフォントサイズが大きく不格好でしたので、修正をしました。
更には英字が全て大文字になる uppercase が設定されていたので、それも修正。
その際にやった試行錯誤が以下の方法です。

1
2
3
4
5
6
7
8
9
.entry-title {
	font-size: 30px;
	font-size: 22px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	text-transform: none;
	color: #f16233;
}

オリジナルのプロパティのすぐ下に同じプロパティを書く方法で、これだとオリジナルを消さずに納得いくまで試行錯誤できます。
同じクラス(.entry-title)の同じプロパティ(font-size)が複数有る場合、後に書いたものが採用されるという性質を利用すると言うことですね。
※プロパティが上書きされる

値が決まればオリジナルを消すも良し、/* */ で囲ってコメントアウトしても良しです。
もちろんそのままにしておいても全く問題はありません。

もう1つの方法は同じクラス名を追記し、必要な部分だけ抜き出して修正する方法。
以下がその例です。

1
2
3
4
5
6
7
8
9
10
11
12
.entry-title {
	font-size: 30px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	color: #f16233;
}
 
.entry-title {
	font-size: 22px;
	text-transform: none;
}

これも同様に後に書いた方ものが採用されるので、結果は同じになります。
どちらかというとこちらの方法がスマートだし、どこを修正したのかが分かりやすいですね。
更には追記した .entry-title 部分を別ファイルにし、オリジナルのファイルには全く手をつけないという方法もあります。
これが WPで言うところの子テーマというヤツですね。

この様な CSSの性質が分かっているとサイト構築の試行錯誤が楽になりますし、値を変えてもサイトに反映しないなどのミスも無くなります。



  1. bluem

    おはようございます(^^
    殆ど自分は何もしませんで、偉そうに好みを伝える程度でありましたが
    お陰さまで、自分好みが出だしの段階で出来上がり、もうホント
    感謝感謝で御座います\(^o^)/

    CSSなども理解できると簡単でしょうが、その知識が全くないので
    先ずは基本の部分の理解から入ろうと思ってます。
    自分でやれるようになると、これはもう益々楽しくなるのは間違いないですからね(^^
    そうなるまでに、どれ位の時間が掛かるか分かりませんがw

    1. delphian

      bluemさん、こんにちは。

      サイト構築は楽しいので、弄くっている時間は至福の時です(笑)
      あのテーマは弄りやすいので、CSS編集の良い教材になるんじゃないでしょうか。
      時間がある時にでも覗いてみるといいですよ。

  2. ask-evo

    cssも、FBシェアの本文引用探さないとなぁ(^^;
    新規投稿でしか自動シェアしないので、ダミー記事→削除を繰り返すしかないですねw

    1. delphian

      ask-evoさん、こんにちは。

      FBへの自動投稿もなかなか難しいですね。
      FBのAPIを直接操作してみようかな~
      FB用にダミーのアカウントを取り、テストサイトでテストしては?

  3. jerry

    おはようございます。
    こういう記事はメッチャ参考になります(^^

    CSS編集 チョットやってみましたがなかなか難しいですね
    JetpackのカスタムCSSを使ってみました。
    私が使ってるテーマは記事のタイトルが大文字になる設定だったのを変更できました(^^

    1. delphian

      Jerryさん、こんにちは。

      CSSの編集が出来る様になるとブログの運営が更に楽しくなりますね。
      JetPackには CSS編集の機能もあるとは!
      あとでチェックしてみよ~

  4. iMovie

    おはようございます。
    WP Mini Tipsの提供、ありがとうございます。
    また、連日、アドバイスを頂き感謝しております。
    このTips活用させて頂いております。
    修正箇所は、後に書いて、/* add * /としています。
    修行の甲斐もあり、最近は弄るのが楽になってきました。
    まだ、全体の流れがわからないので、他の方が解析した内容に頼ってますが、教えて頂いたリファレンスを見ながら精進していきます。
    <リファレンス>
    http://www.htmq.com/style/index.shtml
    私からの情報は、色に迷ったら、ここです。
    配色パターンを教えてくれるので、バランス悪い色になりません。
    http://ozpa-h4.com/2012/11/27/color-chart-tool/

    1. delphian

      iMovieさん、こんにちは。

      iMovieさんの場合、CSSの構造が分かっていなかったのが失敗の原因でしたね。
      プロパティの値を変える程度ならミスする事は無いのですが、加える作業をするには基本的な知識は必要だな~と思いましたよ。

  5. Malu

    こんにちは。
    このような記事はすごく助かります。
    修正箇所には、コメントを記入していたのですが、そうかこんな方法がと。ありがとうございます。
    sitemixで運用していたBlogをまだそのままにしていますが、今のレンサバにアーカイブしようとしています。
    画像は全てFTPでダウンロードを終えまして、この連休中に作業を予定しているのですが、アーカイブ方法(引っ越し)がいまいち??なんですね。
    Netで検索しながら頭をひねってます。(^_^;)

    1. delphian

      Maluさん、こんにちは。

      修正も色々な方法がありますので、楽で分かりやすい方を選択ですね(笑)
      phpMyAdmin が使えるならデータは完璧に移行できるのですが、使えないなら
      WPのツールにあるエクスポートを使うしかないですね。
      で、terapadなど UTF-8 が編集出来るエディッタを使って、ドメン名を一括置換。
      それをインポートすれば OKだと思います。