みのねっとぶろぐ

■ スマホ対応

このブログをスマホ対応をしてみました。

と言っても、自分の機種で雰囲気が分かる程度ですけどね。

iPhoneや自分以外の機種でちゃんと見えてるかは不明w

以下、「ヘッダ、フッダ」「CSSの追加」で追加設定した内容。

・ヘッダ、フッダ

<% unless @conf.smartphone? %>
<div class="sidebar">
: : : : サイドメニューの記述
</div>
<% end %>

・CSSの追加

/*
 design for iPhone and other smart phones
 */
@media screen and (max-device-width: 480px) {
	body {
		background-position: left top;
	        margin-left: 0%
	}
	div.adminmenu {
		font-size: x-small;
		margin: 0px;
		width: 100%;
	}
	h1 {
		padding-top: 80px;
		height: 50px;
	}
	div.whole-content {
		width: 100%;
	}
	div.main {
         	margin: 0;
		width: 100%;
	}
	div.day {
		margin-right: 0px;
		width: 100%;
	}
	div.day h2 {
		background-color: transparent;
	}
	div.section h3 {
		margin-left: 0px;
		text-indent: 0px;
	}
	div.section img.left,
	div.section img.right,
	div.section img.photo {
		display: block;
		float: none;
		margin: 10px auto;
		max-width: 100% !important;
	}
	div.section img.amazon {
		max-width: 150px !important;
	}
	body.update h1 {
		background-image: none;
		height: auto;
		display: block;
		padding: 0px;
	}
	body.update div.autopagerize_page_element {
		width: 100%;
	}
	div.update {
		width: 100%;
	}
	textarea {
		font-size: 110%;
	}
}

スマホの方は、どうぞアクセスしてみてください