タイトル画像を描いてもらいました
プロフィール画像をクラウドワークスでコンペにかけ、描いていただいたことは以前お知らせしましたが、この度、ブログのタイトル画像も描いてもらいました！
既にご覧いただいているかと思いますが、一番上に表示されているこちらの画像です。
文字だけのタイトルなら、素人の私にも作れなくもないのですが、イラスト入りのデザインはプロの方にお願いすると、格段に綺麗になりますね。
担当してくださったのは、プロフィール画像に引き続き、イラストレーターの竹チズさんです。
竹チズさんは、本当に綺麗なイラストを描いてくださいますし、仕事の進め方も丁寧で、しかも早いので、素晴らしいイラストレーターさんです。
こんな素晴らしい方に出会えたのは、クラウドワークスのおかげですね。
右側の男性キャラは、プロフィール画像のキャラクターなんですが、新たにパソコンで作業しているポーズにしてくださいました。プロフィール画像ではメガネありで、タイトル画像ではメガネなしなので、見比べてみてください。
この女性キャラもかわいいですよね。
はてなブログの設定に戸惑う
ただ、このタイトル画像を導入するにあたって、はてなブログの仕様のためにちょっと苦労しました。念のため、それぞれの対応方法を記載しておきます。
余白を消す
普通にタイトル部分にアップロードするだけだと、余計な余白ができてしまうため、CSSに次のような記述を入れています。
#blog-title {
padding: 0 0 0 0;
}
タイトル画像の左右にグラデーションを
タイトル画像の左右が空白だと寂しかったので、次のようにCSSでグラデーションを設定しています。CSSだけでこんなに綺麗なグラデーションを設定できるんですね。
.header-image-only #blog-title{
background:linear-gradient(#59A5D6,#92DCE9);
}
レスポンシブ対応
これが一番面倒でしたが、次のような設定をしてタイトル画像が画面の幅に合わせて拡大縮小するようにし、レスポンシブ対応させています。heightを0にしてpadding-topでパーセント設定するとか、かなりの裏ワザです。
@media (max-width: 767px) {
.header-image-only #blog-title #blog-title-inner {
background-size: contain;
height: 0px;
padding-top:21.27659574%;
}
}
竹チズさんはこんなLINEスタンプも
さて、今回も素敵なタイトル画像を描いてくださった竹チズさんですが、下のようなLINEスタンプも販売されているようです。
幽霊のキャラクター、かわいすぎです。
【宣伝部長スーパーブーストモード！！】 LINEスタンプ【幽霊スタンプ（女性）】 https://t.co/Zslz7bpkLZ #LINEスタンプ宣伝部長 pic.twitter.com/ttShHKngIY
— LINEスタンプ宣伝部長 (@line_intr) 2016年5月25日
これからもよろしくお願いします
ということで、おかげさまで本当に素敵なブログを作ることができました。イラストを描いてくださった竹チズさんのおかげでもあり、このブログを読んでくださっている皆さんのおかげでもあります。
デザインだけでなくコンテンツも充実させていければと思いますので、引き続きどうぞよろしくお願いします！！
