Headerをデザインする

Posted on by Eternal-tears
Sponsored Link

彼らは、あなたがカバーにもかかわらず、人々がそうする毎日までに本を判断することができないと言います。 それらは、本を拾って、カバーを見て、次に、ただカバーがどう見えるかので、それを下に置くか、それをひっくり返すか、またはそれを開けるので、動かされます。 また、ウェブサイトはそれらのカバーが判断されます、そして、第一印象はヘッダーからしばしば来ます。

Sponsored Link

原文 ⇒They say you can not judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header.

通常、あなたのサイトのヘッダーは人々が見る最初のものです。 あなたのページの上部の向こう側のこの奥付欄かヘッダー芸術から、人々は、見て、読もうとしているためにそれらが何であるかに関する全面的な判断をします。 あなたを言うのと同じ人々は、本の内容をカバーだけで判断しないで、また、よい印象を与えるためにあなたには30秒しかないと言うことができます。 次のウェブページが遠くのクリックであるインターネットの世界では、あなたが多くをそれより少なくします。

原文 ⇒The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgements about what they are about to see and read. The same people who say you can not judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that.

私たちは、WordPressヘッダーの構造であなたを連れて行って、あなた自身の本のカバーになるようにどうそれをカスタム設計するかに関するチップを提供するつもりです、良い第一印象に伴うあなたのサイトに人々を誘惑して。 そして、私たちは良いウェブサイトヘッダーを作ることの何人かの専門家からいくつかのチップを提供するつもりです。

原文 ⇒We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header.

WordPressヘッダー

デフォルトで、WordPressヘッダーは簡単なコードです。 あなたは、あなたが選ぶどんなWordPress Themeと共にも来るヘッダーを変えるためにコードに強い興味をもっている必要はありません。 あなた、ブロッグかウェブサイトが題をつけるセットとAdminの記述> オプションパネル、およびWordPressはそうします。残り。

原文 ⇒By default, the WordPress header is a simple piece of code. You do not have to get into the code to change the header that comes with whatever WordPress Theme you choose. You set the blog or website title and description in the Admin > Options panel, and WordPress does the rest.

最も簡単なフォームでは、Classic WordPress Themeはheader.phpテンプレートファイルの中のこのようにヘッダーコードを特徴とします:

原文 ⇒In its simplest form, the Classic WordPress Theme features the header code like this in the header.php template file: 

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

デフォルトで、WordPressヘッダーは簡単なコードです。 あなたは、あなたが選ぶどんなWordPress Themeと共にも来るヘッダーを変えるためにコードに強い興味をもっている必要はありません。 あなたはAdmin > Options panelでブロッグかウェブサイトタイトルと記述を設定します、そして、WordPressは残りをします。

原文 ⇒The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. You can learn more about these parameters in the documentation for bloginfo(). Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Admin > Options panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Options panel.

Default WordPress Themeはバックグラウンドでイメージを特徴として、このようにヘッダーを紹介します:

原文 ⇒The Default WordPress Theme features an image in the background and presents the header like this: 

<div id="header">
 <div id="headerimg">
   <h1>
    <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>
  </div>
</div>

Theme Headersがこの記事で発表した賞Winning Themesはアレックス・キングによる2005WordPress Themes Contestの何人かの受賞者です。

原文 ⇒Award Winning Themes The Theme Headers showcased in this article are some of the award winners of the 2005 WordPress Themes Contest by Alex King.

The header of the Default/Kubrick Theme
The header of the Default/Kubrick Theme画像

一方、ブロッグかウェブサイトの名前を特徴とするテンプレートタグがリンクにありますが、これは上にURL要求と同様の別の用法を示します。 それはまさしく異なった方法で同じ情報を得ます。 また、それはOptionsパネルからサイトの記述を加えます。

原文 ⇒Again, the template tag featuring the name of the blog or website is in a link, but this shows another usage similar to the URL request above. It gets the same information, just in a different way. It also adds the description of the site from the Options panel.

基本的に、これらの2つのヘッダーの例が異なった方法で同じことをします。 彼らで、イメージの可能性と共に情報をヘッダーに供給して、ヘッダータイトルはサイトでナビゲーションを助けるのにおいてクリック可能になります。 それはただあなたがヘッダーでどのくらいの情報が欲しいか、そして、どのようにその情報を表示するかに関する問題です。

原文 ⇒Basically, these two header examples do the same thing in different ways. They provide information in the header, with the potential for an image, and make the header title clickable to help navigation on the site. It is just a matter of how much information you want in your header, and how that information is displayed.

Classic Themeからの最初の例を使用して、h1セレクタのスタイルシートの中に設定されたバックグラウンドにまだイメージを使用することができますが、2番目の人は、それ自身の分割をそれに与えることによって、より多くの支配力をヘッダーでのイメージの使用に与えます。 これらがどう見えるかは、スタイルシートによって完全に制御されています。

原文 ⇒Using the first example from the Classic Theme, an image can still be used in the background, set within the style sheet in the h1 selector, but the second one gives more control to the use of an image in the header by giving it its own division. How these look are totally controlled by the style sheet.

ヘッダーをスタイルする

Styling the Header

例を超えた2で記載されているように、ヘッダーのためのスタイルはh1、ヘッダー、headerimg、および記述CSSセレクタの中に含まれています。 もっとも、style.cssの中で見つけられて、備え付けることのコネがあなたが使用しているThemeのheader.phpのスタイルであったかもしれないなら、これらはすべてです。 あなたは両方の場所をチェックしなければならないでしょう。

原文 ⇒As listed in the two above examples, the styles for the header are contained within the h1, header, headerimg, and description CSS selectors. These are all found within the style.css, though may be found in the styles in the header.php of the Theme you are using. You will have to check both places.

Classic Themeでは、ヘッダーのためのCSSは1個のセレクタ、#headerで見つけられます。

原文 ⇒In the Classic Theme, the CSS for the header are found in one selector, the #header.

#header {
  background: #90a090;
  border-bottom: double 3px #aba;
  border-left: solid 1px #9a9;
  border-right: solid 1px #565;
  border-top: solid 1px #9a9;
  font: italic normal 230% 'Times New Roman', Times, serif;
  letter-spacing: 0.2em;
  margin: 0;
  padding: 15px 10px 15px 60px;
}

バックグラウンド色は緑色の日陰に設定されます、そして、境界が凹んでいる影の効果を引き起こす色を変えるヘッダーの周りのいっぱいにあります。 タイムズ字体は標準より広いレター・スペースがある230%のサイズで設定されます。 左側における詰め物は左からの中のテキストを字下がりにします。

原文 ⇒The background color is set to a green shade and there is a border all the way around the header which changes colors creating a recessed, shadow effect. The Times font is set with a size of 230% with a wider than normal letter spacing. The padding on the left side indents the text in from the left.

容易に変えることができて、より厚い幅に境界を与えて、それをそれでもするこれらがすべて、着色します、それぞれのスタイル属性における情報を変更することによってバックグラウンド色、字体サイズ、スタイル、レター・スペース、およびその他を変えて。

原文 ⇒All of these can be easily changed, giving the border a thicker width and making it all the same color, changing the background color, the font size and style, the letter spacing, and more by modifying the information in each style attribute.

同じくらいはDefault WordPress Themeヘッダーに関して本当であり、そこを除いて、あなたのスタイルをいったん設定させると、あなたがスタイルシートに情報を動かすことができますが、考えるスタイルとそれらがheader.phpの”head”タグとstyle.cssの中で見つけられる以上はそうですか?

原文 ⇒The same is true of the Default WordPress Theme header, except there are more styles to think about and they are found within the header.php’s “head” tag and the style.css, though once you have your styles set, you can move the information into your style sheet.

ヘッダーの外観を制御するスタイルはh1、ヘッダー、headerimg、および記述CSSセレクタの中に見つけられます。 まさしくClassic Themeのように、これらの参照を見つけます、そして、そこであなたの変更をして、外観を変えてください。

原文 ⇒The styles that control the header’s look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look.

ユーティリティの導入がKubrickrと呼ばれている状態で、Default WordPress Themeのヘッダーイメージを変えるのは簡素化されました。 それがヘッダーのために新しいイメージファイル名を提供するように単にあなたに頼んで、次に、あなたのためにそれを切り換えるので、あなたは丹念にコードを調べる必要はありません。 あなたが変えたいすべてがヘッダーイメージであるなら、これは非常に役に立って簡単なツールです。

原文 ⇒Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr. It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool.

あなたの手をコードに得たいなら、ヘッダースタイルに食い込んでください、そして、変更を行ってください。 以下に、手動でまさしくヘッダーイメージを変えるとき、簡単なチュートリアルがあります。

原文 ⇒If you do want to get your hands into the code, dig into your header styles and make the changes. Below is a simple tutorial on changing just the header image manually.

ヘッダーイメージを変える

Changing the Header Image

ヘッダーでイメージを変えるために、多くの異なったヘッダーイメージとあなたが使用するように利用可能なヘッダー芸術があります。 DefaultかキューブリックWordPress Themeと、そのThemeに基づくどんなThemeのためのヘッダーイメージのためのスタイルも、変化するようにClassic Themeのためのそれらより複雑にされます。 スタイルはheader.php「ヘッド」部、およびstyles.cssのスタイルの中で見つけられます。 ヘッダーイメージ参照だけを変えるために、header.phpテンプレートファイルを開いてください、そして、このようにスタイルを探してください:

