CSS – ページ 3 – MEMO GOLD ホームページ制作

ポストサムネイルの背景

top フューチャーコンテンツは
初期では背景が黒いので

さらにページ（プロフィール）の画像はでかくらりすぎないため余白ができるから
サイトカラーに合わせ

/*topフューチャーコンテンツ背景カラーサイトカラーに合わす*/
.featured-content-inner{
	background-color: #72DFB8;
	/*max-width:1600px;*/
}
/*ページのサムネイル余白背景カラーサイトカラーに合わす*/
.page .post-thumbnail{
	background-color: #72DFB8!important;
	
}

通常のサムネイルの背景はこちらで

 /*サムネイル　ホバー色替え*/ 
.post-thumbnail{ 
 background-color: #FFF!important;
 }

レスポンシブ　ギャラリーPhotospace Responsive

Photospace Responsive
http://thriveweb.com.au/the-lab/photospace-responsive/
http://wordpress.org/plugins/photospace-responsive/

http://blog.openmedialabo.net/5698

http://thriveweb.com.au/photospace-plugin-examples/horizontal-responsive-layout/
こいつでもレスポンシブになるらしいが
ちょっときょどうがおかしかったが参考cっs

やはりパーセンテージだね

.photospace {
position:relative;
margin-bottom: 20px !important;
min-height: 200px; /* space for loader */
}
.photospace,
.photospace .thumnail_col,
.photospace .gal_content,
.photospace .slideshow-container,
.photospace .slideshow span,
.photospace .slideshow a.advance-link,
.photospace .slideshow img{
width: 100% !important;
height: auto !important;
}
.photospace .slideshow span{
display: block !important;
}
.photospace .gal_content{
float: none !important;
}
.photospace .slideshow span{
position: relative !important; /* Keep the gallery height – Doesn’t work with synced transistions */
}
.photospace .loader{
width: 100px !important;
height: 100px !important;
top: 50% !important;
left: 50% !important;
margin-left: -50px;
}
.photospace .thumbs_wrap2{
min-height:45px; /* space for thumbnails */
overflow: hidden;
}
.photospace .thumbs{
min-height:40px;
}
.photospace .thumbs_wrap{
float: left;
left: 50%;
position: relative;
}
.photospace .pageLink.next{
margin-right:0;
}
.photospace .thumnail_col {
float: left;
left: -50%;
width:auto !important;
position: relative;
}
.photospace ul.thumbs {
float:left;
}
.photospace span.image-caption{
position: inherit !important;
}

中村jp改造覚え

まずcssで改造

スタイルに追加

 /*サイドと上色替え*/
.site:before,.site-header{
	background-color: #72DFB8!important;	
	}
 /*アドミンバー色替え*/	
.search-toggle,#wpadminbar{
 background-color: #FFA70A!important;
 
 }
 /*サムネイル　ホバー色替え*/ 
.post-thumbnail{ 
 background-color: #B2B440!important;
 }
 /*サムネイル　401までマージン*/
 @media screen and (min-width: 401px) {
 .entry-header .post-thumbnail{margin-bottom:10px;}
 }

 
/*サイドメニュー　ヘッダーメニューのカレントカラー*/	
.site-navigation .current_page_item > a, .site-navigation .current_page_ancestor > a, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a {
	color: #FFA70A!important;
	}
/*サイドメニュー　ヘッダーメニューのホバー上記かれんとよりあとに*/	
	 .site-navigation a:hover {
 	background-color: #FFA70A!important;
	color: #FFFFFF!important;
}

/*シングル 他Pageのぞく　ポストサムネイルをエントリーヘッダーに入れたからマージンはいらない*/
.single.full-width.singular .site-content .hentry.has-post-thumbnail,
.full-width .site-content .has-post-thumbnail .entry-header

{
	margin-top: 0px!important;
	
}

3188行目あたり　

多分.has-post-thumbnailけした

.list-view .site-content .hentry {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		padding-top: 48px;
	}


.list-view .site-content .hentry:first-of-type,
	/*.list-view .site-content .hentry.has-post-thumbnail*/ 
	/*サムネイル有りも線いるし　一個目はいらない*/
	.list-view .site-content .hentry.has-post-thumbnail:first-of-type{
		border-top: 0;
		padding-top: 0;
	}

ウチヤマのギャラリーにて　いいねボタンが裏に　z-index

iframe  {
	z-index: 1000!important;
}

こうしたらなおりました。

点滅CSS

/*点滅スクリプトと同時使用*/
@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.1;/*透明度80%*/
 }
}

#d_sidenavi_in ul.side_main_navi li a:hover {
	-webkit-animation-name: pulse;/* 実行する名前 */
	-webkit-animation-duration: 0.1s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count: 3;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function: ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */}

