キャリコ

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

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

      2014/12/07

1

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

自己満足カスタマイズって本当に楽しいですよね。ブログ記事もそうですがブログデザインもひとつの表現方法だと思います。そんなわけで今回は第3弾ということでラテにお願いします。それじゃあ、よろしくね♪

ラテ

こんにちは、ラテにゃ。

前回に引き続きちょこちょこカスタマイズした箇所を紹介するにゃ。そのうちいじれるところがなくなってくると思うから、シリーズ化は無謀だと思うにゃ~

Ads by Google

自己満足カスタマイズ

サイト上部のラインとフッターデザイン

サイト上部に 5px の青いラインを入れたにゃ。これは body に指定するだけで簡単に出来るにゃ。

フッターのデザインは横幅いっぱいに広げて背景を黒に、文字を白にしただけにゃ。これはちょっと強引な方法で実装してるにゃ。まず footer.php の記述 footer で囲まれていたものを footerin というクラス名を付けて次のように指定したにゃ。

次に背景を黒くするために footer に次のように指定したにゃ。

どうしてサイト上部にラインを入れたのか、フッターのデザインを変えたのかと聞かれたら… なんとなくとしか言いようがないにゃ (ΦωΦ;)

トップに戻るボタンが肉球

スクロールするとブログの右下に出てくるトップに戻るボタンのアイコンを肉球に変更したにゃ。これも footer.php の「 ページトップへ戻る 」という部分のアイコン型ウェブフォントを変えただけにゃ。

元々の STINGER5 では「 」なんだけど、これをキャリコでは「 」に変更したにゃ。

アイキャッチ画像の周りに余白

新着記事や今注目されている記事トップ10などのアイキャッチ画像を装飾したにゃ。新着記事は「 kanren 」、トップ10は「 popular-post 」の id で囲まれてるから、その img に次のような指定をしたにゃ。

購読ボタンの設置

プロフィールの下に RSS と Feedly の購読ボタンを設置したにゃ。RSS のアイコンは Font Awesome、Feedly のアイコンは Icomoon、詳細はこちらを参照するにゃ。

Font Awesome の最新版 Version 4.2.0 を導入したアイコン型ウェブフォントの使い方

ああああああああ、ULTRA JAPAN に行きたすぎるキャリコ( @calic …

calico.xyz

なければ作ればいい!アイコン型ウェブフォントが自作できる IcoMoon

イギリスで一人暮らしをするかもしれないキャリコ( @calicocatxyz ) …

calico.xyz

HTML

CSS

ページナビの色変更

トップページ下部に表示されるページナビの色を変更したにゃ。これは pagination というクラス名で指定してあるから、基本の色を濃いグレーに指定、今いる場所とオンマウスで水色になるよう色の指定を変更したにゃ。

まとめ

とりあえず前回から今回までの間に変更した箇所はこんなところにゃ。今後もカスタマイズするかどうかはわからないけど、変更したらまとめて紹介するにゃ~

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

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

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

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

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

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

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

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

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

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

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

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

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

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

1
STINGER5 のブログ説明文の重要性について

誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …

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

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

1
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

Photo credit : instagram, muradosmann
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …