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. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  2. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  4. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  5. WordPressで子テーマを作る際に知っておくべき仕組みと注意点

関連記事

  1. facebook-fast-display_ecmg
  2. valuable-content-from-image_ec

    ワードプレス

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

    記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からな…

  3. retina-slider_ec

    ワードプレス

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

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

  4. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  5. feedly-count-problem_ecmg

    ワードプレス

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

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

  6. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

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

特集記事

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

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

todoist

人気記事

  1. child-theme_ecmg
  2. todoist-basic_ec-ps
  3. child-theme-mechanism_ecmg-ps
  4. screenpresso-initial-setting_ec
  5. jpg-gif-png_ecmg
  6. chrome-font_ecmg-1

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

tcd-mag

ピックアップ記事

  1. facebook-page-plugin_ecmg-ps
  2. tcd-theme-options_ecmg
  3. chrome-font_ecmg-1
  4. compress-jpeg-png-images-ecmg
  5. gif-animation_ec
  6. facebook-fast-display_ecmg

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

retina-os-solution

掘り出し記事

  1. screenpresso-capture-ecmg
  2. retina-os-solution_ecmg
  3. pushbullet_ec
  4. favicon-generator_ecmg
  5. todoist-design_ec
  6. facebook-app-id-app-secret-ecmg2

ゆっくり、フシギな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. original-share-button_ecmg-ps
  2. lightshot_ecmg
  3. widgetoon-js-count-jsoon_ecmg
  4. compress-jpeg-png-images-ecmg
  5. gif-animation_ec
  6. todoist-routine_ecrt

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. improvement-flow_ecmg
  2. theme-change_ecrt
  3. todoist-tips_ecmg
  4. retina_ecmg
  5. tcd-theme-user-review_ecmg
  6. valuable-content-from-image_ec

人気記事

  1. todoist-basic_ec-ps
  2. media-setting_ec
  3. compress-jpeg-png-images-ecmg
  4. child-theme_ecmg
  5. chrome-font_ecmg-1
  6. jpg-gif-png_ecmg
  7. screenpresso-initial-setting_ec

最近の記事

  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. improvement-flow_ecmg

    マネジメント

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

    ブログ

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  5. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP