フォーム セレクト css プチまとめ

デフォルトのドロップダウンで結構な場合必要ない。

フォントサイズを変えたりブラウザの初期設定を変える場合
セレクトの
バックグラウンドや
ボーダーなどを変えるとスタイルが効く
CSS3のappearance noneと同じ?

問題はfirefoxの矢印がすごくださいやつになってしまうこと

この問題を解消するだけの為に
customSelect.jsを使う

<!--セレクトデザイン-->
<script src='/js/jquery.customSelect.js'></script>
 <script>
$(document).ready(function(){
	$('.searchform-input-wrapper select').customSelect();

});
</script>
/*ドロップダウンPC*//*+クラス カスタムセレクトjs用*/

.searchform-param select/*,.customSelect*/{
	border: 1px solid #ccc;
	padding: 5px;
	font-size: 13px;
	background: #fff;
	background-image: -webkit-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
	background-image: -moz-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
	background-image: linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;



 /* Webkit 
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#eee),
        to(#fff)
        );
     
/* Firefox 
    background: -moz-linear-gradient(
        top,
        #eee,
        #fff
        );
     
/* IE 
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
    zoom: 1;
}

*/



}

/*カスタムセレクトjs用
.searchform-input-wrapper{
	position: relative;
}

.customSelect:after{
	display: block;
	position: absolute;
	top: 5px;
	right: 10px;
	content: "▼";
	font-size: 12px;
	color: #999
	}

*/

コメントアウトした部分で

ドロップダウン矢印はアフターで実行


ドロップダウンのセレクトに
レラティブをかけると
ドロップダウンできないから
その外にレラティブして
アフターをアブソリュートする。

チェックボックスcss & :after説明

input[type="checkbox"] {
    border: 1px solid #aaaaaa;
    vertical-align: -8px;
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    width: 26px;
    height: 26px;
    /*Other Browser*/
    background: #e2e2e2;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #ffffff),
        color-stop(1.00, #e2e2e2)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #e2e2e2 100%
    );
}

input[type="checkbox"]:checked {
    /*Other Browser*/
    background: #99cc00;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #99cc00),
        color-stop(1.00, #87b400)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #99cc00 0%,
        #87b400 100%
    );
    border: 1px solid #336600;
}

input[type="checkbox"]:checked:before {
    position: absolute;
    left: 1px;
    top: 16px;
    display: block;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    content: "";
    width: 10px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: right center;
}

input[type="checkbox"]:checked:after {
    display: block;
    position: absolute;
    left: 9px;
    top: 16px;
    content: "";
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    width: 16px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(-53deg);
    -webkit-transform-origin: left center;
}
li {
  list-style: none;
}
li.sample1:before {
  content: "※";
  color: red;
}
li.sample2:after {
  content: "NEW";
  color: red;
  font-size: 80%;
  padding: 2px 5px;
  margin-left: 5px;
  border: solid 1px #ff0000;
}
<ul>
  <li>サンプル1</li>
  <li class="sample1">サンプル2</li>
  <li class="sample2">サンプル3</li>
</ul>

リスト1
※リスト2
リスト3new

contentプロパティが空の場合でも必ず記述して下さい。
contentプロパティは必要条件で、記述がないと動作しないので注意が必要です。

http://www.hp-stylelink.com/news/2013/11/20131113.php
参考

ie8に対する見解

オフィシャルがスクロールjsできなかった。ie8対応と書いてあるから
ワードプレス関連の相性か?不明

対応策
ie8以下のみに読み込ますもの
それ以外に読み込ます物をわける

ie8以下のみに読み込ますもの

<!--[if lt IE 9]> 
<script src="/js/html5shiv-printshiv.min.js"></script>
<script type="text/javascript" src="/js/selectivizr.js"></script>
<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>
<style type="text/css">
#go1,#go2,#go3,#go4,#go5,#go6,#go7{
	margin-top: -160px;
	padding-top: 160px;
}
</style>
<![endif]-->

それ以外

<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="/js/jquery.multirollover.js"></script>

<script>
	$(document).ready(function() {
		$('#head_rogo a').multirollover({
			crossfade	: true,
			suffix		: '_on',
			duration	: 300,

		});
	});
</script>

<script type="text/javascript" src="/js/jquery.page-scroller-309.js"></script>
<!--<![endif]-->

今回は8以下は
スクロールを

<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>

で対応し
アンカーをあえて空DIVを入れて
パディングとマイナスマージンで対応

こういう調整は空DIVの有用性ってあるねって思ったし!

結局ie8のセレクタは使用できなかった。

<script src="/js/html5shiv-printshiv.min.js"></script>
<script type="text/javascript" src="/js/selectivizr.js"></script>

こいつをいれる

しかし
デザイン的なcssのずれなどは治った。

どうしても何番目かを指定したい場合は
http://tasudesign.com/web-desing/nth-child/
http://www.gravity-works.jp/gravica/web/003862.html
これで対応してみよう。

:nth-of-type cssセレクタ おさらい

:nth-of-typeの使い方

.blog_box_all

section

div

.class titel

a

テキスト

/a
/div
/section
/div

のループだとすれば

2番目タイトルのカラーを変えたい場合

.blog_box_all section:nth-of-type(2) .blog_titel a {

		color: #F90!important;

}

こうすっべ

偶数を変えたい場合

.blog_box_all section:nth-of-type(2n) .blog_titel a {

		color: #F90!important;

}

奇数

.blog_box_all section:nth-of-type(2n+1) .blog_titel a {

		color: #F90!important;

}

(n) ・・・ n番目の要素に適用

(odd) ・・・ 奇数番目の要素に適用
(2n+1) ・・・ 奇数番目の要素に適用

(even) ・・・ 偶数番目の要素に適用
(2n) ・・・ 偶数番目の要素に適用

(3n) ・・・ 3,6,9,12…番目の要素に適用
(3n+1) ・・・ 1からはじめて+3ずつの番の要素,4,7,10…番目の要素に適用

自動ペナルティで検索圏外にぶっ飛んだサイトが回復してきました!【Googleペナルティを解除する方法】

http://afi-vison.com/%E8%87%AA%E5%8B%95%E3%83%9A%E3%83%8A%E3%83%AB%E3%83%86%E3%82%A3%E3%81%A7%E6%A4%9C%E7%B4%A2%E5%9C%8F%E5%A4%96%E3%81%AB%E3%81%B6%E3%81%A3%E9%A3%9B%E3%82%93%E3%81%A0%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C-1276.html

とはいえ、明らかにペナルティを受けた変動だったので問題箇所を改善できればまた戻ってくると思い、色々と試行錯誤をしてみました。

2014年4月収入報告でも書きましたが以下が考えられました。

strongタグの多様
薄い記事(500文字前後)の放置
構造化エラー
不自然な被リンク
画像にアフィエイトリンク
内部リンクの不足
1.strongタグの多様について
WordPressは「Ctrl+B」で太字になりますが、これは強調を意味しており、乱用するとスパム扱いされる可能性があります。マナさんの「strongタグとリンクの使い方を最適化し、SIRIUSシリウスSEO力アップ」の記事で解説されています。太字を使いたい時は「b」タグかCSSでを使ったほうがいいようです。strongだらけだったので100記事あるブログをひたすら修正しました。しかし、回復はしてきませんでした。

2.薄い記事の放置
外注さんとは800文字前後で記事を書いてもらっていましたが、最低でも500文字はほしいと言っていたところ、ある納品のときほとんどが500文字ちょっと超えたくらいの記事が20記事ほど上がってきていました。

「次からは800文字以上でお願いします。」ということで了承してもらったのですが、この500文字の記事もまあいいかという気持ちで全てアップさせていました。この記事自体検索ではあまりヒットせず、アクセスもなかったのでサイトの価値を下げていたのかもしれません。これが原因かなと思い、500文字の記事は削除し、1000文字以上の記事を入れるようにしましたが・・・回復はしませんでした。

ちなみにブログの文字数は1200文字以上はほしいところです。詳しくは「Google AdSenseで稼ぐコツ・方法2 ブログ記事の文字数は何文字以上にすべきか」を参考にしてください。

