TAテーマ001特徴(自由度が高く高機能)
成長するホームページを制作(自作)するためには、制作者の成長に合った機能を適時に提供する環境が必要です。『TAテーマ001』はこの要求に特化されたWordPressオリジナルテーマです。
フレーム構造に自由を!
自由度の高いテーマはフレーム構造(ヘッダー、メインコンテンツ、サイドバー、フッターなどのサイズや位置)を自由に選べるようになってます。
上図はTAテーマ001の最も基本的(フレームの幅が固定)フレーム構造です。
一般的なホームページの構造です。
サブサイドバーのオンオフ、サイドバーの位置(右左)、それぞれの幅などを細かく設定できます。
※ サイト全ページのフレーム構造を一括設定する以外に、トップページ、各固定ページ、各投稿ページ、一覧ページのフレーム構造を独立に設定することもできます。
しかし、現代のスタイリッシュなホームページを実現するにはこれだけでは物足りません。
最近のホームページではサイドバーをもう少し目立たせる傾向があります。幅を広くしたり、メインコンテンツと同格に見えるようにヘッダー画像・グローバルメニュー(ヘッダーメニュー)やフッターをメインコンテンツに入れて上から下まで突き抜ける様に配置したりします。
TAテーマ001はボタン一つでこのサイドバーを強調するフレーム構造に対応することができます。
これでフレーム構造デザイン選択の幅が大きく広がりました。
しかし、まだ足りません。
イメージ戦略を前面に出す画像中心のホームページやアフィリエイトなどのランディングページに多くみられるブラウザの全幅を利用して表現するフレーム構造です。
ブラウザの幅を変えると、それに従って画像などのサイズが追従します。広義の意味でのレスポンシブWebデザインです。
※ 現在ご覧いただいているページがまさにブラウザの全幅を使って表示しています。
ブラウザ全幅表示モードを使用して大きな画像を使うと都会的で未来を感じるホームページがデザインできます。
TAテーマ001を使用してイメージ戦略ホームページの代表的存在のアップルやソニー風のサイトを作った例が右図をクリックするとご覧いただけます。
画像中心のホームページになりますからコンテンツ制作に時間がかかりますが、見栄えは非常に素晴らしいものになりますから時間をかける価値は十分にあります。
これで様々なフレーム構造をデザインする武器が揃いました。
しかし、まだ足りません。
ヘッダーのバナーエリア(屋号ロゴ、連絡先、検索ボックスなど)が固定されていて他のコンテンツが上部にスクロールしても動かないページがありますよね。
メニューや検索ボックスなどが常に出ていますから閲覧者に親切なページになります。
TAテーマ001ではバナーエリアの固定化に加えて透明度も設定できるようになっています。
更に高級感を醸し出します。
現場、お客様からのフィードバックが入れば・・・
”しかし、まだ足りません”・・・が続いて、更に自由度の高い設定ができるように改善されて行きます。
TAテーマ001はここまで高度なフレーム構造を用意していますので、初心者から始めてもスキルが上がるに従ってどこまでも上を目指せます。
詳細は『TAテーマ001』の取扱い説明をご覧ください。(ボリュームがあるのでお時間のある時にじっくりお読みください)
※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。
自由だけど簡単に設定できるヘッダーバナーエリア(ロゴ・連絡先・検索エリア)
ホームページの各ページの玄関はヘッダー部と呼ばれるところです。
ヘッダー部は表札や名刺の様な自己紹介を行う重要な部分です。
何も無しに、いきなり何かの説明やブログが始まると、読み手としては気持ち悪いですよね。
ヘッダー部はサイト紹介を示す部分(便宜上ヘッダーバナーエリアと称します)と閲覧者の目を引くヘッダー画像で構成される場合が多いです。
ヘッダー画像はイメージ的な表現の場なので具体的な自己紹介はヘッダーバナーエリアが担うことになります。
つまり、ページの初っ端、最先頭にあなたのサイトの具体的な説明を行うわけです。
大事なのは分かるけど、白紙上的に自由にヘッダーバナーエリアをデザインするのは至難の業です。
TAテーマ001はこのヘッダーバナーエリアを自由に、しかも簡単に制作(設定)できます。
多くのサイトのヘッダーバナーエリアを見ると、サイトのロゴ・連絡先・サイト内検索の3つのコンテンツで成り立っていることが分かります。
3つのコンテンツの順番を変えたり、画像とテキストの組み合わせを工夫したり、あえて連絡先を書かなかったり・・・
また、各エリアの一部を使って簡易的なメニューを入れたり、SNSボタンを入れたり・・・
更に、SEO的に重要なh1表記を入れたり・・・
TAテーマ001のヘッダーバナーエリアは3つのエリア(ロゴ・連絡先・検索)を中心に様々なデザインがある程度自由に設定できるようになっています。
”ある程度自由に設定”と表現した理由は、空間だけ用意して白紙上的に自由に制作(デザイン)をさせると制作会社のプロ的なスキルが必要になるからです。
良い塩梅に自由を制限して、ここには○○を挿入、または△△を記入・・・と、デザイン制作を案内しています。
しかし、”成長するホームページ”のサポーターであるTAテーマ001、しっかりと細かい設定が至る所にあります。
例えば、ヘッダー設定(ロゴエリア)の取扱い説明をご覧ください。
TAテーマ001はデフォルトデザインの画像や文言を変更する簡単な設定から、本格的な順番、サイズ、細かいパーツの装飾などの設定(ここまで行くと制作ですね)まで、スキルに合わせてご利用いただくことができます。
あなたのサイトの美しい分かりやすい表札や看板をデザインしてください。
トップページ、ヘッダー、サイドバー、フッターに自由を!(フリーエリア)
WordPressはホームページ制作CMSとして定着しています。
そして、WordPressは制作会社要らずの変幻自在(?)ツールとしても周知されて来ています。
あながち間違いでも無いのですが、少しでもWordPressを触ったことのある人ならば意外と自由にできる箇所が少ないことをご存知だと思います。
WordPressの一番の売りはブラウザから編集ツールを使って固定ページや投稿記事(ブログなど)を更新、修正、削除ができることです。画期的なことです。
しかし、WordPressの編集ツールの編集範囲は意外と限定的です。
左図をご覧ください。一般的なホームページの構成です。ヘッダー、メインコンテンツ、サイドバー、フッターです。
WordPressの編集ツール(固定ページや投稿記事の編集画面のことです)で変更できる範囲は固定ページや投稿記事のメインコンテンツの部分だけです。
他の箇所は各テーマが様々な方法で表示を行っています。
各テーマオリジナルの固定表示エリアを設定して画像とテキストを表示させたり、WordPress標準機能のウィジェットと呼ばれるエリアを設定して表示させたり・・・
様々ですが、何かしらテーマによって制限されています。
これはフラストレーションが溜まりませんか?
TAテーマ001の開発構想は『トップページ、ヘッダー、サイドバー、フッターをWordPressの編集ツールと同じように自由に表現できるように』を方針として掲げました。
そして、各フレーム(ヘッダー、サイドバーやサブサイドバー、フッター、トップページのメインコンテンツエリア)にフリーエリアと称する編集可能エリアを設置しました。
左図はトップページのフリーエリアとサイドバーのフリーエリアの様子です。
コンテンツを一括作成、表示することもできます。(トップページのコンテンツ編集ができるテーマの多くはこのタイプです)
また、左図の様にコンテンツを細かく分けて作成、表示することも可能です。コンテンツの編集・更新が非常に容易にできます。また表示順番も簡単に変更できます。
サイドバーの様にリンク付きバナー画像のコンテンツが多いところでは専用の画像アップロード機能を使うと便利です。
もちろん、個別のバナー編集・更新や表示順の変更も簡単です。
左図はフリーエリアの編集画面です。
下部にフリーエリア特有の機能欄(リンク付き画像挿入や境界線・背景色設定など)がありますが、上部の編集欄は固定ページや投稿記事の編集画面とまったく同じです。
またフリーエリアはコンテンツ毎に表示させるページ(トップページ、固定ページ、投稿記事など)を設定することもできます。
詳しくは『TAテーマ001』の取扱い説明(基本操作)フリーエリア使用方法(ここをクリック)をご覧ください。
TAテーマ001はトップページ、ヘッダー、サイドバー、フッターに自由を与えました。後は、あなたの感性で充実したコンテンツをデザインしていただけたらと思います。
※ 関連記事:ワードプレステーマ フリーエリアはウィジェットかカスタム投稿か?
ヘッダーフリーエリア
左図はヘッダーフリーエリアの表示例です。WordPress標準機能のヘッダー画像と切り替えて使用します。
最近流行りのスライドショー風の表示が可能なプラグインなどのショートコードをヘッダーフリーエリアに張り付けて表示させることが出来ます。
※ 『ヘッダーフリーエリア』は高機能追加プラグイン『ハイエンド』限定の機能です。
トップページフリーエリア
左図はトップページフリーエリアの表示例です。投稿の様にフリースタイルの入力が可能です。
例では一つのコンテンツ画像の表示ですが、数に制限はありません。入力は特別な(カスタム)投稿ページを使用しているので慣れ親しんでいるWordPressの投稿方法で入力が可能です。
各フリーエリアではコンテンツのサイズに制限をつけたり、お好みの境界線を付加したりできます。
トップページはトップキャッチエリアの上部に『TA説明エリア』もあります。(トップキャッチエリアを使用する際にもフリーエリアの連続性を維持させるためです)
※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。
サイドバーフリーエリア
左図はサイドバーフリーエリアの表示例です。トップページフリーエリアと同様にフリースタイルの入力が可能です。
画像などは自動で幅が指定されますので画像加工などは必要ありません。
※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。
サブサイドバーフリーエリア
フッターフリーエリア
エンドロールフリーエリア
左図はエンドロールフリーエリアの表示例です。
特定のコンテンツ(固定ページ、投稿記事など)のコンテンツの末尾に更にコンテンツを続けることができます。(PR)バナーなどの表示が可能です。
※ 『エンドロールフリーエリア』は高機能追加プラグイン『ハイエンド』限定の機能です。
フリーエリアの画像挿入とコンテンツ枠境界線
TAテーマ001はトップページ、サイドバーなどに固定ページや投稿記事と同じ感覚で任意のコンテンツを挿入できるフリーエリアを備えています。
フリーエリアは基本的にどのようなコンテンツにも対応していますが、リンク付のバナー画像を並べる用途が最も多いと思います。
このような使い方を容易にするために、フリーエリアには編集枠や”メディアを追加”を使用しないでも画像挿入とリンクができる専用の機能があります。
上図はサイドバーフリーエリアの例ですが、サイドバーフリーエリアの設定画面の様子を下に示します。
上右図はサイドバーフリーエリア#10の編集画面を拡大したものです。
通常の編集枠を使用しないバナー画像等の挿入設定が簡単にできます。
また、画像バナーや付随文などを枠で囲って強調したい場合があると思います。
HTMLとCSSをご存知の方は通常の編集枠内で記述すれば良いのですが、急いでいる場合やWeb記述に明るくない方には面倒な作業になります。
TAテーマ001はこのような場合にも簡単に対応できます。
上図はサイドバーフリーエリア#10のバナー画像を枠で囲った例です。
このフリーエリアのコンテンツ枠境界線設定は通常の編集枠を使用したコンテンツも対象ですので大変便利です。
TAテーマ001はこだわった高度な制作を強力にサポートしますが、作業を容易にして時間の節約を図る機能も満載です。
※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。
追加記述に自由を!(フリーCSS、フリーJavaScript)
『TAテーマ001』はバージョンアップの影響を受けないCSS、JavaScript記述設置環境をご用意しています。
フリーCSS
汎用性、自由度の高いWordPressテーマを使っても最終的に自分好み(?)に作り込むためにはCSSの追記が必要です。
CSSに不慣れな方でも簡単な修正は可能です。(初歩的な参考書やネットから情報は入手できます)
1、ブラウザFirefoxのFirebugを使って修正したい箇所のHTMLタグのIDやクラスを見つける。(FirebugはサイトのHTML記述などが簡単に解析できるツールです)
2、FTPまたはWordPress管理画面の『外観』→『テーマの編集』でstyle.cssファイルに行く。(CSS編集は誤記等によってWordPressシステムを止めることは無いので安全です)
3、IDやクラスを使ってstyle.cssファイルにCSS記述の追記。
手順としてはこんな感じでしょうか。
CSS記述が正しければちゃんと反映されると思います。
しかし、このやり方には大きな問題があります。
そうです。WordPressテーマのバージョンアップを行うとstyle.cssファイルも新しくなりますから一生懸命書いた追記CSS記述がすべて消えます。
追記部分をコピーして置いて新しいファイルに移植すればOKですが・・・忘れますよね。
WordPressには子テーマというテーマのバージョンアップに対して便利な機能も用意されていますが、これはFTP、子テーマの仕組み、PHPなどのハイスペックのスキルが必要ですから初歩的な人には敷居が高いです。
だったら、WordPress初心者はCSS追記はしない、もしくはCSS追記後はバージョンアップをしない?
こんな間抜けなこと・・・、初心者が自分の納得が行くように少しずつホームページを育てていく『成長するホームページ』を謳っているTAテーマ001に許されるはずがありません。
そこで、TAテーマ001はフリーCSSという機能を採用しました。
テーマの設定として追記CSSをデータベースに記録しますからTAテーマ001のバージョンアップをしてもそのまま追記CSSは継承されます。
これでバージョンアップに備えて子テーマなど複雑なことを考えなくても自由に追記CSSをしてホームページを成長させることができます。
TAテーマ001の追記CSS機能はこれだけに留まりません。
レスポンシブWebデザイン時の追記CSSも同様に設定としてデータベースに書き込みます。
これですべてのCSSの追記がバージョンアップ対策をしなくても可能になります。
フリーCSS機能・・・地味ですが有用性はまさに縁の下の力持ちと言えるのではないでしょうか。
フリーJavaScript
左図はJavaScript記述の設定画面です。
WordPressの内蔵jQueryライブラリーを使用出来ます。『TAテーマ001』のバージョンアップを行ってもこのJavaScript記述設定はデータベースに残ります。
※ 『JavaScript記述の設定』は高機能追加プラグイン『ハイエンド』限定の機能です。
サイト表示速度に影響を与えないCSSファイル生成
自由度の高い一般的なWordPressテーマは設定値をPHPやJavaScriptなどで逐次計算させて機能を実現します。
そのため、旧来のHTMLファイルのみのサイトに比べると演算時間分遅くなります。(PHP7シリーズの登場で大幅に改善されましたが)
特にCSSと呼ばれるデザインを表現する記述の計算は量が多いため、演算時間の大部分を占めます。
これを閲覧者がアクセスする度に計算させていては表示スピードに大きな影響が出ます。
自由度の高いTAテーマ001にも非常に多くの設定項目があります。
そして、もちろんその多くはCSS記述に関わっていますので、サーバーでの演算時間が問題になります。
そこで、『TAテーマ001』では設定時にのみCSS演算(ファイル生成)を行い、常時アクセス時のPHP計算量を必要最小限にしています。
そのため、これだけ自由度の高い『TAテーマ001』ですが、普通の固定的なWordPressテーマと比較しても表示速度に遜色はありません。
次項目の”自由度の高い『TAテーマ001』ですが、速いです”に実際の表示測定の結果紹介がありますのでご参照ください。(必要以上に数値にこだわらなくても良いですが・・・)
TAテーマ001はPHP演算量の多いCSSファイル生成を設定時に行うため、サイトデザイン設定の際にサーバーの処理時間が若干かかります。(固定ページや投稿記事の編集・更新などの場合にはCSSファイルは生成しませんので通常のWordPressの処理時間と同じです)
そこで、TAテーマ001がCSSファイルの生成を行う際には処理時間を少しでも節約するために必要最低限の更新量にしています。
設定項目を細かく分けて、その設定に関係するCSSファイルだけを更新するわけです。(CSSファイルが複数出来ますが、運用上まったく問題ありません)
それでも、非力なレンタルサーバーや旧バージョンのPHPなどの環境では、どうしてもTAテーマ001設定更新(CSSファイル生成)に時間がかかることがあります。(弊社では10秒以上の更新時間は長いと定義しています)
これを解決するために、TAテーマ001には設定値の更新とCSSファイル生成を分離する機能を用意しています。
この機能を有効にすると、上右図の様に、TAテーマ001設定の更新(青い更新ボタン)とCSSファイル生成(ピンクのボタン)が設定画面に表示されます。
設定を細目に行ってもCSSファイルは同時生成されませんから高速にデータベース更新ができます。
そして、ある程度設定を行ってからCSSファイルを更新すると、1回のファイル生成処理時間で済みます。
あと数年も経てば、サーバーやPHP等の高速化が更に進んで、このようなお助け機能は笑い話の一つになると思います。
それまでは『工夫で』です。
自由度の高い『TAテーマ001』ですが、速いです
TAテーマ001はサイト設定時にCSS演算(ファイル生成)を行うために、サイト表示速度は普通の固定的なWordPressテーマと比較しても遜色はないことは前述しました。
以下に実測データがありますのでご紹介します。
※ 実測データは指標に過ぎませんので、必要以上に気にしないことをおすすめします。(測定値は都度変わりますし、0.7秒が0.5秒になっても人間の感覚では分かりませんから)
読み込み速度の比較
上図はWordPress標準テーマTwenty FifteenとTAテーマ001の読み込みの実測例(FireBug)です。Ctrl+F5(コントロールキーを押しながらF5)はパソコン側のキャッシュを使用しないで読み込むモードです。F5はパソコンにあるキャッシュを積極的に使用して再読み込みを行います。
同じ内容のサイト(ほとんどコンテンツは無い)をテーマを切り替えて比較しています。
TAテーマ001:Ctrl+F5 -> 721ms(0.72秒)、F5 -> 473ms(0.47秒)
Twenty Fifteen:Ctrl+F5 -> 661ms(0.66秒)、F5 -> 357ms(0.36秒)
数字自体は計測の度に変化するので大きな意味は無いのですが、TAテーマ001の方が画像や読み込みのCSSファイルやJavaScriptライブラリが多いにも関わらず遜色のない結果に注目して頂けたらと思います。
PageSpeed Insightsの比較
上図はWordPress標準テーマTwenty FifteenとTAテーマ001のPageSpeed Insightsの実測例です。
同じ内容のサイト(ほとんどコンテンツは無い)をテーマを切り替えて比較しています。
TAテーマ001:モバイル -> 79点、パソコン -> 93点
Twenty Fifteen:モバイル -> 74点、パソコン -> 87点
数字自体は計測の度に変化するので大きな意味は無いです。TAテーマ001とTwenty Fifteenはほぼ同点の評価と言えます。
上記の比較例はTAテーマ001のPHP処理やCSSファイル作成が実際のサイト運営上問題の無いことを示しています。
自由度が高く高機能ですが安心してサイト構築を行っていただける環境をぜひ体感してください。
※ 上記の比較を行った際の条件です。
① 使用レンタルサーバー:さくらレンタルサーバ スタンダード
② WordPressバージョン:4.4.2、③ PHPバージョン:5.6.18
④ TAテーマ001バージョン:2.01、⑤ プラグイン『ハイエンド』バージョン:2.01、⑥ プラグイン『プロ』バージョン:2.01
⑦ Twenty Fifteenバージョン:1.4
⑧ 有効プラグイン:WP Multibyte Patch(2.5), WP Super Cache(1.4.8)
⑨ 使用ブラウザ:読み込み比較:FireFox(44.0.2), FireBug(2.0.14)、PageSpeed Insightsの比較:Chrome(49.0.2623.87 m)
⑩ SNSのJavaScript SDK等は機能をオフにして測定しています。(外部通信時間を排除するため)
常に最新の環境にアップデートされています
WordPressはオープンソースという性格上、関数の見直しや統廃合が多いプラットフォームです。テーマやプラグインなどで使用する関数などを常に監視していないと非推奨エラーが表示されたり、最悪は動作が停止したりする可能性があります。
TAテーマ001は開発者自ら毎日現場でテーマを触っていますから些細な不具合も見落としません。問題の大きさに従ってマイナーチェンジ、フルチェンジなどのバージョンアップをスムーズにタイムリーに行うことができます。
また、WordPressを機能させているPHPというプログラム言語のバージョンアップにも常に気を付けています。2015年末にPHPの高速版7がリリースされましたが、いち早く確認作業を行って対応済みになっています。