原文 ⇒There are many different header images and header art available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php “head” section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this: 

#header {
   background: url("<?php bloginfo('stylesheet_directory');&amp;nbsp;?>/images/wc_header.jpg") 
 no-repeat bottom center; }
#headerimg  {
   margin: 7px 9px 0; 
   height: 192px; 
   width: 740px; }

注意: スタイルがテンプレートファイルのヘッドの中で使用されるときだけ、bloginfoタグの使用は働いています。 WordPressテンプレートタグはスタイルシート(style.css)で動作しないでしょう。 スタイルシートにこのスタイルを動かすには、テンプレートタグをヘッダーイメージグラフィックの絶対番地(URL)に変えてください。

原文 ⇒NOTE: The use of the bloginfo tag only works when the style is used within the head of the template file. WordPress template tags will not work in the style sheet (style.css). To move this style to the style sheet, change the template tag to the actual address (URL) of the header image graphic.

イメージ・ファイルを変えるには、”kubrickheader.jpg”をあなたがそれを取り替えるためにサイトにアップロードした新しいグラフィックイメージの名前に取り替えてください。 それが異なったディレクトリにあるなら、bloginfo()タグをグラフィックの位置の特定のアドレスに取り替えることによって、それを変えてください。

原文 ⇒To change the image file, replace the “kubrickheader.jpg” with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic’s location.

同じサイズであるイメージを使用しているなら、単にイメージを取り替えてください。 それが異なったサイズであるなら、#headerimgと呼ばれる次のセクションのイメージの高さと幅に記入してください。 知らないで、Windowsを使用しているなら、イメージがあなたのコンピュータでThumbnail視点モードであるフォルダーを見てください。 クリックビュー> ウィンドウズエクスプローラーメニューから、小さいです。 Thumbnail視点モードで、イメージを見つけてください、そして、それの上でマウスを持ってください。 わずかなバルーン・チップは、寸法を記載しながら、ポップアップされるでしょう。 スタイルにその情報を使用してください。 そうでなければ、まさしくイメージ・ファイルの上を右クリックして、Propertiesを選んでください。そうすれば、それはファイルサイズと寸法をあなたに与えるべきです。

原文 ⇒If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions.

テンプレートファイルを保存してください、そして、それとイメージをウェブサイトにアップロードしてください、そして、ちょっと見てください。 いくつかの変化が、プレースメントについて微調整して、見えるのが作られている必要があるかもしれません。

原文 ⇒Save the template file and upload it and the image to your website and take a look. Some changes may need to be made to fine-tune the placement and look.

ヘッダーイメージが適所にあった状態で、もうヘッダーの残りに取り組むべきである時間です。 style.cssスタイルシートファイルを開いてください、そして、以下を探してください:

原文 ⇒With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following: 

<ul>
  <li> h1 </li>
  <li> header </li>
  <li> headerimg </li>
  <li> description </li>
</ul>

あなたのThemeには、これらがすべて、あるかもしれませんが、Default Themeはスタイルシートの中に異なった場所にそれらを皆、持っています。 これらのすべてか或るものが、あなたのヘッダーの外観を変えるために属性を変えさせる必要があるかもしれません。

原文 ⇒Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header.

ヘッダーイメージかヘッダー芸術のサイズを変えるなら、確認してください、そして、内容とサイドバーのように他の構造的なCSSセレクタを変えて、ヘッダーサイズにおける変化を収容してください。

原文 ⇒If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size.

ヘッダーイメージ仕様

Header Image Specifications

Default WordPress Themeの中で合うヘッダーイメージはおよそ192×740画素です。 どんなWordPress Themeの中でもヘッダーの後任になっているなら、ヘッダーイメージのサイズをチェックしてください、そして、次に、そのサイズに合う交換を見つけてください。 交換よりさらに小さいかさらに広いか高いヘッダーイメージを選ぶなら、あなたは、ヘッダーのサイズにおける変化を考慮するようにウェブページの他の構造要素を変更しなければならないかもしれません。

原文 ⇒A header image that fits within the Default WordPress Theme is about 192 x 740 pixels. If you are replacing the header within any WordPress Theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to modify the other structural elements of the web page to allow for the change in size of the header.

あなたが全体のサイトのThemeを変更しているなら、総合的なページか満足している領域の幅は、ヘッダーイメージのサイズのために考慮に入れられる必要があります。 2つの最も一般的な画面サイズが1024×768と800×600画素です。 しかし、ワイドスクリーンモニターは前進しています、そして、ウェブデザイナーは現在、1280×1024と1600×1200のスクリーン幅の用意をする必要があります。

原文 ⇒If you are modifying the entire site’s Theme, the width of the overall page or content area needs to be taken into consideration for the header image’s size. The two most common screen sizes are 1024×768 and 800×600 pixels. Yet, wide screen monitors are gaining ground and web designers now need to prepare for screen widths of 1280×1024 and 1600×1200.