3.構造化エラー
ウェブマスターツールに登録すると構造化エラーが出ていました。「WordPressユーザー要注意!〜構造化データのエラーでアクセス激減?」の記事を参照ください。

よくわからないのですが、どうも使っているテーマ「stinger」ではよく発生するエラーのようです。このエラーは上記サイトを参考に修正しました。現在も発生していますが、徐々に減少していっています。ですが、これもペナルティの原因ではないようです。

4.不自然な被リンク
通常不自然なリンクでペナルティを受ける場合はウェブマスターツールで警告が来るようです。私のブログは警告が来ていなかったので関係はないと思います。実際、このサイトからリンクを送っていたのと、無料ブログから数本送っていただけでしたので問題ないと思います。ですが、念のため無料ブログからのリンクは削除し、このサイトからも「no follow」を付けました。

5.画像にアフィリエイトリンク
よくアクセスのある記事は歯に関する記事でしたのでここに電動歯ブラシや歯磨き粉のアフィリエイトリンクを張りました。見栄えをよくするためにASPで用意されているバナーではなく、実際の画像をコピーしてきてそこにアフィリエイトリンクを張りました。(リンクを改ざんする行為で場合によってはASPからペナルティを受けるので今後は控えますが)これがちょっと広告感出しすぎだったかなと思い、画像リンクを削除しました。ですが、効果はありませんでした。

6.内部リンクの不足
とにかく直帰率の多いブログでした。というのも1記事1テーマ完結の記事内容が多かったため他の記事を見る必要がなかったようです。「SEOの内部対策の教科書 |SEO初心者がまずすべき内部対策とは」でも紹介していますが、記事に内部リンクを増やすことがSEOにとって有効のようです。直帰率を下げることになりますし、ユーザーにとても有益です。

内部対策SEOを勉強したい方はこの本がおすすめです。内部リンクがなかったからといってペナルティにはなりませんが、今後も改善させていきたいと思います。

とまあ、以上を試してみましたが、いっこうアクセスが回復することはありませんでした。1ヶ月程度で回復するかと思っていましたが、甘かったですね。ほぼ諦めて次のサイトの作成に時間を充てることにしました。ですが、時々気になって何かしら修正したりしていました。そんなある日、ウェブマスターツールで「重複データ」のエラーが多く出ていることに気づきました。

重複データ

何故こんなに重複していたのかといいますと、パーマリンクの変更が原因だと思います。外観テーマ「stinger」を使う前に別のテーマを使っており、投稿の日本語タイトルをURLにしていました。しかし「stinger」では日本語のURLを受け付けず自動で数字に変換してしまうため記事のURLが変わってしまっていたようです。Googleでは変更前の日本語のURLがキャッシュされており、変更後の英数字のURLが重複データであると認識し、エラーになっていたようです。

重複データもアクセスにはほぼ影響がないという話でしたが、治せるものは治そうと思い、修正しました。具体的にはリダイレクションをして、変更前の日本語URLから変更後の英数字URLへ飛ばすようにしました。WordPressのリダイレクションのプラグインでは「Redirection」が有名ですが、なぜか私のサーバーではうまく機能せず、諦めかけていたのですが、「Simple 301 Redirects」というプラグインがあり、試してみるとうまくいきました。

手動で100記事をコツコツ直し、経過を待ちました。

すぐには反映されなかったのですが、ある日ウェブマスターツールをのぞいてみると重複データがなくなっており、「おお!遂に改善された」と思いました。数日後、アクセスを見てみると、少し回復。いつもはbingからしかアクセスがないのですがこの日はyahooやGoogleからもアクセスがありました。

そして遂に・・・・・・

ブログ回復

回復!!いや・・・ちょっとやけど!!

タイトルで検索してもちゃんと出てきますし、自分の中ではかなり回復したと思っています。4月から回復まで約3ヶ月かかりましたね。もとのアクセスに戻るまではもう少しかかりそうですが、記事を増やしたりなどして今後も大事に育てたいと思います。

