Free!なランサー3

ふとした疑問やコアなお役立ち情報をお届けする情報サイト

wordpress無料テーマ「Gush」のカスタマイズ【補足】

   

wp logo gush このブログはElloraさんの作った 無料テーマ「Gush」を使用しています。 私は基本的に、カスタマイズ初心者なので「Gush」のカスタマイズを紹介しているブログを紹介したいと思います。

スポンサーリンク

このブログが参考にしたサイト

musicar musicarさんの無料WPテーマGushをカスタマイズする時に使える方法と注意点です。 神ブログです!このデザインを見たとき、心を打たれました。 Gushをカスタマイズするにあたって、かなり参考になるので覗いて見てください!   かなり詳しく丁寧にカスタマイズ方法を紹介しているのですが 初心者には少し解りずらいかな?? というところを、少し補足したいと思います。

ヘッダー画像のアップロードの仕方

解っている人には何て事ないのですが、恥ずかしながら初心者にはアップロードの方法すら困難です。 そこで、画像のアップロードの方法を少し紹介します。

FTPを使います。

FTPって知ってますか?私は知らなかったので、苦戦しました!! こちらに、wpxサーバーにFFFTPを接続する方法を解説しているので参考にしてみてください! wpxサーバーを使っていなくても、方法はほとんど同じなので参考にはなると思います。 ⇒wpxサーバーにFFFTPを接続する設定方法

imagesファイルの場所

FFFTPを使って接続できたら、ファイルを開きます!

1.wp-contentを開く

a1

2.themesを開く

a2

3.テーマであるGushを開く。子テーマを使用している場合はそちらを開いてください。

a3

4.1番上のimagesフォルダを開く。

a4   imagesフォルダ内にドラッグして画像を保存します。 これで、画像のアップロードは完了です。後は、musicarさんの手順通りに進めてください。

注意:すぐに、ページを開いてもヘッダー画像などは反映に時間がかかります。閲覧履歴の消去でキャッシュも消去すれば時間が短縮される場合もあります。

 

ヘッダー画像とロゴ画像は分けた方がいい!

最初、ヘッダー画像にブログタイトルとロゴマークを入れ込んでいたのですが 不足の自体発生!! レスポンシブデザイン対応のため、スマホ閲覧時ロゴが見切れてしましました。 それを防ぐために、ヘッダー画像とロゴ画像は分けましょう。

補足:レスポンシブデザインの確認方法はブラウザの幅を狭くすれば確認できます。

 

h2カスタマイズ

h2 カスタマイズ このように、カスタマイズするには下記のように、それぞれ変更してください。

#entry_body h2{
font-size: 20px;
text-align: left;
border-left: 5px solid #09AD8C; 左のラインの幅と色
background-color: #F0F0F0; →背景色
margin: 0 0 24px -10px;
padding: 3px 0 3px 10px;
}

768px 記事見出し
#entry_body h2{
font-size: 20px;
text-align: left;
border-left: 10px solid #09AD8C;
background-color: #F0F0F0;
margin: 0 0 24px -35px;
padding: 8px 0 8px 10px;
}

1024px 記事見出し
#entry_body h2{
font-size: 24px;
text-align:left;
border-left: 10px solid #09AD8C;
background-color: #F0F0F0;
margin: 0 0 24px -39px;
padding: 10px 0 10px 10px;
}

 

h3下線の色変更

h3 カスタマイズ h3の下線の色を好きな色に変更します。 #entry_body h3のborder-bottom: 2px solid?#09AD8C;を変更してください。

#entry_body h3{
font-size: 16px;
text-align:left;
border-bottom: 2px solid#09AD8C;→好きな色に変更
margin: 0 0 24px 0;
padding: 10px 0 5px 0;
}

768px、1024pxも同様に変更

フッターの色を変更する

フッター 色 変更 #footerのbackground-color :?#09AD8C;を好きな色に変更してください。

/*————————————– フッター ————————————–*/
#footer {
padding: 24px 0;
color: #fff;
text-align: center;
background-color : #09AD8C;→好きな色に変更
overflow: hidden;
}

 

ファビコンの変更

ファビコン ファビコンとはページのタグに表示されている小さい画像です。 1.ヘッダー画像同様、FFFTPでGushファイルを開く 2.imagesのfavicon画像を任意の画像にすり替える 3.ファイル名は元のfaviconにする 4.完了

補足画像サイズは16×16pxです。ファイルの種類は.icoに変換してください。先程も言いましたが、カスタマイズの際ページへの反映は時間がかかるので注意してください。

 

まとめ

初心者用に補足として、まとめてみました。あなたもGushを自分なりにカスタマイズしてみましょう!参考になったでしょうか? お役に立てたならシェアしてくれると嬉しいです。

 - Gushカスタマイズ

Comment

  1. […] wordpress無料テーマ「Gush」のカスタマイズ【補足】 […]

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  関連記事

wp ロゴ カスタマイズ
wordpressテーマ「Gush」をシンプルにカスタマイズする

そろそろ、ブログ(Gush)のカスタマイズが大体終わったので少しまとめたいと思い …

44
ヘッダーの背景画像を消す方法と他色々

なんやかんやでGushからGush2にテーマを変更することにしました。 やるから …

ヘッダー 広告
ヘッダーに新しくウィジェットを追加して728×90のAdSense広告を設定する方法

ヘッダーに新しくウィジェットを追加したいと思います。 コピペでできますが今回は7 …

error
テーマのデザインをカスタマイズ中にエラーでログイン出来なくなった時の対処法方

私はWPテーマGushを使っています。 カスタマイズの際、phpをいじっていざ更 …

メニューバー位置変更
メニューバーの位置を変更する方法

Gush2はメニューバーがタイトルの上に表示されているのでタイトルの下に移動させ …

wp ロゴ カスタマイズ
当ブログ「Gush」カスタマイズ記事が紹介されました。

スポンサーリンク 紹介してくださったブログ 100万円を1億にするブログさんで当 …

7
背景画像の前にもう一枚背景を追加する方法

どういう事?って感じですがタイトルのまんまです。 前回紹介した記事↓ ヘッダーの …

追跡
サイドメニューに追尾型広告、Standard Widget Extensionsを設定する方法

追尾型広告の効果は絶大です。しかしどのプラグインがいいのかわからない人は管理人も …