成長するホームページを制作（自作）するためには、制作者の思いを形にする様々な機能が必要です。『TAテーマ001』はプラグイン無しであなたを強力にサポートします。

メニュー

WordPressには非常に優れたメニュー機能が標準で備わっています。

同じサイト内の固定ページや投稿記事などであればタイトル名やスラッグ名の変更をしても追従しますし、削除（ゴミ箱へ移動）するとメニューから自動で外してくれます。

ただし、このWordpress標準メニュー機能を使用するためには手続きが必要です。（詳しくはこちらをご覧ください）

TAテーマ001はたくさんのWordpress標準メニューを使用できます。（正確にはWordPress標準メニュー機能に関連付けできるメニューですが、長いので・・・）

上図はTAテーマ001で使用できるメニューの関連付け画面の様子です。

全部で7種類のメニューが用意されています。以下にそれぞれの説明を行います。

　

連絡先エリア簡易メニュー

ヘッダーバナーエリアにある連絡先エリアに設置可能な簡易メニューです。（子孫展開無しの横型のみ）

シンプルなデザインのメニューですが、連絡先に関係のあるリンク先表示に便利です。

　

検索エリア簡易メニュー

ヘッダーバナーエリアにある検索エリアに設置可能な簡易メニューです。（子孫展開無しの横型のみ）

ホーム、サイトメニューなどの基本的なリンク先を表示することが多いです。

　

グローバルメニュー（ナビゲーション）

サイト中で最も重要なメニューです。

サイトのデザインにも大きな影響を与える存在なのでデザイン設定も詳細にできます。

上図はPC版デザインの設定の取扱い説明の様子になります。

レスポンシブデザイン時は独立にデザイン設定が可能です。

　

サイドバーメニュー

サイドバーメニューは多くのユーザー様のご要望で実現したものです。

メニュー項目のデザインはヘッドラインで指定出来て、サイドバーフリーエリアを使用して簡単に縦に並べるメニューが欲しいというご意見です。

確かに主要なメニューはデザインの手間がかかります。

ヘッドラインのデザインの流用であれば制作時間の大幅な節約になります。

サイドバーメニューの使い方は非常に簡単です。

下図の様に項目デザインに使用するサイドバーヘッドラインを選択して、表示したいサイドバーフリーエリアで設定するだけです。

フッターメニュー

フッターに設置可能な簡易メニューです。（横型の子孫展開は表示されません）

グローバルメニューから距離があるフッターなのでグローバルメニューのコピー的な表示をさせることが多いです。

　

TA汎用メニュー

　

TA画像説明付メニュー

このメニューはショートコードを貼り付ければどこでも使用できるメニューとして用意されています。

TA画像説明付メニューは他のメニューと趣が変わっていてメニューに画像が付くことを前提にしています。

例えば画像付きでリンク先を説明したい場合に便利です。

また、人気の投稿記事をアイキャッチと共に紹介することもできます。

画像を扱い視覚的にも映える必要のあるメニューのため細かい設定が可能になっています。

下図に設定の様子を示します。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

ヘッダー画像

ワードプレステーマの中でもヘッダー画像は花形スターです。

グローバルメニューやサイトロゴなどと一体化させてサイトを盛り上げます。

WordPress標準のヘッダー画像は簡単な宣言関数をテーマ内のfunctions.phpに書くと機能が有効になります。

後は表示したい箇所にオマジナイ（PHP混在のHTML記述）を書くだけです。

関数などを記述するのはテーマの役割なのでユーザーの皆さんは気にしないで大丈夫です。

WordPress標準のヘッダー画像機能が有効かどうかはWordPress管理画面のサイドバーにある『外観』に”ヘッダー”が存在するかどうかで確認できます。（上右図）

この”ヘッダー”をクリックするとヘッダー画像の設定画面に移動します。（標準のヘッダー画像機能の使い方はWordPressの教科書等をご覧ください）

通常、ヘッダー画面のサイズ（幅、高さ）はfunctions.phpに書かれる宣言関数に設定するため、テーマによっては固定値の場合があります。

　

TAテーマ001のヘッダー画像機能は非常に充実しています。

上図はTAテーマ001のヘッダー画像の取扱い説明の図です。

ブラウザから画像の非表示、画像サイズ、リンク先、画像の上に表示させるテキスト（設定は別項目）の設定が可能です。

また、慣習的にヘッダー画像はトップページのみに表示させる場合が多いのですが、全ページに表示させることもできます。

WordPress標準のヘッダー画像に変えてスライド表示や他のコンテンツを挿入したい場合もあります。

TAテーマ001ではそのような場合に活用できるツールとして（TAヘッダー）フリーエリアを用意しています。

フリーエリアは固定ページや投稿記事と同じような編集方法でコンテンツ制作が可能です。

スライド表示を行いたい場合はフリーエリアにスライド表示等のプラグイン（例えばMeta Slider）のショートコードを貼り付けるだけでOKです。

　

更に、TAテーマ001は固定ページ、投稿記事カテゴリー毎に個別のヘッダー画像を設定できます。

上図は固定ページの個別ヘッダー画像設定の様子です。

固定ページ、投稿記事カテゴリーの場合にはスライド表示等のプラグイン（例えばMeta Slider）のショートコードを入力する欄があります。

　

ヘッダー画像はサイトの大スターですからTAテーマ001の多彩な機能を使ってスポットライトを当ててください。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

サイトマップ

ホームページ（サイト）にはお決まりのページがいくつかあります。

トップページ（以前はホームページと呼ばれることが多かった）とサイトマップです

トップページの説明は不要だと思いますが、サイトマップとは何でしょうか。

　

実は、非常に重要な役割を持っているページです。

　

左図はTAテーマ001公式サイトのサイトマップです。