スペースがどちらかの側にある状態でブラウザウィンドウの中央に置かれた「浮遊物」にあなたのウェブサイトを設定するなら、あなたは欲しい何でもにヘッダー幅を設定することができます。 あなたがフレキシブルであるか「弾性」のスクリーン幅でThemeを設計しているなら、あなたのヘッダーの幅は重要になります。

原文 ⇒If you set your website to “float,” positioned in the middle of the browser window with space on either side, then you can set your header width to whatever you want. If you are designing a Theme with a flexible or “elastic” screen width, then the width of your header becomes important.

あなたが繰り返すことができるヘッダーイメージを使用していて、弾性の幅を使用しているなら、あなたはスペースをいっぱいにするために繰り返すためにヘッダーの中にはやらせることができます:

原文 ⇒If you are using a header image that can be repeated, and you are using elastic widths, you can set the styles within the header to repeat to fill the space: 

#header { 
   background: url("/images/kubrickheader.jpg") 
   repeat-x top left; }

これは、左上角から始まって、伝わりながら、ヘッダーイメージに水平に繰り返すように設定します。 あなたはあなたのヘッダーデザインとレイアウトが必要とするどんなバックグラウンド位置にもこれらを調整することができます。

原文 ⇒This sets the header image to repeat horizontally beginning from the top left corner and going across. You can adjust these to whatever background position your header design and layout needs.

ヘッダー芸術

Header Art

ウェブデザイン分野に生えている新学期はヘッダー芸術です。 これらは通常、色、形、シンボル、イメージ、およびテキストの組み合わせを使用するのにおいて手作りのヘッダーイメージです。 彼らは作成する何らかの時間と労働がかかるかもしれません。 いくつかの無料のヘッダー芸術サイトがある間、いくつかのサイトがそれらの手作りのヘッダー芸術を販売します。 写真は、それなりにユニークであり、必要な視覚スタイルを伝えるかもしれませんが、手作りのヘッダーアートワークは、他のウェブページ色に合わせるのが、より簡単であり、通常、特有の本質のために美しく微笑ましいです。

原文 ⇒A new term growing in the web design field is header art. These are header images that are usually handmade using combinations of color, shapes, symbols, images, and text. They can take some time and labor to create. While there are some free header art sites, some sites sell their handmade header art. Although a photograph may be unique in its own way and convey the needed visual style, handmade header artwork is easier to match to other web page colors and is usually more aesthetically pleasing because of its distinctive nature.

プレ成功確実なヘッダーに芸術を選ぶのにおいて、いくつかの利益があります。 芸術家は既に仕事をしました、そして、あなたがしなければならないことはあなたのウェブサイトに最もよく合うデザインを選ぶことです。 そして、グラフィックは、使用するのにおいて準備ができていて、既に大きさで分けられて小さいファイルサイズとして救われます。

原文 ⇒Choosing pre-made header art has some benefits. The artists have already done the work and all you have to do is choose the design that best matches your website. And the graphic is ready to use, already sized and saved as a small file size.

デジタルWestexのWordPress Header Artはフリーダウンロードの特にWordPressにおいて大きさで分けられて準備ができていた状態で広範囲のヘッダー芸術を特徴とします。

原文 ⇒Digital Westex’s WordPress Header Art features a wide range of header art sized and ready for free download specifically for WordPress.

ヘッダー芸術著作権

Header Art Copyrights

あなたがあなた自身のを発生させたくないなら、使用する中で最も良いヘッダー芸術は明確に公共の使用を許すCreative下院Licenseに堪えるいずれでもあります。 イメージの使用があなたにはあなたのサイトでヘッダー芸術を使用する許可があるのを確実にする個々のライセンスを読んでください。 通常、あなたは、作者を結果と考えて、同じく共有して、商業目的にそれを使用してはいけません。 疑問で使用の前に作者からいつも許可を願ってください。

原文 ⇒The best header art to use, if you do not want to generate your own, is any that bear the Creative Commons License that specifically allows its public use. Read the individual license for the image’s use to make sure that you have permission to use the header art on your site. Usually you must attribute the author, share alike and not use it for commercial purposes. If in doubt, always ask permission from the author before use.

ヘッダー芸術がデザイナー/芸術家によって作られていて、「そのままで」認可されるとき、芸術家の許可なしで何らかのヘッダー芸術を変更することができません。 ウェブサイト著作権とライセンスをチェックしてください、そして、疑問であって、アートワークを変更したいかどうか尋ねてください。

原文 ⇒As header art is made and licensed “as is” by the designer/artist, some header art cannot be modified without the artist’s permission. Check the website copyrights and licenses and ask if you are in doubt and wish to modify the artwork.

