tcd-theme-options_ecmg

ワードプレス

理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。サイトのテーマカラー、ロゴの設置、SNSシェアボタンの設置などなど・・・

シェアボタンって、どうやったら設置できるんだろう?

サイトロゴって、どう設置すればいーの?PHP?アーハン?・・なにソレ

色々と方法を探ってみるのもまあ、勉強になっていいものです。でも、納得のいくサイトが完成するのはいつになるやら・・・。

TCDテーマなら専門的な知識は不要。私たちのような素人でも簡単に、イメージどおりに設定できてしまいます。プロに外注するような本格的なサイトを自分で作れて、管理していける。そんな時代が来た、ということですね。

tcd-theme-option_01

ここでは、TCDテーマならではの機能が集約した【テーマオプション】を紹介。サイトレイアウトを直感的に、簡単に設定できる様子をお伝えします。

スポンサーリンク

サイト設定はほぼここで完結。「TCDテーマオプション」

TCDテーマをインストール・有効化すると、「外観」の中に「TCDテーマオプション」が現れます。この中だけで、サイトの構成や見栄えをほとんど設定できてしまいます。

tcd-theme-option_02

tcd-theme-option_03

テーマオプションは次々とリリースされているテーマごとに、独自に設計されています。つまり多少の違いはあるんですが、基本的な内容は同じ。テーマに適した設定項目がそれぞれ用意されていて、自由に、簡単にカスタマイズ出来るようになっています。

このサイトで利用しているテーマ「MAG」を例に見ていきましょう。

以降、見えにくい画像はクリックして拡大できるようにしています。

基本設定

tcd-theme-option_04

設定項目

色の設定

レイアウトの設定

カスタムCSS

絵文字の設定

レスポンシブデザインの設定

色の設定

tcd-theme-option_05

ここでサイトのテーマカラーを指定できます。ここの設定だけでも、サイト全体の印象が大きく決定づけられます。MAGではメインカラー・第2カラー・第3カラーが用意されていて、メインカラーはその名の通り、サイトの要所に反映されます。

tcd-theme-option_06

第2カラーはリンクをマウスオーバーした時のカラーに適用され、第3カラーはグローバルメニュー(最上部にあるメニュー)のサブメニューをマウスオーバーした時の背景色に適用されます。

第2カラー

tcd-theme-option_07

tcd-theme-option_08

第3カラー

tcd-theme-option_09

カラーコード(色を表す数字)を直接入力することも出来ますが、カラーパレットで直感的に選べるのも嬉しいところ。

tcd-theme-option_10

これだけでサイトの大まかな印象が決まりました。

TOPページ

tcd-theme-option_11

記事ページ

tcd-theme-option_12

固定ページ

tcd-theme-option_13

共通フッター

tcd-theme-option_14

レイアウトの設定

tcd-theme-option_15

ここではなんと、サイト全体のカラムデザインをクリックひとつで変更できます

tcd-theme-option_16

記事数や広告の設置場所、サイトコンテンツにあわせて・・・または気分にあわせて、いつでも切り替えることができる。テーマ何個分かがセットになったようなおトク感ですね。

カスタムCSS

tcd-theme-option_17

ここはとりあえずは触らなくても大丈夫な場所、という認識で大丈夫です。サイト運営をしていくうちに少しづつ、HTMLやCSSといった知識はついていくもの。そうなってくると・・・

この見出しのデザインを変えてみたいなぁ・・

という、いい意味で「自分だけのカスタマイズをしてみたい欲求」が生まれてきたりします。そんな時、必要なコードをここに記載しておくだけで反映されるという、後々ヒジョーーに重宝する機能です。

「カスタムCSS」には、大きく分けて3つのメリットがあります。

テーマのスタイルシートを直接編集する不安がない

テーマのアップデート時も上書きされないため、カスタマイズし直す必要がない

headタグ内の最後の方に挿入されるため、プラグインなどの干渉が少ない

関連記事

絵文字の設定

tcd-theme-option_18

WordPressにはデフォルトで実装されている絵文字があります。が・・・あまり使われているのを見たことはありません。しかも残念なことに、絵文字を使っていなくても、絵文字ライブラリを呼び出すためにページ表示が遅くなってしまうという・・・

で、ここではその不要な「呼び出し」をクリックひとつで制御してくれます。ページの表示速度が改善される、ありがたい機能です。

レスポンシブデザインの設定

tcd-theme-option_19

TCDテーマはほとんどがデフォルトでレスポンシブ。つまり、スマートフォンなどで閲覧した際のレイアウトも画面の大きさなどによって最適化し、見やすく表示されます。ここではあえて、その「最適表示をさせない」ことができます。

どんな閲覧環境でもPC表示と同じレイアウトを表示させたい!

そんな希望にも、「利用しない」にチェックを入れるだけで対応してくれます。

ロゴの設定

tcd-theme-option_20

設定項目

パソコン用のロゴ画像

スマホ用のロゴ画像

パソコン用のロゴ画像

