理想のWEBサイトを直感デザイン。シコウシコウCURATIONCONTACT未来をデザインしていくための発信ログ。ブログ理想のWEBサイトを直感デザイン。Updated:2018.04.11理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方feedly138TweetShare2Hatena14Pocket6サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。サイトのテーマカラー、ロゴの設置、SNSシェアボタンの設置などなど・・・シェアボタンって、どうやったら設置できるんだろう?サイトロゴって、どう設置すればいーの?PHP?アーハン?・・なにソレ色々と方法を探ってみるのもまあ、勉強になっていいものです。納得のいくサイトが完成するのはいつになるやら・・・。TCDテーマなら専門的な知識は不要。私たちのような素人でも簡単に、イメージどおりに設定できてしまいます。プロに外注するような本格的なサイトを自分で作れて、管理していける。そんな時代が来た、ということですね。ここでは、TCDテーマならではの機能が集約した【テーマオプション】を紹介。サイトレイアウトを直感的に、簡単に設定できる様子をお伝えします。スポンサーリンクサイト設定はほぼここで完結。「TCDテーマオプション」TCDテーマをインストール・有効化すると、「外観」の中に「TCDテーマオプション」が現れます。この中だけで、サイトの構成や見栄えをほとんど設定できてしまいます。テーマオプションは次々とリリースされているテーマごとに、独自に設計されています。多少の違いはあるんですが、基本的な内容は同じ。テーマに適した設定項目がそれぞれ用意されていて、自由に、簡単にカスタマイズ出来るようになっています。このサイトで利用しているテーマ「MAG」を例に見ていきましょう。色の設定ここでサイトのテーマカラーを指定できます。ここの設定だけでも、サイト全体の印象が大きく決定づけられます。MAGではメインカラー・第2カラー・第3カラーが用意されていて、メインカラーはその名の通り、サイトの要所に反映されます。第2カラーはリンクをマウスオーバーした時のカラーに適用され、第3カラーはグローバルメニュー(最上部にあるメニュー)のサブメニューをマウスオーバーした時の背景色に適用されます。第3カラーカラーコード(色を表す数字)を直接入力することも出来ますが、カラーパレットで直感的に選べるのも嬉しいところ。これだけでサイトの大まかな印象が決まりました。TOPページ記事ページ固定ページ共通フッターレイアウトの設定ここではなんと、サイト全体のカラムデザインをクリックひとつで変更できます。記事数や広告の設置場所、サイトコンテンツにあわせて・・・または気分にあわせて、いつでも切り替えることができる。テーマ何個分かがセットになったようなおトク感ですね。カスタムCSSここはとりあえずは触らなくても大丈夫な場所、という認識で大丈夫です。サイト運営をしていくうちに少しづつ、HTMLやCSSといった知識はついていくもの。なってくると・・・この見出しのデザインを変えてみたいなぁ・・という、いい意味で「自分だけのカスタマイズをしてみたい欲求」が生まれてきたりします。そんな時、必要なコードをここに記載しておくだけで反映されるという、後々ヒジョーーに重宝する機能です。詳しく知りたい方へ(クリックでOPEN)「カスタムCSS」には、大きく分けて3つのメリットがあります。初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けたくてもいつかは必ずやぶち当たる・・魔物なアイツ。!えす!えす!記事装飾などにはどーしても必要になってきます。ここで紹介する「TCDテーマで簡単にできるデザイン...絵文字の設定WordPressにはデフォルトで実装されている絵文字があります。・・・あまり使われているのを見たことはありません。残念なことに、絵文字を使っていなくても、絵文字ライブラリを呼び出すためにページ表示が遅くなってしまうという・・・で、ここではその不要な「呼び出し」をクリックひとつで制御してくれます。ページの表示速度が改善される、ありがたい機能です。レスポンシブデザインの設定TCDテーマはほとんどがデフォルトでレスポンシブ。スマートフォンなどで閲覧した際のレイアウトも画面の大きさなどによって最適化し、見やすく表示されます。ここではあえて、その「最適表示をさせない」ことができます。どんな閲覧環境でもPC表示と同じレイアウトを表示させたい!そんな希望にも、「利用しない」にチェックを入れるだけで対応してくれます。設定項目パソコン用のロゴ画像スマホ用のロゴ画像パソコン用のロゴ画像ここまででもう察しがついてきたと思いますが・・基本的に、テーマオプションの各項目に書いてある説明を読めば、ぜんぶ簡単に設定できてしまいます。このロゴの設定セクションなんてまさに書いてあるとおり。テーマによっては、この後もう1ステップ、表示場所を決めるセクションがあります。これもプレビューを見ながら、ドラッグ&ドロップで移動するだけ。関連記事2015.10.10ゆっくりじわじわ、フシギな色変化。色が変わるサイトロゴを簡単に。休むことなく働き続ける、一生懸命な画像。「GIFアニメーション」という存在だとは知っていても、他には何も知らない。少なくとも、自...2016.04.03【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像の解像度アップサイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置しています。Windowsだけでなく、MacのRetinaディスプレイで見ても綺麗に表示されているのが確認できるでしょう。WEBサイトの顔とも言えるサイトロゴだって、Retina対応し...スマホ用のロゴ画像これも説明に書いてあるとおりです。スマートフォンでサイトにアクセスした時に、サイト名のテキストに変わって表示される画像を設定できます。PC閲覧時のようにロゴを設置することができる、ということです。ロゴだけだとサイト名の読み方が分かりづらい、なんて場合は、そのままテキスト表示にしておくのもアリだと思います。項目の表示設定(日付・カテゴリーの表示)記事タイトルのフォントサイズ抜粋記事のフォントサイズオンマウス時の画像エフェクトMAGのトップページとアーカイブページの設定内容は全く同じでした。ちなみにアーカイブページとは、あるカテゴリーやタグで絞って表示させた、一覧ページのことです。上の場合、「マネジメント」カテゴリーに分類された記事の一覧ページ(アーカイブページ)が表示されています。カテゴリーやタグの設定は、各記事の投稿画面でチェックを入れるだけ。項目の表示設定(日付・カテゴリーの表示)トップページやアーカイブページに公開日やカテゴリーを表示するかどうかを選択できます。文字の、表示サイズをそれぞれ指定できます。クリックで拡大オンマウス時の画像エフェクトマウスオーバーしたときのホバーエフェクトを3種類から選択できます。(エフェクト「なし」も選択可能)どれも気持ちいいですね。次は真骨頂、記事ページの設定です。ここだけでソーシャルボタンの設置をはじめ、広告の設置まで簡単に、自由に設定できてしまいます。"いいね!"Facebookで更新情報をお届け。【PR】アップデートで英語化された!?BackWPupをサクッと日本語化する方法TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビューピックアップ記事もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする【基本編】スケジュール・タスク管理の大黒柱。意外と知らない、WordPressの”お気づかい”ひとつの画像をW...ブログChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウ...上から下までの、全体像をゲット。今見ている「WEBページ全体...ワードプレス【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適...簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき...ワードプレス便利すぎて、もうヤミツキ。Cacheの設定方法と有効...必要な設定だけにフォーカス。一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、...WEBデザインゆっくりじわじわ、フシギな色変化。色が変わるサイトロゴを簡単に。休むことなく働き続ける、一生懸命な画...【Requ.log記事】魅力的なブログを、今すぐ作る。【Requ.log記事】魅力を活かす、カスタマイズまとめ。【フリーランス必見】確実に納期を守るために。タスク...僕らの合言葉、【No-u-Ki】。...【保存版】知ったら戻れない、美しさの極みへ。Wor...Retinaでも見劣りしないWEBサイトへ。WEBサイトのRetina対応、...TCDテーマの強みとは?他テーマとの違いと基本機能...基本機能と実際の使用感。WordPressは、初心者でも本格的なWEBサイト...【小技特集】もっと使いこなす!おすすめタスク管理ツ...小技を制してラクしよう。タスク管理ツールTodoistは、直感的に利用できる...【目的別】とっておきのWordPressテーマ比較...TCDの、おすすめテーマを選抜。魅力的なWordPressテーマを次々とリリ...【実例集】細部の余白まで美しく。オリジナルシェアボ...もっと思い通りに。WordPress...意外と知らない、WordPressの”お気づかい”ひとつの画像をWordPr...「10分で終わらせてくるっ!」WordPress子...とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え?記事下に...Screenpresso(スクリーンプレッソ)を使...使いはじめたら、もう手放せない。【Screenpresso】(スクリーンプレ...【基本編】スケジュール・タスク管理の大黒柱。万能ツ...まずはここから。Todoistの基本編。【Todoist】は、いわゆるタスク...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。変...やさぐれたあのコを、美しかったあの頃に。クロームちゃんてさ・...魅力的なブログを、今すぐ作る。子テーマ使用者必見!カスタマイズしたWordPre...もう逃げなくても、えーんやで。やってきた、WordPressテーマ...理想のWEBサイトを直感デザイン。「TCDテーマオ...サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最初におおま...メディア問題さん、さようなら。画像サイズを気ままに...挿入画像サイズ、もっと自由に選びたい。お悩み相談室のコーナーです。今回の...WordPressで子テーマを作る際に知っておくべ...知っとかないと、きっと困る。WordPressでカスタマイズをするなら、「子...FirefoxでWEBページ全体をフルスクリーンシ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...Twitterのシェア数表示を復活!「widget...簡単登録で、後はおまかせ。【Retinaディスプレイ対応2】スリムで美しいブ...Macでもサクサク表示させたい。モチベーションアップ...続けたくなる、”デザイン”。タスク管理って、つまるところ『やりたいこと、やる...辿り着いたブログ用キャプチャーツール、LightS...併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャーツールL...簡単に予定変更。Todoistで実現する、カレンダ...続けるために必要な、ちょうどいい気軽さ。やるべきこと、やりたいこと。そんなた...ゆっくり、フシギなGIFアニメ。最近の記事FirefoxでWEBページ全体をフルスクリーンシ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ポチッ、でビョイーン。クリックで画像を拡大表示させ...インストールしたら、もう使える。記事のなかに画像を挿入したものの、思っ...Todoistとも連携。複数のメールアカウントを一...もうメールはブラウザで開かない。GmailやYahooメールなど、複数のWE...とっておきのWordPressテーマ。ピックアップ記事ほら、こんなに直感的。投稿記事の順番を並び替えるW...記事の順番だって、自由に決めたい。ブログなどのトップページで表示されている投...FirefoxでWEBページ全体をフルスクリーンシ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...メディア問題さん、さようなら。画像サイズを気ままに...挿入画像サイズ、もっと自由に選びたい。お悩み相談室のコーナーです。今回の...魔法のような仕事効率化。ブログにも使えるWindo...「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・・・パソコ...WordPress初心者にオイシイ、簡単記事装飾。...反則ギリギリな簡単さ。小見出しのデザインを美しくしたい?ああ、例えば、世にも...カッコ美しい、オリジナルシェアボタン。サイトデザイ...美しいボタンで、シェアしてもらおう。Recommend特集記事いつでもどこでも即タスク化。Todoistの便利す...さらに便利に。Todoistはそれ自体の持つ機能でじゅう...【保存版】知ったら戻れない、美しさの極みへ。Wor...Retinaでも見劣りしないWEBサイトへ。WEBサイトのRetina対応、...【目的別】とっておきのWordPressテーマ比較...TCDの、おすすめテーマを選抜。魅力的なWordPressテーマを次々とリリ...「わかりやすいブログ」に必須の「伝わりやすい画像」...記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からないことがど...【フリーランス必見】確実に納期を守るために。タスク...僕らの合言葉、【No-u-Ki】。...【作業順まとめ】ブログを彩る!記事作りが捗る!クオ...知らなきゃもったいない。先日、とある交差点で信号待ちをしていた時のこと。pn...ブログレベルならこれだけでOK。WEBサイトで使う画像の拡張子、何にしてます...WordPressで子テーマを作る際に知っておくべ...知っとかないと、きっと困る。変...やさぐれたあのコを、美しかったあの頃に。クロームちゃんてさ・...きれいにしっかり画像圧縮。WordPressプラグ...どうせ圧縮するなら、きれいにしっかり。WEBサイトに表示させる画像は、ファイ...「10分で終わらせてくるっ!」WordPress子...とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え?記事下に...Screenpresso(スクリーンプレッソ)を使...使いはじめたら、もう手放せない。【Screenpresso】(スクリーンプレ...【基本編】スケジュール・タスク管理の大黒柱。万能ツ...まずはここから。Todoistの基本編。【Todoist】は、いわゆるタスク...最近の記事FirefoxでWEBページ全体をフルスクリーンシ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ポチッ、でビョイーン。クリックで画像を拡大表示させ...インストールしたら、もう使える。記事のなかに画像を挿入したものの、思っ...Todoistとも連携。複数のメールアカウントを一...もうメールはブラウザで開かない。レク.ログ】ご活用ルールマネジメント”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活...マネジメント【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12...マネジメントいつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選ワードプレス魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ...ワードプレス【目的別】とっておきのWordPressテーマ比較。ThemePICKUPきれいにしっかり画像圧縮。WordPressプラグ...どうせ圧縮するなら、きれいにしっかり。WEBサイトに表示させる画像は、ファイ...もっとストレスフリーに・・Todoistの連携ワザ...意外と盲点?Todoistを効率化。