あなた自身のヘッダー芸術をデザインする

Designing Your Own Header Art

また、あなたはあなた自身のヘッダー芸術を設計する場合があります。 どんなグラフィックデザインソフトウェアプログラムも動作するでしょう。 ポピュラーなものはAdobeフォトショップ、Adobe Elements、JASC PaintShop Pro、Gimp、およびマクロメディアFireworksを含んでいます。 グラフィックデザインソフトウェアには、救われると、イメージがリサイズして、解決を制御して、タイプされる能力があるべきです。 あなたのヘッダー芸術のサイズはあなたがそれを入れるヘッダー容器のサイズであるべきです。

原文 ⇒You can also design your own header art. Any graphic design software program will work. Popular ones include Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. The graphic design software should have the ability to resize and control the resolution and type of the image when saved. The size of your header art should be the size of the header container you’re going to put it in.

あなたは、あなたのヘッダー芸術を作成するのにイメージのあなた自身の写真、アートワーク、字体、およびどんな組み合わせも使用することができます。 したら、jpg、gif、または.pngがファイルされるとき、「ウェブ」のためにそれを貯蓄してください。 どれが使用に読み込まれるかに関する説明のために、SitepointのGIF-JPG-PNG WhatはDifference記事です。 ファイルのサイズを減少させて、これらのファイルの種類はイメージの解決を圧縮するでしょう。 より大きいサイズが、サイトアクセスタイムを遅くする傾向があるとき、一般に、50Kより大きいファイルサイズを避けてください。

原文 ⇒You can use your own photographs, artwork, fonts, and any combination of images to create your header art. When done, save it “for the web” as a jpg, gif, or .png file. For an explanation on which to use read Sitepoint’s GIF-JPG-PNG What’s the Difference article. These file types will compress the image’s resolution, reducing the file’s size. In general, avoid file sizes larger than 50K as larger sizes tend to slow a site access times.

ヘッダーテキストを隠す

Hiding the Header Text

多くのThemesとThemeデザイナーは絵が唯一での彼らのヘッダー、テキストを全く特徴としたがっていません。 したがって、テキストの実際の使用を必要としないで、或るものはグラフィックイメージにテキストを入れるでしょう。 1つのオプションはタイトルと記述を作るテンプレートタグを取り除くことです。 それを残すのがありますが、別の選択肢はそれを隠します。

原文 ⇒Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it.

コードでそれを残している間、ヘッダーテキストを隠すには、あなたのテンプレートファイルの中の何も変えないでください。 単にCSSを変えてください。 表示を加えてください: あなたがするCSSセレクタへのなにもは現れなくしたがっていません。 例えばh1セレクタの中にテキストを隠すために:

原文 ⇒To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector: 

h1 {display:none; font-size: 230%; color: blue;.......

それはまだそこにありますが、ブラウザが何らかの方法でそれを示さないと命令されました。 容器は文字通り「そこではない」そうです。

原文 ⇒It is still there, but the browser has been commanded to not show it in any way. The container literally is “not there.”

それは隠されるかもしれませんが、いくつかのウェブページ画面読取装置とサーチエンジンがまだ情報を見つけているでしょう。 あなたがあなたのサイトが理解できるようにすることに関して真剣であるなら、何人かの、より新しいテキスト読者は、スタイルシートにアクセスして、表示であるとマークされた要素を読みません: なし。 これの周りで働くための2つのポピュラーな方法があります。 1つは上で概説されるように表示:なにも使用することになっていませんが、それが表示するそのセレクタ: 逆というのに「目に見えることをターンする」ブロックを変える聴覚のスタイルシートをまた含めてください。 もう片方の方法は文字通り「ページ」に否定的インデントで内容を置くことです。 ここに、例があります:

原文 ⇒It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, “turning the visibility” back on. The other method is to position the content literally “off the page” by a negative indent. Here is an example: 

h1 {
   font-size: 0;
   text-indent: -1000px; }

このテクニックはウェブページで物理的に全体のh1タグとそのコンテンツを動かします。 それがそこにあるので、画面読取装置はまだテキストを「読んでいるでしょう」が、それはページに表示しないでしょう。 大規模なテストは、今までのところ、このテクニックがほとんどのブラウザの向こう側にすべての画面読取装置で働くと立証しました。

原文 ⇒This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still “read” the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers.

テクニックと聴覚のスタイルシートに関する詳しい情報のために:

原文 ⇒For more information on either technique and aural style sheets:

http://codex.wordpress.org/Designing_Headers

全体のヘッダーをクリック可能にする

Making the Whole Header Clickable

クリック可能な全体のヘッダー、グラフィック、およびすべてを作るために、あなたには、2つの選択があります。 あなたは、リンクが全体の領域を囲む位置を変えるか、またはそれらを皆、取り囲むために特定の領域にリンクを加えることができます。

原文 ⇒To make the entire header, graphic and all, clickable, you have two choices. You can either change the position of the link to surround the entire area, or add links to the specific areas to encompass them all.

クリック可能なヘッダーにWordPress Classic Themeの全体のヘッダーを作りかえるために:

原文 ⇒To make the entire header of the WordPress Classic Theme into a clickable header: 

<div id="header">
     <h1><a href="<?php bloginfo('url'); ?>/">
     <?php bloginfo('name'); ?></a>
</h1>
</div>

to:

  <div id="header">
    <a href="<?php bloginfo('url'); ?>">
  <img src="http://example.com/headerimage.jpg" alt="<?php bloginfo('name'); ?>" />
    </a>
     <h1><a href="<?php bloginfo('url'); ?>">" title="<?php bloginfo('name'); ?>">
         <?php bloginfo('name'); ?></a>
     </h1>

あなたは全体のWordPress Default/キューブリックThemeヘッダーをクリック可能にするとThemeの作者によって申し出られた方法を使用することができます:

原文 ⇒You can use the method offered by the Theme’s author to make the entire WordPress Default/Kubrick Theme header clickable:

  • header.phpテンプレートファイル開く。
  • 以下の通り
  • Open header.php template file.
  • Change from 
<div id="header">
     <h1><a href="<?php bloginfo('url'); ?>/">
     <?php bloginfo('name'); ?></a>
</h1>
</div>

あなたが全体のヘッダーイメージではなく、クリック可能であるヘッダーのテキスト領域だけが欲しい場合、どうなるでしょうか? リンクをタイトルと記述だけに追加してください:

原文 ⇒What if you want only the text areas of the header to be clickable and not the entire header image? Add links only to the title and description: 

#header h1 a {
	width: 400px;
	height: 100px;
	display: block;
	background: url(images/headerimage.gif) no-repeat top left;
	}
