賢威6.2,カスタマイズ,トップページ,画像ファイル

50代でも初心者でも大丈夫!自宅で月10万ネット収入計画

『賢威6.2』プリティ版カスタマイズ実践記⑦トップページにバナーを貼る!

読了までの目安時間:約 4分

 

またまた、このシリーズ、なんと半年ぶりです(^-^;

 

今回は、トップページ上部、一番目立つ部分にバナーを貼る方法をご紹介します。 

イメージはこんな感じです。

SNAGHTML1579947e

 

 

この部分に、自分が一番見て頂きたいものを貼っておくと、いいですよ(^^♪

 

 

では、画像を準備します。
賢威の場合、画像をサイズをしっかり合わせないと、
ブログのレイアウトがくずれる原因にもなるので、気をつけましょう。

こちらの記事を参考にしてくださいネ!

 

 

ちなみに、今回のようにバナーにしたい場合は、500~550pxの幅になると思います。
高さは、お好みで(^^♪

 

 

画像ファイルが完成したら、WordPressのメディアに追加しておきます。

メディア→「新規追加」

image

 

 

 

こちらのほうに、画像ファイルをドラッグ&ドロップします。

image

 

 

 

 

ライブラリに追加になりますので、画像上でクリックします。

image

 

 

 

 

添付ファイルの詳細画面が出ますので右側のURLが、画像ファイルのある場所になります。

image

 

 

 

私は、この時点で、このURLをTera Padにコピーしておきます。

image

 

 

そして、「Ctrl」キーを押しながら「C」キーでコピーし、Tera Padを開いて
「Ctrl」キーを押しながら「V」キーで貼り付けておきます。

 

 

 

 

ダッシュボードの外観→「テーマの編集」をクリックし、

image

 

 

 

右側の一覧から、メインインデックスのテンプレート(index.php)をクリックします。

image

 

 

 

注意!)そしたらこちらも、念のためバックアップはしておきましょうネ!

バックアップの方法はこちらの記事をさんこうにどうぞ~(^^♪

 

 

 

▽メインコンテンツの部分の、<div id="main-contents">の下の赤枠で囲まれた部分に

HTMLタグを入れていきます。

image

 

 

 

<p class="al-c"><a href="クリックして表示させたいURL" target="_blank"><img src="画像ファイルURL"></a></p>

 

 

<p class="al-c"></a>こちらのHTMLタグで画像は中央揃えになります。

上のタグの部分をTera Padにコピーし、2つのURLをそれぞれ入力して、
HTMLタグを完成させてから、、<div id="main-contents">の下の部分に貼り付けましょう。

 

image

 

 

 

後は、「ファイルを更新」をクリックします。

image

 

 

必ずこの後、ブログの表示を確認してリンクも確認しましょうネ!

 

 

 

この部分に動画を貼り付けることもできます。
次回は、その方法をご紹介しますね(^^♪

 

WordPress 賢威6.2カスタマイズ    コメント:26

この記事に関連する記事一覧

コメントは26件です

  1. 広岡千秋 より:

    ikuraさん、

    こんにちは、広岡千秋です。

    バナーをトップページに貼れれば、
    めだっていいですね。

    解説が丁寧でわかりやすくって
    やる気がでますよ(^o^)

    画像の大きさを揃えるのが
    大事ですね。
    どのテンプレートでもそうでしょうね。

    勉強になりました!
    応援完了です。

    • ikura ikura より:

      広岡千秋さん、こんにちは!

      ブログにコメントありがとうございます。

      確かにどのテンプレートを使用するにしろ
      画像の大きさを先に決めると効率的ですネ!

      やる気がでる記事をこれからも頑張ります(^^)/

      応援ありがとうございます。
      これからも、よろしくお願い致します。

  2. きむよし より:

    こんにちは
    とても勉強になります。
    ありがとうございます
    きむよし

    • ikura ikura より:

      きむよしさん、こんにちは!

      コメントありがとうございます。
      これからも、お役に立てる記事を
      増やしていきますので、
      これからもよろしくお願い致します。

  3. Toshikinuyo より:

    ikura様 おはようございます。

    ヘッダーが個性的であると

    閲覧してくれる人の数も多くなるのでしょうね。

    私の場合 画像作成の基礎が出来ていないので困ります。

    GIMPは画像加工ソフトのような気がします。

    原画はPowerPointかなんか作成するのでしょうかね。

    よく判りませんがいずれ勉強しなくてはならないでしょう。

    今後とも宜しくお願いします。

    Toshikinuyo

    • ikura ikura より:

      Toshikinuyoさん、おはようございます!

      コメントありがとうございます!

      私のこのブログのヘッダーの場合、
      背景画像とペンの画像は、商用フリーの壁紙のページから
      ダウンロードさせて頂いたものをGIMPで開いて編集します。
      文字は、GIMPの機能で作成します。

      Power Pointに慣れているのであれば、
      Power Pointでまず作成してみるのもいいと思います(^^♪

      Toshikinuyoさんが勉強したくなった時が
      はじめるタイミングなのだと思います。

      これからもよろしくお願い致します。

  4. パソッキー より:

    パソッキー

    初コメです。

    アメブロから来たのですが、
    ヘッダも含めて画像がとても素敵ですね。

    アメブロのテンプレートは
    何を使用しているのでしょうか?

    的はずれなコメントでしたら、
    申し訳ありません。

    • ikura ikura より:

      パソッキーさん、初めまして!
      コメントありがとうございます。

      アメブロですが、「CSS編集用デザイン」で
      カスタマイズしています。

      ぜひ、お試しを~。
      これからも、よろしくお願い致します!

  5. 加南 より:

    ikuraさん、

    こんばんは、

    加南です。

    ブログにお越しいただき、
    コメントありがとうございました。

    とてもわかりやすい説明、
    ありがとうございます。

    何がなんだかわからない頃、
    まぐれで(笑)できていたことなので、
    とても勉強になりました。

    応援完了です。

    加南

    • ikura ikura より:

      加南さん、おはようございます。
      コメントありがとうございます。

      実は、私も記事にしていることで
      備忘録になっているというところがあります。
      トップページの画像を変えたい時は
      たぶんこの記事を見ながら作業します。
      賢威を使用していて、画像を変更したい方にも
      参考になったら嬉しいですね(^^♪

      応援ありがとうございます。
      これからも、よろしくお願い致します。

  6. むつき より:

    ikuraさん、こんばんは♪

    いつも本当に中身の濃い情報を
    いただき、ありがとうございます!

    勉強させていただいてます。

    ikuraさんのように、
    画像を自在に操れるよう、
    がんばりますっ(^^)/

    応援させていただきます~m(__)m

    • ikura ikura より:

      むつきさん、おはようございます!

      コメントありがとうございます。
      私も、むつきさんに
      お役に立てる記事を更新できるよう
      頑張ります!
      応援ありがとうございました(^^)/

  7. なおなお より:

    ikuraさん、

    こんにちは、なおなおです。
    私はアフィリエイトを始めたばかりの初心者です。
    イラストも可愛いし、
    解説が丁寧でわかりやすくかったです。

    とても勉強になりました!
    応援していきますね。

    • ikura ikura より:

      なおなおさん、こんにちは!
      ブログにコメントありがとうございます!

      アフィリエイトを始めたばかりなんですね!
      なおさおさんのコメントでその頃の事を
      思い出しました。
      初心を忘れずに私も頑張ります(^^)/
      これからも、よろしくお願い致します。
      応援ありがとうございました。

  8. ikuraさん、こんにちは!
    すごく勉強になるサイトですね!!
    私、ワードプレスに悪戦苦闘しました^^;
    参考にさせていただきます!

    応援完了♪

    • ikura ikura より:

      ヤマダマヤ♪さん、こんにちは!
      ブログにコメントありがとうございます。

      ワードプレスの作業時に、
      参考にして頂けたらとても嬉しいです!

      これからも、よろしくお願い致します。
      応援ありがとうございました。

  9. miya より:

    『トップページのバナー』
    が素敵だと気になります。
    やはり、トップページは大切ですよね。
    勉強になります。ありがとうございました。

    • ikura ikura より:

      miyaさん、こんにちは!
      コメントありがとうございます。

      トップページで、印象が決まるので
      また来たくなるブログにしたいですね(^^♪

      これからも、よろしくお願い致します。

  10. あとむ より:

    ikuraさん、こんにちは

    あとむです。

    私も、先日「賢威」にオリジナルヘッダーをはりました!!

    丁寧に説明してくれているので分かりやすいですね^^

    応援完了

    • ikura ikura より:

      あとむさん、こんばんは!
      いつもありがとうございます。

      そして、記事を参考にして頂いて
      とても嬉しいです!

      とても励みになります(^^♪
      これからもよろしくお願い致します!
      応援ありがとうございました(^^)/

  11. ikuraさん、こんばんは(*´ω`)

    先程は訪問&コメントありがとうございます♪

    優花です。

    素敵に無敵に応援完了しております!!(∩´∀`)∩

    すっごく分かりやすく説明されてて助かりますっ!!(゚Д゚;)

    私、PC超初心者で賢威でカスタマイズしようにも
    検索の仕方も分からないし、質問の仕方なんてもっと分からないし‥で;つД`)

    いやはや、参考になりました♪

    また遊びに来ちゃいますね(*ノωノ)

    ではでは☆

    • ikura ikura より:

      優花さん、こんにちは!
      コメントありがとうございます。

      私も、最初の頃
      検索の方法がよくわからなくて
      一つの事を調べるのに何日も
      費やしていました~。

      そんなこともあったので
      1つの記事で作業が完了できるよう
      心がけています。

      参考になって嬉しいです!
      これからもよろしくお願い致します。
      応援ありがとうございました。

  12. 杏奈 より:

    こんにちは!
    杏奈です(≧▽≦)

    そんなに簡単に設定できるんですね!( ゚Д゚)
    知ってるか知らないかで時間をどれだけ無駄にしないか決まりますね( ゚Д゚)

    覚えました!(*´▽`*)

    ありがとうございました(^^♪

    ランキング応援ぽち完了です!
    またきます(*^_^*)

    • ikura ikura より:

      杏奈さん、こんにちは!
      コメントありがとうございます。

      ぜひご活用ください(^^)/
      応援ありがとうございます!
      私も、杏奈さんのブログに訪問いたします(^^♪

  13. 林檎まま より:

    こんにちは

    いつも情報ありがとうございました。
    参考にさせていただきます。
    ありがとうございました。
    応援ポチしました♪
    また来ますね~!

    • ikura ikura より:

      林檎ままさん、こんにちは!

      こちらこそいつも
      コメントありがとうございます(^^)/
      これからも、お役に立てるような
      記事を更新できるよう頑張ります~!

      応援ありがとうございます。

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: