記事更新! ⇒⇒⇒ 「大流行!!Appleを騙るフィッシングメールに引っ掛かって個人情報を根こそぎ持ってかれた件」

「ストーク」⇒「SANGO」にテーマを変更した際のカスタマイズまとめ

こんにちは、ohnigiri(@ohnigiri7733)です。

僕のブログに足繁く通っている人はもうお気づきかと思いますが、

なんとテーマを「ストーク」から「SANGO」に変更しました。

しかし、いくらキレイなデザインといっても細かい所は自分流に仕上げたくなるのはブロガーのサガではなかろうか。

大した部分は変えてないんですが、なぜか1週間もかかってしまいました。。

僕のブログに足繁く通っている人は(2度目)、変化の過程を目の当たりにする事が出来たレアな方です。

そうでない方も、そして僕自身も、どこを変えたか既に分からなくなっているので、備忘録てきな感じでカスタマイズの履歴を記事にして残しておこうと思います。

 

 

「SANGO」カスタマイズした所の一覧

全体的な変更箇所

ロゴを変更

当ブログのある意味看板ともいえる、ロゴをまず変更しました。

ちなみになんと自作です。センスがないとかは言わない。しかし書いてくれる人もいないので、当分このまま続行せざるをえないのです。

 

色を変更

カスタマイズ一覧とはいうが、そこまで細部を書く必要はあるのかは謎。全体的にストークでの色使いを継承して、青色?エメラルドグリーン?をメインに変更しました。

 

見出しの変更

h2~h4を変更してます。これも基本的にはストーク時代の見出しを引き継いでいます。

 

フォントの変更

個人的にSANGOのデフォルトのフォントはあまり好みではないので、ストーク時代に使用していた游ゴシックというフォントを使用するようにしました。

フォント変更
/*フォント変更*/ body { font-family: "游ゴシック", YuGothic,"Hiragino Maru Gothic W4 JIS2004", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; }

 

Amazonjsの変更

SANGOに設定してあるh4の見出しが思いっきりAmazonjsにも反映されてしまっていたので、ちょっと頭の悪い方法かもですがこれで消しときました。

h4の下線を消す
/* amazonjs h4の下線を消す */ .amazonjs_item .amazonjs_info h4{ box-shadow: none; } .amazonjs_item .amazonjs_info h4:before{ display: none; } .amazonjs_item .amazonjs_info h4:after{ display: none; }

 

 

サイドバーの変更箇所

プロフィールを更新

「SANGO」には標準でプロフィールをキレイに表示してくれる機能がありますので、それを利用させてもらいました。

後ろの写真はあんまり良い写真がなかったので・・・とりあえずヤカンでも載せとこう。

 

現在のカテゴリーの人気記事を表示

プラグイン「WordPress Popular Posts」をベースにちょちょっとコードを書き加え、今見ている記事のカテゴリーに応じた人気記事を表示するようにしました。

あと地味に、ランキングの数字も表示するようにしてます。

 

カテゴリをボタンに変更

どうせならここもシャレオツにしてやろうと、1列に2項目表示するようなボタンに変更。

加えてFont Awesomeも使用して、頭にアイコンを表示させるようにしました。若干の親しみ度UP

カテゴリをボタンに変更
/* ボタン風カテゴリ一覧 */ .widget_nav_menu ul { list-style: none; } .widget_nav_menu li { display: inline-block; width: 48%; padding: 3px!important; border-bottom: none!important; text-align: center; } .widget_nav_menu ul a{ padding: 10px 5px!important; border-radius: 3px; background: お好きなカラーコード(ボタンの色); color: お好きなカラーコード(文字色); font-size: 14px; text-decoration: none; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,.13); transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s; } .widget_nav_menu ul a:hover{ background: お好きなカラーコード(マウスを乗せたときのボタンの色); color: お好きなカラーコード(マウスを乗せたときの文字色); transform: translate3d(0px, 2px, 0px); box-shadow: none; } .widget_nav_menu li a:after{ display: none; }

 

トップページの変更箇所

オススメ記事の表示

新着記事とは別に、僕が選んだオススメの記事を人気記事として2つ表示されるようにしています。

数は何個でも表示可能ですが、とりあえず控えめに2つにしてみました。

 

コンテンツ幅の拡大

気持ち的に少し幅が狭いかなーっと思ったので、少し幅を拡大しました。

また、記事内のサイドバーとトップページのサイドバーで幅が違って気持ち悪かったので、それも同じサイズに統一しました。

コンテンツ幅の拡大
@media only screen and (min-width: 1230px) { .wrap { width: 1200px; } .d-5of7 { width: 69%;/*メインコンテンツ幅(デフォルト69%)*/ } .d-2of7 { width: 30%;/*サイドバー幅(デフォルト31%)*/ } }

 

 

ohnigiri的まとめ

こうまとめてみると、1週間も時間かかったわりに大した変更点がなかったので、自分の技術力のなさに少し悲しくなりました。笑

前のテーマのストークも最初から完成されたデザインだなとは思っていたけど、今回のSANGOはそれ以上に完成されたテーマであるとカスタマイズを通して改めて実感しました。

あとやっぱり動作が軽い!これが一番の決め手だったかもしれないですね。

また内容に変更があったら随時追加していきます・・・。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。