そもそもなぜアクセスが増えていったのか

なかには役立つ記事ももちろんありましたが、500文字の記事等もあり、正直なぜアクセスが増えていったのかよくわかっていませんでした。

記事を量産したから増えたのか?そんな単純にアクセスが増えるのであれば誰も苦労しませんし、薄い大量の記事があふれているスパムサイトがもっと反映しているはずです。

実は自然な被リンクをもらえていたからだと思います。

SEOチェキのリンクチェックでは全く被リンクゼロだったのですが、ウェブマスターツールの「サイトへのリンク」を見ると、無料ブログ、内部リンクも含めて被リンクを見ることができます。

被リンク

見てみると、自分でやった無料ブログやはてぶの他にもリンクがされています。リンクを辿ってみると主に「まとめブログ」系(例えば脚ダイエット特集とか)からのリンクが張られていました。うれしいことですね。1記事1テーマなのでそのテーマをまとめているニッチなサイトには引っかかりやすい内容だったのかもしれません。1記事1テーマだとリンクをもらいやすいかもしれませんね。

被リンクをもらうとサイトの価値が上がり、アクセスは増えますが、一方で500文字程度の薄い記事もあるのでペナルティを受けたのかもしれません。でもその場合も警告メールが来ると思いますが。とはいえ、今後も被リンクをもらい、アクセスを増やしていきたいですね。

自動ペナルティを解除する方法 まとめ

タイミングとしては重複データを改善させたことによる回復でしたが、実際のところどれが原因であったかははっきりしていません。とにかくできることは何でもしてみるのが良いでしょう。

自動ペナルティを受けたら以下の項目をチェックしてみてください。

strongタグは多用していないか
薄い記事(500文字前後)は残っていないか
構造化エラーは起きていないか
不自然な被リンクはしていないか
画像にアフィエイトリンクはしていないか
内部リンクの不足はないか
重複データエラーは出ていないか
以上、アクセスがもとに戻るまで回復したらまた追記したいと思います。

では、少しでもお役に立てれば幸いです。

アーカイブをnoindexすべきか問題

アーカイブをnoindexすべきか問題

http://notnil-creative.com/blog/archives/2675

WordPressのアーカイブに<meta name="robots" content="noindex">タグをつけるべきかどうか?という話題がありまして、こちらの記事に巻き込まれています。

【改訂版】重複コンテンツ問題まとめ~ややTogetter風~|ウェブシュフ

ざっくり言うと「アーカイブが重複コンテンツ(Duplicate Content)とみなされるとGoogleの順位が落ちるから、アーカイブはあらかじめ検索インデックスに含まれないようにすべき」という話かと思うのですが、全くナンセンスだと思います。ここからはおでさんの記事と同じようなことを書いてますが

サイトに重複するコンテンツが存在しても、偽装や検索エンジンの結果を操作する意図がうかがえない限り、そのサイトに対する処置の理由にはなりません。
- 重複するコンテンツ – ウェブマスターツールヘルプ
ということですので。さらに

Google は、固有の情報を持つページをインデックスに登録して表示するよう努めています。たとえば、サイトの各記事に「通常」バージョンと「印刷用」バージョンがあり、両方とも noindex メタ タグでブロックされていない場合、フィルタリングによってどちらか 1 つが登録されます。
- 重複するコンテンツ – ウェブマスターツールヘルプ
コンテンツが重複してて noindex が入ってなかったとしても、よろしくやっとくよ。ということですね。

ごくまれなケースとして、Google でのランキングの操作やユーザーへの偽装を意図した重複コンテンツが表示される可能性が認識された場合も、Google では関係するサイトのインデックス登録とランキングに対して適切な調整を行います。その場合、該当するサイトはランキングが低下するか、Google インデックスから完全に削除されて検索結果に表示されなくなる可能性があります。
- 重複するコンテンツ – ウェブマスターツールヘルプ
通常のサイトではあり得ないごくまれなケース(In the rare cases)ではあるが、偽装を意図して重複コンテンツを作っている人がいますので、そういう悪い子は検索結果から削除するよ。ということですね。

