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

関連記事

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

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

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

記事を読む

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

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

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

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

記事を読む

ワードプレスの不具合騒動、利用中のレンサバ統合されるってよ、など。 恐怖のエラー画面

「ワードプレスの不具合騒動(未解決)」と、「利用中のレンサバ統合されるってよ」など。

  サトウトシオのサイトがバグりました; ホラーなエラー!に驚いたる赤ちゃんのアイコ

記事を読む

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法 default_page画像

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法

 もくじ これまで無料サーバーのめちゃくちゃお手軽なインストールに頼りきりだったくつき

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

Image taken from page 113 of 'Lilliput Lyrics ... Edited by R. Brimley Johnson. Illustrated by Chas. Robinson' by The British Library, on Flickr googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』

2ステップでお手軽簡単な『GoogleWebフォント』を使ってみたよ!「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」

前から気になっていたWebフォントを使ってみました♪ Image taken from

記事を読む

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

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

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

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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