使用テーマ
現在、使用しているテーマは『SANGO 』です。
WordPress導入から『SANGO』のカスタマイズまで、わかりやすい手引きがあります。
各記事のコメント欄では、初心者にもわかりやすいように回答されているので、カスタマイズで行き詰ったときにはよく読んでます。
HTMLやCSSがよくわからなくても使えるのはよいですね。
有料ではありますが、ブログデザインで悩む時間を大幅に減らせたことを考えれば、高い買い物ではありませんでした。
参考 SANGOカスタマイズガイドサルワカSANGOカスタマイズガイドのボリュームがすごくて、目当ての記事がどこにあるのか探しにくいことがあります。
そんなときは”WordPress SANGO (検索文字列)”でググってます。
カスタマイズガイドの記事だけではなく、『SANGO』ユーザーさんのカスタマイズ方法やお悩み解決記事も一緒に表示されるので便利です。
FC2からWordPressへブログのお引越し!作業手順とやっておいてよかったこと参考にしたサイト
このブログをつくるため、カスタマイズの参考にさせていただいたサイトの一覧です。
どのサイトも素敵なだけでなく、読みやすくするための工夫が満載で、とても勉強になりました。
ありがとうございます!!
実際に使わせていただいたサイトを紹介します。
参考 サルワカトップページサルワカHTMLやCSSの入門編からデザインのことまで学べます。カスタマイズを始める前に読んでおきたいサイトです。カスタマイズを始めてからも大変お世話になってます。
参考 SANGOの記事一覧for men『SANGO』のカスタマイズ情報が盛りだくさん!
モバイルメニューやプロフィール下のSNSボタン、ボックスにつけるの吹きだし、サイト内検索ウィジェット、ナビドロワーのボタン追加、関連記事カードあたりのカスタマイズを使わせていただいてます。
アイキャッチがどれも素敵。すっきりしたサイトデザインですが、なにか濃い雰囲気を醸してます。しばらく見ないとくまさん1号~3号に会いたくなる不思議なサイトです。
参考 SANGOのカスタマイズマサオカブログSANGO公認の子テーマ”PORIPU”作者さんのカスタマイズです。
アドセンスを貼ったウィジットの背景変更、アドセンスの関連記事をSANGOになじませる方法など使わせていただいてます。
『SANGO』の雰囲気に合ったデザインにできるのでおすすめ。 他にも役立つカスタマイズ多数あります。『SANGO』愛にあふれていて、美しい『SANGO』デザインをまったり堪能できます。
参考 ブログカードに「続きを読む」を追加するカスタマイズ節約リッチ生活ブログ(関連)カードがリンクであることが認識しやすくなります。
ブログ(関連)カードの続きを読むの部分を少しアレンジしてます。わたし好みのサイト配色なうえ、興味深いコンテンツ。カスタマイズそっちのけでコンテンツを読みあさってしまいました。
参考 見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法脱力系男子もくじ前のアイコンをグラデーションにするのは思いつきませんでした。
なるほど~とうんうんうなづきながら、モバイルメニューの背景をグラデーションにするために使わせていただきました。スパッと鋭さを感じるサイトデザインにアイキャッチが映えますね。猫さん多めで好感度高し。
参考 【SANGO】トップページのアニメーションを完全OFFにするCSSカゲサイ部分的にアニメーションをオフにしたくてカスタマイズを使わせていただきました。
WordPressやプラグインの記事も参考になります。トップページを開いたときのアイキャッチが秀逸です。アイキャッチをみただけで、タイトルの内容が想像できるつくりは他では見かけません。
参考 ウェブのことTanweb.netGoogleアドセンスのレスポンシブ広告をPCとスマホでサイズ変更、ダブルレクタングル設定のカスタマイズを使わせていただきました。現在はダブルレクタンブルにしていませんが、役に立つ知識満載なのでこのままリンクを残しておきます。
アドセンスについて知らないことも多く勉強になりました。著者のブログに対する考え方は共感できる部分も多く、読んでいて面白いです。
参考 【スマホ対応】SANGOのヘッダーをCSSで固定する方法すもぐりモバイル表示のメニューをすっきりさせたくて 【SANGO】固定ヘッダーをスクロールで小さく変化させる方法 とともに使わせていただきました。
アクアリウムと多肉植物に癒されます。わが家にある頂きものの多肉がハオルチアOB7かもしれないことが判明。少しずつ成長していてそろそろ植え替えようと思ってたんです。多肉植物用の土のブレンド割合はとても参考になりました。
このブログは写真が多く、常に多色で雑多な印象です。
ページを切り替えたとき、迷子にならない配色、落ち着いて読める色使いを考えています。
参考 mihune1320instagram配色は上のリンクにある画像(うちの猫)をベースに好みの色(マスタード、サクラ)をあわせて、ツールを使って決めました。
参考 The super fast color schemes generator!coolorsスペースキーを押すだけで、色が入れ替わります。
ただポンポン押して色を眺めているだけでも楽しい。
好みの色がでてきたら、鍵マークをクリックで、その色だけをロックできます。
カラーコードのところをクリックすると、コード入力できるようになります。
使いたい色が3色決まっていて、合う色であと2色を探すとき。
3色分のカラーコードを入力してロックします。
それから、スペースキーを押すと、ロックした3色に合う2色を(スペースキーを押すごとに)提案してくれる仕組みです。
思いもかけない色の組み合わせが登場するので、配色の幅を広げたいときに役立ちます。
参考 uiGradientsuiGradients多色グラデーションが用意されていて、cssで取得できるツールです。
混色による濁りが、ギリギリ”あじ”として感じられるグラデーションまであって面白い。
使い方は簡単。
左上の”Show all gradients”のところから用意されているグラデーションを一覧で見ることができます。
グラデーションを構成するカラーコードは真ん中に表示されてます。
右上の<>を押すと背景設定にそのまま使えるcssまで出てくる!これがとても便利です。
設定中、何度も色を入力しなくていいのは楽ちん
このブログテーマのSANGOは、カスタマイズでタイトル下の”ヘッダーお知らせ欄”に、グラデーションが設定できるようになってます。このツールを使えば簡単に好みのグラデーションを見つけられます。
記事内のもくじアイコン、モバイル固定メニューボタン(モバイル画面の右下〇)に使ってます。