重複するコンテンツに関して事前に対処し、ユーザーに意図したとおりのコンテンツが表示されるようにするための手順を以下に示します。
- 重複するコンテンツ – ウェブマスターツールヘルプ
Googleは重複コンテンツがあってもどれを検索結果に出すべきかちゃんと判断するけど、自動なので自分の意図通りじゃないものが検索結果に出る可能性がある。そう言う場合は事前にGoogleに知らせる方法があるよ。ということですね。



 
 

これ以上なにか疑問があるかしら、というくらい明確な文章ですが、似たような質問に動画でも答えています。



「robots.txtを使って自分で重複コンテンツ対策することは推奨しない。全てクロールしたうえで、サイトの構造を解析して、どのURLを検索結果に表示するか判断したいからね。」

結論としてはGoogle神の祟りを畏れてnoindexを入れなくても全然問題ないし、でも検索結果に不本意なURLが出ていたら対策することもできるよ。と言うことだと思います。Twitterで @web_shufu さんに教えてもらったんですが(Thanks!)、Webmaster Centralのフォーラムでも同様の回答がありました。

- If you have a lot of tag-pages and feel that they aren’t providing a great user-experience, you could use a “noindex” meta tag on them. That would allow us to crawl through them, while avoiding them being shown in the search results.
- Webmaster Central Forum
もしたくさんのタグページがあって、それらが良いユーザーエクスペリエンスを提供していないと感じる場合は、noindexメタタグを使用してもやむを得ないだろう。それらが検索結果に表示されなくはなるが、我々は依然クロールすることはできるからね。

ということですね。”you could use” なのでだいぶ弱い表現です。ユーザーエクスペリエンスを損なうと感じるならば、noindex使うのも仕方ないけど、robots.txtで拒否するのはやめてね。って感じですね。

Googleの姿勢として全体的に、ユーザーが検索エンジンに何を求めているのか、オマエラより俺らの方が分かってるんだから任せておけ、というニュアンスを感じます。それはそれで過去の歴史上そうでもなかっただろという気がしなくもないですが。

ここまでの情報を集めて、ふとこの記事を思い出しました。

【WordPressカテゴリーページのSEO】meta name=”robots”をindexにする前にやるべき8つのこと|ウェブシュフ

低品質なアーカイブはnoindexした方がいいんじゃないの、という記事ですね。確かに、今回この記事に”noindex”というタグ(metaタグじゃなくて、WordPressのタグ機能のことですよ)をつけますが、このブログに”noindex”タグがついた記事は今のところこの1件ですので、”noindex”タグのアーカイブはユーザーが見ても何の意味も無いページだと思います。一方、WordPressという検索語でユーザーが当ブログにアクセスした時、どのURLが最もWordPressというキーワードに合致しているかと言うとWordPressタグのアーカイブだと思います。個々の記事がもっとも役に立つWordPress記事かどうかなんて判断できませんので、アーカイブから見てもらうのが一番いいと思います。

つまり、タグアーカイブもぼくはインデックスしてほしいし、でも件数が少ないタグアーカイブはそうでもないな。ということです。で、作ってみました。記事数が2件以下、つまりまだ1件しか記事がないタグアーカイブにnoindexを出力するプラグインです。すでに有効化済みです。

サイトのコンテンツや構造によっては件数を調整したいかもしれませんので、そのときは $number 変数を調整してください。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<?php
/*
Plugin Name: No-indexing newborn tag archives
*/
 
function my_archives_noindexing() {
    global $wp_query;
    $number = 2; // Print noindex tag if the tag archive has posts less than this number
    if (is_tag() && (int) $wp_query->found_posts < $number) {
        echo '<!-- This tag archive does not have much content. -->';
        echo '<meta name="robots" content="noindex,follow">';
    }
}
add_action( 'wp_head', 'my_archives_noindexing' );
最後の判断基準は「ユーザーエクスペリエンス」これを忘れないようにしたいものです。

こちらからは以上です。

meta name=”robots”の使い方

<meta name="robots">の使い方

http://www.seo-matome.jp/index-control/meta-robots/

