Twitterアカウントはここから

私のブログに使っているカスタマイズ方法を紹介/ブログカラーとサイトマップ

サムネ・ブログカスタマイズ

こんにちわ,ゆう(@yusukebe029)です。

今回はブログカスタマイズとしてお手製サイトマップの作り方とブログで使う色の決め方を紹介します。

この記事の狙い

①サイトマップの作る意味を知る

②テンプレを使ってお手製のサイトマップを作る

③ブログの色の決め方を学習する

です。では,早速いってみましょう!

サイトマップ

サイトマップを作る意味

記事を作る際にカテゴリを設定しますよね?

私のサイトを例にすれば「写真」や「野鳥」などのカテゴリがあります。

サイトマップはこのカテゴリ別に記事がいくつか並んでいて,サイトの全容が分かるページのことです。

私のブログではメインメニューにサイトマップを設置しているのでトップページから簡単にアクセスできるようになっています。

サイトマップは作っておくと役に立つので下記内容を参考に試しに作ってみてください。

お手製サイトマップの作り方

まずは以下のリンクにアクセスしてサイトマップを作るのに必要なコードと知識を手に入れましょう。

コードは一回メモ帳などに貼り付けて,そこで編集することをおすすめします

一旦メモ帳にコードを書く方法は以下の記事で紹介しています。

ブログ記事サムネローマ字「 L 」訪問者のためのブログレイアウトとタグ付け戦略

コードをコピペしてきたら,★のマークは全て消します。

以下,コードの編集箇所の説明です。

カテゴリタイトル
任意の文字を入力できますが,私は「カテゴリ」と同じ文字にしています。
カテゴリID
カテゴリの各カテゴリの編集ページまで進みます。画面上のURLの中に「category&tag_ID=***」と記載されていますので,***の部分がカテゴリIDです。
表示させる記事数
任意の数字を入力します。多すぎても少なすぎても良くないので3つくらいでどうでしょうか
カテゴリURL
カテゴリのスラッグを確認します。例えば私のサイトの「写真」カテゴリならスラッグは「photo」にしています。

続いてサイトのURLを確認してください。

「https:// 自分のサイトURL /category/***」

このようにURLを作ります。***はカテゴリのスラッグです。

このURLがカテゴリURLになります。

style.cssにcss貼付け

外観→テーマエディタ→style.css

に進み,CSS用コードも貼り付けておきましょう。

CSS用コードも上記で示した参考リンクに載っています。

これを貼り付けないとサイトマップが表示されません

固定ページからサイトマップ作成

固定ページで新規作成を選択します

ブロックで「カスタムHTML」を選択します。

そこにコードを貼り付けて,保存→公開で完了です。

あとはプレビューをみて実装に成功しているか確認しましょう。

私のブログのサイトマップはこんな感じです。

サイトの色決め

テーマ「SANGO」ならカスタマイズ画面の「」の項目から簡単に変更できます。

簡単に色は変更できますが,なかなか自分のサイトにマッチしたしっくりくる色の組み合わせを見つけるのは難しいです。

そこで参考になるサイトをいくつか載せておきますので,自分にしっくりくる色を見つけましょう!

カラーコード
他のサイトで気に入った色があったけどどうやってこの色を自分のブログに反映させればいいのか。

カラーコードを知っておけば任意の色を表現できます。

「#1B435D」#に数字ローマ字の羅列になっているものがカラーコードです。

これをコピペなどしてカスタマイズ画面の色項目の任意箇所に入力すればOKです。

複数の色の組み合わせ例がこのサイトにはたくさん載っています。

サイトに反映したときのイメージも見ることが出来るので非常に分かりやすいサイトです。

原色大辞典では自分の好きなように色を探せます。

ピックアップした色に対し,相性のいい色や相反する色なども併せて調べることができるので色を組み合わせる時に非常に助かります。

以上のサイトを参考に,自分だけのオリジナルブログカラーを見つけましょう。

最後に

サイトマップは訪問者にとって自分のブログの道標です。

作成しておくと便利なのでお手製サイトマップを作っちゃいましょう!

サイトの色も視覚的に訪問者にアピールできるので適切な色の組み合わせを見つけてはどうでしょう。

ブログに関する記事を多数執筆していますので併せて読んでみてください。

サムネ・ブログザトールワードプレス”有料テーマ”はアリか?TheThorを使っている私が語る有料テーマの良さ/WordPressブログ記事サムネローマ字「 S 」WordPressテーマ「SANGO」を使ってみてその良さについて語る

ゆう

最後まで読んでくれてありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です