現在サイトに存在している全てのコンテンツが目次の様にリストされています。（制作者が意図的に非表示にしているページもあります）

ブログの様な投稿記事は全数表示すると大変なことになるのでカテゴリー名に代表させます。

　

ただ、これだけです。

　

このページの何が重要なのでしょうか？

ホームページ（サイト）を一度でも制作したことある方なら理解できると思いますが、分かりやすいページ（メニュー）構成を構築することは非常に難しいです。

内容が似ているページは親タイトルでまとめて複数の子ページとして展開・・・

子ページも書きたいことが増えて来たら孫ページに展開・・・

制作者は分かりやすく良かれと思ってツリー構造を作りますが、初めて見る人からすると複雑にみえる・・・

　

お金をかけた大企業のサイトは様々な工夫で分かりやすい構成になっていますが、それでもちょっと深いところを閲覧していると、元いた場所に戻れなくなります。

つまり、サイト内で迷子になるのです。

　

これはリンクでページを移動する仕組みを持った、ホームページ（サイト）の正解の無い宿命です。

　

改善はできますが、解決は不可能です。

あなたのサイトで迷子になる人は必ずいます。

　

サイトマップは迷子になった人が頼りにするサイト横丁の交番の様な存在です。

迷ったら取り敢えずサイトマップ（交番）に行って前いた場所や本当に行きたい場所を教えてもらうわけです。

なるべく閲覧者にサイトマップを使わせないようにページ構成を工夫するべきですが、サイトマップが存在しないホームページ（サイト）はあり得ません。

　

この重要なサイトマップをTAテーマ001は自動で作成します。

テーマのインストール時に自動的に専用の固定ページも生成しますので意識しなくても大丈夫です。（もちろん削除、変更は可能です）

サイトマップはその存在目的から、それほどデザインに凝る必要はないのですが、TAテーマ001は詳細まで設定が可能です。

更にTAテーマ001は固定ページや投稿記事カテゴリーを個別にサイトマップに表示するかどうかを設定できます。

非リンクコンテンツや隠しページなどに使用できます。

下図は固定ページとカテゴリーの編集画面の様子です。

投稿ダイジェスト

WordPressのだいご味はブログなどの投稿記事の作成や更新の容易さではないでしょうか。

WordPressの名前が示す通りもともと投稿記事を前提に作られたから当たり前ですね。

ブログや各種投稿記事の量産（？）が可能になりましたが、書いたからには読んでもらいたいです。

そもそも見てくれる人がいなかったら良質の記事を書くモチベーションが出ないからです。

　

TAテーマ001は開発当初から投稿記事ダイジェストが重要との認識がありました。

これまでご支援してきたWordPress自作のみなさんが全員こだわるのがダイジェスト（新着情報や各ブログの最新記事紹介です）だからです。

これだけ重要な機能なのにWordPressテーマの中ではカスタマイズ扱いが続いています。プラグインがあってもデザインが事務的だったり・・・

TAテーマ001は新着情報（すべてのカテゴリーが対象）と各種投稿ダイジェスト（カテゴリー別）がトップページ、サイドバー、サブサイドバーでそれぞれ独立にデザイン調整や詳細設定を行うことができます。

新着情報

各種投稿ダイジェスト

ヘッドライン（見出し）

WordPressのテーマを選ぶときにヘッドラインのデザインで決める方が多いのではないでしょうか。

ヘッドライン？

英語で新聞などの見出しを意味するとのことです。要はタイトルですね。

HTMLを少し経験された方であればご存知だと思いますが、<h1>、<h2>の様にhの後に数字のついているタグのことをヘッドラインと言います。

例えば、上部にある、この項目のタイトル『ヘッドライン（見出し）』は<h3>を使用したタイトルです。

確かにサイトのデザインの中でタイトルの占める割合は大きいと思います。

タイトルがクールだと全体的に引き締まりますし、かわいいデザインですとほのぼのとした雰囲気になります。

通常のWordPressテーマのヘッドラインデザインは固定（変更できない）の場合が多いので、成長するホームページを推奨している立場としては何とかしなければならない課題でした。

なぜならば、ホームページを作っていて途中で雰囲気を変えたいと考えることはごく自然のことだからです。この様な時にデザインの中で大きな影響力を持つヘッドラインの変更が出来なければ大問題です。

TAテーマ001はヘッドライン（h2～h5：h1は特別なヘッドラインなので設定はしません）を自由にデザインすることができます。

上図をご覧ください。TAテーマ001で作成したヘッドライン例の一部です。

文字サイズ、太字、左寄せやセンタリング、背景ボックス、タイトルやボックスの色、ボックス角の丸み、ボックスの吹き出し、グラデーション配色、背景画（背景画は後項で改めて説明します）　・・・

あらゆることが設定できます。

更に、TAテーマ001のヘッドラインはメインコンテンツ、サイドバー、サブサイドバー、フッターでそれぞれ独立に設定できます。（共通設定も可能です）

※ 設定項目詳細は『TAテーマ001』の取扱い説明（基本操作）h2～h5タイトル設定をご覧ください。

　

使い方も簡単です。

タイトル表記が設置されている箇所ではh2～h5の中からラジオボタンで簡単に選択できます。

任意の箇所に表示されたい場合でも、<h2 class=”title”>と</h2>でテキストを挟むだけです。（メインのh2の場合）

　

また、モバイル端末用のレスポンシブWebデザインの時に同じヘッドラインのデザインを変えることができます。

PC版では凝った画像などを使用した固定幅画像を背景に採用して、幅が変化するレスポンシブWebデザインの時には背景色だけの設定や繰り返し画像の背景画にすることが簡単にできます。

　

これで、ホームページの雰囲気を変えたいと思い立っても躊躇する必要はありません。

自由にあなたのイメージ通りのデザイン作成をお楽しみください。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

装飾（ヘッドライン）

従来のTAテーマ001はヘッドラインを各フレーム（メイン、サイドバー、サブサイドバー、フッター）毎に4種類（h2～h5）の設定が可能でした。

見出しやタイトルとして使用するには十分な個数と判断したからです。

しかし、アフィリエイト等で使用するランディングページのコンテンツを制作されるお客様から4つでは足りないとのご意見をいただきました。

『コンテンツの見出しタイトルとしては4つで足りるが、レ点画像などで箇条書きを使用する場合には不足してしまう・・・』

　

そこで、TAテーマ001は、h2～h5のヘッドラインに加えて、メインとサイドバーに4系統の装飾1～4（ヘッドライン）を追加しました。（Ver2.03以降）

上図をご覧ください。TAテーマ001で作成した装飾1～4（ヘッドライン）例です。レ点画像がテキストの前方に配置されるデザインは”装飾画像のレイアウト”から”タイトル前方”選択して制作します。

※ 設定項目詳細は『TAテーマ001』の取扱い説明（基本操作）h2～h5タイトル設定をご覧ください。

　

取扱い説明からお分かりの様に、装飾1～4（ヘッドライン）とh2～h5ヘッドラインは全く同じ機能を有しています。

h2～h5の4系統がh2～h9の8系統に増えた感じです。ただ、HTMLにはh7以上が存在しませんからh6～h9を新たに装飾（ヘッドライン）と名付けただけです。

ですから装飾1～4（ヘッドライン）を見出しやタイトルに充てることもできます。もちろんh2～h5のヘッドラインを箇条書き装飾に使用することもできます。

　

使い方は、<h6 class=”deco1″>と</h6>でテキストを挟みます。（メインの装飾1の場合）HTMLにてh6以上が定義されていないためクラス名で設定の区別しています。

　

もちろん、h2～h5ヘッドラインと同じようにモバイル端末用のレスポンシブWebデザインの時に同じヘッドラインのデザインを変えることができます。

　

h2～h5ヘッドラインに加えて装飾1～4（ヘッドライン）が更にコンテンツ制作を強力にご支援します。

自由にあなたのイメージ通りのデザイン作成をお楽しみください。

　

本項で使用しましたレ点装飾画像がダウンロードできます。

無料素材集からどうぞ。

　

※ 装飾1～4（ヘッドライン）は高機能追加プラグイン『ハイエンド』限定の機能です。

ヘッドラインと装飾（ヘッドライン）の背景

上図をご覧ください。TAテーマ001を使用してh2～h5ヘッドラインと装飾1～4（ヘッドライン）の背景にグラデーション画像を設置しています。

実際に使用するグラデーション画像は上図の様に幅が狭いものを使うことが一般的です。

これをX方向（横方向）に繰り返してタイトルなどの背景を実現しています。

タイトル幅の画像を設定しても良いのですが、そうすると幅が変化する（レスポンシブデザインなど）場合に都合が悪い。

細長い画像を繰り返すと既定の長さまで表示されますからどのような幅でも対応できるわけです。

　

TAテーマ001はタイトルテキストの上下の表示域（Paddingと言います）を自由に設定できますからタイトルと背景画の細かいバランス調整ができます。

※ 設定詳細は『TAテーマ001』の取扱い説明（基本操作）h2～h5タイトル（装飾1～装飾4）設定をご覧ください。

　

本項で使用しましたグラデーション装飾画像がダウンロードできます。

無料素材集からどうぞ。

　

TAテーマ001はVersion2.07から背景画像を使用しないグラデーション配色機能（CSS配色）が追加されました。

画像編集ソフトを用いて制作した背景画の方がより細部までこだわったデザインが反映されますが、開始色、中間色、終了色の3色のグラデーション配色で実現できるデザインはTAテーマ001の機能を使って容易に制作できます。

グラデーション配色機能（CSS配色）

ヘッドラインなどの様にサイズが固定的なもののグラデーションは背景画を挿入することで実現できます。

しかし、サイト全体の背景にグラデーション配色を行いたい場合は意外と難しいです。

ブラウザのサイズが変化するため基準の背景画の繰り返しだけでは綺麗なグラデションにならないからです。

このような現場からの声に応えて、TAテーマ001 Version2.07にCSSで実現する（背景画像を使用しない）グラデーション配色機能を追加しました。

　

左上図はグラデーション配色機能（CSS配色）を使用して実現したサイトの背景色の例です。右上図は背景色の設定画面です。

基準画像の繰り返しを使用していないので、ブラウザのサイズを変更してもグラデーションの開始位置と終了位置はそれに追従します。

CSSグラデーションでは開始色、中間色（未使用も選択可能）、終了色の3色を設定してグラデーション配色を実現しています。

linear-gradient()という有名な関数を使用していますが、旧バージョンのブラウザが採用していた関数も併記していますので（可能な限り）古いタイプのブラウザにも対応できます。（旧関数にも対応していないブラウザには対応できません）

背景画の挿入が可能なヘッドラインもCSSグラデーションを採用していますので3色配色で十分なデザインにお使いください。

　

※ グラデーション配色機能（CSS配色）は高機能追加プラグイン『ハイエンド』限定の機能です。

背景色と背景画像

美しい背景色や背景画のホームページは見ていて楽しいものです。

上の図をご覧ください。

これはTAテーマ001の初期画面ですが、グローバルメニューがフレーム幅を超えて横に伸びている様なデザインになっています。（背景画の有無を交互に表示しています）

上図の様にX（横）方向もY（縦）方向もシームレス（つなぎ目の柄が一致する）の画像を使うと画像が連続して効果的な演出効果が得られます。

X（横）方向とY（縦）方向の両方を繰り返すと上図の様に連続した柄の背景画になります。（コンテンツの表示が見やすくなるように背景画を薄くしています）

