WordPress Webサイトの再設計(個人的なタッチを追加するため)

他のプラットフォームでは、WordPressのようにWebサイトのルックアンドフィールをカスタマイズすることはできません。 WordPressがパブリッシャーやWeb開発者に人気がある理由の1つです。.


基本的な(そして単調な)WPテーマを取り、ロゴを追加し、数行のコードを編集し、CSSを変更して、プロフェッショナルな(まだパーソナライズされた)外観のWebサイトをすぐに作成できます。作業は簡単で、このチュートリアルでは、その方法を説明します.

準備はできたか?まず最初に、最初のものから始めましょう。色.

配色のデザイン

WordPressサイトの配色を開発する場合、考慮すべきことがたくさんあります。あなたの家や石とモルタルの店を描くようなものだと考えてください。あなたはあなたの壁に行く色とあなたのドアにしたい色を決定する必要があります.

外装や内装の塗装方法は、個人的な好みであるいくつかの要因に依存します.

WordPressサイトのカラーリングも同じです。リンクの色は何色ですか?あなたの経歴、どのようにしてそれを最も魅力的にして、競合他社を口に出しますか?どの色があなたのメッセージを補完する(または力を与える)でしょうか?どのようにあなたのテキストが欲しいですか?空は、WPサイトで使用できる色の選択の限界です.

最初から使用するすべての色を決定する必要があります。 3色だけに固執することをお勧めしますが、好きなだけ色を自由に使用できます。.

無理をしないでください。そうしないと、マーケティングメッセージがその色で薄れてしまいます。結局のところ、過剰なものは有毒なので、どの色を選択しても、調和があることを確認することが重要です。.

大多数の人がそれらを愛する(そして願わくば)愛する場所で最も多くの色を使用するのが最善です。あなたのロゴとマストヘッドについて話しています。これらの領域は、最も多くの色が必要な場所です。あなたのウェブサイトの残りの部分はカラフルではないかもしれませんが、より有益です.

216色と12色

私たちは皆、12の基本色に精通していますが、ウェブには色とそのさまざまな色合いがいっぱいです。まさにこの理由から、プロのルックを作成しながら、個人的な暖かさを醸し出す色を選択することは、困難な作業になる可能性があります。.

私はインターネット全体で釣りをして、あなたが始めるための以下のツールを見つけたので、あなたは幸運です。

クーラー

Kuler

Kulerは、Web開発者がクラス最高の配色を作成できるようにアドビによって設計されました。 Kulerはオンラインツールです。つまり、持ち運んでどこからでも使用できますが、デスクトップから直接配色を作成できるデスクトップアプリケーションもあります。さらに、Adobe IDをお持ちの場合は、ワンクリックでカラースキームを保存できます.

とりわけ、単色、複合、補色、類似、トライアドなど、Kulerで使用するさまざまなカラールールがあります。.

Kulerをチェック.

HTMLカラーチャート

使用する色を知ることは、仕事の半分にすぎません。色を実装するには、色をHTMLコードに変換する必要があります.

htmlカラーチャート

これは、HTMLカラーチャートの出番です。これは、200(実際には216)を超えるWebカラーコードを持つカラフルなチャートです。チャートで武装して、太陽の下の色は実装するのが難しいと証明すべきではありません.

コードはHTML、CSS、Adobe PhotoShopおよびその他のグラフィック操作ツールで動作するため、世界中で色を好きなだけ自由に操作できます.

HTMLカラーチャートを確認する.

ジェノパル

色を選ぶのに助けが必要な場合は、GenoPalが必要なアプリケーションです。これは、カラーパレットをブラウザウィンドウに「固定」する非常にシンプルなWebアプリケーションです。色を選択すると、ブラウザに色付きの「付箋」の形で表示されます。 ��

ジェノパル

GenoPalを使用すると、明るさを上げて色相の彩度を制御できるため、希望する色合いを正確に得ることができます.

彼らのウェブサイトでは、モバイルアプリが開発中です。起動すると、アプリを持ち運び、モバイルデバイスで色を開発できます。彼らのデザインは独創的であり、このアプリケーションが実際に機能するという事実は、GenoPalがビジネスを意味することの明確な兆候です.

コロレクサ

ColorHexaはのオンライン版です アーティストのペイントプレート. このWebサイトでは、カラーコードを入力するだけで色を混ぜることができます。彼らの前途有望なアプリはカラーブレンディングツールですが、グラデーションジェネレーターとカラー減算器も備えています。ここで働いている純粋な天才ではありません?

