SIMPLESTERのカスタマイズ
特にカスタマイズしなくてもいいテーマを目標に制作していますが、カスタマイズすると更に自分色に染めることが出来ます。ここでは幾つかSIMPLESTERのカスタマイズの仕方をご紹介します。
ヘッダー画像&ロゴの設定
ページ上の画像(ヘッダー画像)やロゴのを設定&変更するには外観
>カスタマイズ
>と進み各セクションを設定していきます。
ロゴの設定
SIMPLESTERではロゴを表示する部分を高さ25pxで固定しています。iPhone等のRetinaディスプレイでも綺麗に表示するために設定するロゴの高さは2倍の50pxが好ましいです。(というか50pxがイイです!)
ヘッダー画像の設定
ヘッダー画像はSIMPLESTERの横幅1116pxに合わせたサイズ(1116px×270px)で作成し設定します。
全体の色の変更
デフォルトでは黄色がメインカラーになっていますが、簡単に好きな色に変更することが出来ます。
まずは先程でも開いたカスタマイズ
で設定できるのがh2タイトル(丁度この上の見出し)やサイドバーのRSSボタンなどです。早速設定しちゃいましょう。
その他テーマ内で設定しているカラーもこのまま設定しちゃいましょう。外観
>テーマの編集
を開きCSSファイルを編集します。「#F62459」と記載されている箇所を好きな色に変更すればOK。複数箇所あります。
■ページトップボタン(ページ右下)■TOP記事一覧のホバー時のインジケーター■TOP記事一覧のメタ要素■h3見出しの下ボーダー■ページネーション■TOPメニューホバー時の色■記事ページのパンくずリスト・タグリストの色■記事ページのSNSボタン周りホバー時の色■サイドバーの新着記事一覧・カテゴリー・タグホバー時の色
ブラウザの検索機能を使って手作業で変更してもイイですが、面倒なのでテキストエディタ(terapad等)やWEBサービス等を使用して一括置換すると楽です。
メニューバーのアイコンの設定
ヘッダー画像の下にあるメニューバーのテキストの前に表示されているアイコンですが、外観
>メニュー
より項目を編集することでアイコンの設定が可能です。項目の種類によって変更してみてください。
変更の仕方は簡単。項目を開き、タイトルの属性部分に[home/link/cate/page/envelope]のいずれかを入力し保存していきます。
[home]はTOPページに戻る項目の時、[link]はリンクの項目の時、[cate]はカテゴリー項目の時、[page]は固定ページの時、[envelope]は問い合わせ項目の時です。その他カスタマイズ
SIMPLESTER特有のカスタマイズ事項はコレぐらいです。基本的にSTINGERのカスタマイズに依存するので公式ページにて色々と調べてみてください。
ライセンスについて
オールフリーです。基本STINGERで許可されていることについては全て同様に許可しています。改変もOK。ただし無許可での再配布&だけはやめて下さい(汗)
STINGERとSIMPLESTERで自由なブログを作ってみてはいかがでしょうか!!
公開日:
最終更新日:2015/12/20