ここまででもう察しがついてきたと思いますが・・基本的に、テーマオプションの各項目に書いてある説明を読めば、ぜんぶ簡単に設定できてしまいます。このロゴの設定セクションなんてまさに書いてあるとおり。

自分のコンピュータから登録したいロゴ画像を選択して・・

tcd-theme-option_21

必要であれば画像のリサイズや切り抜きをして・・

tcd-theme-option_22

終了。

tcd-theme-option_23

テーマによっては、この後もう1ステップ、表示場所を決めるセクションがあります。これもプレビューを見ながら、ドラッグ&ドロップで移動するだけ。直感的です。

retina-logo_07

retina-logo_08

関連記事

スマホ用のロゴ画像

tcd-theme-option_19-20

これも説明に書いてあるとおりです。スマートフォンでサイトにアクセスした時に、サイト名のテキストに変わって表示される画像を設定できます。つまり、PC閲覧時のようにロゴを設置することができる、ということです。

tcd-theme-option_24

tcd-theme-option_25

ロゴだけだとサイト名の読み方が分かりづらい、なんて場合は、そのままテキスト表示にしておくのもアリだと思います。

tcd-theme-option_26

トップページ・アーカイブページ

tcd-theme-option_27

tcd-theme-option_28

設定項目

項目の表示設定(日付・カテゴリーの表示)

記事タイトルのフォントサイズ

抜粋記事のフォントサイズ

オンマウス時の画像エフェクト

MAGのトップページとアーカイブページの設定内容は全く同じでした。ちなみにアーカイブページとは、あるカテゴリーやタグで絞って表示させた、一覧ページのことです。

tcd-theme-option_29

tcd-theme-option_30

上の場合、「マネジメント」カテゴリーに分類された記事の一覧ページ(アーカイブページ)が表示されています。カテゴリーやタグの設定は、各記事の投稿画面でチェックを入れるだけ。

tcd-theme-option_31

項目の表示設定(日付・カテゴリーの表示)

tcd-theme-option_32

トップページやアーカイブページに公開日やカテゴリーを表示するかどうかを選択できます。

クリックで拡大(非表示/表示)

tcd-theme-option_33

tcd-theme-option_34

記事タイトル・抜粋記事のフォントサイズ

tcd-theme-option_35

この部分  の文字の、表示サイズをそれぞれ指定できます。

クリックで拡大

tcd-theme-option_36

tcd-theme-option_37

オンマウス時の画像エフェクト

tcd-theme-option_38

マウスオーバーしたときのホバーエフェクトを3種類から選択できます。(エフェクト「なし」も選択可能)どれも気持ちいいですね。

MAG_05

MAG_04

MAG_06

次は真骨頂、記事ページの設定です。ここだけでソーシャルボタンの設置をはじめ、広告の設置まで簡単に、自由に設定できてしまいます。

NEXT

ページ:

1

2

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キ…
  2. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  3. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方
  4. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  5. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…

関連記事

  1. child-theme-mechanism_ecmg-ps

    ワードプレス

    WordPressで子テーマを作る際に知っておくべき仕組みと注意点

    知っとかないと、きっと困る。WordPressでカスタマイズをする…

  2. facebook-fast-display_ecmg
  3. retina_ecmg
  4. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  5. screenpresso-initial-setting_ec
  6. facebook-page-plugin_ecmg-ps
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. display-speed_ec
  2. tcd-theme-user-review_ecmg
  3. valuable-content-from-image_ec
  4. tcd-theme-selection_ecmg-ps
  5. todoist-extension_ecmg
  6. improvement-flow_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. chrome-full-screen-capture-ecmg
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. chrome-font_ecmg
  5. compress-jpeg-png-images-ecmg
  6. jpg-gif-png_ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. chrome-full-screen-capture-ecmg
  2. dash_ecmg
  3. firefox-full-screen-capture-ecmg
  4. customized-theme-update_ecmg-1-ps
  5. widgetoon-js-count-jsoon_ecmg
  6. like-button-card_ecmg-ps

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. retina-text-widget-ecmg
  2. unroll-me_ec
  3. backup-all-in-auto_ec
  4. screenpresso-initial-setting_ec
  5. favicon-generator_ecmg
  6. insert-card-link_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. tcd-theme-options_ecmg
  2. quicktag_ecmg
  3. spark-tutorial-ecmg
  4. tcd-css-customize_ecmg
  5. sns-count-cache_ecmg2
  6. blog-theme-mag_ecmg-ps

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. valuable-content-from-image_ec
  2. tcd-theme-selection_ecmg-ps
  3. tcd-mag_ecmg-ps
  4. adjust-the-button_ecmg
  5. todoist_ec
  6. tcd-theme-user-review_ecmg

人気記事

  1. screenpresso-initial-setting_ec
  2. jpg-gif-png_ecmg
  3. child-theme_ecmg
  4. media-setting_ec
  5. chrome-font_ecmg
  6. todoist-basic_ec-ps
  7. chrome-full-screen-capture-ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  2. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  5. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
PAGE TOP