キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

      2014/10/28

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicocatxyz )です。

そんな入院生活中にキャリコがやってることといえば、もっぱら STINGER5 のカスタマイズです。病室に Wi-Fi が飛んでるっていうのも変な話だけど、細かい部分をカスタマイズしたので紹介します。

Ads by Google

ダッシュボードから出来ること

タイトル画像の変更

サイトの顔と言っても過言ではないタイトル画像。いつまでも STINGER5 の画像にしておくわけにもいかず、( 仮 )という感じで間に合わせのタイトル画像を作成しました。

サイズは横幅 980px で高さ 250px が推奨です。画像が用意できたらダッシュボードの『 外観 』から『 ヘッダー 』を選びます。次に『 ファイルを選択 』をクリックして画像を選び『 アップロード 』をクリックしてヘッダー画像のトリミングページへ進みます。

横幅 980px で高さ 250px 以上の画像の場合は『 切り取って公開する 』を、サイズがぴったりの場合は『 トリミングをせず、このまま画像を公開する 』をクリックしてヘッダー画像を公開します。

背景画像の変更

背景画像にもひと手間加えたかったので変更しました。タイトル画像と同じように、画像が用意できたらダッシュボードの『 外観 』から『 背景 』を選びます。次に『 ファイルを選択 』をクリックして画像を選び『 アップロード 』をクリックして背景画像を公開します。

背景画像の設定で表示オプションが選べるので、自分の好みに設定してください。キャリコの場合は横 100px、縦 100px という小さな画像を用意して、位置を左に、繰り返しは水平方向にも垂直方向にも繰り返されるタイルを選び、スクロールしたときに固定されるような設定をしました。

CSS に記述したこと

h2 の背景色を変更

STINGER5 は白とグレーを基調としたカラー配置なので、そこにアクセントカラーが欲しいと思い『 h2 』をリンクと同じ色にしました。

タグの書き込みはダッシュボードの『 外観 』から『 テーマ編集 』を選びます。これは前回のエントリーで作成した子テーマだけど、この中に次のようにスタイルシートへ記述しました。

キャリコ
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

h2 の文字色を変更

背景色の変更に伴い文字が見えにくくなってしまったので、見やすく白に変更します。次のようにスタイルシートへ追記しました。

投稿日時の上下の線と背景色の変更

背景色が白だと味気なかったので変更したのと、それに合わせて上下の線も色を変えてみました。

検索窓の背景色の変更

検索ワードを入力する部分の背景を白にしてグレーの枠で囲み、検索ボタンを h2 やリンクと同じ色に変えました。

a タグの装飾

リンクにマウスを載せると文字色がふんわり変わるように CCS3 で装飾しました。

まとめ

変更した部分はほんの少しですが気になる部分が出来たら随時カスタマイズしていく予定です。現時点ではタイトル画像がいまいちなので、良いアイディアが浮かんだら差し替えようと思っています。

CSS が反映されない!っという症状の方はこちらのエントリーをご覧ください。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

1
ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …