「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪

くつキッチュ!アイコン wordpress

本日は、『くつキッチュ/SCRAPス!』でもお世話になっておりますWordPressテーマ『STINGER』の検索フォームカスタマイズの記事になります。

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 Magnified Eye_5364c by hoyasmeg, on FlickrMagnified Eye_5364c by hoyasmeg, on Flickr

ああこれSTINGERだなとわかるブログの特徴

最近、ホットエントリーされる記事が「あれ?またSTINGER?」ということがよくありまして…さすがSEO強化テーマすごい威力だな~実感しております。

しかしその中で「オッス!オラSTINGER!!」という、見るからにSTINGER感満載のブログが結構な割合で見受けられます。

そういったブログが一番最初に「オッス!オラ…」=====(`◯´)ノ彡 と全力で挨拶してくるパーツベスト3はこちら。

  1. 検索フォーム
  2. SNSボックス
  3. ファビコン

上から順に声が元気な気がします。※くつき調べ。

特に1.の検索フォームは右上に表示されるので、結構な勢いで視界に飛び込んできて、「ああSTINGERなんだな…」と。

これSTINGERがまだここまで普及してなかった頃ならなんとも思わなかったと思うんですけどねー。

爆発的に流行り過ぎてしまったがゆえに目にする回数も異様に増えてしまい、その度に「ああこれまたSTI…(ry…」って気持ちになってしまったんだと思います。

元々カスタマイズ前提のシンプルなテーマですし、わかりやすくカスタマイズ指南をしてくれているブログも検索すると山ほどヒットします。

もし意図してデフォルトのデザインままにしているのでなければ、せっかくですからぜひこの機会に気になる箇所をカスタマイズしてみてはいかがでしょう?

というわけで、今回『くつキッチュ』ではまず、(個人的に)一番目につくデジャブパーツ『検索フォーム』のカスタマイズ方法についてご説明させて頂きます。

※カスタマイズ前に必ずバックアップを行ってください。

 

 

まずは色のカスタマイズ

子テーマの方は子テーマのstyle.cssを、子テーマを使用していない方は大本style.css(だいたい1011行目)で、検索フォームの背景色やテキストの色などを変更します。

/*-----------------------------
検索フォーム
-----------------------------*/
#container #wrap #wrap-in #search {
	padding-top: 20px;
	padding-bottom: 0px;
}
#s {
	width: 266px;
	height: 24px;
	border: none;
	color: #333;  // フォーム内テキストの色
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	background-color: #CCC;  // フォーム内背景色
	font-size: 14px;
	border-radius: 0;
}
#searchsubmit {
	position: absolute;
	top: 0;
	_top: 1px;
	left: 286px;
	border-radius: 0;
}
*:first-child + html #searchsubmit {
	top: 1px;
}
#container #wrap #wrap-in #side #search #searchform {
	position: relative;
}

フォームのテキストの色、背景色などはCSSにて適宜変更して下さい。

参考:colorsample.com

オッス!オラSTINGER…の検索ボックス!!編 あとちょろっとbtn素材配布♪のzipです。

くつキッチュ/SCRAPス!では、検索ボックスの色を

  • フォーム内テキストの色⇒#1c0a03
  • フォーム背景色の色⇒#ebf7eb

にしています。

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 くつキッチュの場合

ちなみに検索ボタンはこれ⇒ ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 btn2 にしているのですが、…

ボタン部分は画像ですので、CSSを書き換えても変更できません。

というわけで検索ボタンの変更方法なのですが、方法は2つあります。

 

 

1. FTPソフトに放り込んで上書き

WinSCP・FileZilla・FFFTPなどのアップロードソフトを使用し、searchsubmitボタンのあるディレクトリに画像を放り込んで上書きします。

◆ディレクトリ◆

ftp://*********/wp-content/themes/stinger3ver20131217/images/btn2.gif

FTPソフトで接続⇒wp-contentフォルダを開く⇒themesフォルダを開く⇒stinger3(任意のバージョン)フォルダを開く⇒imagesフォルダを開く⇒btn2.gifを放り込む。

1.FTPソフトでimageフォルダを開く。

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 ftp://*********/wp-content/themes/stinger/images/btn2.gif

2.先ほどようなボタン素材を用意し、元のファイル名と同じにします。
ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 btn2元の素材名がgreen_btn2.gifの場合⇒green_btn2.gifに変更。

そのファイルをimageフォルダに放り込む。

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 btn2.gifを( ´∀`)つ ミ

3.上書きをOKする
ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 btn2.gifを放り込んだら上書き

以上です。

◆FTPソフト参考◆

 

2. searchform.phpの画像URLを直接書き換え。

WordPress、メディアのアップロード等で画像をアップロード⇒編集を開きます。

メディアを編集にて画像のURLをコピーします。

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 カスタマイズ方法その2

サーチボタンの画像の指定は、searchform.phpの

<div id="search">
  <form method="get" id="searchform" action="<?php echo home_url(); ?>/">
    <label class="hidden" for="s">
      <?php _e('', 'kubrick'); ?>
    </label>
    <input type="text" value="<?php the_search_query(); ?>"  name="s" id="s" />
    <input type="image" src="<?php echo get_template_directory_uri(); ?>/images/btn2.gif" alt="検索" id="searchsubmit"  value="<?php _e('Search', 'kubrick'); ?>" />
  </form>
