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

関連記事

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

動くファビコン、今ならアリ?

最近とんと見かけなくなった気がする動くファビコン… 今ならすごく目立つ気もしますが…実

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた "Select your web browser(s) by zipckr, on Flickr

ブラウザ表示チェック3大サービスを無料範囲内で試してみたよ♪

 各ブラウザによっての見え方を改めてテストしてみた Select your w

記事を読む

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像

WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

なんだか最近Wordpressの画像編集機能が微妙です。 3.9に更新してからというも

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

もくじ Laser engraved RSS icon by Book Wor

記事を読む

326/365 - plug in. by Bryan Rosengrant, on Flickr Some rights reserved

Q:ワードプレスの記事内にSoundCloudの音楽を埋め込むには? A:【WPプラグイン】は不要です!

タイトル通りです。今はURLだけで埋め込み完了です。  326/365 - pl

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 その上「サイトの状況が赤点です」とGoogle様にも怒られました(/_;) アイキャッチ画像 IconDesign by くつきちよこ

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み

    Upload出来ない(/_;) ファイルの

記事を読む

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

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

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

記事を読む

WordPress 4.3の更新でやらかした話 WP-Banがバグってサイトが真っ白に( × △ × )【解決済み】ようこそWordPress4.3

WordPress 4.3の更新でやらかした話 サイトが真っ白( × △ × )【更新時のプラグイン停止をお忘れなく!】

  『ユーキャン』で資料請求しました。※住所部分など、加工しています   W

記事を読む

Message

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

Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場