プロフィールのいらんのを消す　css3 カスタムアドミン２

@charset "utf-8";

#profile-page h3,
#profile-page table:nth-of-type(1) tr:nth-child(1),
#profile-page table:nth-of-type(1) tr:nth-child(2),
#profile-page table:nth-of-type(1) tr:nth-child(3),
#profile-page table:nth-of-type(1) tr:nth-child(4),
#profile-page table:nth-of-type(1) tr:nth-child(5),
#profile-page table:nth-of-type(2) tr:nth-child(2),
#profile-page table:nth-of-type(2) tr:nth-child(3),
#profile-page table:nth-of-type(2) tr:nth-child(4),
#profile-page table:nth-of-type(2) tr:nth-child(5),

#profile-page table:nth-of-type(3) tr:nth-child(2),
#profile-page table:nth-of-type(3) tr:nth-child(3),
#profile-page table:nth-of-type(3) tr:nth-child(4),
#profile-page table:nth-of-type(3) tr:nth-child(5),
#profile-page table:nth-of-type(4) tr:nth-child(1),
#footer-ozh-oam,#footer-upgrade
{
    display: none;
}

ブログ部分お客さん　カスタマイズ

まとめます。12/19 2013

まずこちらが意図して使って欲しい
サイズ・位置・リンクタイプのデフォルトを設定できる

http://example.jp/wp-admin/options.php

の様なページで
image_default_align : none
image_default_link_type　: file
image_default_size : medium

設定保存

サムネイルサイズ増やす。
選べるように
simple image sizesのプラグイン

設定▶メディア▶Add anew size
サイズを入れ　名前を入れ　CROPが切り抜き強制　Show in post inserting チェックで　ポストに反映される。

大体600px位がコンテンツ幅だから
パンパンサイズを
XL 600 600
L 580 580
デフォルト　大 480 480
ミディアム　320 320

などにする。

まずフロートなしで画像が改行するように設定
blog.css(見える側　editor-style.css（管理画面　書く時

img.alignnone {
	display: block;
	clear: both;
	padding-top: 7px;
	padding-bottom: 7px;
}

あとは画像　フロートの設定

/*画像後改行 中央は含めず ついで上下パディング*/

.alignnone,.alignleft,.alignright,.aligncenter{
	display: block;
	clear: both;/*なしの自動改行*/
	padding-top: 7px;
	padding-bottom: 7px;
}


/*画像　中央　左　右*/
.aligncenter {
	float: none;
	margin-right: auto;
	margin-left: auto;	
}

.alignleft {
	margin-right: 10px;
	float: left;
}

.alignright {
	margin-left: 10px;
	float: right;
}
	
/*ここまで*/

こいつを管理画面　ブログ画面両方のCSSへ

ついでに他のやつも
エディターCSSへ

body{
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, Helvetica, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, "MS, Osaka", "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

/*Pを改行と同じに　ついで文字サイズ指定*/
p{
	margin: 0px;
	padding: 0px;
	line-height: 28px;
	font-size: 16px;

}

ブログの幅と投稿画面の幅を揃えます。

アスタムアドミンへ
フルスクリーンも整えます。

/*ブログの幅と投稿画面の幅 30px多く*/
#post-body{
	width: 680px!important;
}
/*ブログの幅と投稿画面の幅 22px多く フルスクリーン用*/
#wp-fullscreen-wrap{
	width: 702px!important;
}

現状出てきた問題　ビジュアルエディターの項目　
ストロングはseoかけた場合ほそくするから　ブログコンテンツ用にcssつくる。
リストなど消すかmoreけすか　さらにとでた

段落　もh1とかいらね　t wもいらん

とりあえず　以上かな

TinyMCE Advancedで消す
Save Editor Scroll Position
投稿を保存した時、エディタのスクロールは一番上に移動してしまいます。このスクロールの位置をそのまま動かさないようにするプラグインです。
Parent Category Toggler
親勝てチェック

Admin Post Navigation
変小前後ろ

CSS3 角丸　光彩内側

-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius:5px;

 -webkit-box-shadow: inset 0 0 5px 0 #ddd; /* Safari, Chrome用 */
  -moz-box-shadow: inset 0 0 5px 0 #ddd; /* Firefox用 */
  box-shadow: inset 0 0 5px 0 #ddd; /* CSS3 */

/*角とり　上だけ*/

.kado_ue_img{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

border-top-left-radius: 10px;
border-top-right-radius: 10px;}

http://micomura.hatenablog.jp/entry/2012/02/08/225523
http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

カスタムアドミンcss2 管理者以外などに専用に読み込ませる