<meta name="robots">は<head>内に記述することで検索エンジンにさまざまな指示を与えることができるタグです。大きく分けると、以下のような用途があります。
該当ページのインデックス拒否
該当ページのキャッシュ拒否
該当ページからリンク(PageRank)評価を受け渡すことの拒否
有力ディレクトリ登録文をスニペット(SERPsの説明文)に流用することの拒否
該当ページのインデックス拒否
以下のように記述することで、そのページのインデックスを拒否することができます。 
※このページで記述しているサンプルは全てHTML4.01もしくはHTML5用のものです。サイトのコードがXHTMLの場合は末尾の「>」直前に半角スペースと「/」を追加してください。
<meta name="robots" content="noindex">
該当ページのキャッシュ拒否
以下のように記述することで、そのページのキャッシュを拒否することができます。ECショップや会員制のサイトでよく使用されます。また、Internet Archiveのようなサービスにキャッシュを取得されたくない場合などに設定すると良いでしょう。
<meta name="robots" content="noarchive">
該当ページからリンク(PageRank)評価を受け渡すことの拒否
以下のように記述することで、そのページからのリンクを全て評価の対象としないようクローラーに指示することができます。リンクに関しては全て「rel="nofollow"」が記述された状態になるようなものです。
<meta name="robots" content="nofollow">
有力ディレクトリ登録文をスニペット(SERPsの説明文)に流用することの拒否
GoogleであればDmoz、Yahoo!Japanであればヤフーカテゴリーといった提携ディレクトリ登録サービスから、SERPs(検索結果)<の説明文に文章を引用してくることがあります。それを拒否するための記述です。
Dmoz引用拒否
<meta name="robots" content="noodp">
ヤフーカテゴリー引用拒否
<meta name="robots" content="noydir">
※2010年のYahoo!JapanによるGoogleアルゴリズム採用以降、ヤフーカテゴリーから説明文が引用されることはほとんどなくなりました。
全ての記述は一行にまとめることができる
例えば、以下のように記述することも可能です。(「noindex」である以上後半二つにあまり意味はありませんが。)
<meta name="robots" content="noindex,nofollow,noarchive,noodp,noydir">
「許可」も記述できるが、デフォルトなので省略すべき
noindex,nofollowに関しては「許可する」といった意味合いの記述も可能です。
<meta name="robots" content="index,follow">
もしくは、
<meta name="robots" content="all">
が、これらはデフォルトで「許可」された状態ですので記述する必要はありません。DOCTYPE宣言・<head>内のHTMLソースコードでもお伝えしていますが、無駄な記述は極力避けてシンプルなソースコードを目指しましょう。

4番目のマージンをなくす :nth-of-type(4n+3) :nth-child(4n+4)

2015.10.27追記
2個ずつの段 指定するdivをおやdivで囲む  親をしっかり指定して、

/*フロート解除 親をしっかり指定する*/
.gallery1_img_box_all  > .gallery1_img_box:nth-child(2n+1){clear: left;}

少し解釈に困惑

4番目のboxのマージンをなくすためには
:nth-of-type(4n+3)

と記した。

これで効く解釈
4nは1 5 9 13番目に効く
それに3足すから

:nth-child(4n+4)
と記せば普通にいけた

4番目から4プラスしてく

サイドバーのまとめ

//サイドバー
register_sidebars(5, array('before_widget' => '<div>',
	'after_widget' => '</div>'));

ファンクションに書く

