Yuji Yamabata

地域と都道府県を配列で管理して、ループで繰り返してあげるだけでも、だいぶコードが短くできると思います。
たとえばこんな感じになるかと。（動作は未確認ですので、デバッグしてくださいませ）

<?php
$listPref =array(
	"01" => array( "tag" => "hokkaido", "name" => "北海道",
			"pref" => array(
				"0101" => "北海道"
			)
		),
	"02" => array( "tag" => "touhoku", "name" => "東北",
			"pref" => array(
				"0201" => "青森", "0202" => "岩手"
			)
		),
		//以下、地方と都道府県の配列
);

foreach( $listPref as $area ) {
	?><div class="area"><img src="<?php bloginfo('template_url'); ?>/images/shop/tab_<?php echo $area["tag"]; ?>.gif" width="580" height="30" alt="<?php echo $area["name"]; ?>" /></div><?php
	foreach( $area["pref"] as $presid => $prefname ) {
		//各都道府県の情報を取得
		$posts = get_posts(array(
			'numberposts' => 10,
			'post_type' => 'shop',
			'orderby' => 'meta_value',
			'meta_key' => 'pref',
			'order' => 'ASC',
			'post_status' => 'publish',
			'meta_query' => array(
				array(
					'key' => 'pref',
					'value' => $presid,  //都道府県ごとのIDが入る
				)
			)
		));

		if($posts){
			//各都道府県の情報を出力する
			echo '<div class="pref">' . $prefname . '</div>';
			foreach($posts as $post){
				//情報出力処理
			}
		}
	}
}
?>

thisislightsさん

スタイルシートを修正して、中央に寄せることができます。
marginとpaddingのleftを取ればOKです。

style.css 350行目
.single h1 {
    font-size: 23px;
    font-weight: normal;
    margin-bottom: 15px;
    /* margin-left: 160px; コメントアウト */
    margin-top: 15px;
}

style.css 393行目
.single .article p {
    margin-bottom: 15px;
    /* margin-left: 160px; コメントアウト */
}

style.css416行目
.single .article .postmetadata {
    float: none;
    padding-bottom: 15px;
    /* padding-left: 160px; コメントアウト */
    width: auto;
}