#menu-dashboard,#menu-pages,#menu-posts-shop_profiless,#oam_menu-dashboard{
	display: none;
}
#oam_menu-dashboard{
	display: none!important;
}
#profile-page h3,
#profile-page table:nth-of-type(1) tr:nth-child(1),
#profile-page table:nth-of-type(1) tr:nth-child(2),
#profile-page table:nth-of-type(1) tr:nth-child(3),
#profile-page table:nth-of-type(2) tr:nth-child(2),
#profile-page table:nth-of-type(2) tr:nth-child(3),
/*#profile-page table:nth-of-type(2) tr:nth-child(4),
#profile-page table:nth-of-type(2) tr:nth-child(5),*/
#profile-page table:nth-of-type(3) tr:nth-child(2),
#profile-page table:nth-of-type(4) tr:nth-child(1)
{
	display: none;
}

/*ノーマルダッシュボード
#menu-dashboard	ダッシュボード
#menu-posts	投稿
#menu-media	メディア
#menu-links	リンク
#menu-pages	固定ページ
#menu-comments	コメント
#menu-appearance	外観
#menu-plugins	プラグイン
#menu-users	ユーザー
#menu-tools	ツール
#menu-settings	設定
.wp-menu-separator	（区切り線）

ドロップダウンメニューの場合変わってくる
#oam_menu-dashboard

すべてにoam_がつくようだ


*/

ダッシュボードにオリジナルメニューを追加

