ウェブデザインについて#5【画像加工】

タイトル画像の制作

ウェブデザインについての第5回です。

今回は、画像加工です。

はてなブログにおけるタイトル画像を制作しました。

一般的な画像加工です。

タイトル画像の制作

GIMP

画像加工のソフトは、フリーウェアのGIMPを使用しました。

www.gimp.org

Adobe社のPhotoshopにも引けを取らない、優れたソフトです。

これがフリーで使用できるのですから、大変ありがたいことです。

GIMP自体の使用方法については、様々なサイトで解説されていますのでここでは割愛させて頂きます。

PC・タブレット用タイトル画像の制作

サイズ

はてなブログにおけるPC用タイトル画像の推奨サイズは、W1000px H200pxとのことでしたので、そのサイズの画像を作成しました。

配色

注意点としては、ブログの背景の色とタイトル画像の背景の色を合わせる、もしくはタイトル画像の背景の色を透明にしたほうが境界が見えずにすっきりします。

ヘッダー部分だけの背景色を変更したかったのですが、それらしい設定が見つからなかったので、画像の背景色は本文部分と同じ背景色にしました。

ウェブサイト一般にいえることですが、色の使用は少なく抑えたほうがすっきりと見やすいデザインとなります。

配色の選択は「ColorZilla」などを使用し、使用色を抑えました。

フォント

フォントは、カッコいいと思ったのでAileronを使用しました。

dotcolon.net

設定

さらに、ヘッダー部分の余白は最小限にしました。

以下はタイトル画像の余白などの調整設定です。

/* タイトル画像調整 */
#blog-title {
padding-top: 0px; /* 画像上部の余白*/
padding-bottom: 0px; /* 画像下部の余白*/
height: initial;
}
.header-image-only #blog-title #blog-title-inner {
height: 200px; /* 画像の高さ */
background-size: contain;
}
@media (max-width: 480px) {
.header-image-only #blog-title #blog-title-inner {
height: 200px;/* 画像の高さ */
}
}

ヘッダー部分の余白をさらに小さくしたかったのですが、これ以上はできませんでした。

このコードを［デザイン ➡ カスタマイズ ➡ { }カスタマイズCSS］に追加します。

アップロード

画像のアップロードは［デザイン ➡ カスタマイズ ➡ ヘッダ ➡ 画像をアップロード］で行いました。

確認

PC・タブレットで表示の確認を行い、画像の修正・調整をしました。

スマートフォン用タイトル画像の制作

サイズ

はてなブログにおけるスマホ用タイトル画像の推奨サイズは、W480px H100pxとのことでしたので、そのサイズの画像を作成しました。

配色

PCやタブレットと違い、境界が見えるようなことはなかったので任意で背景色を設定しています。

スマホにおいて見やすい色使いが求められます。

フォント

フォントはPC・タブレット用と同じものを使用しました。

設定

以下はスマホ用の設定です。

#globalheader-container {
display: none;
}

.header-blog-icon {
display: none;
}

.footer-action-wrapper {
display: none;
}

.touch-item-list { display: none; }

#footer-menu {
display: none;
}

.footer {
display: none;
}

#blog-description {
display: none;
}

#container {
padding-top: 0px;/*上の余白を消去*/
}

#header {
width: 100%; /*横幅いっぱいに設定*/
padding-top: 30px; /*タイトル上部にスペースをつくる*/
padding-bottom: 15px; /*タイトル下部にスペースをつくる*/
margin: 0px; /*ヘッダーまわりの余白を消す*/
background: #072930; /*ヘッダーの背景色*/
}

</style>