TAテーマ001は、全てのフレーム（ヘッダー部、メインコンテンツ部、サイドバー部、サブサイドバー部、フッター部）の背景画と背景色が独立に設定できます。

下の図はブラウザ全画面に対する背景色（黄色）に対してヘッダー部（ピンク）、メインコンテンツ部（薄茶色）、サイドバー部（青緑）が独立に背景色を設定された例です。（分かりやすいように派手な配色にしています）

最近は背景画や背景色を多用しないデザインが好まれますが、ワンポイントで魅力的な背景画があるとサイト自体が引き締まると思います。

　

TAテーマ001はVersion2.07からグラデーション配色機能（CSS配色）が追加されました。

開始色、中間色、終了色の3色のグラデーション配色で実現できるデザインはTAテーマ001の機能を使って容易に制作できます。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

背景バー

最近のホームページのデザインはシンプルな背景と大きな画像が主流です。

具体的に言うと、背景は白系（着色があってもかなり薄い）で画像は300～500ピクセル幅（サイト全体に拡がる画像も増えています）でしょうか。

このようなシンプルなデザインですとサイトは似通ってしまいます。

　

きれいでスタイリッシュだけど印象に残らない・・・

　

このような時に活躍するのが背景バーです。

上の左右画を比較してください。

左はTAテーマ001の初期デザインから背景バーを除いたものです。（h1表記と検索エリアメニューは黒に変更）

右はオリジナルのTAテーマ001初期デザインです。

両図の違いは上端（コバルトブルー）、グローバルメニュー（コバルトブルー）、下端（ライトグレー）に背景バーが有るか無いかだけです。

たったこれだけでサイトの印象は大きく異なります。

シンプルなデザインに濃い色（メタリック系など）のワンポイント背景バーを施すと男性的なメカニックなイメージになります。

また、淡い色（桜色など）にすると女性的な平和的なイメージになります。

細いバーですがサイト構成ツールの主力選手です。

　

TAテーマ001はこの背景バーをトップページ、トップページ以外のページ、それぞれ独立に4系統（上端、グローバルメニュー、下端、任意）設定可能です。

また、レスポンシブデザイン時も独立に設定できます。

もちろん、背景バーにもグラデーション配色を使用できます。

　

アクセントをつけてあなたのサイトを印象深いデザインに仕上げてください。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

オリジナルの区切り線

長い説明文や項目分けをしたい時に欲しいパーツが区切り線ではないでしょうか？

簡易的な区切りは数回の改行を行って代用しますが、これが頻繁に出てくるとちょっと・・・という感じです。

　

そこで、TAテーマ001はオリジナルの区切り線を提供いたします。

上図はサイドバーの区切り線の様子です。（説明のために極端なデザインにしています）

区切り線の種類、太さ、色、区切り線の上下余白の設定ができます。

グラデーション配色も使用できますのでスタイリッシュなデザインも実現できます。

使い方はショートコード（サイドバーの場合は [sidebar_separator] ）をコンテンツ編集時に挿入するだけです。

　

TAテーマ001はメイン、サイドバー、サブサイドバー、それぞれで独立に区切り線のデザインを設定できます。

コンテンツを引き締める重要な、いぶし銀的な存在です。

　

あなたオリジナルの区切り線でコンテンツをより素晴らしく映えるものにしてください。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

コメント機能のオンオフ

ブログなどを読んだ人が感想などをコメント欄に書き込む。

ネットワーク環境が充実してきた最近では当たり前の光景です。

しかし、WordPressのテーマ改造で多い要求の一つに『コメント機能の無効化』があります。

理由は、

いたずらが多い・・・
誹謗中傷が多い・・・
海外からの意味不明コメントが多い・・・
・・・

などでしょうか。

要は迷惑コメントが多いから、機能を外したいという要求です。

迷惑閲覧の可能性のある環境からのアクセス拒否や特定の迷惑アクセス者を拒否することがサーバー側である程度できます。

ただ、そうすると善良なアクセス者まで拒否する可能性もありますし、面倒なサーバー側の設定をしなければならない。

　

TAテーマ001にはコメント機能そのものをオンオフする設定が準備されています。

コメント機能”そのもの”とわざわざ書いた理由は、WordPressのコメント機能を司る関数記述ファイルの存在を制御できるからです。（図参照）

Web上には、WordPressの標準設定で制限したり、CSSで非表示にする方法が紹介されていますが、

サイトにコメント機能自体が無ければどのような手段を使っても書き込むことは不可能ですから、これ以上の強力な防衛手段はありません。

　

そもそも有益な機能として存在するコメントですが、快適なサイト運営が脅かされるのであれば完全に取っちゃいましょう。

（※ データベース上の記録は残っていますので過去のコメント履歴は消えません。いつでも復活できます）

意外と目が行くコピーライト

はじめての（少しだけ興味を持った）サイトを見て気になること

「このサイトは誰が発信しているのだろう？」

ではないでしょうか。

そのようなときに多くの方は自然にサイトの最下部、フッターを見に行くと思います。

サイトの（正式の）素性を記載している場所が一般的にフッターだからです。

フッターの主な構成はフッターコンテンツとコピーライト表記。

中でも、コンテンツ発信手段であるホームページにおいて、コピーライト（著作権の所在）は非常に重要です。

法的な宣言を行う場所のため、サイトの公式名称などを記載するからです。

コピーライト記述が曖昧なサイトの信頼性は一気に失われます。

　

また、コピーライトはフッターを構成する重要なデザインの一部でもあります。

サイトの最終端に位置することが多いので、デザインの締めるためにも注意深く制作しなければなりません。

コピーライト枠の大きさ、背景色、文字色、文字サイズ、リンク時の装飾、・・・等々、デザイン要素はたくさんあります。

　

TAテーマ001はコピーライト表記部分を修飾するツールが充実しています。