//☆--オリジナルメニューを追加
function example_dashboard_widget_function() {
 echo '
  <div class="da d1"><a href="./post-new.php">投稿</a></div>
  <div class="da d1"><a href="./edit.php">投稿一覧</a></div>
 <div class="da d6"><a href="./admin.php?page=home/goldsource/www/temp/ecoroop/wp-content/themes/D/functions.php">マニュアル</a></div>
 ';
}
function example_add_dashboard_widgets() {
 wp_add_dashboard_widget('example_dashboard_widget', '更新', 'example_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );
//オリジナルメニューを追加--☆

//☆--オリジナルメニューを追加
function example_dashboard_widget_function() {
 echo '
  <div class="da d1"><a href="./post-new.php">新規 JC NEWS</a></div>
  <div class="da d1"><a href="edit.php?post_type=member_only">新規 ファイルアップロード</a></div>
 <div class="da d6"><a href="post-new.php?post_type=public_information">新規 公開情報</a></div>
 <div style="clear:both"></div>
 ';
}
function example_add_dashboard_widgets() {
 wp_add_dashboard_widget('example_dashboard_widget', '更新', 'example_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );
//オリジナルメニューを追加--☆

カスタムアドミンに

.da{
	float: left;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}


.da a{
	padding: 15px;
	background-color: #4091B4;
	color: #FFF;
	    -webkit-border-top-left-radius: 5px;  
    -webkit-border-top-right-radius: 5px;  
    -webkit-border-bottom-right-radius: 5px;  
    -webkit-border-bottom-left-radius: 5px;  
    -moz-border-radius-topleft: 5px;  
    -moz-border-radius-topright: 5px;  
    -moz-border-radius-bottomright: 5px;  
    -moz-border-radius-bottomleft: 5px;  
}

画像とテキスト　位置　合わせる　css

http://www.tagindex.com/stylesheet/img/vertical_align.html

画像に

style="vertical-align: middle;"

とかつける

img.example1 { vertical-align: baseline; }
img.example2 { vertical-align: top; }
img.example3 { vertical-align: middle; }
img.example4 { vertical-align: bottom; }
img.example5 { vertical-align: text-top; }
img.example6 { vertical-align: text-bottom; }
img.example7 { vertical-align: -30px; }
img.example8 { vertical-align: 200%; }

<p><img src="rainbow.jpg" alt="［写真］" class="example1"> baseline を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example2"> top を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example3"> middle を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example4"> bottom を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example5"> text-top を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example6"> text-bottom を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example7"> -30px を指定</p>

<p><img src="rainbow.jpg" alt="［写真］" class="example8"> 200% を指定</p>

フロートさせた画像にテキストを回り込ませない方法　すぐ忘れる

<img src="sample.img" class="float">
<p class="text">祇園精舎の鐘の声<br>
諸行無常の響きあり<br>
沙羅双樹の花の色<br>
盛者必衰の理をあらわす<br>
おごれる人も久しからず<br>
ただ春の世の夢のごとし<br>
たけき者も遂には滅びぬ<br>
偏に風の前の塵に同じ</p>

.float { float:left; }
.text { overflow:auto; zoom:1; }

ブログ画像最大化防止　css アンドロイドアプリ対策

アドバンス

.blog_con img{
	max-width: 300px;
	height: auto!important;
	width: auto!important;
}

カジュアル

.blog_con img{
	max-width: 300px;

}

IE8でCSS3

http://shouken56.net/blog/practice/web/2301/

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="js/respond.src.js"></script>
<!--[if lt IE 9]> 
<script src="js/html5shiv-printshiv.js"></script>//これはhtml5に対応させる
<![endif]-->

CSS3でとfanctionでユーザープロフィール画面を整理する

#profile-page h3,
#profile-page table:nth-of-type(1) tr:nth-child(1),
#profile-page table:nth-of-type(1) tr:nth-child(2),
#profile-page table:nth-of-type(1) tr:nth-child(3),
#profile-page table:nth-of-type(2) tr:nth-child(2),
#profile-page table:nth-of-type(2) tr:nth-child(3),
#profile-page table:nth-of-type(2) tr:nth-child(4),
#profile-page table:nth-of-type(2) tr:nth-child(5),
#profile-page table:nth-of-type(3) tr:nth-child(2),
#profile-page table:nth-of-type(4) tr:nth-child(1)
{
	display: none;
}

ファンクション

//プロフィール画面でビジュアルエディターのチェックボックスを隠す
function hide_richeditor_checkbox() {
    global $wp_rich_edit_exists;
    if ( ! current_user_can( 10 ) && defined( 'IS_PROFILE_PAGE' ) && IS_PROFILE_PAGE ) {
        $wp_rich_edit_exists = false;
    }
}
add_action( 'admin_head', 'hide_richeditor_checkbox' );


//ユーザープロフィールの「管理画面の配色」を削除
remove_filter( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );

//管理画面の配色を強制的に青
function admin_color_force_fresh() {
	return 'classic';
}
add_filter( 'get_user_option_admin_color', 'admin_color_force_fresh' );


//管理画面文字変更
add_filter('gettext', 'change_post_to_article');
add_filter('gettext_with_context', 'change_post_to_article');
add_filter('ngettext', 'change_post_to_article');
add_filter('ngettext_with_context', 'change_post_to_article');

function change_post_to_article($translated) {
    $translated = str_ireplace(
        'プロフィール',
        'パスワードの変更',
        $translated
    );
    return $translated;
}

//このcssでCSS3を使って項目見えなくする
//CSSで管理画面内のサイドメニューを非表示にする　権限指定
function custom_admin_styles(){
$current_user = wp_get_current_user(); //現在のユーザー情報を取得
        if(check_user_role($current_user,'shop_owner')){ //編集者（editor）かチェック
            echo '<link rel="stylesheet" type="text/css" href="' .get_bloginfo('template_directory'). '/custom-admin-css2.css" />';
        }
		if(check_user_role($current_user,'editor')){ //編集者（editor）かチェック
            echo '<link rel="stylesheet" type="text/css" href="' .get_bloginfo('template_directory'). '/custom-admin-css2.css" />';
        }
		
		
    }
    add_action('admin_print_styles', 'custom_admin_styles', 21);

    /*
     * ユーザーの権限をチェックする
     * @param $user ユーザーオブジェクト
     * @param $role ユーザー権限の文字列
     *      （administrator, editor, author, contributor, subscriber）
     */
    function check_user_role($user,$role){
        foreach($user->roles as $user_role){
            if($user_role === $role){
                return true;
            }
        }
        return false;
    }

http://qiita.com/koh-taka@github/items/79309c1f367f00c425d8

list タグ　最初と最後

http://stainless-note.tumblr.com/post/44410134726/css

「:first-child疑似クラス」と「:last-child疑似クラス」を使う。

斜め文字　帯　css3

	transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-moz-transform: rotate(35deg);
	-o-transform: rotate(35deg);

.top_d_label {
	/* 追記ここから */
	transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-moz-transform: rotate(35deg);
	-o-transform: rotate(35deg);
	/* 追記ここまで */
	

	width: 304px;
	display: block;
	text-align: center;
	width: 200px;
	font-size: 19px;
	color: rgba(255,0,0,0.6);
	background: rgba(255,255,255,0.6);
	position: absolute;
	z-index: 120;
	right: -44px;
	top: 28px;
	padding: 10px;
	font-weight: bold;
}

参考

マウスカーソルCSS cursor:pointer ;

cursor:pointer ;

背景透明

背景のみ　RGBで指定し　透明度
background: rgba(255,255,255,0.6);

全体　小要素から全部透明になる
opacity: 0.6;

点滅CSS3

http://shirasaka.tv/434

@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.1;/*透明度80%*/
 }
}


.d_navi_main_in ul li a:hover {
	-webkit-animation-name: pulse;/* 実行する名前 */
	-webkit-animation-duration: 0.1s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count: 3;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function: ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
	color: #FFF;
	background-color: #666;
	background-image: url(../img/body_backgr/body_background_dark30.png);
	background-repeat: repeat;
}

2025年5月
月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31