1more!

+1 Lifestyle Blog. Apple、ガジェット、旅 etc. 趣味を多方面に愉しむブログ。

【Ï】はてなブログのスマートフォン版ページのヘッダー色や背景色をカスタマイズする方法

スポンサーリンク

IMG_1161

どうも!Hayabusa(@hayabusa_823z)です。今回ははてなブログスマートフォンページのカスタマイズの話題です。

head要素のカスタマイズが可能に!

いままで、はてなブログスマートフォン版のカスタマイズといえば、記事下などににstyleタグを入れてCSSを記述したり、HTMLを記述するくらいでした。 先日、開発ブログから、head要素のカスタマイズが可能になったという記事を発見。

ブログのhead部分にmetaタグなどを自由に追加できるようにしました - はてなブログ開発ブログ

これにより、何ができるようになるかというと、記事の背景色、エントリー一覧のリンク色や影などの装飾、ヘッダーの背景色(初期設定で黒背景白文字部分)が変更できるようになったようです。 具体的な方法がよく分からなかったのですが、試行錯誤してみたところ設定画面のhead要素を追加の部分に、見出しのスタイルをスマートフォン版に設定した記事のように、styleタグで記述を入れて、そこにCSSを記述していけば良いみたいです。

では、さっそく試してみましょう。

※本記事では、iPhone 5sSafariにて表示確認を行っております。環境によっては正しく表示されない場合がありますので、あらかじめご了承ください。

ヘッダー色を変更する手順

1.まず、自分のブログの「設定」→「詳細設定」へと進み、headに要素を追加の欄に、以下の記述を行います。

<style>
#header{
background-color: #カラーコードを貼り付けます;
}
</style>

カラーコードはこちらのサイトを参考にコピーし、#カラーコードを貼り付けますの部分をすべて設定したい色のカラーコードに置き換えてください。

カラーコード表

4.スマートフォンからアクセスして、表示が正常に変更されていることを確認します。

IMG_1159

ページ背景色を変更する

この手順を行うと、記事本文の枠の外の色が変更できます。

先ほど上の項目で設定した、}の下に1行程度スペースを開け、以下の記述をコピー&ペーストします。

#body {
background-color:#カラーコードを貼り付けます;
}

記事一覧の文字色・装飾を変更する

以下の項目をさらに、上の項目と同じようにコピー&ペーストして追加します。

.entry-title {
color: #ここに記事一覧の文字色にしたいカラーコードを貼り付けます;
    font-weight: bold;
    text-shadow: 2px 2px 1px #999999;
}

※text-shadowの行は、影効果が必要ない場合は省略して構いません。

文字の装飾については以下のサイトを参考にさせて頂きました。

CSS3のtext-strokeとtext-shadowで文字の縁取り(アウトライン)を表現した時の違い | ゆるふわWebデベロッピング

2/2 文字に影を付け、画像に重ねた文字を見やすくするCSS3 [ホームページ作成] All About

あとがき

PC版のカスタマイズがある程度落ち着いてきたので、本日はスマートフォン版のカスタマイズに挑戦しました。 これで、スマートフォン版ページもより自分の好みにしていけそうですね。 それでは。