キャリコ

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 の記事一覧に対してリンクのクリック範囲を広げる方法

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

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

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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