webtips

まず、元からある、ギャラリー用CSSを使わない設定をします。

function.php

//本体ギャラリーCSS停止
add_filter( 'use_default_gallery_style', '__return_false' );

CSS

/*-----------------------------
ギャラリー
------------------------------*/
.gallery {
}
.gallery-item {
 float: left;
 margin-top: 0;
 margin-bottom: 20px;
 margin-left: 0;
}
.gallery-icon {
 text-align: center;
}
.gallery-caption {
 color: #21759B;
 font-size: 90%;
 margin: 0;
 text-align: center;
}
.gallery-item img{
 width: 100%;
 padding: 0%;
 margin: 0%;
 float: left;
 height: auto;
}
.gallery-columns-1 .gallery-item {
 width: 100%;
 margin: 0%;
 box-sizing: border-box;
 float: left;
 height: auto;
}
.gallery-columns-2 .gallery-item {
 width: 48%;
 margin: 1%;
 float: left;
 height: auto;
}
.gallery-columns-3 .gallery-item {
 width: 32%;
 margin-left: 1%;
 float: left;
 height: auto;
}
.gallery-columns-4 .gallery-item {
 width: 23%;
 margin: 1%;
 float: left;
 height: auto;
}

a {
pointer-events: none;
}

autoで有効に。

li{
 display: inline-block;
}

これは便利！

対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降

.3col {
  width : calc(100% / 3) ;
}

幅100%の3分の1サイズ！

念のため、ベンダープレフィックスを

li.3col {
  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}

リストのスタイルを、最初または最後のみ別の値を適用させたいことってよくありますよね。

リストの始まり

li:first-child {
}

リストの終わり

li:last-child {
}

a:link{
 color: #555555;
 transition: 1.0s;
}

a:hover{
 color: #005489;
}

CSS transition のプロパティ

CSS Transitions は transition 短縮プロパティで制御されます。これはパラメータのリストの長さが一致せず、CSS のデバッグに長い時間がかかってしまうことを簡単に防げますので、トランジションの設定を行うのに最善の方法です。
transition プロパティの各構成要素は、以下のサブプロパティで制御することができます:

transition-property
トランジションを適用する CSS プロパティの名前を指定します。ここに指定したプロパティだけが、トランジションによりアニメーションします。通常、それ以外のプロパティの変更は即座に反映されます。

transition-duration
トランジションの実行にかける所要時間を指定します。単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用されます。または複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができます。

transition-timing-function
トランジションの中間状態におけるプロパティの値の計算方法を定義する、3 次ベジェ曲線を指定します。

transition-delay
プロパティの変更とトランジションの実行が開始されるまでの待ち時間を定義します。

---

引用：

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

body {
 animation: fadeIn 2s ease 0s 1 normal;
 -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

検索フォームを設置する時、いつも検索して調べたり、過去に制作したものを参考にしたりしているので。。。

テンプレートタグ

<?php get_search_form(); ?>

htmlとしては下記のように出力されます。

<form role="search" method="get" id="searchform" class="searchform" action="(サイトのURL)">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

これに合わせてスタイルシート設定すれば、思い通りの検索フォームの完成です。

当サイトの検索フォームはテンプレートタグは使わず、以下の通り

テーマファイル

 <div id="searchform_con">
 <form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>" >
 <input type="text" value="" name="s" class="s" />
 <input type="submit" class="searchsubmit" value="search" />
 </form>
 </div>

CSS

#searchform_con{
 width: 90%;
 height: auto;
 text-align: center;
 float: left;
 margin-left: 5%;
 margin-right: 5%;
 margin-bottom: 20px;
 background-color: #000000;
}

#searchform{
 width: 100%;
 height: auto;
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}

#searchform input[type="button"],
#searchform input[type="submit"] {
 background-color: #FFF798;
 background-image: -webkit-linear-gradient(270deg,rgba(255,247,152,1.00) 0%,rgba(255,247,152,1.00) 100%);
 background-image: linear-gradient(180deg,rgba(255,247,152,1.00) 0%,rgba(255,247,152,1.00) 100%);
 border: 1px solid #555555;
 padding-top: 5px;
 padding-right: 10px;
 padding-left: 10px;
 padding-bottom: 5px;
 font-size: 100%;
 color: #555555;
 cursor: pointer;
 width: 10%;
}

#searchform input[type="text"],
#searchform input[type="email"] {
 padding-top: 5px;
 padding-right: 15px;
 padding-left: 15px;
 padding-bottom: 5px;
 border: none;
 font-size: 120%;
 background-color: #FFFFFF;
 width: 30%;
}

#searchform input:link ,
#searchform input:active {
 background-color: #EFEFEF;
 border: none!important;
 -webkit-box-shadow: 0px 0px 0px 0 #F4F4F4!important;
 box-shadow: 0px 0px 0px 0 #F4F4F4!important;
}

#searchform input:hover {
 filter: alpha(opacity=80);
 -moz-opacity: 0.80;
 opacity: 0.80;
 transition: 1.0s;
}

#searchform a:focus, 
#searchform input:focus{
 outline:none;
}