[Sentry]デザインの基本設定を変更する

2017011870201

最強の無料WordPressテーマ(※自称)「Sentry」の解説記事第3弾。今回から本格的にSentryをカスタマイズしていきます。
※「Sentry」の詳しい解説はこちら→最強の無料Wordpressテーマ「Sentry」〜AMPにも対応したスマホファーストテンプレート〜

前回の解説記事はこちら↓

テーマのインストールとパーマリンク設定が終ったので、ここから具体的なカスタマイズを行います。
まずは、デザインの基本カスタマイズとしてい、ロゴの設定やテーマカラーの設定を行います。

ロゴ&サイトアイコンを設定する

まずは、ロゴとサイトアイコンの設定を行いましょう。
ロゴを未設定の場合は、サイトのタイトルがテキストで表示されますが、やはり見栄えの良いサイトにするには画像を使ったロゴがあると良いと思います。

設定を行うには、Wordpress管理画面の「外観」から「カスタマイズ」を選択。
2017011870903

現在のテーマで「Sentry」が選ばれていることを確認し、まずは「サイト基本情報」を選択しましょう。
2017011871047

「サイト基本情報」の画面で設定できるのは、「ロゴ」「サイトのタイトル」「キャッチフレーズ」「サイトアイコン」の4つ。
ロゴは600ピクセル×132ピクセルの画像が推奨ですが、推奨サイズ以外のサイズを設定しても表示上は特に問題ありません。
2017011870201

「サイトのタイトル」や「キャッチフレーズ」はデザイン上は表示されませんが、設定しておくと検索エンジンでの検索結果への表示などに使われるので入力しておきましょう。
「サイトアイコン」も設定は必須ではありませんが、SNSでシェアされた場合などにも利用されることもあるので、こちらも忘れずに設定しておきましょう。

サイトのテーマカラーを設定する

続いて、サイトのテーマカラーを設定しましょう。
テーマカラーは「【Sentry】カスタマイズ」で行います。
2017011871047

デザイン上必要なのは、「メインカラー」の設定。
2017011875153

ここで設定したカラーは、サイトのヘッダー部分や各装飾要素、記事のリンク文字の色などに反映されます。
白に近い淡い色を設定してしまうと文字が読みにくい場所などが出てくるので、ある程度はっきりとした色を指定するのがオススメです。

また、サイトの公開年の設定ができます。公開年はサイトの一番下のフッターエリアに表示するコピーライトに反映されます。

「【Sentry】カスタマイズ」のページでは他にも、各記事の前後のSNSボタンの表示/非表示や、記事下のライタープロフィールの表示/非表示などが設定できます。
基本的にはすべてチェックをオンにして使うことを前提に設計していますが、一番上のサイドバーの「Sentry」プロモーション用リンクを外す。のチェックは、オフにしてSentryを紹介していだけると嬉しいです!(まったく強制ではないです!!)

追記:カスタマイズの項目については、一部修正をしており、上記の記事とは異なる設定が必要です。詳しくは以下のページを参照してください。

カスタマイズ項目の最後の「headタグに出力するコード」は、任意のHTMLやJavascriptのコードを入力できます。
こちらの使い方は広告の設定の解説記事で詳しく紹介したいと思います。

それでは、今回はここまで。
ロゴとメインカラーを設定して、オリジナリティーのあるサイトを作ってみてください!

Commentsこの記事についたコメント

