ブログで発信したい、だけどデザインもこだわりたい、そんなあなたへ

blanc note.のカスタマイザー

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

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

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

A:サイト基本情報

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

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

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

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

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

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

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

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

E:デザイン設定:投稿

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

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

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

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

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

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の優先順位のお話

H:SNS設定

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

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

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