#header h1 a span { display: none; }

もう1つのオプションは、ヘッダーセクション、すべてのブラウザで動作しない場合がありますクリックするためのスクリプトを追加することです。これはデフォルトのワードプレスのテーマ（キューブリック）のヘッダをクリックすると紹介されます：

  • ファイルは、テンプレートを開きますwp-content/themes/default/header.php
  • 変更

原文 ⇒Another option is to add a script to make the header section clickable, which may not work for all browsers. This is showcased in the Default WordPress Theme (Kubrick) with its clickable header:

  • Open the wp-content/themes/default/header.php template file.
  • Change from 
<div id="header" onclick="location.href='http://example.com/';" style="cursor: pointer;">

場合は、ヘッダーの両方をテキストエリアではなく、全体のヘッダー画像をクリックすると、以下のブログのタイトルと説明をクリックするには、ヘッダーのアートを使用します。

原文 ⇒If you want both text areas of the header to be clickable and not the entire header image, use the following to make the header art and the blog title and description clickable.

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a href="<?php echo get_option('home'); ?>">
     <?php bloginfo('description'); ?>
   </a>
  </div>
 </div>
</div>

ヘッダーイメージをローテーションさせる

Rotating Header Images

あなたがヘッダーの中のイメージ、サイドバーを交替させるか、またはどんなテンプレートにもファイルされる利用可能ないくつかのスクリプトは、あります。 私たちはこれらの1つの使用、Random Image Rotatorを調べるつもりです。

原文 ⇒There are several scripts available that will allow you to rotate images within the header, sidebar, or on any template file. We will examine the use of one of these, the Random Image Rotator.

あなたがヘッダーで回転させたいヘッダーイメージを持っている別々のフォルダーにスクリプトを保存してください。 この例に関しては、rotate.phpにそれに電話をしてください。 背景画像としてこれを使用するために、それは、ウェブページのあらゆる負荷と共に変化するか、または回転します:

原文 ⇒Save the script to a separate folder in which you have the header images you wish to rotate in your header. For this example, call it rotate.php. To use this as a background image that changes or rotates with every load of the web page: 

#header { 
   background: url("/images/headerimgs/rotate.php") 
   no-repeat bottom center; 
}

実際にあなたのヘッダー、またはあなたのサイトのほかの場所にこれを置くには、ヘッダー分割の中のこのようなイメージリンクを加えてください:

原文 ⇒To actually put this in your header, or elsewhere on your site, add an image link like this within the header division: 

<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />

イメージの回転するスクリプトは:

原文 ⇒Image rotating scripts include:

ヘッダーにナビゲーションを追加する

Adding Navigation to Your Header

ヘッダーはあなたがナビゲーション要素をウェブサイトに追加することができる別の領域です。 通常これらはあなたのヘッダーの先端か下部の水平なメニューです。 これらを加えるには、あなたのヘッダーナビゲーション要素を流行に合わせるヘッダーの中に新しい分割を創設してください。

