blanc note.の使い方

【ver1.2.7対応】blanc note.の外観>カスタマイズから変更できる項目

WordPress blanc note.をお使いいただいて、ありがとうございます!

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

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

カスタマイザーで変更できる項目

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

そのうち、固定フロントページ以外について説明させていただきます。

customizer_list_01

(A)サイト基本情報

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

  • サイトアイコン
  • デフォルトのOGP
  • デフォルトのアイキャッチ画像

costmizer_01

アイキャッチ画像については、正方形1:1の画像をアップしていただくと綺麗です。
スマホでInstagramなどのアプリを使って切り抜いていただくか、Webサービスを使って切り抜いていただくとナイス。
WordPressのメディアでもトリミングできるようです(未確認)。
後日補足記事を書きます。

(B)デザイン設定:投稿

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

  • アイキャッチ画像表示の有無
  • タイトルの下にプロフィールを表示する
  • 記事の下にプロフィールを表示する
  • 見出しh2の下線の太さ
  • 見出しh2のアイコン※実装中
  • Facebookコメントを使う
custmizer_02

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

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

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

<アイキャッチ画像とは>

投稿画面で設定できる画像のこと

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コメントは、実名での投稿です。
コメントのハードルがあがるかわりに、本当に興味がある人のみコメントしてもらえる利点があります。

(C)デザイン設定:固定ページ

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

  • アイキャッチ画像表示の有無
  • シェアボタン表示の有無

(D)色

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

  • アクセントカラー
  • サブカラー
  • ベースカラー
  • 背景画像

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

(E)デザイン設定:ヘッダー

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

  • キャッチフレーズ表示の有無
  • ロゴ画像
  • ロゴの最大幅(px)
  • ロゴ上の余白
  • ロゴ下の余白

(F)デザイン設定:フッター

フッターの背景色、文字色の変更。
キャッチフレーズを表示するかを変更できます。
custmizer_06

  • キャッチフレーズ表示の有無
  • フッター文字色
  • フッター背景色

(G)デザイン設定:サイドバー

サイドバーにプロフィールを自動表示するか。
親ページ表示中に、子ページリストを表示できるか。
を、選ぶことが出来ます。
custmizer_07

  • プロフィールを表示
  • 親ページ表示時に子ページリストを表示
  • 見出しのアイコン※実装中
  • 見出し下の線の太さ

(H)全体のラベリング

custmizer_08
phpを編集しないと変えられない文言を、変更できるようにしてあります。

  • サイドバー:最新の記事5件
  • 記事下:あわせて読みたい記事
  • 記事下:この記事がお気に召したら……※Facebookページ&IDを入力しない状態では表示されません

(I)メニュー

menu
blanc note.のメニューは1つのみです。
赤枠の部分に入れるメニューを選ぶことができます。

※メニューを選ばないと、左寄せになってしまうので、ぜひ……!

(J)ウィジェット

ウィジェットについては、なにを入れる? blanc note. 9つのウィジェットをごらんください。

(K)固定フロントページ

トップページを、固定ページにしたいときに使います。

(L)SNS設定

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

  • Twitter ID
  • Facebook App ID
  • Facebookページ

(M)アクセス解析

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

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

(N)カスタムCSS

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

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

Category : blanc note.の使い方

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

Web / Graphic Designer 丸山るこ

大人カワイイデザイン&イラストが得意なデザイナー、丸山るこです。 想いを持った、起業女性・スモールビジネスを応援しています。 様々な業種の案件に関わってきましたので、女性向けサービスからビジネスライクなデザインまで幅広く対応できます。 現在は、起業を考え半常駐ワークに励んでいます。一児の母。