サイト下端背景バーやコピーライト設定（上図）などです。

コピーライトの文言自体もHTML記述が可能なので、こだわったデザインにすることが可能です。

　

文言的にもデザイン的にも重要なコピーライトをしっかり制作して、信用のある美しいサイトに仕上げてください。

モバイル端末のランドスケープ表示

スマートフォンを横にした時にフォント（文字）のサイズが大きく表示されることを経験したことがありませんか？

これはランドスケープ機能と呼ばれます。（もともとは風景という意味らしいです）

画面の小さなスマホでの閲覧を鑑みて親切心で採用されている機能だと思います。

しかし、サイトのデザインやオリジナルフォントサイズによっては、このランドスケープ機能（自動拡大機能）が逆に邪魔になる場合があります。

例えば、強調のために大きなサイズにしているフォントが更に大きくなるとデザインのバランスが崩れたりします。

　

TAテーマ001では設定でこのランドスケープ機能（自動拡大機能）を無効にできます。

　

もともとのバランスで表示させることが可能になります。

制作したサイトをスマホの横向きで確認して、フォントサイズが大きいなと感じたらこの設定にチェックを入れてください。

ページのスロー表示

　

TAテーマ001にはページを”ジワー”と表示させる機能があります。

具体的には設定された時間内で透明度を切り替えています。

左図の様にスロー表示の時間はミリ(1/1000)秒単位で設定できます。

もちろん、演出的な見栄えとしての効果が目的ですが、他にも有益な使い方があります。

例えば、閲覧者が少し非力な通信環境を使用していると大きな画像などのロード時間がかかって不完全な画面が表示される時があります。

基本的には配信側（サーバー側）で軽い画像などに変更すると良いのですが、大量のページを持っているサイトでは困難です。

こんな時にこのスロー表示を使用すると効果的です。

TAテーマ001のスロー表示機能はページ内の全てのコンテンツのロードが完了してから透明度変更（ジワー）を開始しますから、不完全画面表示の防止になります。

地味な機能ですが、意外と使える頼もしいやつです。

　

※ ページのスロー表示は高機能追加プラグイン『ハイエンド』限定の機能です。

制御用コードの挿入

WordPressの普及でサイトを自分で制作する人が増えました。

また、テーマも進化してデザイン等をファイルを直接書き換えないで変更できるようになりました。（TAテーマ001も一役を担っているでしょうか）

サイトの見栄え（体裁）の制作がある程度できる様になると、SNSとの関連付けや各種情報サイトとの連携などにも挑戦したくなると思います。

例えば、Google系の情報サイト（アナリティクス、Search Consoleなど）でしょうか。

これらの情報サイトの機能を利用する際には認証用のHTMLタグや処理用の（JavaScriptなどの）コードをご自分のサイトのHTML記述のどこかに挿入する必要があります。

Googleアナリティクスの様にWordPressプラグインが用意されていてすべてお任せできる場合もありますが、ほとんどの場合は自分で埋め込む必要があります。

WordPressの編集機能やFTPを使ってPHPファイルを書き換える必要があるわけです。

しかし、WordPressが普及している最大の理由はFTPやファイルの書き換えなどの面倒なことをしなくて良いからですよね。

　

さて、どうしたもんか。

　

　

認証用のHTMLタグや処理用の（JavaScriptなどの）コードの挿入箇所はほぼ決まっています。

<head></head>内か<body>の直後のどちらかです。

そこでTAテーマ001はブラウザのテーマの設定から制御用コードの挿入ができる機能を備えました。

左上図の様に<head></head>内か<body>の直後に挿入する記述（タグやコード）を設定します。

設定された記述は右上図の様にそれぞれの箇所にそのまま挿入されます。

これまでに挿入した記述は設定画面で確認ができるので忘れて2重に設定するミスも防止できます。

　

面倒なことはTAテーマ001に任せて、あなたの貴重な時間はコンテンツの充実にお使いください。

　

※ 制御用コードの挿入は高機能追加プラグイン『ハイエンド』限定の機能です。

（サブ）サイドバーの長さをメインコンテンツに揃える

最近の流行りのホームページデザインにサイドバーを強調するものがあります。

例えば、堀江貴文さんの人気サイトホリエモンドットコムなどがそうです。

お分りでしょうか？

左側のサイドバーの背景を黒にしてメニューや広告などを目立つように配置しています。メインコンテンツよりも先ずそちらに目が行くデザインです。

そしてこのサイトの最下部（フッター）あたりをご覧ください。（下図）

サイドバーのコンテンツが終了していますが背景色（黒）はメインコンテンツの終わりと揃っています。

　

このサイドバーの長さをメインに揃える機能は背景色を付ける場合には必須になります。

サイドバーがコンテンツと共に途中で切れているように見えてみっともないからです。

地味ですが非常に有益な機能です。

もちろん、TAテーマ001はチェックボックスにチェックを入れるだけで簡単にメインコンテンツとサイドバー（とサブサイドバー）の長さが揃います。

機能の話はここで終わりなのですが、独立の項目にしたことには理由があります。

それは揃える手法についてお話ししたいからです。

　

サイドバーをメインに揃える方法は大きく分けて3つあります。

１、CSSだけで行う

２、背景画像や他のフレームの背景色を使用する

３、JavaScriptで必要な高さを測定してCSSに書き込む

１、CSSだけで行う

簡易的に使用される方法ですが、サイドバーのCSSにpadding-bottom: 大きな数字px; margin-bottom: -大きな数字px;を書いてメインとサイドを含む要素のCSSにoverflow: hidden;を書きます。（大きな数字は同じ数字：例えば10000とか）

こうするとあっさりと簡単にメインとサイドバーが揃います。大きく引き伸ばして超えた部分は隠してしまえ！ってことです。

