SANGOユーザーのみなさん、こんにちは。
ブログ楽しんでますか^^
kou(@kou_souda)です。
なんとなんと嬉しいことに。
先日、「アラカク」を運営する天才ムショクくん(@bGb_0)に当ブログのトップページを賞賛して頂きました（笑）
【Sangoユーザー必見】
カスタマイズで参考になるブロガーさん3選マクリンさん(@Maku_ring )
👉色の統一感があって、記事の余白の使い方が参考になる。読みやすい。クマさん(@Bearface18 )
👉カスタマイズ記事がもうプロのそれ。おしゃれ。kouさん(@souda_kou )
👉ホームのカスタマイズが最高。— 天才ムショクくん (@bGb_0) September 14, 2018
お陰様でフォローして下さるブロガーさんが増えましたヾ(*ﾟωﾟ)人(*ﾟωﾟ)ﾉｼ
僕は今こそ記事作成に注力しているため、カスタマイズ等はあまりいじらないのですが…
確かに当ブログのテーマ、SANGOを導入した直後はカスタマイズに明け暮れる日々でした（笑）
その時の地道な作業が評価されて大変嬉しく思います◎
そこで今回は、SANGOユーザーの方のために、当ゆーちゅーぶろぐのトップページのようにするにはどうすればいいのか？
ということを具体的なコードを提示しながら解説していきたいと思います♪
重要は極めてなさそうですが（笑）
トップページのデザインの一例として参考にして頂ければ幸いです。
トップページはアニメーションを基調としたシンプルデザイン
そもそもSANGOというテーマ自体が、シンプル・軽量・爆速という三拍子が揃っているテーマなので、それを生かす為にあんまりゴリゴリのカスタマイズは止めようと思っていました。
だがしかし。
最高なテーマが故に…使ってる人多スギィィ!!笑
1万円以上するのに….皆お金持ってるよね絶対…
そう、SANGOユーザーが多すぎてブログの個性が出しづらいなとも思ったんです。
そこで、トップページくらい少し拘ろうかと考えた結果、アニメーションを基調としたシンプルデザインにすることに決めました♪
ページに少し動きがあるだけで印象的ですしね！
SANGO導入から半年近く経つというのに、実はまだプロフィールやLINEスタンプの販促ウェジット等をつけれておらず（笑）
100%完成！とは言えないのですが、現状こんな感じです。
特徴としては、
- シンプルで分かりやすいメニュー(“CATEGORY”とか”NEW POSTS”とか)
- 動くアニメーションのアイコン
- カテゴリ部分のメニュー表示
ですかね。
一見すると、「コードとか書き換えてカスタマイズダルそう〜」と思われるかもしれませんが、ご安心ください。
ウェジットに以下で紹介するコードを貼り付け、配置を工夫するだけ！！
ステップ1だけ頑張って完了すればすぐに仕上がると思います♪
それでは順を追って説明していきます。
STEP.1 Font Awesome Animationを使えるようにする
Fontasesomeを使いこなせている方はこのステップを読み飛ばしてもらって結構ですが、アニメーションアイコンが未だ使える状態になっていない方は、
Fontasesomeのアニメーション機能を追加する為に以下の記事を参考にして行ってみてください。
記事中のコードをheader.phpに貼り付けるだけで完了します！
STEP.2 「トップページ記事一覧上」ウェジット編集
STEP.1が完了したらあとはもう速攻です。
ワードプレスの管理画面の【外観】➡︎【ウェジット】を開きます。
「カスタムHTML」を「トップページ記事一覧上」に2つ追加します。
もちろん正解はありませんので、既存のウェジットを置いている場合はうまいこと融合させればおっけい◎
もちろんリンク先はカテゴリでなくてもOKなのですが、説明を分かりやすくする為に今回は、
当ブログのトップページと同様に、カテゴリ6つの場合でご説明します。
「カスタムHTML」を2つ追加できたら、上の方には以下のコードをコピペしてください。
タイトルは記入不要で大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="widget-menu__title main-bc ct strong"> <i class="fa fa-map-marker faa-vertical animated"></i> CATEGORY </div> <ul class="widget-menu dfont cf"> <li> <a href="カテゴリ1の一覧ページURL"><i class="fa fa-car" style="color: #ff9191"></i>カテゴリ1の名前</a> </li> <li> <a href="カテゴリ2の一覧ページURL"><i class="fa fa-shopping-cart" style="color: #ffb776"></i>カテゴリ2の名前</a> </li> <li> <a href="カテゴリ3の一覧ページURL"><i class="fa fa-desktop" style="color: #92ceff"></i>カテゴリ3の名前</a> </li> <li> <a href="カテゴリ4の一覧ページURL"><i class="fa fa-paw" style="color: #FFCCCC"></i>カテゴリ4の名前</a> </li> <li> <a href="カテゴリ5の一覧ページURL"><i class="fa fa-pencil" style="color: #77d477"></i>カテゴリ5の名前</a> </li><li> <a href="カテゴリ6の一覧ページURL"><i class="fa fa-music" style="color: #DCC2FF"></i>カテゴリ6の名前</a> </li> </ul> |
このコードを貼り付けた後、赤線の部分はご自身の任意のものに変える必要があります。
“”や;などを消してしまわぬよう注意しながら行ってください◎
※メインカラー(僕でいうブルーの部分)をアクセントカラーに変更するには、上記のコード一番上のmain-bcの部分をaccent-bcに書き換えればOK。
をそれぞれ参考にして、コピペで上記のコードを仕上げていきます。
ウェジットを保存したら、1つ目のカスタムHTMLの編集は完了です！
そして2つ目のカスタムHTML。
僕はこんな感じのコードにしています。
|
1 2 3 |
<div class="widget-menu__title main-bc ct strong"> <i class="fa fa-star faa-flash animated"></i> NEW POSTS </div> |
1つ目のカスタムHTMLの時と同様にして、赤線部を好きなアイコン、アニメーション、タイトルに変更します。
保存して2つ目のカスタムHTMLも設定完了♪
このウェジットの下には記事一覧が来るので、「記事一覧」とか「新着記事」とか「NEW POSTS」とかがいいと思いますね◎
STEP.3 「サイドバー」ウェジット編集
感のいい方ならもうお分かりかとおもますが、僕のサイドバーのウェジットもこんな感じになっていて…
それぞれのカスタムHTMLのコードは先ほどのコードと型が全く一緒！
|
1 2 3 |
<div class="widget-menu__title main-bc ct strong"> <i class="fa fa-heart faa-pulse animated"></i> POPULAR POSTS </div> |
アイコン、アニメーション、タイトルの3つを変えているだけです。
サイドバーもほんの一例ですが、
検索窓
広告（レクタングル大）
プロフィール
てな感じに並べていくとモバイルとPCの両方できれいに表示されるかと思います♪
ここまでの作業をまとめます。
- Font Awesome Animationを使えるようにする
- 「トップページ記事一覧上」ウェジット編集
- 「サイドバー」ウェジット編集
Font Awesome Animationの設定だけ若干面倒ですが、後はコードのコピペですぐにできちゃうかと思います。
アイコンを選んだり色をそれぞれ考えたりの時間が結構かかるかもしれませんw
この記事が皆さんのカスタマイズの一助になれば幸いです♪