</div>

ボタンイメージは/images/btn2.gifの部分です。

これを先ほどコピーしたURLに書き換えます。

例えばくつきの場合は、

/images/btn2.gif http://92kitsch.com/wp-content/uploads/2014/03/btn2.gif

以上です。

 

 

まとめ

1.2.どっちが良いかというのは、慣れや好みもあるかと思いますし、子テーマを利用しているかどうかでも違ってくるかと思います。

やりやすいと思われる方でお試し下さい。

今回なるべく元のCSSや画像を変えないような形でのカスタマイズ方法でしたが、検索フォームの横幅など、詳細を変更したい方はこちら。

STINGER作者ENJIさん記事 WordPressの検索フォームボタンのデザインをカスタマイズする方法

を参考になさって下さい。

 

 

STINGER検索btn突発的素材配布の巻

素材ということで、姉妹サイトの『イチパン!』にするかこちらにするか迷ったのですが、「オッス!」のネタをS.Sから貰った時点で『くつキッチュ/SCRAPス!』での突発配布に決めました(笑)

ちなみに、以前色色 [:iroiro]というサービスのご紹介記事を書かせていただいたのですが、今回色の選択はこのサービスに丸投げしました(;´∀`))
 

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 btn2.gif なんかiroiro配布

テーマがバラついていてスミマセン;

色 [:iroiro]で入力して出したカラーをピックアップして作成致しました。

もし別のワードからのボタン作成のリクエストがありましたら、コメントもしくはツイッターにてお気軽にどうぞ♪

色の変更オンリーでしたら、先着10名様でお受けしますよ!

それと後先程も申し上げましたが、その1.の方法の場合はファイル名を全て「btn2.gif」に書き換えるのを忘れないで下さい。

例えば、冬のボタンの場合

winter_btn2.gif ⇒ winter_btn2.gif ⇒ btn2.gif

にしてから、アップロードして上書きして下さい。

あと、ファイル内や、webページ内でワードを検索するときは『Control+F』を使うと早いですよ。

  1. Control+Fを押下
  2. 検索窓が開く
  3. 検索窓に探したいワード(例えばbtn2.gifなど)を入力してEnter

お世話になりました。

◯WordPressテーマSTINGERでお世話になっておりますENJIさんのサイトENJILOG
◯今回配布の素材の色選択でお世話になりましたステキサービス色 [:iroiro]

あとちょろっとbtn素材のダウンロード♪

というわけで、20140304-stinger_btn_iroiro.zipは…

くつキッチュ/SCRAPス!アイコン くつき5 illustration by ss

この似顔絵のおだんごの中に潜む邪眼をクリックするとダウンロードが始まります。

※邪眼以外の部分をクリックしてもダウンロードは始まりませんのでご注意下さい。

「オッス!!」「オッス!!」「オッス!!」が「お越しやす~」になるといいですね♪

 

 

ステキテーマSTINGER…くつきにはまだまだ豚に真珠ですが、ブログの中身がテーマのステキ度に追いつくその日まで粘ります~~(笑)

でっは~(*´∀`*)ノシ

20140506追記:新テーマSTINGER LADYS用の検索ボタンはコチラ ⇒ オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました♪(あとちょろっとbtn素材配布)

 

 

くつキッチュ!SCRAPス アイコン ss-s YOU「お越しやす」って柄でもないでしょうが?

くつキッチュ!アイコン-sozai-ウェブ素材 気持ちです、気持ち!

くつキッチュ!SCRAPス アイコン ss-s ここんちは昨日から「じゃっがんっでおっ迎えうっれしい…………か~~い?(*▼▽▼*)ノ~~~~~~~~~ν ピシッ!」になりました。

くつキッチュ!アイコン-sozai-ウェブ素材 な、なんでムチ???;;;;

記事がお気に召しましたら投票していただけると嬉しいです♪

 
ブログランキング・にほんブログ村へ
にほんブログ村

 

 

くつキッチュ/SCRAPス!アイコン くつき2 illustration by ss いや~前からやろうやろうと思ってはいたのですが、h2崩れも約一ヶ月解決できなかったくつきには過ぎたことだと逡巡しておりました。

S.Sに相談したところ「それって自分なんかが配布したら『僭越ッ僭越ゥッ』ってこと?」と聞き返され、なんかどうでもよくなりました……(:D )┼─┤バタッ

ちなみに邪眼にzipダウンロードもS.S発案です。

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

マウスコンピュータのHDが壊れました illust by 3104o ©佐藤利音

ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!

26歳社畜之図 佐藤利音 on Twitter  ハイ、広告表示されてないですね?

記事を読む

html tattoo by webmove, on Flickr

ワードプレスの記事内でコード表示をするには?【WPプラグイン】

html tattoo by webmove, on Flickr もくじ ドキ!トラ

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

Girls skipping at an athletics carnival by Powerhouse Museum, on Flickr オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました

オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました♪(あとちょろっとbtn素材配布)

現在テーマの衣替え中につき、へんな角丸祭りになっていてすみません; Girls s

記事を読む

Photo by Flickr CJ'sフォトストリーム

Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

    Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪ WordPressブ

記事を読む

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune