こんにちわ，Isamu（@yusukebe029）だよ。
色ってブログに関係なく、印象を決める大事な要素だ。
見た目も色と同じくらい大事なもので、今回はブログの配色とトップページのカスタマイズについて俺流を紹介する。
この記事の概要
サイトの配色について、参考サイトを示しながら、ベストな色を検討していく。ウィジェットを使ったメニューボックスの作成、記事一覧タブ切り替え、ヘッダーアイキャッチの追加についてカスタマイズ方法を簡単に解説する。
目次
サイトで使う色について
SANGOならカスタマイズ画面の「色」の項目から簡単に変更できる。
色の変更は簡単だが，自分のサイトにしっくりくる色の組み合わせを見つけるのは難しい。
私は色についての学はあまりないので、ウェブ知識に頼ることにした。
中でも、このサイトは色々なカラーバリュエーションを試せて、自分のブログにあった色を見つける事が出来る。
サイトで見つけた色をブログでどう表現すればいいか。
カラーコードを指定するだけだ。
このサイトでは1色選べば、相性の良い色や悪い色など、色相環ってのを使って色を割り出してくれる。
使いたい色があったらその色を指定して、相性の良い色などが分かるので便利なサイトだ。
色というのは印象を決める重要なファクターだ。
クールな感じ、優しい感じ、楽しい感じなど色1つで訪問者に違った印象を与えることが出来る。
ブログカスタマイズの一歩として、先ずはブログカラーを検討しよう。
トップページのカスタマイズ
はじめに
WordPressテーマ「SANGO」に関しては、サルカワさんの「SANGOカスタマイズガイド」を見れば完璧にカスタマイズ可能だ。
カスタマイズの流れとしては、
①SANGOカスタマイズガイドから実装したい機能を調べる
②実装してしばらく様子を見る
③問題無しと判断すればそのまま使用する
となる。
ウィジェットを使ってメニューボックス作成
後述する「記事一覧」機能の他に記事を管理できるものだ。
実装方法は簡単だ。
先ずは「SANGOカスタマイズガイド」の以下の項目を読んで、概要を理解だ。
いよいよ手順の説明だ。
「外観」→「ウィジェット」
メニューボックスを追加する。
タイトル、小見出し、色、アイコン、リンク先など入力して、タグ別記事一覧の機能を実装だ。
今回は、2行×2列のメニューボックスの作成だったが、1行×2列でも可能だ。
次にウィジェットに「メニューボックス」が追加される前の旧式の方法も紹介する。
ウィジェットでメニューボックス作成（カスタムHTML）
この方法は、「メニューボックス」のウィジェットブロックを追加させる前に実装していた方法だ。
こっちの方法でも一応メニューボックス導入は可能なので、追記しておく。
私は先ずテキストファイルにコードをコピーしてきて、編集してそれを貼り付けている。
コードは先述のリンクから入手可能だ。
テキストファイルにコードを貼り付けた後，一番上に加工した日付を書く。
いつのものかわからなくならないように、時系列を明確にするためだ。
ちなみにこのテキストファイルはMacアプリの「CotEditor」を使っている。
自分好みにカスタマイズでき、汎用性の高いテキストファイルアプリだ。
以前まで、カスタムHTMLにコードを貼り付けてメニューボックスを作成していたが、今回，ウィジェットボックスに「メニューボックス」が追加されたので、そっちを使ってみた。
どっちも使った感じ、ウィジェットボックス「メニューボックス」のほうが使いやすい。
視覚的にどう仕上がるのか確認して作業を進められるし、効率的だったからだ。
いづれにしても、日頃から記事執筆と同時にタグ管理をしっかりしていれば、メニューボックスを追加時に役に立つ。
SANGOオリジナル「記事一覧タブ切替え」
SANGOテーマならではの機能で、記事一覧の追加が出来る。
新着記事1＋カテゴリ（orタグ）3の計4つを一覧で表示する機能だ。
カテゴリIDとリンク先URLなど入力すれば、選択したカテゴリの記事一覧が表示される。
カテゴリの管理をしっかりしておけば、記事一覧作成の際に、役に立ってくれるぞ。
ヘッダーアイキャッチの追加
画像付きでリンク付きボタンを1つ付けられるコンテンツを追加可能だ。
私は探鳥成果とインスタグラムへの誘導をそれぞれ作成して、導入している。
トップページを訪問した人たちに視覚的に訴えることが出来る。
機能実装も簡単に出来る。
ここまで機能を導入すれば、トップページも見違えるだろう。
最後に
ブログの印象を決める重要要素「色」の配色とトップページのカスタマイズについて紹介した。
今回の記事にはテーマ「SANGO」が密接に関係している。
WordPressテーマ「SANGO」の良さと使いやすさを語る
この記事がSANGOを使うWordPressブロガーの役に立つことを願ってここで記事を締めよう。
Isamu
7DMarkII Canon EF100-400mm FE70-200mm GRIII K-S2 PENTAX RICOH SANGO Sigma150-600mm Sony TAMRON Tamron100-400mm WordPress α7II α7RIII アニマル カワセミ コンデジ ダム ブログ レビュー 一眼レフ 三脚 冬鳥 函館 動画 北斗市 北海道 夜景 広角レンズ 探鳥 望遠レンズ 格安SIM 桜 楽天モバイル 機材 渓流 秋田 紅葉 見晴公園 観光 野鳥 風景 香雪園
