Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
          

【WordPress】SANGOを簡単カスタマイズ!おすすめデザインご紹介♪

SANGOユーザーのみなさん、こんにちは。
ブログ楽しんでますか^^
kou(@kou_souda)です。

なんとなんと嬉しいことに。
先日、アラカク」を運営する天才ムショクくん(@bGb_0)に当ブログのトップページを賞賛して頂きました(笑)

お陰様でフォローして下さるブロガーさんが増えましたヾ(*゚ω゚)人(*゚ω゚)ノシ

僕は今こそ記事作成に注力しているため、カスタマイズ等はあまりいじらないのですが…
確かに当ブログのテーマ、SANGOを導入した直後はカスタマイズに明け暮れる日々でした(笑)

その時の地道な作業が評価されて大変嬉しく思います◎

そこで今回は、SANGOユーザーの方のために、当ゆーちゅーぶろぐのトップページのようにするにはどうすればいいのか?
ということを具体的なコードを提示しながら解説していきたいと思います♪

重要は極めてなさそうですが(笑)
トップページのデザインの一例として参考にして頂ければ幸いです。

トップページはアニメーションを基調としたシンプルデザイン

そもそもSANGOというテーマ自体が、シンプル・軽量・爆速という三拍子が揃っているテーマなので、それを生かす為にあんまりゴリゴリのカスタマイズは止めようと思っていました。

だがしかし。
最高なテーマが故に…使ってる人多スギィィ!!笑
1万円以上するのに….皆お金持ってるよね絶対…

そう、SANGOユーザーが多すぎてブログの個性が出しづらいなとも思ったんです。

そこで、トップページくらい少し拘ろうかと考えた結果、アニメーションを基調としたシンプルデザインにすることに決めました♪
ページに少し動きがあるだけで印象的ですしね!

SANGO導入から半年近く経つというのに、実はまだプロフィールやLINEスタンプの販促ウェジット等をつけれておらず(笑)
100%完成!とは言えないのですが、現状こんな感じです。

特徴としては、

  • シンプルで分かりやすいメニュー(“CATEGORY”とか”NEW POSTS”とか)
  • 動くアニメーションのアイコン
  • カテゴリ部分のメニュー表示

ですかね。

一見すると、「コードとか書き換えてカスタマイズダルそう〜」と思われるかもしれませんが、ご安心ください。

ウェジットに以下で紹介するコードを貼り付け、配置を工夫するだけ!!
ステップ1だけ頑張って完了すればすぐに仕上がると思います♪

それでは順を追って説明していきます。

STEP.1 Font Awesome Animationを使えるようにする

Fontasesomeを使いこなせている方はこのステップを読み飛ばしてもらって結構ですが、アニメーションアイコンが未だ使える状態になっていない方は、
Fontasesomeのアニメーション機能を追加する為に以下の記事を参考にして行ってみてください。

記事中のコードをheader.phpに貼り付けるだけで完了します!

SANGOでアイコンのアニメーション機能を追加しよう!見出しや記事中にも使える!

STEP.2 「トップページ記事一覧上」ウェジット編集

STEP.1が完了したらあとはもう速攻です。

ワードプレスの管理画面の【外観】➡︎【ウェジット】を開きます。

「カスタムHTML」を「トップページ記事一覧上」に2つ追加します。
もちろん正解はありませんので、既存のウェジットを置いている場合はうまいこと融合させればおっけい◎

もちろんリンク先はカテゴリでなくてもOKなのですが、説明を分かりやすくする為に今回は、
当ブログのトップページと同様に、カテゴリ6つの場合でご説明します。

「カスタムHTML」を2つ追加できたら、上の方には以下のコードをコピペしてください。
タイトルは記入不要で大丈夫です。

このコードを貼り付けた後、赤線の部分はご自身の任意のものに変える必要があります。
“”や;などを消してしまわぬよう注意しながら行ってください◎

※メインカラー(僕でいうブルーの部分)をアクセントカラーに変更するには、上記のコード一番上のmain-bcの部分をaccent-bcに書き換えればOK。

faa-〇〇といったアニメーションのコードはこちら
fa fa-〇〇といったFontawesomeのアイコンコードはこちら(ver.4.7)
#から始まる色コードはこちら

をそれぞれ参考にして、コピペで上記のコードを仕上げていきます。

ウェジットを保存したら、1つ目のカスタムHTMLの編集は完了です!

そして2つ目のカスタムHTML。
僕はこんな感じのコードにしています。

 

 

1つ目のカスタムHTMLの時と同様にして、赤線部を好きなアイコン、アニメーション、タイトルに変更します。
保存して2つ目のカスタムHTMLも設定完了♪

このウェジットの下には記事一覧が来るので、「記事一覧」とか「新着記事」とか「NEW POSTS」とかがいいと思いますね◎

STEP.3 「サイドバー」ウェジット編集

感のいい方ならもうお分かりかとおもますが、僕のサイドバーのウェジットもこんな感じになっていて…

それぞれのカスタムHTMLのコードは先ほどのコードと型が全く一緒!

 

アイコン、アニメーション、タイトルの3つを変えているだけです。

サイドバーもほんの一例ですが、

人気記事
検索窓
広告(レクタングル大)
プロフィール

てな感じに並べていくとモバイルとPCの両方できれいに表示されるかと思います♪

ここまでの作業をまとめます。

  1. Font Awesome Animationを使えるようにする
  2. 「トップページ記事一覧上」ウェジット編集
  3. 「サイドバー」ウェジット編集

Font Awesome Animationの設定だけ若干面倒ですが、後はコードのコピペですぐにできちゃうかと思います。
アイコンを選んだり色をそれぞれ考えたりの時間が結構かかるかもしれませんw

この記事が皆さんのカスタマイズの一助になれば幸いです♪