しかし、この方法には大きな欠点があります。

ページ内の特定の位置に飛ばす（頭出しのリンク）ときにidを指定してリンクを張ります。（頭出しリンクの説明はこちらをご覧ください）

上記にあるようなCSSで揃えたページでこの頭出しリンクを行うとリンク先idから上のコンテンツがすべて消えるという重大な欠陥があります。

ですからこの手法は簡単ですが、汎用的なテーマでは使用できません。

２、背景画像や他のフレームの背景色を使用する

先ほど紹介したホリエモンドットコムさんはこの方法で実現しています。

結果として揃っているように見えれば良いわけですから、如何様にでもなりますし堅実な方法です。

ただ、フレーム構造の自由度が高いTAテーマ001では汎用的にこの手法を用いるのは煩雑すぎます。

作り込みが可能なサイトのカスタマイズに適した方法ですね。

３、JavaScriptで必要な高さを測定してCSSに書き込む

最後がまじめに測定、計算して高さを揃える手法です。

JavaScriptを用いてフレームの長さを実測してメイン、サイドバー、サブサイドバーの全てが揃うようにそれぞれの長さを調整します。

　

TAテーマ001は最後の方式（JavaScriptで必要な高さを測定してCSSに書き込む）を採用しています。

フレーム構造や位置を自由に変えられるTAテーマ001にとっては最適な方法と言えます。

どんなに複雑なフレーム構造を設定しても安定して揃えることができます。

　

TAテーマ001のサイドバーとメインの長さを揃える際の説明は『TAテーマ001』の取扱い説明（（サブ）サイドバー設定）背景色・背景画像をご覧ください。

　

※ 『（サブ）サイドバーの長さをメインコンテンツに揃える』は高機能追加プラグイン『ハイエンド』限定の機能です。

wpautop関数コントロール機能

WordPressのエディター（ビジュアルエディター、テキストエディター）は改行やスペースなどを自動的に体裁整理するため<br>や<p></p>の挿入を行います。

簡易的な投稿の場合は便利な機能ですが、HTMLやCSSを駆使してコンテンツ制作を行いたい場合には意図しない自動挿入はむしろ邪魔な場合があります。

特に、HTML記述などをタグごとに改行して見易く記述を行う制作者にとってはフラストレーションの溜まる機能です。

　

左上図はテキストエディターで見たWordPressのサンプルページの記述です。ほとんどHTMLタグを使用しないで書かれています。

この記述が右上図の上部図の様にほぼそのまま表示されます。実際のHTML出力は右上図の下部図のように改行<br>の挿入やパラグラフ<p></p>で挟まれています。

エディターに書かれている文の形を判断して体裁を整えています。（これはこれで高度な処理だとは思いますが）

しかし、これはHTML記述を行う人にとってはやっかいな機能です。

　

パラグラフにしたいところは自分で宣言したい。

勝手に改行もして欲しくない。

スペースも自動で判断して欲しくない。（※ 複数行のスペースを入れても1行のスペースと判断されます）

・・・

　

つまり、HTML記述通りにして欲しい。

　

このような悩みをお持ちの制作者のために、TAテーマ001はこの自動挿入を行っているwpautop関数をページのタイプごとに無効にする機能を持っています。

左上図の様にwpautop関数の使用をページのタイプごとに設定できます。

左下図は固定ページのwpautop関数を無効した場合のWordPressサンプルページの表示とHTML出力の様子を示したものです。

体裁タグ（<br>や<p></p>）が出力されていないことが分かると思います。

wpautop関数を無効にしても意図的に入れた<br>や<p></p>などは反映されますから制作者の書いたHTML通りに表示されます。

　

投稿記事はサクッとブログを書いて体裁をWordPressに任せる、固定ページはHTML記述でしっかりと体裁を整える、のようなメリハリの利いた切り替えができる便利な設定です。

　

※ wpautop関数コントロール機能は高機能追加プラグイン『ハイエンド』限定の機能です。

権限グループによるページの閲覧制限

TAテーマ001はWordPress標準機能の権限グループを使って、閲覧できるページの制限を行うことができます。

権限グループに関してWordPress Codex（日本語版）には次のように書かれています。

　

権限グループの概要

管理者 – シングルサイト内のすべての管理機能にアクセスできるユーザー

編集者 – 他のユーザーの投稿を含むすべての投稿を発行、管理できるユーザー

投稿者 – 自身の投稿を発行、管理できるユーザー

寄稿者 – 自身の投稿を編集、管理できるが、発行はできないユーザー

購読者 – プロファイル管理のみを実行できるユーザー

　

下図はTAテーマ001公式サイトの会員専用ページへのリンクをクリックした場合の例を示しています。

ログインしない状態で閲覧制限のかかっているページに移動しようとするとログインを促すページへ移動（リダイレクト）します。

※ 設定により他のページに移動（リダイレクト）しないで閲覧できない旨のテキストを表示させることも可能です。

　

権限グループによる閲覧制限を有効にすると固定ページや投稿記事の一覧に閲覧制限の欄が現れて制限の内容が一目で分かります。

上図の例は”ログインユーザー”なので購読者以上の全ての権限グループの人が閲覧できることを意味しています。

　

各ページ毎に閲覧可能ユーザーを（管理者のみ、編集者以上、投稿者以上、寄稿者以上、ログインユーザー）の中から選択できます。

また閲覧制限は、トップページ、固定ページ、投稿記事、カテゴリー一覧ページ、年月別一覧ページ、検索結果ページのそれぞれが独立に設定できます。

　

会員制サイトや会社内の情報管理サイト等、様々なことに応用していただけたらと思います。

詳しくは以下のページをご覧ください。

『TAテーマ001』の取扱い説明（共通設定）各種ページ閲覧制限