<?php $args = array(
	'name'          => sprintf(__('Sidebar %d'), $i ),
	'id'            => 'sidebar-$i',
	'description'   => ''
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' ); ?>

デフォルトが上

スパンクラスで文章の最後に注目をつける時の 下へずれないCSS

<span class="now">今だけ!3,000円 9月末まで</span>
.now{
	font-size: 12px;
	color: #FFF;
	background-color: #F00;
	line-height: 22px;
	display: inline-block;
	position: absolute;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	margin-top: 2px;
}

ポイントは
display: inline-block;
position: absolute;
margin-top: 2px;
こうすると上から表示されマージンが効くので調整

プラグイン相性

jquery.page-scroller.js

WP jQuery Lightbox 駄目

jquery.page-scroller.jsバージョンアップ
d-mark3

 <!--wpjライトボックス用rel-->
<a rel="lightbox[roadtrip]" href="
<?php //イメージFULL URLを取得
$attachment_id = $field['jirei_gazou_sab'];
$sample_photo = wp_get_attachment_image_src($attachment_id, "full");
print $sample_photo[0]; 
?>
">

抜粋 the_excerpt の[…] を変える


//echo mb_substr(get_the_excerpt(),0, 240);の...を変える
function new_excerpt_more($more) {
	return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');



//抜粋文字数指定 マルチバイトパッチ必要
function change_excerpt_mblength($length) {
return 111;
}
add_filter('excerpt_mblength', 'change_excerpt_mblength');



unction.phpに以下のコードを追加しますと、「続きを読む」などのリンクに変更

function new_excerpt_more($post) {
    return '<a href="'. get_permalink($post->ID) . '">' . '...続きを読む' . '</a>';    
}    
add_filter('excerpt_more', 'new_excerpt_more');


オリジナル
//抜粋カスタマイズ
function new_excerpt_more($post) {
    return '...<div class="blog_more"><a href="'. get_permalink($post->ID) . '">' . '続きを読む▶▶' . '</a></div>';    
}    
add_filter('excerpt_more', 'new_excerpt_more');

自社紹介のみ様をとる

タクソノミー
1.
<?php
echo $term->name; ?><?php if(is_tax('client') and !is_tax('client','d-marking-design')): echo ' 様';  endif; ?>
 制作実績

2.
<?php if(is_tax('client','d-marking-design')):  ?>
<?php elseif(is_tax('client') and !is_tax('client','d-marking-design')):  //ここのandはなくてもよい?>
<div style="margin-top:15px; text-align:center; font-size:15px;"><i class="icon-coffee"></i>
クライアント様のご紹介</div>

<?php else: ?>
<div style="margin-top:15px; text-align:center; font-size:15px;"><i class="icon-coffee"></i>
ご紹介できる制作物の一部をご紹介いたします。</div>
 <?php endif; ?> 


シングル

<div class="jirei_disp_title">クライアント名:</div><div class="jirei_disp_con"><?php echo get_the_term_list($post->ID, 'client'); ?> <?php if(! is_object_in_term($post->ID, 'client','76') ): echo '様'; endif;?></div>

マックの調子

現象
・マウスの調子がおかしい
・突然クラッシュする
・外付けhddがおかしい

考えられる項目
・外付けssd起動だから?
・外付けSSDがUSB3.0のバスパワーで電源を食ってるから
隣のUSBハブ(本体)に影響を及ぼしている?
・SSD自体が壊れそう?
・マックがおかしい?
・マウスがおかしい?

結果
・メモリが1つおかしかった。
起動時Dを押す ハードウエアテスト(システム診断)をやってくれる
そのときにメモリエラー WEBでわかった
【4MEM/9/40000000~】というエラー

1つメモリ シリコンパワーの永久保証 で着払いで交換送付

・USB3.0ハブがおかしかった
前科もので最近接続が不安定で交換してもらったのに
そいつに差してたから外付けHDDがおかしかった

直指しで対応 返品対応してくれた。

・マウスの問題が1番苦労した。
結果imacの背面に直差ししてはいけない事が判明。
分厚いマウスパッドから外すと上手く動いたり、
不安定・不規則につっかえる感じになっていた。
もしやと思い古いusb2.0ハブを出して全面に出したら
スムーズに動いた。

■その他やった項目

☆起動時コマンドオプションPRで解放
起動ディスク戻る

☆起動時シフトでセーフモード
これでディスク修復も出来るらしいよ

☆アクセス権の修復
ホスター使えなくなる
ssd/etc/hostsのパミーションeveryoneを読み/書きに 757?

☆ディスク検証

☆メモリテストRember
問題無し

☆ssdテスト
外付け対応S.M.A.R.T. for USB and FireWire Drives
SATSMARTDriver-0.9-Debug.dmg

SMARTReporter
SSDテスト健康診断

速度チェック
Blackmagic Disk Speed Test

TOPフラッグマニュアル

<?php
$now_year = date("Y"); // 現在の年を取得
$now_month = date("n"); // 在の月を取得
$now_day = date("j"); // 現在の日を取得
// 曜日の配列作成
$weekday = array( "日", "月", "火", "水", "木", "金", "土" );
// 1日の曜日を数値で取得
$fir_weekday = date( "w", mktime( 0, 0, 0, $now_month, 1, $now_year ) );
 
echo '<table border="1" cellspacing="0" cellpadding="0" style="text-align:center;">';
// 見出し部分<caption>タグ出力
echo "<caption style=\"color:black; font-size:14px; padding:0px;\">"
 .$now_year."年".$now_month."月のカレンダー
 </caption>\n";
 
echo "<tr>\n";
 
// 曜日セル<th>タグ設定
$i = 0; // カウント値リセット
while( $i <= 6 ){ // 曜日分ループ
 
//-------------スタイルシート設定---------------------------------
    if( $i == 0 ){ // 日曜日の文字色
        $style = "#C30";
    }
    else if( $i == 6 ){ // 土曜日の文字色
        $style = "#03C";
    }
    else{ // 月曜~金曜日の文字色
        $style = "black";
    }
//-------------スタイルシート設定終わり---------------------------
 
    // <th>タグにスタイルシートを挿入して出力
    echo "\t<th style=\"color:".$style."\">".$weekday[$i]."</th>\n";
    $i ++; //カウント値+1
}
 
// 行の変更
echo "</tr>\n";
echo "<tr>\n";
 
$i = 0; //カウント値リセット(曜日カウンター)
while( $i != $fir_weekday ){ //1日の曜日まで空白(&nbsp;)で埋める
    echo "\t<td>&nbsp;</td>\n";
    $i ++;
}
 
// 今月の日付が存在している間ループする
for( $day=1; checkdate( $now_month, $day, $now_year ); $day++ ){
 
    //曜日の最後まできたらカウント値(曜日カウンター)を戻して行を変える
    if( $i > 6 ){
        $i = 0;
        echo "</tr>\n";
        echo "<tr>\n";
    }
 
//-------------スタイルシート設定-----------------------------------
    if( $i == 0 ){ //日曜日の文字色
        $style = "#C30";
    }
    else if( $i == 6 ){ //土曜日の文字色
        $style = "#03C";
    }
    else{ //月曜~金曜日の文字色
        $style = "black";
    }
 
    // 今日の日付の場合、背景色追加
    if( $day == $now_day ){
        $style = $style."; background:silver";
    }
//-------------スタイルシート設定終わり-----------------------------
 
    // 日付セル作成とスタイルシートの挿入
    echo "\t<td style=\"color:".$style.";\">".$day."</td>\n";
 
    $i++; //カウント値(曜日カウンター)+1
}
 
while( $i < 7 ){ //残りの曜日分空白(&nbsp;)で埋める
    echo "\t<td>&nbsp;</td>\n";
    $i++;
}
echo "</tr>\n";
echo "</table>\n";
?>

カレンダーサンプルベース
http://php-beginner.com/sample/date_time/calendar2.html

test.php内の月に月を入れて
ソースで日にちの部分からtrまでコピーして貼って
後は木曜とか入れる

ロールオーバー画像js

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/jquery.multirollover.js"></script>

<script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
		$('#head_rogo a').multirollover({
			crossfade	: true,
			suffix		: '_on',
			duration	: 300,

		});
	});
// ]]></script>

もしくはaタグにクラスをつける。

</pre>
<div class="clearfix"><a href="<?php echo home_url(); ?>"><img class="hover" style="padding-top: 5px; padding-bottom: 15px;" alt="愛知県春日井市のホームページ制作|D-Marking Design|格安デザインサンプル" src="img/rogo.png" /></a></div>
<pre>

配置画像はそのままの名前 ホバー画像は_onをつける。

DL先
http://blog.three-co.jp/web/849/

multirollover-master