« LINEの着せ替え 第二弾 | トップページ | グラデーションを簡単にしてくれるツール »

2017年5月19日 (金)

カスタマイズをする前に!

 カスタマイズをする時のチョットした小技。
 久しぶりにテンプレートをいじった時に気がついたので、少し書き残しておかないと、日頃意識していないので忘れそうだ。
 
 タイトル通りデフォルトを作っておく。まんまじゃん!
 
 つまり全体のサイズや文字の種類などはそのままに、タイトルバナーを季節毎に替えてみたり、個別記事の雰囲気を替えてみたりしたい場合に便利なのが、デフォルトのテンプレートを自作しておく事である。
 形を整えてから、枠線を入れておき、場所ごとに色分けしておくと、何処から何処までがバナーの場所かも、サイドバーとメインの隙間も分かりやすい。はっさくはバナー下のナビゲーションを微調整する際に、この手を良く使う。
 1.まず、デザイン→新規テンプレート作成の順に画面を開く。
   ↓
 2.レイアウトを選ぶ。
   (とりあえず、はっさくは両サイドバーを選択)
   ↓
 3.表示項目、並べ方を順に選ぶ。
   ↓
 4.テーマはカスタム・テーマを選ぶ。
  ラジオボタンをクリックすると、各項目の設定が出来るようになる。
  この時点で確認してみると、こんな感じになっている。

Photo_6

  これが、初期状態である。
 5.最初に全体の横幅や、サイドバーの横幅を決める。
  はっさくは、両サイドバーを300pxずつにした。(本文は500px)
  これは、実際に表示できる範囲は300pxよりも小さいから。
  アフィリエイトの画像を載せようと思うなら、なるべく大きい方が良いので、この位は欲
  しい。
   2カラムのテンプレートにすれば、もっと広くなるので貼り付ける画像も大きく出来る。
  大きさだけ決めると↓こんな感じに。
  まだ、タイトルバナー部分がオレンジ色だったり、サイドの項目タイトルが枠で囲まれていたりしている。

Photo_7

  これを全て取っ払ってからデザインを考えるのも手である。
  (取っ払って、文字も見やすく大きめにしてみた↓)

Photo_8

 6.格パーツに色を付け、枠線も分かりやすくつけておく。
  CSSをいじる際、変にズレたり段落ちしたりすると、本文の幅がおかしいのか、サイドバーの幅を直せばいいのか、分からなくなる。
  そんなときの為に各々に色付けしておくと便利!

Photo_9

 7.確認して保存したら、テンプレート管理の所の名前を、分かりやすい任意のモノにし
  ておく。
 以上が、自作テンプレートの下ごしらえである。
 季節毎に、そろそろ替えたいなーと思ったら、これを複製して作れば最初の手間が省けると思う。
 
 ここまで説明しておいて今更だが、ココログではテンプレートの自作カスタマイズはPC版がメインである。スマホも同じデザインにしたいと思えば、「ココログ・プロ」へ変更して月額千円が必要になる。
 ベーシックやプラス、フリー等のユーザーはスマホでのデザインは同一のものだ。現在これをもう少しどうにかならんモノかと思案中である。
 
 いっそ、1カラムにしてみるのも手かなぁ。

|

« LINEの着せ替え 第二弾 | トップページ | グラデーションを簡単にしてくれるツール »

◆カスタマイズ全般」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック


この記事へのトラックバック一覧です: カスタマイズをする前に!:

« LINEの着せ替え 第二弾 | トップページ | グラデーションを簡単にしてくれるツール »