原文 ⇒Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements.

これはList Categoriesテンプレートタグの1つを使用することでヘッダーの先端の向こう側にあなたのカテゴリを表示するのと同じくらい簡単であることができます。 list_cats()タグを使用することで1つの例を見ましょう。

原文 ⇒This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags. Let us look at one example using the list_cats() tag.

この例では、list_cats()テンプレートタグは、順不同のリスト(

  • )の中のIDのそばで日付もポストカウントなしでカテゴリのリストを分類するように設定されて、空のカテゴリを隠さないで、タイトルにリンクでカテゴリ「記述」を使用して、親カテゴリの子供を見せないで、カテゴリ1と33を除きます。 それはそれ自身の「カテゴリ」分割に座っています。 “home”ページか第一面へのリンクがリストの始めに手動で含まれているのに注意してください。

    原文 ⇒In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (

    • ) without dates or post counts, does not hide empty categories, uses category “description” for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own “category” division. Notice that a link to the “home” page or front page has been included manually at the start of the list. 

    <div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->

    このリストをスタイルに合わせるために、style.cssの#categorylistは以下の通りです。

    原文 ⇒To style this list, the #categorylist in the style.css might be: 

    #categorylist {
   font-size:12px; font-style:normal;
   text-transform:uppercase;
}
#categorylist ul {
   list-style-type: none; list-style-image:none; 
   margin:0; padding-bottom: 20px; }
