how-to-useblanc note.のカスタマイザー

blanc note.の使い方

cssファイルやphpファイルをカスタマイズしないでも、ある程度柔軟に変更できる。
というのが、blanc note.の設計思想です。
そこで……WordPressのカスタマイザーからなにができるかを、改めてご説明させていただきたいと思います。

カスタマイザーから変更できる項目は、A〜Mの13項目です。

<カスタマイザーを開く方法>
[管理画面]→[外観]→[カスタマイズ]
customize

A:サイト基本情報

  • サイトタイトル
  • キャッチフレーズ
  • サイトアイコン
  • デフォルトOGP
  • デフォルトアイキャッチ画像

サイト基本情報では、
アイキャッチを指定しなかった時のアイキャッチ画像
カテゴリー一覧やトップなど、アイキャッチのないページをシェアしたとき用のデフォルトのOGP画像を設定できます
costmizer_01

アイキャッチ画像については、正方形1:1の画像をアップしていただくと綺麗です。
スマホでInstagramなどのアプリを使って切り抜いていただくか、Webサービスを使って切り抜いていただくとナイス。

B:デザイン設定:トップ

トップページは、フルカスタマイズご依頼の方のみの機能です

C:デザイン設定:ヘッダ

キャッチフレーズを表示するか。
ブログ名をロゴに変更。
ロゴの最大幅、上下の余白について、設定できるようにしてあります。
余白や幅については、pxをつけてご入力ください。

  • キャッチフレーズ表示
  • ロゴ画像
  • ロゴ画像幅
  • ロゴ上余白
  • ロゴ下余白
  • メインビジュアルURL
  • メインビジュアル画像

D:デザイン設定:フッタ

キャッチフレーズを表示するかを変更できます。

  • キャッチフレーズ表示

E:デザイン設定:投稿

デザイン設定:投稿では、個別記事になにを表示するか? を設定できます。

  • アイキャッチの自動表示
  • プロフィール表示(タイトル下)
  • プロフィール表示(記事下)
  • Facebookコメントを使う

記事の初めにアイキャッチ画像を表示する

投稿に設定したアイキャッチ画像を、自動で表示するかどうかを選べます。

アイキャッチ画像と、記事の初めに配置する画像を変えたい場合は、チェックせずに、メディアから画像を追加してください。

<アイキャッチ画像とは>
投稿画面で設定できる画像のこと

eyecatch-img_02

blanc note.では、記事の一覧で使っています。

eyecatch-img_03

記事の先頭に表示すると、下記のようなイメージになります。

eyecatch-img_01

タイトル下にプロフィールを表示する

blanc note. 1.2.3から、プロフィールの位置を変更できるようになりました。

profile-top

複数人で運営する、メディアの場合は、タイトル下にプロフィールを表示するのがオススメ。
読む前に誰の記事かわかります(笑)。

記事の下にプロフィールを表示する

profile-bottom

個人で運営する場合は、記事の下がオススメ。
記事を読んだ後に、どんな人が書いたのかな〜? と、プロフィールを読んでいただき、あわよくば! ファンになっていただこうという仕組みです。

Facebookコメント

fb-comment

SNS設定でFacebook App Idを入力すると、Facebookコメントを使うことが出来ます。
Facebookコメントは、実名での投稿です。
コメントのハードルがあがるかわりに、本当に興味がある人のみコメントしてもらえる利点があります。

F:デザイン設定:固定ページ

固定ページに、アイキャッチ画像を表示するか? シェアボタンを表示するか? を選ぶことが出来ます。
custmizer_03

  • アイキャッチの自動表示
  • シェアボタン表示

G:色

サイト全体にかかわる色の設定を変更することができます。
背景画像もアップロードできます。

指定した色は、head内にstyleタグとして挿入される仕組みです。
style.cssを使ってカスタマイズされる場合は、プロパティに!important; を追加してください。
style.cssに書いたCSSが反映されない? CSSの優先順位のお話

  • アクセントカラー
  • タイトルカラー
  • ベースカラー
  • 本文
  • リンク
  • リンク:hover
  • リンク:visited
  • リンク:active
  • 関連記事のカラー
  • TOC+のカラー
  • フッターの文字色
  • フッターの背景色
  • 背景画像

H:SNS設定

TwitterのIDを設定すると、シェアボタンが正常に動くようになります。(@ID名の部分)
Facebook app IDとFacebookページのURLを設定すると、記事下の「この記事がお気に召したら……」が表示されるようになります。

  • Facebook APP ID
  • Facebook ページ
  • Twitter ID

I:アクセス解析

custmizer_12
Google AnalyticsのUA-XXXXXXXXXを入力すると、Analyticsが動きます。

WordPressにログインしているときは、アナリティクスのコードが出ないようにしてあります。

J:メニュー

ver1.2まで:メインメニューのみ
ver2.0から:メインメニュー / ボタン / ドロワーメニュー の3種類に

K:ウィジェット

ver1.2まで:9箇所(サイドバー3箇所 / 記事内2箇所 / アーカイブ1箇所 / フッター3箇所)

L:固定フロントページ

固定ページを使い、トップページを作るときにお使いください。

M:追加CSS

子テーマを使う予定がなく、CSSを編集したい方向けの機能です。
親テーマのCSSを編集してしまうと、アップデートの際に上書き更新されてしまいます。

カスタムCSSの中に書き込んでいただいたCSSなら、テーマをアップデートしても、カスタマイズしたCSSが消えることはありません。
また、head〜headの中にインラインで出力されますので、CSSが効かない! というお悩みもないかと思います。
ぜひご活用くださいませ。
(ゴリゴリカスタマイズしたい場合は、子テーマのご利用をオススメいたします)

投稿画面の「クイックタグ」ボタン

ver1.2.8

記事の整形に便利な、クイックタグを兼ねそろえています。

UX/UI Designer luelue

イラストレーター→デザイナー→Webデザイナー→Webディレクターとして働く小学一年生のママ。
出産前に描いた「仕事と子育てとの両立」についての見通しが甘く、出産してはじめて、今までのようには働けないのだと気づきました。
好きな仕事だからこそ諦めることが悔しくて、以来、今の自分にできる最善な働き方を求め行動しています。
どんな立場であれ、女性は人生のステージが変わるたびに「生き方が180度ひっくり返ってしまう」と感じた経験から、人生の転機に少数精鋭で働くことを選んだ女性オーナー様を、起業とは切っても切れない 「自分メディアづくり」で応援しています。

コメントは受け付けていません。

ブログ一覧へ戻る