21件のコメント
  • R40geek より:

    はじめまして、検索からこちらのサイトを拝見し、利用させて頂こうと試行錯誤中です。
    そこで教えて頂きたいのですが、こちらの手順通りにテーマをインストールし、子テーマ
    を使っているのですが、どういう訳かデモサイトと違い、右サイドバーが全体の半分を占める
    サイズになってしまいます。
    もし何か設定等があるようでしたら教えて頂けないでしょうか?

  • R40geek より:

    すみません、上記質問ですが、記事投稿数が少なかった為に起こっていたことが分かりました。
    失礼いたしました。

  • おみ より:

    広告の設定の解説記事が見つからないのですが、よろしければ広告の設定を教えていただけませんか?

  • K より:

    初めまして
    つい最近、こちらのテーマを知りまして早速使わせていただいたのですが
    メインカラーを変更しても、反映されません。

    こちらの解説画面と比べると、メニュー項目も少し異なるようで
    「記事下にライターのプロフィールを表示する」といったチェック項目も
    見当たりません。

    違うバージョンをインストールしてしまったのでしょうか?
    メインカラーを変更したいのですが、反映方法についてご教示いただけますと幸いです。

    • ultimate-ez より:

      メニュー項目については、こちらの記事から一部変更があります。詳細は以下の記事を参照ください。
      https://ultimate-ez.com/2017/06/15/4723/

      メインカラーについては、なぜ反映されないのかちょっとわかりかねます…。
      キャシュ系のプラグイン等使われていると、CSSの吐き出しが阻害されているのかもしれません。サイトのURLを共有してもらえるとこちらでも確認できるのですが…。

  • K より:

    早速のご回答、ありがとうございました!
    Head Cleanerのプラグインを停止したらちゃんと反映されるようになりました。
    ありがとうございます。

    ちなみになんですが、日付も非表示にしたいのですが
    view数を非表示にする、で書かれている所の{date}も消せば
    日付も非表示にできるでしょうか?

  • M より:

    初めまして。
    素敵なテーマでとても気に入って使わせて頂いてるのですが
    スクロールするヘッダーとスグ下のスライダー表示が重なっていて
    スライダ―画像が半分隠れた状態になっていてどうやって直せるのか分かりません
    解決法があるならどうかよろしくお願いします

    • ultimate-ez より:

      すみません。イマイチどういう状態になっているのかがよくわからず…。
      もしよかったらサイトの現状を見せていただくのが早いんですが、URL教えてもらえませんか?
      コメント欄に書くのが抵抗ある場合は、私のTwitter(@UltimateEzにDMいただくか、お問い合わせフォームからお知らせいただければと思います。

      • M より:

        さっそくのお返事に感謝です。
        お問い合わせの方にメールさせて頂きました
        宜しくお願いします

    • ultimate-ez より:

      確認しました。

      プラグイン「Autoptimize」を使われているかと思いますが、その影響でcssの読み込み順が変わり、描画が崩れているようです。sentryのCSSは縮小済みなので、プラグイン自体を停止するか、CSS適化のチェックを外せば描画崩れは修正されると思います。
      一度、お試しいただいても良いですか?

      • M より:

        本当にありがとうございました。
        ご指摘の通りプラグインを外すと元に戻りました。
        感謝でいっぱいです><

  • M より:

    こんばんは。
    再びお尋ねしたいのですが、ウィジェットの記事中広告エリアなのですが
    広告を中央に表示させることは可能でしょうか?
    よろしくお願いいたします。

    • ultimate-ez より:

      広告の設定方法はこちらの記事にまとめています。→https://ultimate-ez.com/2017/06/22/4746/

      基本的には「テキスト」のウィジェットを使って広告のコードを貼り付けてもらえると、中央に表示されると思います。
      一応、こちらの記事に貼ってみましたので、参考にしてみてください。
      https://ultimate-ez.com/2013/07/23/2313/
      ※「手足口病の症状はどんな感じ?」の見出しの前にショートコードでアプリ表示しています。

  • やまだ より:

    こんばんは
    昨日から、ワードプレスを始めたど素人です。
    はてブで、遊んでいたので、使用が近いブログ型のsentryをテーマに選びましたが、

    1.タイトルの幅の変更ができず、タイトルが一部のみしか表示されない。

    2.記事ごとの写真を表示する方法が分からないため、全てNO imageのままです。

    よかったら、ひどいサイトですが、確認していただき、ご教授願えませんか?

    • ultimate-ez より:

      Sentryをご利用いただきありがとうございます!
      質問ですが、
      1. タイトルってサイトのタイトルのことですよね?基本的にここは画像ロゴを想定しています。
      「外観」→「カスタマイズ」から「サイト基本情報」を選択。ロゴで画像を設定してください。
      画像ではなくテキストで設定したい場合は20文字くらいで設定するとデザイン上収まります。

      2. 記事ごとの画像は、各投稿画面で「アイキャッチ画像」を設定してください。
      参考→http://webnonotes.com/wordpress/eyecatch/

      • やまだ より:

        ありがとうございます。
        よくわかりました。

        ロゴだったんですね。
        SEO対策で、タイトルは検索にかかりやすいタイトルを入れないとと、考えていました。
        わかりました。

  • 真一 より:

    sentryの魅力に取り付かれて有料テーマから、sentryに乗り換えました!
    一つお聞きしたいのですが、スマホで見た時の記事ページの背景を白くしたいのですが
    なんか方法ありますでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です