AFFINGER4カスタマイズ

【カスタマイズを始める前に】AFFINGER4子テーマのCSS編集をするときにオススメする3つの自分ルール

更新日:




こんにちは、しろまる(@akitashiromaru)です。

私のブログテーマはAFFINGER4という有料のテーマを使用していますが、今回は有料・無料どちらのテーマであっても、カスタマイズをする前に準備しておいたほうがいいことを書いてみます。

最初に見よう見まねでいじってしまうと、後で修正をしたいと思ったときに、過去の自分に泣かされるからです 涙

 

このルールを見て、ぜひ皆さんも編集がちょっとだけ楽しくなっていただけたら幸いです^^

スポンサーリンク

その1:AFFINGER4親テーマCSSと比較して見れるようにする

子テーマというのは、親テーマを編集することなく自分なりのカスタマイズを行うためのものです。

AFFINGER4の子テーマ(ここでは、AFFINGER4-childのこと)を最初有効化したときは、編集するstyle.cssには以下のことしか書かれていません。

  • AFFINGER4の子テーマであることの記述
  • CSS記述の例文
  • タブレットサイズ(960px以下)の指定
  • タブレットサイズ(600px以上)の指定
  • PCサイズ(960px以上)の指定

(いずれもコメントアウトで書かれています)

 

ここでオススメする自分ルールは、親テーマの記述ブロックと同じ順序で記述していくことです。

 

編集したいところだけ好き勝手に記述していくのもいいですが、後々「このCSSはなぜこういう表示に・・・?」と、自分で作ったCSSを自分で修正できなくなってしまいます。(そもそもCSSファイルが長くなってしまいますから 汗)

簡単にAFFINGER4の親テーマのstyle.cssを確認してみたところ、以下のような記述となっていました。

  • 全体的なCSS記述

Googleフォントの反映箇所/各フォント設定/人気記事の指定/アイキャッチがない場合の指定/アイキャッチがある場合の指定/フリーウィジェットボックスの指定/フッターの指定/フッターウィジェットボックスの指定/トップページウィジェットボックスの指定/トップページ・アーカイブ一覧表示/PC閲覧時の記事上の一括表示部分/記事下の一括表示部分/関連記事表示部分/サイドバー/サイドバー固定ページ用のナビ/ウィジェット問い合わせボタン/ウィジェットオリジナルボタン/エディタ用/吹き出しプラグインのボーダー幅変更の場合の指定(コメントアウト)/アコーディオンメニュー/ミドルメニュー/スマホフッターメニュー/検索フォーム/ページャー/ぱんくず/SNS/カレンダー/PAGE TOP/コメント/PREV NEXT/NEWS(お知らせ)/スライドショー/レイアウトスマートフォン/カラム1適用/LP/白紙ノート/IEのみ/の、指定についての記述

  • 959px以下で適応したいCSS(スマホ・タブレット)の指定
  • 600px~959pxで適応したいCSS(タブレットのみ)の指定
  • 600px以上で適応したいCSS(タブレット・PCのみ)の指定
  • 960px以上で適応したいCSS(PCのみ)の指定
  • 600px以下で適応したいCSS(スマホのみ)の指定

自分で子テーマのstyle.cssにあちこち記述し、わからなくなってしまうことのないように例えば親テーマなら全体の設定で「ぱんくずの指定→SNSの指定」と順を追って記述されているので、子テーマでその部分を変えたいときは同じように

/* ぱんくずの設定 */

コードをここに

/* SNSの指定 */

コードをここに

のようにstyle.css に記述していくと良いと思います。

 

 

その2:何のカスタマイズかわかるように説明を沿えておく

その1では、親テーマのstyle.cssの順番と同じように書くとわかりやすいですよ、ということを書きました。次に、「自分がどんなカスタマイズをしたのか」もコメントに残しておくのです。

もちろんCSSに慣れてきたらそんなことを書く必要もないかもしれません。しかし、説明があると後で編集時に自分が楽です。

 

その1で例にしたように、ぱんくずの設定を変えるとしましょう。

/* ぱんくずの設定 ぱんくずの矢印を画像に変更 */

コードをここに

というように、どんな風にカスタマイズしたのか、ということを書いて、わかりやすくしましょう。

 

 

その3:CSS記述の順番も決めておくとベター

これは、最初は慣れないと難しいかもしれませんが、慣れてくると同じコードを2回書いてしまったりするミスを防ぐことにもつながります

例えば、こういう記述があるとします。

*{

width: 100px;

margin-bottom: 20px;

padding-bottom: 20px;

background: url(xxxxxxxxx.jpg);

}

このあと、また別の指定で、こういう記述があるとします。

.xxx {

padding-bottom: 20px;

background: url(xxxx.gif);

width: 200px;

padding-bottom 10px;

}

・・・うーん。なんだか気持ち悪くありませんか。

 

記述に順番がないからわかりづらいし、「padding-bottom: 20px;」と「padding-bottom: 10px;」のように同じpaddingの指定を2回してしまっています。

こうなるくらいなら、width(幅)、margin(要素外の下の幅)、padding(要素内の下の余白)、、、のように指定の順番もそろえたほうがいいのではないかなと思います。

 

ちなみに、GoogleさんのCSS記述にもルールがある(クリック先の4.1.5のところを見たら・・・!)そうで、こちらはアルファベット順なんだそうです。個人的には、幅を指定するもの、フォントを指定するもの、などでまとめたほうがいいとは思うんですが・・・。

どちらにしろ、なるべく記述順も守って書いたほうが、後で楽ですよ^^

 

 

まとめ

いかがでしたでしょうか。CSS編集をするときにオススメするルールとして書いていきましたが、これ、実は集団で制作を行うときにも役立つルールでもあります。

集団でCSSをいじる場合はなおさら順番をどうするか、記述をどうするかまで決めておかないと、ゆくゆくはクライアントに迷惑をかけることになります。

 

今回はAFFINGER4の子テーマCSSの場合なので、後々自分が泣かなくてもいいようにと思ってオススメを書いてみました。参考になれば幸いです^^







  • この記事を書いた人
akitashiromaru_A7RKcJhZpnPE

あきた しろまる

20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。

おすすめ記事はこちら

WordPressプラグイン 「WP CSV Exporter」 1

前回、スプレッドシートを使った方法で、ブログが30記事を超えたところで、現状把握・改善点メモを行うと、リライトすべきポイントがわかってきた!というブログを書かせていただきましたが、記事の一覧を出力でき ...

-AFFINGER4カスタマイズ

Copyright© しろまるカフェ , 2018 All Rights Reserved.