colorhexa

ColorHexaブレンダーはどのように機能しますか?あなたがしなければならないのは、「+」で区切られたカラーコードを入力することだけで、ColorHexaが残りの作業を行います。たとえば、私は試しました:

#ff0000 +#0000ff +#ff00ffと#aa00aaを取得しました。さらに、ページ全体の色情報(最終的な色については#aa00aaなど)が提供されます。これは、これまでにないような色のブレンドを体験するために自分で試さなければならない1つのツールです。.

ColorHexaをチェック.

究極のCSSグラディエントジェネレーター

究極のカラーグラデーションジェネレーター

色のグラデーションを生成する限り、これはおそらく最良のツールです。これは完全にオンラインであり、更新中点とそれに対応するCSSコードを生成するのに役立ちます。また、ChromeとFirefoxのアドオンを提供して、アプリをブラウザーに統合して、より簡単かつ高速にアクセスできるようにします.

グラデーションを確認できるプレビュー領域があるので、必要と思われるのは、適切と判断してグラデーションを生成し、 コピーペースト 生成されたCSSコード。とても簡単で、これまでにないほど多くの色があります.

Ultimate CSS Gradient Generatorをご覧ください.

フォントを選ぶ

ピカソのような色を選択してブレンドする方法を説明したので、フォントをいじってみましょう.

あなたの色とウェブデザインは人を引き込みますが、それはあなたの言葉、つまりあなたのページと投稿が人々を魅了するでしょう.

私たちは常に最高のストーリーを作成するのに忙しいので、ほとんどの人はフォントも重要であることを忘れています。ただし、選択したフォントは、ユーザーがWebサイトを操作する方法に影響します。適切なフォントを使用すると、ターゲットユーザーは固執し、最終的に他のページに移動することになります。エンゲージメント.

100万個と1個のフォントがありますが、残念ながら、ユーザーには自分のマシンにインストールされているフォントしか表示されません。使用しているフォントがマシンにインストールされていない場合、代替フォント(または完全に異なるフォント)が表示されますが、これは期待した効果とは異なります。.

「フォントで遊ぶのは火で遊ぶようなものです。時々、それはウェブページのマッチ、きれいなテキストの線香花火を照らすことができます。また、家全体を焼き払うこともあります。」 – cameraontheroad.comのLorelle.

スタイルシートを使用して、フォントを制御(および必要な効果を作成)できます。あなたのテーマでは、スタイルシートは通常 style.css ファイル。このファイルを使用して、フォントの色、フォント/フォントファミリのタイプ、フォントサイズ、および選択したフォントの他の側面を制御できます。.

以下は良い例です:

#menu {font-family:Arial、Helvetica、Sans-serif、Verdana、「Times New Roman」; font-size:0.8em;色:黒;}

上記のコードは、メニューのフォントサイズを0.8emに設定し、色を黒に設定します。また、フォントをArialに設定しますが、ユーザーがマシンにArialを持っていない場合は、Helveticaが引き継ぎます。 HelveticaまたはArialがない場合、Verdana、Sans-serif、またはTimes New Romanが引き継ぎます.

フォントを制御することで、より一貫したルックアンドフィールを作成できます.

ただし、フォントの不整合の問題を一度に解決するには、埋め込みフォントを使用できます。埋め込み(または外部)フォントを使用することで、ユーザーは自分のマシンにフォントを置く必要がありません。.

さらに、それは簡単な作業です.

あなたがしなければならないすべてはあなたを開くことです style.css 次のコードを上部に配置します.

@ font-face {font-family:Museo300; src:url( "fonts / museo300-regular.ttf")形式:( 'truetype'); font-weight:normal;}

注:フォントの名前と場所を定義する必要があります。上記の例では、「Museo300」は「fonts」という名前のフォルダーに保存されたフォントです.

たとえば、Webサイト全体でフォントを使用するには、次のように記述します。

body {font-family:Museo300;}

Webサイトの任意の要素に埋め込みフォントを使用できます。例えば…

#menu {font-family:Museo300;}

…Museo300をメニューに設定します.

上記の方法は、フォントをダウンロードしてサーバーにアップロードする必要があることを意味します。.

しかしながら, y使用したい外部フォントをダウンロードする必要はありません.