『TAテーマ001』の取扱い説明（基本操作）固定ページ編集画面使用方法の閲覧制限設定

『TAテーマ001』の取扱い説明（基本操作）投稿記事編集画面使用方法の閲覧制限設定

『TAテーマ001』の取扱い説明（基本操作）カテゴリー編集画面使用方法

管理画面アクセス制限

WordPressサイトの管理画面にアクセスするためにはログイン権限が必要です。

ログイン権限のランクによって編集可能なコンテンツは異なりますが、とにかくすべてのログイン者がWordPressの管理画面に入ることができます。

ログイン可能者がスタッフなどの場合は良いのですが、例えば会員制サイトの閲覧可能会員のときは管理画面には入って欲しくないです。

　

ログイン画面から直接サイトのトップページに行って欲しい。

　

TAテーマ001はこのようなことも簡単に設定できます。

管理画面アクセス可能者をWordPressの権限グループに従って、

”管理者”
”編集者以上”
”投稿者以上”
”寄稿者以上”
”ログインユーザー全て”

から選択できます。

これだけでも十分効果的なのですが、もう少し改善したいことがあります。

ツールバー（admin bar）表示の問題です。

WordPressにログインした状態でサイトを閲覧すると、上右図の様にサイト上部にツールバーが表示されます。

サイトのデザインによっては興ざめになる場合もありますから、非表示にしたいことがあります。

管理画面のプロフィールの中でツールバーを非表示にできますが、管理画面アクセス制限をされているログイン閲覧者はその操作ができません。

　

このような場合に、TAテーマ001は管理画面アクセス禁止者のツールバーを非表示にすることができます。

ただし、ツールバーが非表示の管理画面アクセス禁止者はブラウザクッキーの有効期限が切れるまでログアウトができませんので運用にご注意ください。（ツールバーが非表示なのでログアウトをクリックできないので・・・）

会員制サイト、会社の閲覧者制限イントラネットなどでお使いください。

ページャー（投稿の前後記事へのリンク）

ページャー（投稿一覧、検索結果一覧のページナビ）

パンくずナビ

バックトゥートップスクロール

ファビコン・アップルタッチアイコン

トップキャッチエリア

ウィジェットエリア

簡易最新投稿ダイジェスト

汎用メニュー

画像と説明付きメニュー

TA汎用背景装飾

WordPressの固定ページや投稿記事の編集画面はビジュアルエディターでもテキスト（HTML）エディターでも時間をかけて行えばプロ並みのデザイン制作が可能です。

時間をかければ・・・

TAテーマ001はホームページをコツコツと（時間をかけて）自作される方のためのテーマです。

しかし、いつでも時間があるわけではありません。

一気にある程度の見栄えを実現しなければならない場合もあります。

例えば次のようなコンテンツを制作したとします。

　

　

一生懸命に京都の参照コンテンツを作ったとします。

これだけだと見栄えが悪いので周りを囲ったりいろいろな装飾をしたいけどCSSで装飾は面倒だし・・・

次の画像をご覧ください。

上の例は先ほど制作したコンテンツをTAテーマ001の汎用背景装飾ショートコードで挟んだだけで実現された装飾です。（下図のHTML編集画面をご覧ください）

また、TAテーマ001の汎用背景装飾ショートコードは更に高度なテクニックも使えます。

下図はコンテンツを左に寄せて右側に本文を回り込ませた例です。

こちらの例は先ほど制作したコンテンツをTAテーマ001の別の汎用背景装飾ショートコード（id=3）で挟んだだけで実現された装飾です。（下図のHTML編集画面をご覧ください）

TAテーマ001の汎用背景装飾ショートコードは最大5つのパターンを設定できます。

下図は一つの汎用背景装飾ショートコード設定の例です。

汎用背景装飾ショートコードには制作者が使用する基本的な背景装飾がほぼ全て用意されています。（スキルの高い方はフリーCSSを使って微調整を加えることもできます）

コンテンツ表示のフレームが可変（レスポンシブ）に設定されている場合、汎用背景装飾ショートコードは完全に独立した枠ですから、ブラウザの幅に対応してサイズを枠内で自動調整します。（下図をご覧ください）

TAテーマ001の汎用背景装飾ショートコードを使って簡単に見栄えのするコンテンツ装飾を実現させて、あなたのホームページを更に成長させてください。

※ TA汎用背景装飾ショートコードはビジュアルエディターの中でも使用できますが、WordPressのビジュアルエディターは使いにくい（思い通りに配置できない）場合が多いためテキストモード（HTML）で編集を行うことをおすすめします。

※ Version2.07から日本語ショートコードの使用は非推奨になりました。現在の取り扱い説明には英数字のショートコードが紹介されていますのでそちらをご使用ください。（日本語ショートコードも有効なのでこれまでのコンテンツを書き直す必要はありません）

各種便利ショートコード

『TAテーマ001』にはかゆいところに手が届く便利なショートコードがいくつか用意されています。

このような便利ショートコードはクライアント様からのご要求に従って随時増えて行きますのでご期待ください。

※ 各種便利ショートコードはビジュアルエディターの中でも使用できますが、WordPressのビジュアルエディターは使いにくい（思い通りに配置できない）場合が多いためテキストモード（HTML）で編集を行うことをおすすめします。

　

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

コンテンツを自動配列するショートコード（複数画像などの配置）

ホームページ制作していると横にコンテンツ（画像や文章）を並べたい場合が出てきます。

全てのコンテンツを縦に並べても良いのですが（初心者にはこちらがおすすすめです）、画像の説明を行いたい場合などは左右に並べた方がしっくりきます。

次の例をご覧ください。

二つのコンテンツ（タイトル、画像、説明）を横に並べた例です。よく見かけると思います。

これをHTMLとCSSを使って1から記述すると結構面倒です。

