「オッス!オラ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

関連記事

検索しても対策が見つからない!WordPressのバグ忘備録 panic by nate steiner, on Flickr

検索しても対策が見つからない!見出し、行間のWordPressバグ忘備録

    2014/02/28追記: こんな記事を書

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr

「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

本日はサイトの名刺『ファビコン』に関しての記事です。 Favicons by Loozrb

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

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

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

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

記事を読む

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、エラーが出たので対処してみた件 「PageSpeed Insights」にて、AMP導入後の爆速さ!!!

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、本当に爆速になった件

AMPページサンプル 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト 本日は、サイ

記事を読む

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

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

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

記事を読む

スポンサードリンク

スポンサードリンク

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

スポンサードリンク

スポンサードリンク

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

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

  • くつキッチュ!SCRAPス アイコン 創作支援 カテゴリへ《創作支援》

    くつキッチュ!アイコン カテゴリwordpress全般へ 《WP関係》

    くつキッチュ!アイコン-copyright-著作権カテゴリへ  《著作権関係》

    くつキッチュ!アイコン小ネタ/物語用小ネタ カテゴリへ  《小ネタ/物語用小ネタ etc...》
    ※オンマウスでタイトルが表示されます。




『創作支援屋くつキッチュスクラップス!』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。