#categorylist li { display: inline; padding: 0px 5px;}
#categorylist a:link, #category a:visited {color:blue}
#categorylist a:hover {color:red}

    それはこれに似るかもしれません:

    原文 ⇒It might look like this:

    WORDPRESS COMPUTERS INTERNET NEWS

    また、あなたはあなたのヘッダーナビゲーションの中であなたのページ、アーカイブ、および他のリンクを加えることができます。 ナビゲーションメニューに関する詳しい情報のために:

    原文 ⇒You can also add your Pages, archives, and other links within your header navigation. For more information on navigation menus:

    ヘッダーチップス

    Header Tips

    ここに、あなたがあなたのWordPressサイトのヘッダーを選んで、カスタム設計するのを助ける何らかのチップ
    と情報があります。

    原文 ⇒Here are some tips and information to help you choose and customize your WordPress site’s header.

    テキストプレースメントと色に注意を向けてください。

    Pay attention to text placement and color. ヘッダーの中のテキストの色とプレースメントは、あなたのプレゼンテーションに加えるか、または引かれることができます。 ここに、いくつかのチップがあります。

    原文 ⇒The colors and placement of the text within a header can add or subtract to your presentation. Here are some tips.

    • あなたが白いテキストを使用するなら、ある理由でイメージがスクリーンで見えないか、またはユーザが「ショーイメージ」をオフにさせるなら再び白いテキストを披露するためにバックグラウンド色がヘッダー、そして/または、headerimgにあるのを確実にします。 これは、あなたの白いテキストがまだ目に見えているのを許容するでしょう。
    • イメージに主な出し物か要素があるなら、イメージの主題をカバーしないようにテキストを置きます。
    • テキストはグラフィックの人通りの多い場所に対して読み込みにくいなら、テキストをヘッダーイメージのそれほど忙しくない領域に置きます。
    • テキストの色があなたの訪問者によって容易に見られて、ヘッダー芸術色と衝突しないのを確実にします。 ライムグリーンバックグラウンドに関する蛍光オレンジのテキストは苦痛です。
    • あなたのヘッダー芸術のいくつかの色差とパターンがあなたのかぶせられたテキストのテキスト手紙を「見えなくなってください」にするかもしれないのを意識してください。 あなたがあなたのヘッダー芸術かヘッダーイメージでテキストを埋め込むなら、同じくらいは適用されます。
    • If you use white text, make sure there is a background color in the header and/or headerimg to showcase the white text again if for some reason the image does not appear on the screen or the user has “show images” turned off. This will allow your white text to still be visible.
    • If the image has a main feature or element, position the text so it does not cover the main subject of the image.
    • If the text is hard to read against a busy area of the graphic, position the text to a less busy area of the header image.
    • Make sure the color of the text is easily seen by your visitors and does not clash with the header art colors. Fluorescent orange text on a lime green background is painful.
    • Be aware that some color differences and patterns in your header art may make the text letters in your overlaid text “disappear.” The same applies if you embed the text in your header art or header image.

    目的とポイントを持ってください。

    Have a purpose and point.良いヘッダーはサイトの中身を反映します。 サイトの残りが期待に添って、ヘッダーを満たさなければならないので、ヘッダーはサイトの内容、目的、および意志を反映しなければなりません。
    それは、訪問者が残っているように誘うべきです。

    原文 ⇒A good header reflects the content of the site. The rest of the site has to meet expectations and live up to the header, so the header must reflect the content, purpose and intention of the site.

    良いヘッダーは本の表紙か雑誌に似ています。

    It should invite visitors to remain. それは、人々が滞在して、見回りを持って、さらに読んで、見て、価値について何かを見つけるのを奨励するべきです。 それはティーザー広告、彼らの注意をつかんで、「ここで探検される何か価値があるものがあります」と言うリードです。

    原文 ⇒A good header is like the cover of a book or magazine. It should encourage people to stay and have a look around, read and look more, and find something of value. It is the teaser, the lead that grabs their attention and says “there is something worth exploring here.”

    それは総合的な外観で調和するべきです。

    It should blend in with the overall look. 大胆で劇的なヘッダーは自分たちを大胆に設計されたサイトに与えますが、柔らかくてパステルの有色のサイトは自分たちをより優しいグラフィックヘッダーに与えます。 パンクとグランジに捧げられたサイトはヘッダーをヌカカ類で薄汚く見せるべきです。 それは次第ですが、一貫性を考えてください。

    原文 ⇒Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.

    ヘッダーには、絵がある必要はありません。

    Headers do not need to have pictures. すべてのヘッダーには、絵とグラフィックスがなければならないというわけではありません。 色の洗濯か白地に反対しているか否かに関係なく、時々、単語は、より重要です。

    原文 ⇒Not all headers must have pictures and graphics. Sometimes the words are more important, whether they are against a wash of color or a white background.

    乱されたヘッダーはまだ乱されています。

    Cluttered headers are still cluttered. 広告、ナビゲーション、テキスト、ニュースが食べさせるスクロール、および台所流し台をあなたのヘッダーにすし詰めにするのを避けてください。 いつもシンプルであるのは、より良いです。

    原文 ⇒Avoid cramming ads, navigation, text, scrolling news feeds, and the kitchen sink into your header. Simple is always better.

    ヘッダーでアクセシビリティが規格であることを支持してください。

    Maintain accessibility standards in your header. 私たちは、ヘッダーテキストを隠すと言及しました、そして、あなたがあなたのヘッダーがアクセシビリティ規格を満たすのを確実にするためにできるそれ以上のことがあります。 画面読取装置がヘッダーとしてそれを認識するのにh1タグを使用してください。 テンプレートファイル(背景画像としてのスタイルシートでないところの)の中で使用されたリンクとイメージでタイトルとalt記述を使用してください。

    原文 ⇒We mentioned hiding the header text, and there is more you can do to make sure your header meets accessibility standards. Use the h1 tag so screen readers will recognize it as a header. Use titles and alt descriptions in links and images used in the template file (not in the style sheet as background images).

    ヘッダーはあらゆる高さであるかもしれませんが、内容が売れていたのを覚えていてください。

    Headers can be any height, but remember content sells. 普通のヘッダーは200高さ画素未満ですが、ヘッダーは非常に薄く半ページに高い状態で及びます。 関心がある彼らが人々がそちらのサイトを見る主な理由が内容であり、それほど彼らが内容を始めるためにあなたのヘッダーの先でスクロールダウンするためにさらに持てば持つほど、傾向があるのを覚えていてください。 あなたのヘッダーと共にそれらを内容に導くのを助けてください。

    原文 ⇒The average header is less than 200 pixels high, but headers range in height from very thin to a half page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content with your header.

    「サイトのアイデンティティ」を考えてください。

    Think “Site Identity.” ヘッダーはサイトのものの一部がそのサイトの中をもう1ページへのリンクをクリックするとき、彼らが同じサイトにいるのを知るために同類に特定するか、「商標を付け」て、または住ませるということです。 あなたのヘッダーかヘッダー芸術があなたのサイトの「ブランドのアイデンティティ」であるとみなしてください。

    原文 ⇒A header is part of the site’s identify or “brand” and people like to know they are on the same site when they click a link to another page within that site. Consider your header or header art as your site’s “brand identity”.

    ヘッダーリソースと情報

    Header Resources and Information

    ヘッダーイメージ

    Header Images

    多くのWordPress Themesがそれらは無料の使用のためにGPLの下でリリースされます–Public License司令官によってあなたが使用することができるヘッダーイメージグラフィックスと共に来ます。 または、あなたは、インターネットでただで利用可能な多くのリソースの1つを使用する場合があるか、またはあなた自身のを設計する場合があります。

    原文 ⇒Many WordPress Themes come with header image graphics you can use because they are released for free use under the GPL – General Public License. Or you can use one of the many resources available for free on the Internet, or design your own.

    ここに、ヘッダーイメージのためのいくつかのリソースがあります:

    原文 ⇒Here are a few resources for header images:

    ヘッダー情報

    原文 ⇒Header Information

    Sponsored Link