しかし、TAテーマ001のオリジナルタグ（ショートコード）を使用すると簡単に実現できます。

先ず配列グループ全体を[配列(始)]と[配列(終)]で挟みます。

こうすることで左右の高さの大きい方にボックスの高さを合わせます。

次に左寄せショートコードと右寄せショートコードでそれぞれのコンテンツを挟むだけです。

左右寄せショートコード内のw=49は幅のサイズをフレーム（例の場合はメインフレーム）49%にするという意味です。

左右寄せショートコードは更に細かい設定が可能です。

詳しくはこちらをご覧ください。

コンテンツ（画像や文章など）の構成は自由ですから様々な組み合わせで見栄えの良いデザインが実現できます。

※ Version2.07から日本語ショートコードの使用は非推奨になりました。現在の取り扱い説明には英数字のショートコードが紹介されていますのでそちらをご使用ください。（日本語ショートコードも有効なのでこれまでのコンテンツを書き直す必要はありません）

　

コンテンツを自動配列するショートコード（画像と文字の回り込み）

新聞や雑誌などは写真の周りに記事の文字が回り込んでいますよね。

ホームページも画像に対して説明の文章を回り込ましたい場合があります。

こんな感じです。（ブラウザの幅を狭くすると分かりやすいです）

　

　

フレーム幅に合わせて画像からはみ出した文字は画像の下側に回り込んで配置されます。

ブラウザの幅やズームは閲覧者によって異なるため自動で文字が回り込むようにしたほうが見栄えが良いです。

この回り込み配置はWordPressの標準編集のビジュアルエディターでも可能ですが思い通りにならない場合が多いです。

TAテーマ001のオリジナルタグ（ショートコード）を使用するとこの回り込み配置も簡単に確実に行うことができます。

先ず配列グループ全体を[配列(始)]と[配列(終)]で挟みます。

こうすることで自動的に画像とテキストを合わせたボックスの高さが決定されます。

次に左寄せショートコードまたは右寄せショートコードで画像のコンテンツを挟むだけです。テキストはショートコードを使用しないで記入します。

左右寄せショートコード内のw=40は幅のサイズをフレーム（例の場合はメインフレーム）40%にするという意味です。p=20は画像と文字の間の距離を20ピクセルにするという意味です。

左右寄せショートコードは更に細かい設定が可能です。詳しくはこちらをご覧ください。

※ Version2.07から日本語ショートコードの使用は非推奨になりました。現在の取り扱い説明には英数字のショートコードが紹介されていますのでそちらをご使用ください。（日本語ショートコードも有効なのでこれまでのコンテンツを書き直す必要はありません）

　

コンテンツをアコーディオン展開するショートコード

クリックするとコンテンツ（画像や文章）がアコーディオンの様に伸びて表示される演出をご覧になったことがあると思います。

例えば次の様な感じです。下の”アコーディオンの歴史”をクリックしてください。

　

　

このような演出はJavaScriptなどを使用して行うのですが、一般的には面倒な作業です。

しかし、TAテーマ001を使用するといとも簡単にできてしまいます。

先ほどのアコーディオン展開のHTML記述をみてみます。（WordPress標準編集のテキストモード）

TAテーマ001オリジナルのタグ（ショートコードと言います）でアコーディオン展開のタイトルとコンテンツをそれぞれ挟み込むだけです。

[アコーディオン題目 id=abc]と[アコーディオン内容 id=abc]の中にid=abcとあるのは題目と内容を関連付けるための記号です。

このidさえ一致していたら離れた場所にあってもアコーディオン展開します。（同じページ内）

※ Version2.07から日本語ショートコードの使用は非推奨になりました。現在の取り扱い説明には英数字のショートコードが紹介されていますのでそちらをご使用ください。（日本語ショートコードも有効なのでこれまでのコンテンツを書き直す必要はありません）

JavaScript未使用ブラウザへの注意文表示

最近のサイトの動きのある効果（画像の点滅、ページの先頭に戻る機能、アコーディオン展開・・・）などはJavaScriptと呼ばれるプログラムの仕事です。

JavaScriptはサーバーから閲覧している人のPC（正確にはブラウザ）上で動作します。

ですから、ブラウザの設定でJavaScript機能をオフにしているとサイトによっては正しく表示されないことになります。

　

現在のサイトのほとんどがJavaScriptを使用しています。（使用していないサイトの方が珍しいと思います）

もちろん、TAテーマ001もJavaScriptを使用しています。

　

昔と異なり、JavaScriptに対応していないブラウザは存在しません。

JavaScriptが使用できないブラウザは、何かしらの理由でその機能をオフにしている場合です。

意図的にブラウザのJavaScript機能をオフにしている人はサイトの正常閲覧を拒否しているのと同様なので除外して良いと思います。

しかし、知らないうちにオフになっている（されている）ブラウザは機能を有効にする様に促すべきでしょう。

有名なSNSサイトなどはJavaScript機能がオフになっているブラウザに注意文を出して機能を有効にするように仕向けています。

　

TAテーマ001にもブラウザのJavaScript機能を自動検出してオフの場合に注意文を表示させる機能が用意されています。

観てもらうからには正常な状態で提供したいですものね。

メンテナンスモード

エラー404表示設定

ホームページで最も有名なエラー表示は”エラー404”だと思います。

エラーと言うほど大ごとでも無いのですが、指定したURLのページが存在しない場合に表示されます。

エラーという少し強烈な警告なので、無味乾燥なエラー表示よりもサイトのオリジナル表記の方が観ている人は安心します。

TAテーマ001はオリジナルのエラー404の表記が設定できます。

上記図の例は無味乾燥なデフォルト例文のままなのでみなさんの言葉に変更してください。

デザインや見栄えにそれほどこだわるページでもありませんが、HTML記述が可能ですのでバラエティーに富んだデザインにすることも可能です。