こんにちは、ジュン@jun3010meです。
この度、当ブログのデザインを若干変更しました。
具体的に言うと、テーマをGush2に変更して、これまでの見た目を再現したんです。
今回は、どうカスタマイズしたのかを、記録の意味も含めて書いていきたいと思います。
(`・ω・´)
Gush2
Gush2とは、WordPressで使える無料テーマです。
カスタマイズしまくれ!WordPress無料テーマGush2公開
実はGushを使っていました
ここでは明かしませんでしたが、前まで使っていたテーマ、実は初代Gushでした。
2014年2月に、初代Gushが公開されたんですが、
1月くらいから、公開を待ってたんです。
当時僕が探していたテーマは、
ブロガーとして、自分色にカスタマイズし易く、
尚且つ、Stingerではないテーマでした。
何故Stingerを使わなかったのか
なんかやだ
(´・ω・`)
たったそれだけです笑
具体的に言うと、Stingerは本当に使いやすいテーマなんですが、
見た目がStingerなんですよね。
僕のブログを見られた時に、「あ、ブロガーがSEO狙いでStingerを使ってるぞ」とか思って欲しくないわけです。
だったらテーマを自分で作ればいいじゃない!
という考えも出たんですが、
それと同時に、初代Gushの存在を知ったので、
じゃあGushがいい!ってなりました。
Gush2で気になったこと
僕がGush2を見て、気になったことは、以下のことです。
- サムネイルが正方形
- サイドバーに336サイズのAdsenseが貼れない
- 背景の画像が邪魔
- 関連記事の画像の大きさがバラバラになる
- SNSボタンを押しやすくしたい
だいたいこんな感じです。
たったこれだけですが、見た目は結構大きく変わりました。
結果として、当ブログの見た目をそのままにして、
Gush2へ移行することができました。
では、順番に振り返っていきたいと思います。
作業内容
サムネイルのサイズ・比を変更する
Gush2だと、記事のサムネイルはアスペクト比が1:1で
サイズが150×150だったので、
iPhone横向きで撮影した写真が4:3なので、
それに合わせました。
home.php
the_post_thumbnail(array( 250,188 )
css
/*-------------------------------------- 768px コンテンツ --------------------------------------*/ #contents #main .home_area .thumb_box { float: left; margin: 0 10px 0 0; width: 250px; height: 188px; }
#contents #mainの余白を調整する
サムネイルの幅を変更したことで、余白に違和感があったので、
全体の幅を固定しつつ、余白を調整しました。
css
/*-------------------------------------- 1024px コンテンツ --------------------------------------*/ #contents #main { float: left; margin: 0 20px 0 0; max-width: 728px; padding: 20px 32px; border-radius: 0; }
marginの28を20に、paddingの62を32にしました。
/*-------------------------------------- 1024px サイド --------------------------------------*/ #contents #sub { float: left; margin: 0; width: 336px; text-align: left; padding: 0; }
これでサイドバーの幅を336まで引き延ばすことに成功しました。
背景画像を消す
背景画像はありがたい機能なんですが、
白ベースな当ブログでは不要だったので、削除していきました。
/* 全体に薄いグレーのテクスチャ */ body { }
これで、全体に設定されていた薄いグレーが消えました。
/* ヘッダーに濃いグレーのテクスチャ */ #header { }
これでヘッダーの濃いグレーが消えましたね。
関連記事の配置を揃える
iPhoneなどのスマホで関連記事を見ると、
関連記事一覧が縦に並ぶんですが、
NEWエントリーみたいにしっかり並んでくれないんですよね。
なので、せめて等間隔に並べました。
/*-------------------------------------- 記事下関連記事 --------------------------------------*/ #relations .rel-in .rel-in-thumb { float: left; margin: 0 10px 10px 0; width: 110px; height: 110px; }
これでそれとなく並びました。
できたら、NEWエントリーと同じ感じにサムネイルのサイズも揃えたいんですけどね。
今回はそこまでできませんでした。
SNSボタンを変更する
SNSボタンをスマホで押しやすくする為に、
変更することにしました。
sns.php
ここのサイトを参考に、置き換えました。
流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック
おわりに
うん、やっぱりGushはカスタマイズし易い構造なので、
いじっていてとても楽しかったです
(*´ω`*)
本当はこの編集内容を記事にしようか迷ったんですけどね、
Gush2公開の記事に触発されました。
先行お試しのメリットは、「Gush2 カスタマイズ」で上位表示が狙えることです!
へへ(*´∀`)
是非参考にしてください
ヽ(=´▽`=)ノ
こんな素敵なテーマを無料で公開してくださった
エローラさん(@uszero800)には本当に感謝してます!
ありがとうございました!