tcd-theme-options_ecmg

ワードプレス

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

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

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

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

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

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

tcd-theme-option_01

ここでは、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テーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

絵文字の設定

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

 関連記事

ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像の解像度アップ

スマホ用のロゴ画像

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

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

ページ:

1

2

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  2. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  5. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…

関連記事

  1. customized-theme-update_ecmg-1-ps

    ワードプレス

    子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と注意点

    もう、逃げなくてもえーんやで。ついにやってきた、WordPre…

  2. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

  3. mergely-ecmg

    ワードプレス

    「違い」を調べる神ツール。テキストファイルの差分比較、合併ができるMergelyの使い方

    神のツールを手に入れた男。遠い昔の話。正直者の男の目の前に、ある2…

  4. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  5. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  6. browzer-extension_ec

    ワードプレス

    ”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info…

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

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

特集記事

  1. display-speed_ec
  2. improvement-flow_ecmg
  3. tcd-theme-user-review_ecmg
  4. tcd-mag_ecmg-ps
  5. todoist-extension_ecmg
  6. valuable-content-from-image_ec
  7. tcd-theme-selection_ecmg-ps
  8. extension-tools-for-bloggers_ec

ピックアップ記事

  1. quicktag_ecmg
  2. sns-count-cache_ecmg
  3. unroll-me_ec
  4. facebook-page-plugin_ecmg-ps
  5. customized-theme-update_ecmg-1-ps
  6. gif-animation_ec
  7. intuitive-custom-post-order_ec
  8. tcd-theme-widget_ecmg

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. retina-os-solution_ecmg
  2. meta-seo-inspector_ecmg
  3. screenpresso-initial-setting_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-basic_ec-ps
  2. jpg-gif-png_ecmg
  3. dash_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. restriction_ecmg-ps
  2. reset-button_ecrt
  3. blog-contents_ecrt
  1. adjust-the-button_ecmg

    ワードプレス

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

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  3. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  5. theme-change_ecrt

    ワードプレス

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