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

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

Requ.log | WordPress Theme【MAG】

mag320_100

ページ:

1

2

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  2. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  3. 仕事に時間をとられ、何もやる気がでない時。がんじがらめ感をスカッ!と解消するモチ…
  4. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  5. サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp …

関連記事

  1. favicon-generator_ec
  2. LightShot-Screenpresso_ec

    WEBデザイン

    辿り着いたキャプチャーツール、LightShotとScreenpresso。その機能比較と併用の魅力…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  3. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  4. adjust-the-button_ecmg

    ワードプレス

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

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

  5. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  6. retina-text-widget_ecrt

    ワードプレス

    【Retinaディスプレイ対応3】ねえ…どうする?widthが効かない。テキストウィジェ…

    意外と知らない、幅調整。WordPressのウィジェットにデフォル…

スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. improvement-flow_ecmg
  2. retina_ecmg
  3. extension-tools-for-bloggers_ec
  4. tcd-theme-selection_ecmg
  5. tcd-theme-user-review_ecmg
  6. todoist_ec
  7. theme-change_ecrt
  8. display-speed_ec
  9. business-books_ecmg
  10. adjust-the-button_ecmg

ピックアップ記事

  1. original-share-button_ecmg
  2. todoist-advanced_ec
  3. todoist-constitution_ec
  4. restriction_ecrt
  5. todoist-class_ecrt
  6. quicktag_ecmg
  7. switch-by-the-device_ecmg
  8. tcd-theme-options_ecmg
  9. sns-count-cache_ecmg
  10. chrome-font_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. アップデートで英語化された!?BackWPupをサクッと日本…
  2. “WEBサイズマスター”へ。Chro…
  3. 基本的なSEOチェックに。DescriptionやOGPを確…
  4. 【Retinaディスプレイ対応3】ねえ…どうする…
  5. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…

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

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  2. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  3. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  4. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. display-speed_ec

    ワードプレス

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