iPhoneでも見やすい公式テーマの改造してみた件

iPhoneでも見やすい公式テーマの改造してみた件Shift++βscreenshot_54

3.5になって、何がどう変わったのか判りにくいんだけど
新規でRCらへんから試してみてたら、画像投稿とかでフィールド名が変わってたり
多分、新規インストだと投稿画像の専用フォルダとか勝手に作ってくれる?

動作そのものは変わってないし、前から使ってる分には微妙な改変なんだろうと

ごちゃごちゃしてたのを整理したかったのと、スマホとかタブレットでも見やすいテーマって事で
公式テーマの改造に着手してみたんだが…

結構、大変というか、TwentyTenはスッキリしてたんだけど
Elevenから、フレキシブルというか、流行の何でも見やすく対応になってて
pxからem明示してたりとか、Width指定というか限定サイズ指定してたりとか
相当、むずかった…

screenshot_55

何故か、ボトムのマージンがなくせなかったんだけど、トップはなくせたんで良しとしておいた

それとGoogle Adsenseの表示をシンプルなのにして、トップでは2つのみ
サイドバーはGoogle Adsenseとamazonのガジェットだけにして
それもスクロールしないと見えない位置まで下げておいて、さり気ない風に(笑)

まぁ、検索エンジンからだとシングルポストに飛んでるんで、あんまり意味ないんだけど

/*
 Name: 12 Child
Author: cow-g
Template: twentytwelve
*/
 
@import url('../twentytwelve/style.');


/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #e6e6e6;
	}

	body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 0;/**48px;
		margin-top: 3.428571429rem;**/
		margin-bottom: 0;/**48px;
		margin-bottom: 3.428571429rem;**/
		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	}
	body.custom-background-empty {
		background-color: #fff;
	}
	body.custom-background-empty .site,
	body.custom-background-white .site {
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		box-shadow: none;
	}
}
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	/* Add fancy borders to all -added images but not things like badges and icons and the like */
/*	border-radius: 3px; */
/*	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); */
	border-radius: none;
	box-shadow: none;
}

/* =Print
----------------------------------------------- */
.entry-header .entry-title {
/*	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;	*/
	border-bottom: 2px double;
}
#gbinfo {
	display:inline;
}
#searchform, #searchform div {
	display:inline;
	float:right;
	}
.widget-title {
	font-size: 16px
	}

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 24px;/**48px;
	margin-bottom: 3.428571429rem;**/
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 12px;/**24px;
	margin-bottom: 1.714285714rem;**/
}

/*------- popular post plus -------*/
.widget_recent_entries li {
    clear: both;
    margin: 5px 0;
}

.widget_recent_entries .wp-post-image {
    float: left;
    margin: 0 5px 0 0;
}

子テーマのおまじない

マージンの削除…コメント・アウト

投稿画像のドロップシャドウは辞めて、WLWのドロップシャドウ活かし前提
これもコメント・アウトと、none指定でナシにする

ポストのヘッダのボーダーを追加

GoogleAdsenseのdiv指定とサーチフォーム用のdiv指定を新たに追加
※content.phpとhead.phpも弄った(基本、要らんとこを削除=コメントアウト)

サイドバーの間隔をせばめた(マージンボトムの数値を変更=48px→24px)
サイドバー・ウィジットのヘッダのマージンボトムも半分にした(24px→12px)

後は、プラグインの追加CSS(popular post plus用)
なんだけど、サムネイル表示できないんで、意味なし…

いずれは、JavaScriptとやらでタブ・メニューでまとめたいかな、と…

てか、テーマを変えたり、編集する度にサイドバー・ウィジットを切り貼りして
中身を弄くって、ってのが面倒なんで、まとめて保存、復帰ってのが出来るといいんだけど
サムネイル表示には手こずって、人気記事の方も出せてたんだけど、何だか…

すきっとCSSだけ弄くれば何とかなるというレベルではなくなってる訳で
結局、弄った箇所は大したことないんだけど、結構、大変だったっていう話
よもや子テーマでphpも弄れるとは…試してみたら子テーマフォルダの方が活きてたんで
色々と試してみるのには助かったんだけど、いっそ、サイドバーとか固定しても良かったかも

まぁ、コンテンツありきって事で、アフィリエイト地獄に陥ってたのをクリア出来たし
iPhoneでもNexus7でも、すかっと見やすくなってたんで、良かったかなと

 

コメントを残す

メールアドレスが公開されることはありません。