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

関連記事

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

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

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

記事を読む

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その1『忍者レコメンド』

  rss by TEIA MG, on Flickr もくじ 《くつキッチュ/スクラ

記事を読む

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

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

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

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

記事を読む

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

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

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

もくじ Laser engraved RSS icon by Book Wor

記事を読む

マルチサイト化とかサーバーどうするかとかの雑談会 Money - Savings by 401(K) 2013, on Flickr

流行りに逆らってサーバーを選択した話

  サーバー選びのリアルな話 順調だったwpXクラウドのマルチサイト化(サブディレクトリ型)に影

記事を読む

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

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

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

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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