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. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…
  2. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  3. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  5. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…

関連記事

  1. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  2. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー

    基本機能と実際の使用感。WordPressは、初心者でも本格的なW…

  3. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  4. jpg-gif-png_ecmg
  5. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressテーマTCD「オリジナルウィジェット」の効果的な使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  6. browzer-extension_ec

    ワードプレス

    なんでも計測!”WEBサイズマスター”へ。Chrome拡張「Page Ruler Redux」「Vi…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

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

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. tcd-mag_ecmg-ps
  3. improvement-flow_ecmg
  4. theme-change_ecrt
  5. tcd-theme-user-review_ecmg
  6. todoist-tips_ecmg

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

todoist

人気記事

  1. media-setting_ec
  2. child-theme_ecmg
  3. screenpresso-initial-setting_ec
  4. chrome-full-screen-capture-ecmg
  5. child-theme-mechanism_ecmg-ps
  6. chrome-font_ecmg-1

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

tcd-mag

ピックアップ記事

  1. todoist-advanced_ec
  2. compress-jpeg-png-images-ecmg
  3. todoist-class_ecrt
  4. todoist-productivity_ecmg
  5. todoist-basic_ec-ps
  6. lightshot_ecmg

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

retina-os-solution

掘り出し記事

  1. analytics-ip-filter-ecmg
  2. todoist-re-schedule_ec
  3. browzer-extension_ec
  4. retina-weight-saving_ecmg
  5. backup-all-in-auto_ec
  6. mergely-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. enlarge-image-ecmg
  2. media-setting_ec
  3. simple-image-sizes_ec-ps
  4. original-share-button_ecmg-ps
  5. todoist-constitution_ec
  6. blog-theme-mag_ecmg-ps

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. valuable-content-from-image_ec
  2. retina_ecmg
  3. todoist_ec
  4. todoist-extension_ecmg
  5. tcd-theme-selection_ecmg-ps
  6. tcd-theme-user-review_ecmg

人気記事

  1. chrome-font_ecmg-1
  2. compress-jpeg-png-images-ecmg
  3. media-setting_ec
  4. screenpresso-initial-setting_ec
  5. jpg-gif-png_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. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  2. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  4. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  5. extension-tools-for-bloggers_ec

    ブログ

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