次のように、head(header.php)セクションからフォントにリンクするだけです。

上記の行をどこにどのように追加しますか?あなたはあなたを開く必要があります WordPress管理パネル–>外観–>エディタ–> header.php

header.phpファイルを編集したくない、または編集できない場合は、次の行を入力してフォントをインポートします。 style.css

@import url(http://fonts.googleapis.com/css?family=over+the+rainbow);

上記の例では、 虹の彼方に あなたのサイトのどこにでもあるGoogleのフォント。たとえば、ウェブサイト全体でOver The Rainbowを使用したい場合は、次のコードを使用できます。

body {font-family: "Over The Rainbow";}

Googleが提供する 600以上のフリーフォントファミリ, だから離れて!

アップデート(07/12/13):WordPressサイトにGoogleフォントを簡単に追加したい場合は、 Googleタイポグラフィプラグイン. それ以外は、Googleフォントの詳細と、このフォントを実装する方法を学ぶことができます。TomEwerによるWordPressウェブサイトのタイポグラフィをGoogleフォントで改善する.

フォントの操作に関するその他のリソース

フォントを追加するためのWordPressプラグイン

また、コードを詳しく調べたくない場合は、いつでもWordPressプラグインをインストールして、面倒な作業の一部を行うことができます。 WordPress.comの人気のあるフリーフォントプラグインをいくつか紹介します。

あなたが楽しんでいる?次へ移りましょう…

 日付と時刻のフォーマット

あなたはあなたのサイトが関係している完全な初心者のように感じさせた本当に素晴らしい調子で日付または時刻を表示したWordPressサイトに行ったことがありますか?これらのサイトの所有者は、 1行のコード そして今、あなたは彼らの日付を十分に得ることができません。はは.

良いニュースです、あなたは編集できます このコード行 読者も驚かせます.

あなたの WPダッシュボード, 案内する 外観, そして次に 編集者 以下に示すように:

日付のフォーマット

そこに移動すると、右端に.phpファイルのリストが表示されます。

シングルポスト

単一の投稿(single.php)をクリックし、それが開いたら、を押して検索バーを開きます。 Ctrl + F. 表示される検索バーに、次のように入力します。

the_time

次のような行がすぐに見つかります。

さて、編集したいエリアは ( ‘F Y’).

このセクションを肉付けして、あなたに噛むための肉質を与えます.

( ‘F Y’)の「F」は 月のフルネーム 「Y」は 4桁の年. したがって、( ‘F Y’)を使用すると、日付は次のようになります。

2013年9月

FとYの間にカンマを入れると、次のようになります。

2013年9月

日などの要素を追加する場合は、次の文字を使用できます。

l =完全な曜日名(小文字のL)

F =月

j =月の日(日付)

Y = 4桁の年

y = 2桁の年

より多くの文字が以下の表にあります:

日付テーブルのフォーマット

そしてここに、いくつかの例:

日付のフォーマット例

大括弧( ‘F Y’)内の文字のみを編集することを常に覚えており、, メモを取る, 一重引用符を削除しないでください. 好きなだけ文字を自由に使って、思いどおりの効果を実現し、完了したらすべてを保存してください。.

さらに、削除することで日付を取り除くことができます…

…私が少し前にブログでやったように。 ��今、私が得るすべては Fredのso and soカテゴリーでの投稿…何とか何とか. 日付はありません.

あなたは次の部分のために燃料を供給されていますか?あなたはより良い.

the_time関数が見つかりませんでした?

今日では多くのテーマがthe_time()関数の代わりにthe_date()関数を使用しているため、これで問題ありません。テーマがthe_date()関数を使用している場合は、「設定->一般」でダッシュボードのデータの表示方法を変更するだけでよいため、編集を行う必要はありません。.

画像の使用

これはおそらく、このチュートリアルの最も簡単な(そして最も短い)部分です。ただし、WordPressを初めて使用する場合は、画像を追加するのが難しい場合があります。.

WordPressでは、新しい投稿やページを作成するときに、アップロードユーティリティまたは([メディアの追加]ボタン)を使用して画像を追加できます。必要なのは、投稿またはページの画像を配置する場所にカーソルを置き、[メディアの追加]をクリックすることだけです。.

メディアを追加

アップロードユーティリティが開いたら、キャプション、サイズ、リンク、配置など、その他の詳細を追加できます.

アップロードユーティリティ

この領域は、アップロードユーティリティの右側にあります。.

画像の追加について詳しくは、次のリソースをご覧ください。

素晴らしい無料の画像がどこにあるかわからない場合は、WordPressに最適な画像リソースをカバーした記事をチェックしてください。.

見る?最短になると言いました��

ファビコンを追加する

画像について完全に忘れる前に、ファビコンを作成してWordPressサイトに追加しましょう。ファビコン(またはお気に入りアイコン)は、Webサイトをブックマークするために使用されるアイコンです。.

ファビコンは、読者があなたのウェブサイトを視覚的に識別するのに役立ちます.

通常、ファビコンは、拡張子が.icoの16 X 16ピクセルの正方形のグラフィックファイルです。拡張子はアイコンを表します.

ファビコンを作成する方法

ファビコンはオンラインで作成することも、GIMPなどの画像編集プログラムや、.icoファイルを保存できるその他のプログラムを使用して作成することもできます。ほとんどのオンラインサービスは無料です.

画像は通常非常に小さい(16 x 16ピクセル)ですが、ファビコンはブログ全体を表す必要があります。ファビコンの作成に使用する画像またはテキストは、オンラインビジネスを表すものでなければなりません.

画像エディターを使用している場合:

  • 画像が正方形になるように、必要に応じてスペースをトリミングまたは追加してください
  • 画像のサイズを16 X 16ピクセルに変更します。
  • 名前を付けて画像を保存 favicon.ico

ファビコンの作成に使用できるオンラインサービスには、次のものがあります(これらに限定されません)。

ファビコンを作成すると、ファビコンからコンピューターにダウンロードできるので、心配しないでください.

WordPressにファビコンをインストールする方法

テーマのメインフォルダーに別のファビコンがある場合は、FTPクライアントまたは使用可能な任意の方法を使用してファビコンを削除する必要があります。 FTPクライアントは、使いやすく、探しているファイルをすばやく見つけることができるため、推奨されます。.

このチュートリアルでは、faviconer.comを使用してブログのファビコンを作成し、Filezillaを使用して既存のファビコンを削除しました.

favicon.icoファイルを入手したら、同じファイルをテーマのメインフォルダーにアップロードします。これは、現在のテーマが保存されているフォルダーです.

次に、ファビコンの別のコピーをルートフォルダー(通常はpublic_html)またはサイトが保存されているメインディレクトリにアップロードします。これにより、yoursite.com / favicon.icoと入力するとファビコンが表示されます。これにより、ファビコンがフィードに自動的に追加されます.

アップロードが完了したら、favicon.icoを機能させる番です。これはあなたがすべきことです:

プラグインを使用してファビコンを追加する

ファビコンを追加する最良の方法は、プラグインを使用することです。 「オールインワンファビコン”使用できる非常にシンプルなアプローチのためのより高度な使用法のためのプラグイン“最も単純なファビコン”バックエンドオプションのないプラグイン。サーバー上の正しい場所にfavicon.icoというファイルをアップロードするだけです。.

オールインワンファビコン

テンプレートにファビコンを手動で追加する

次の手順に従って、ファビコンをテンプレートに手動で追加することをお勧めします(最善の方法ではありません)。

  • にログイン ダッシュボード
  • 案内する 外観
  • それから エディター(テーマエディター)
  • 検索して開く header.php(ヘッダー) ファイル

この行をヘッダーファイルに追加します(できれば、他のファイルが表示されている上部) タグ:

完了したら保存. 

ブラウザを更新して新しい変更を確認してください.

この時点で、色の変更、より適切なフォントの選択、日付と時刻のフォーマット、画像の使用、ファビコンの追加ができるはずです。.

結論

WordPressサイトの再設計について話し合うことがたくさんあるので、1つの投稿ですべてをカバーしようとするのは(あなたにとって)不都合です。.

最大限のメリットを得るには、チュートリアルをいくつかのパートに分割することをお勧めします(これはパート1です)。日がたつにつれて、より多くの再設計トリックを共有する予定ですので、目を光らせてください。これらのチュートリアルの目的は、あなたがこれまでで最高のWordPressサイトを作成し、すべてを自分で行ったので幸せに感じるのを助けることです.

あなたの意見を共有したり、ディスカッションに何かを追加したい場合は、下のコメントセクションにコメントを残してください。!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map