ついつい食べすぎる発芽玄米 

ブログのテーマとカスタマイズ

使用テーマ

現在、使用しているテーマは『SANGO 』です。

WordPress導入から『SANGO』のカスタマイズまで、わかりやすい手引きがあります。

各記事のコメント欄では、初心者にもわかりやすいように回答されているので、カスタマイズで行き詰ったときにはよく読んでます。

HTMLやCSSがよくわからなくても使えるのはよいですね。

有料ではありますが、ブログデザインで悩む時間を大幅に減らせたことを考えれば、高い買い物ではありませんでした。

参考 SANGOカスタマイズガイドサルワカ

SANGOカスタマイズガイドのボリュームがすごくて、目当ての記事がどこにあるのか探しにくいことがあります。

そんなときは”WordPress SANGO (検索文字列)”でググってます。

カスタマイズガイドの記事だけではなく、『SANGO』ユーザーさんのカスタマイズ方法やお悩み解決記事も一緒に表示されるので便利です。

FC2からWordPressへブログのお引越し!作業手順とやっておいてよかったこと

参考にしたサイト

このブログをつくるため、カスタマイズの参考にさせていただいたサイトの一覧です。

どのサイトも素敵なだけでなく、読みやすくするための工夫が満載で、とても勉強になりました。

https://etoko.net/wp-content/uploads/2019/04/etokoureshii.png
エトコ

ありがとうございます!!

カスタマイズ編

実際に使わせていただいたサイトを紹介します。

参考 サルワカトップページサルワカ

⬆ HTMLやCSSの入門編からデザインのことまで学べます。カスタマイズを始める前に読んでおきたいサイトです。カスタマイズを始めてからも大変お世話になってます。

参考 SANGOの記事一覧for men

⬆ 『SANGO』のカスタマイズ情報が盛りだくさん!

モバイルメニューやプロフィール下のSNSボタン、記事カードの余白をプラス、サイト内検索ウィジェット、ナビドロワーのボタン追加、Rinkerプラグインのあたりのカスタマイズを使わせていただいてます。

アイキャッチがどれも素敵。すっきりしたサイトデザインですが、なにか濃い雰囲気を醸してます。しばらく見ないとくまさん1号~3号に会いたくなる不思議なサイトです。

参考 SANGOのカスタマイズマサオカブログ

⬆ SANGO公認の子テーマ”PORIPU”作者さんのカスタマイズです。

アドセンスを貼ったウィジットの背景変更、アドセンスの記事中広告の表示を増やす設定など使わせていただいてます。

『SANGO』の雰囲気に合ったデザインにできるのでおすすめ。 他にも役立つカスタマイズ多数あります。『SANGO』愛にあふれていて、美しい『SANGO』デザインをまったり堪能できます。

参考 ブログカードに「続きを読む」を追加するカスタマイズ節約リッチ生活

⬆ ブログ(関連)カードがリンクであることが認識しやすくなります。

ブログ(関連)カードの続きを読むの部分を少しアレンジしてます。わたし好みのサイト配色なうえ、興味深いコンテンツ。カスタマイズそっちのけでコンテンツを読みあさってしまいました。

参考 見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法脱力系男子

⬆  もくじ前のアイコンをグラデーションにするのは思いつきませんでした。

なるほど~とうんうんうなづきながら、モバイルメニューの背景をグラデーションにするために使わせていただきました。スパッと鋭さを感じるサイトデザインにアイキャッチが映えますね。猫さん多めで好感度高し。

参考 【SANGO】トップページのアニメーションを完全OFFにするCSSカゲサイ

⬆ 部分的にアニメーションをオフにしたくてカスタマイズを使わせていただきました。

WordPressやプラグインの記事も参考になります。トップページを開いたときのアイキャッチが秀逸です。アイキャッチをみただけで、タイトルの内容が想像できるつくりは他では見かけません。

参考 ウェブのことTanweb.net

⬆  Googleアドセンスのレスポンシブ広告をPCとスマホでサイズ変更、ダブルレクタングル設定のカスタマイズを使わせていただきました。

アドセンスについて知らないことも多く勉強になりました。著者のブログに対する考え方は共感できる部分も多く、読んでいて面白いです。

配色編

このブログは写真が多く、常に多色で雑多な印象です。

ページを切り替えたとき、迷子にならない配色、落ち着いて読める色使いを考えています。

参考 mihune1320instagram

配色は上のリンクにある画像(うちの猫)をベースに好みの色(マスタード)をあわせて、ツールを使って決めました。

参考 The super fast color schemes generator!coolors

スペースキーを押すだけで、色が入れ替わります。

ただポンポン押して色を眺めているだけでも楽しい。

好みの色がでてきたら、鍵マークをクリックで、その色だけをロックできます。

カラーコードのところをクリックすると、コード入力できるようになります。

例えば

使いたい色が3色決まっていて、合う色であと2色を探すとき。

3色分のカラーコードを入力してロックします。

それから、スペースキーを押すと、ロックした3色に合う2色を(スペースキーを押すごとに)提案してくれる仕組みです。

思いもかけない色の組み合わせが登場するので、配色の幅を広げたいときに役立ちます。

参考 0to2550to255

色のグラデーションを探すときに使います。

単色の少し濃い色や薄い色を探すのに便利。

同じ色を何度も使うときは、スライダー方式より選択方式のほうが探しやすい。

ページ内に色を増やしたくないけれど、バリエーションは増やしたいときなど。

トーンを揃える方法もありますが、失敗しにくいのはすでにページ内で使われている色を薄く(淡く)したり、濃くした色を使うことです。

例えば

ボタンの色にサイトのメインカラーやアクセントカラーを使いたいけれど、もう少し薄い(淡い)色にしたい、など。

参考 uiGradientsuiGradients

多色グラデーションが用意されていて、cssで取得できるツールです。

混色による濁りが、ギリギリ”あじ”として感じられるグラデーションまであって面白い。

使い方は簡単。

左上の”Show all gradients”のところから用意されているグラデーションを一覧で見ることができます。

グラデーションを構成するカラーコードは真ん中に表示されてます。

右上の<>を押すと背景設定にそのまま使えるcssまで出てくる!これがとても便利です。

https://etoko.net/wp-content/uploads/2019/04/etoko.png
エトコ

設定中、何度も色を入力しなくていいのは楽ちん

このブログテーマのSANGOは、カスタマイズでタイトル下の”ヘッダーお知らせ欄”に、グラデーションが設定できるようになってます。このツールを使えば簡単に好みのグラデーションを見つけられます。

例えば

記事内のもくじアイコン、モバイル固定メニューボタン(モバイル画面の右下〇)に使ってます。