Free!なランサー3

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

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

   

wp logo gush

そろそろ、ブログ(Gush)のカスタマイズが大体終わったので少しまとめたいと思います。今回はシンプルをテーマにカスタマイズしてみました。

大掛かりなカスタマイズはしていませんが、参考になれば幸いです。特に初心者向けの優しいカスタマイズに仕上がっています。

スポンサーリンク

 Gushカスタマイズ

タイトルロゴ

タイトル

ブログの顔でもあるヘッダー部分をシンプルにする事でブログ全体のイメージをスッキリさせます。タイトルはフォントのみにしてみました。ペイントソフトでタイトルを作成して画像に置き換えています。

参考になる記事↓

Gush – カスタマイズ備忘録〈その一〉 ~シンプルな構造で初心者でもカスタマイズしやすいWordPressテーマ(しかも無料!)~

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

GIMPに新しいフォントを追加する方法

GIMPでブログのタイトルを格好良く作る方法~反射編~

 

ナビゲーションメニューの色を変更する

ナビゲーションメニュー

あえて思いっきり黒にする事で存在感を持たせました。

場所はナビゲーション部分です。

background-color: #101010;←好きな色に変更。

 

壁紙

壁紙を変えることでブログ全体のイメージを簡単に変える事ができます。しかし、センスも問われるので意外と難しいかも・・・

今回は無地で質感のある壁紙にしました。

YATのブログさんで無料壁紙をダウンロードできるサイトを紹介しています↓

和紙のテクスチャやパターン113種類。商用OKのフリー素材。

 

ヘッダーにSNSボタン設置

したかったのですが・・・できなかったので一旦諦めました・・・

いずれ設置したいと考え中です。解るかたアドバイスください!

最終的にできない場合はプロフィール欄にオリジナルのSNSボタンを設置します。

 

記事タイトル(h1)の横に画像を設置する

h1 画像

記事見出し部分です。

サイズは60×54px

画像の部分をアップロードした名前をに変更します。

画像はFTPでアップロードしてください。

こちらの記事で詳しく解説しています↓

wpxサーバーにFFFTPを接続する設定方法

 

h2を下線のみにする

h2今回は下線のみにしました。

記事見出し部分です。

↓こちらなら、cssが解らなくても、簡単にオリジナルを作る事ができます。

Web道

スタイルシート見出しメーカー

 

サイドバーのタイトルをカスタマイズ

サイドバータイトル

サイド部分です。

ちなみに、タイトルの左にアイコンを付けたいのですが、うまくいかず、現在調整中なので出来たら追加します。

私はこのように設定しています。↓

↓こちらなら、cssが解らなくても、簡単にオリジナルを作る事ができます。

Web道

スタイルシート見出しメーカー

 

サイドバーに枠線を付ける

実は一旦変更しましたが違和感があったので元に戻しました。

WPカスタマイズ備忘録さんで詳しく解説しています。

サイドバーに枠を付ける方法

 

サイドバーに追尾型広告を設置する

Gushの生みの親ElloraさんのブログNaifixで当ブログが紹介されました。本当にありがたい事です。

サイドバーの追尾は効果があるの?みんなは何を置いているのか調べてみた

プラグインなので簡単にできるので初心者にもオススメです。

こちらで詳しく解説しています↓

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

 

サイド広告のサイズを変更

思い切って、サイドのAdSense広告のサイズを大きくしてみました(300×600)。クリック率はむしろ若干下がりましが・・・・広告を大きくした理由としては、一般的なブログは300×250、336×280のサイズがほとんどなのでデザインや印象を少し変えて他ブログとの差別化を意識してみました。

 

切り替え式の記事を表示する

切り替え2

一つのスペースで、人気記事と新着記事を切り替え式で表示できるので気に入っています!もちろんプラグインなので設置が簡単です。少しページが重くなったのが気になるところ・・・

こちらの記事で詳しく解説↓しているのでどうぞ。

サイドメニューの記事を切り替え式で表示できるwordpressプラグイン

 

プロフィールを作ってみた

プロフ3

プロフィールを作成してみました。

意外とみなさん見るんですね。自分を知ってもらう、アピールするうえでプロフィールは効果的です。私は写真を載せるのが恥ずかしかったので、似顔絵を自分で書いたのですが意外とうまくできたのでビックです!(かなり似てます)

こちらは無料で作れます↓

四角い顔アイコンジェネレータ

Create a new Mangatar

 

PAGE TOP↑の色を変更する

トップに戻る

ブログのデザインに合わせて色を変更してみました。

場所はスタイルシートのTopへ戻るです。

#page-top aのbackground: #B03434; 背景色

#page-top aのcolor: #fff; 文字色

#page-top a:hoverのbackground: #CB6565; カーソルを乗せた時の背景色

#page-top a:hoverのcolor: #444; カーソルを乗せた時の文字色

 

フッターにグラデーションをかける

フッター グラデーション

意外とコピペで簡単にできるのでやってみました。

Naifixさんで詳しく解説しています。

素人でもブログをちょっとだけオシャレにできるデザインテクニック

コードを作成してスタイルシートのフッター部分に貼り付けるだけです。

一応私の使っているコードを貼っておきます。

background部分をコピペしたら当ブログのようなデザインになります。

 

まとめ

以上が今回私が行ったカスタマイズです。

なんだか、まとめ?紹介記事?っぽくなってしまいましたが・・・

まだまだデザインに違和感があるのでぼちぼちカスタマイズしていく予定です。出来たらまた記事にします。

PS、ちなみにGush2.0が出るそうです!お楽しみに!

 - 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 ロゴ カスタマイズ
当ブログ「Gush」カスタマイズ記事が紹介されました。

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

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

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

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

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

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

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

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

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

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

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

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

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

wp ロゴ カスタマイズ
メニューバーの位置を少しだけ移動させる

見ての通り、当ブログはメニューバーの位置を少しだけずらしています。 Gushのメ …