キャリコ

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

  関連記事

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

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

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

これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

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

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

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

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

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

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

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

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

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

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

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

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

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …