はてぶのテーマを少しいじって開発部ブログのデザイン変更をしました

こんにちは&はじめまして。
営業とかデザインとか担当しています@zippo_mです。

インターファームには営業”部”という部署のようなものはないのですが、
営業チームにはワーケンとアオキングとジッポ(私)がいます。

3人でメシマズ.netを先月リリースしたのですが、
知らないところで非公式アプリができあがっていました(笑)


f:id:techinterfirm:20140731105501p:plain

詳細をアオキングが書いたので気になる方はこちら▶︎
リリースから約1ヵ月のWEBサービスが非公式でアプリ化されていた話【公式】 - メシマズブログ


ワーケンについてはこちら▶︎
メシマズドットネットを作って後悔した3つのこと - インターファーム開発部ブログ


それはさておき、本題。

リニューアルするコーポレートサイトのデザインと合わせて一足先に開発ブログのデザインを変更しました。

( コーポレートサイトは現在インターン生 @h0shim0 @ij_spitz あたりがつくってくれてます!)


◆前回 Report

f:id:techinterfirm:20140731110315p:plain

オフィシャルテーマ「Report」をつかっていました。
真っ白シンプルでいいんだけど、開発ブログもっと特徴だしたいね!ってことで
最近インターファームカラーとして決定した#55be9dをベースにデザイン変更をすることに。


◆今回 FLAT

f:id:techinterfirm:20140731110734p:plain

テーマストアから「FLAT」をインストールしました。
テーマカラーがシンプルに活かせるところが気に入りました。


色を変えたい場合

下記のコード内にある「#000000」を好きなカラーコードに変更し、デザインCSSの中に追記してください

FLATのテーマの説明でコピペするだけのとってもありがたいCSSの記述がありますので、
使いたい人は参照してください。


すべての色を#55be9dに書き換えました。


次にデザイン>ヘッダ>タイトル画像から背景画像を登録。

f:id:techinterfirm:20140731115527p:plain

タイトルの縦幅が長くなりいい感じになりました!

しかしここで

◆問題1 タイトル画像を登録するとテキストにシャドウがはいる

f:id:techinterfirm:20140731120309p:plain


上の画像登録前と比べてみてください。
テキストにシャドウがはいっちゃうんですよー!やだやだ>

CSSで解決1

.header-image-enable #blog-title #title a{text-shadow: none;}


f:id:techinterfirm:20140731120604p:plain


わーい!なおった



他のページでデザインが崩れているところはないか、確認してみます。
はっΣみつけました


◆問題2 ヘッダー背景が飛び出る

f:id:techinterfirm:20140731114158p:plain

記事の個別ページのヘッダー背景画像がしたにびょーんと飛び出ていました。
マンゴー(インターファームのロゴマークですよ、お米じゃないですよ)が途切れてしまってかっこ悪いです。


CSSで解決2

#blog-title-inner{padding-bottom: 24px;}


f:id:techinterfirm:20140731120947p:plain


ふー。これも30秒くらい(私が打つのが遅いので)でなおりました!



( @h3_poteto様にに解決の手助けをしてもらったのは内緒です。)



以上、デザイン変更ログでした。



メシマズ画像コンテストは今日が最終日(宣伝)
残念画像投稿して商品GETできますので駆け込み投稿お待ちしてます。

@zippo_mでした