『賢威6.2』プリティ版カスタマイズ実践記⑦トップページにバナーを貼る！
またまた、このシリーズ、なんと半年ぶりです(^-^;
今回は、トップページ上部、一番目立つ部分にバナーを貼る方法をご紹介します。
イメージはこんな感じです。
この部分に、自分が一番見て頂きたいものを貼っておくと、いいですよ(^^♪
では、画像を準備します。
賢威の場合、画像をサイズをしっかり合わせないと、
ブログのレイアウトがくずれる原因にもなるので、気をつけましょう。
→ こちらの記事を参考にしてくださいネ！
ちなみに、今回のようにバナーにしたい場合は、500～550pxの幅になると思います。
高さは、お好みで(^^♪
画像ファイルが完成したら、WordPressのメディアに追加しておきます。
メディア→「新規追加」
こちらのほうに、画像ファイルをドラッグ&ドロップします。
ライブラリに追加になりますので、画像上でクリックします。
添付ファイルの詳細画面が出ますので右側のURLが、画像ファイルのある場所になります。
私は、この時点で、このURLをTera Padにコピーしておきます。
そして、「Ctrl」キーを押しながら「C」キーでコピーし、Tera Padを開いて
「Ctrl」キーを押しながら「V」キーで貼り付けておきます。
ダッシュボードの外観→「テーマの編集」をクリックし、
右側の一覧から、メインインデックスのテンプレート（index.php）をクリックします。
注意！）そしたらこちらも、念のためバックアップはしておきましょうネ！
バックアップの方法はこちらの記事をさんこうにどうぞ～(^^♪
▽メインコンテンツの部分の、<div id="main-contents">の下の赤枠で囲まれた部分に
HTMLタグを入れていきます。
<p class="al-c"><a href="クリックして表示させたいURL" target="_blank"><img src="画像ファイルURL"></a></p>
<p class="al-c"></a>こちらのHTMLタグで画像は中央揃えになります。
上のタグの部分をTera Padにコピーし、２つのURLをそれぞれ入力して、
HTMLタグを完成させてから、、<div id="main-contents">の下の部分に貼り付けましょう。
後は、「ファイルを更新」をクリックします。
必ずこの後、ブログの表示を確認してリンクも確認しましょうネ！
この部分に動画を貼り付けることもできます。
次回は、その方法をご紹介しますね(^^♪
この記事に関連する記事一覧
-
読了時間：約 3分
-
読了時間：約 3分
-
読了時間：約 3分
-
読了時間：約 5分
-
読了時間：約 4分
ikuraさん、
こんにちは、広岡千秋です。
バナーをトップページに貼れれば、
めだっていいですね。
解説が丁寧でわかりやすくって
やる気がでますよ(^o^)
画像の大きさを揃えるのが
大事ですね。
どのテンプレートでもそうでしょうね。
勉強になりました！
応援完了です。
広岡千秋さん、こんにちは！
ブログにコメントありがとうございます。
確かにどのテンプレートを使用するにしろ
画像の大きさを先に決めると効率的ですネ！
やる気がでる記事をこれからも頑張ります(^^)/
応援ありがとうございます。
これからも、よろしくお願い致します。
こんにちは
とても勉強になります。
ありがとうございます
きむよし
きむよしさん、こんにちは！
コメントありがとうございます。
これからも、お役に立てる記事を
増やしていきますので、
これからもよろしくお願い致します。
ikura様 おはようございます。
ヘッダーが個性的であると
閲覧してくれる人の数も多くなるのでしょうね。
私の場合 画像作成の基礎が出来ていないので困ります。
GIMPは画像加工ソフトのような気がします。
原画はPowerPointかなんか作成するのでしょうかね。
よく判りませんがいずれ勉強しなくてはならないでしょう。
今後とも宜しくお願いします。
Toshikinuyo
Toshikinuyoさん、おはようございます！
コメントありがとうございます！
私のこのブログのヘッダーの場合、
背景画像とペンの画像は、商用フリーの壁紙のページから
ダウンロードさせて頂いたものをGIMPで開いて編集します。
文字は、GIMPの機能で作成します。
Power Pointに慣れているのであれば、
Power Pointでまず作成してみるのもいいと思います(^^♪
Toshikinuyoさんが勉強したくなった時が
はじめるタイミングなのだと思います。
これからもよろしくお願い致します。
パソッキー
初コメです。
アメブロから来たのですが、
ヘッダも含めて画像がとても素敵ですね。
アメブロのテンプレートは
何を使用しているのでしょうか？
的はずれなコメントでしたら、
申し訳ありません。
パソッキーさん、初めまして！
コメントありがとうございます。
アメブロですが、「CSS編集用デザイン」で
カスタマイズしています。
ぜひ、お試しを～。
これからも、よろしくお願い致します！
ikuraさん、
こんばんは、
加南です。
ブログにお越しいただき、
コメントありがとうございました。
とてもわかりやすい説明、
ありがとうございます。
何がなんだかわからない頃、
まぐれで(笑)できていたことなので、
とても勉強になりました。
応援完了です。
加南
加南さん、おはようございます。
コメントありがとうございます。
実は、私も記事にしていることで
備忘録になっているというところがあります。
トップページの画像を変えたい時は
たぶんこの記事を見ながら作業します。
賢威を使用していて、画像を変更したい方にも
参考になったら嬉しいですね(^^♪
応援ありがとうございます。
これからも、よろしくお願い致します。
ｉｋｕｒａさん、こんばんは♪
いつも本当に中身の濃い情報を
いただき、ありがとうございます！
勉強させていただいてます。
ｉｋｕｒａさんのように、
画像を自在に操れるよう、
がんばりますっ(^^)/
応援させていただきます～m(__)m
むつきさん、おはようございます！
コメントありがとうございます。
私も、むつきさんに
お役に立てる記事を更新できるよう
頑張ります！
応援ありがとうございました(^^)/
ikuraさん、
こんにちは、なおなおです。
私はアフィリエイトを始めたばかりの初心者です。
イラストも可愛いし、
解説が丁寧でわかりやすくかったです。
とても勉強になりました！
応援していきますね。
なおなおさん、こんにちは！
ブログにコメントありがとうございます！
アフィリエイトを始めたばかりなんですね！
なおさおさんのコメントでその頃の事を
思い出しました。
初心を忘れずに私も頑張ります(^^)/
これからも、よろしくお願い致します。
応援ありがとうございました。
ikuraさん、こんにちは！
すごく勉強になるサイトですね！！
私、ワードプレスに悪戦苦闘しました＾＾；
参考にさせていただきます！
応援完了♪
ヤマダマヤ♪さん、こんにちは！
ブログにコメントありがとうございます。
ワードプレスの作業時に、
参考にして頂けたらとても嬉しいです！
これからも、よろしくお願い致します。
応援ありがとうございました。
『トップページのバナー』
が素敵だと気になります。
やはり、トップページは大切ですよね。
勉強になります。ありがとうございました。
miyaさん、こんにちは！
コメントありがとうございます。
トップページで、印象が決まるので
また来たくなるブログにしたいですね(^^♪
これからも、よろしくお願い致します。
ikuraさん、こんにちは
あとむです。
私も、先日「賢威」にオリジナルヘッダーをはりました！！
丁寧に説明してくれているので分かりやすいですね^^
応援完了
あとむさん、こんばんは！
いつもありがとうございます。
そして、記事を参考にして頂いて
とても嬉しいです！
とても励みになります(^^♪
これからもよろしくお願い致します！
応援ありがとうございました(^^)/
ikuraさん、こんばんは(*´ω｀)
先程は訪問&コメントありがとうございます♪
優花です。
素敵に無敵に応援完了しております！！(∩´∀｀)∩
すっごく分かりやすく説明されてて助かりますっ！！(ﾟДﾟ;)
私、PC超初心者で賢威でカスタマイズしようにも
検索の仕方も分からないし、質問の仕方なんてもっと分からないし‥で;つД｀)
いやはや、参考になりました♪
また遊びに来ちゃいますね(*ﾉωﾉ)
ではでは☆
優花さん、こんにちは！
コメントありがとうございます。
私も、最初の頃
検索の方法がよくわからなくて
一つの事を調べるのに何日も
費やしていました～。
そんなこともあったので
1つの記事で作業が完了できるよう
心がけています。
参考になって嬉しいです！
これからもよろしくお願い致します。
応援ありがとうございました。
こんにちは！
杏奈です(≧▽≦)
そんなに簡単に設定できるんですね！( ﾟДﾟ)
知ってるか知らないかで時間をどれだけ無駄にしないか決まりますね( ﾟДﾟ)
覚えました！(*´▽｀*)
ありがとうございました(^^♪
ランキング応援ぽち完了です！
またきます(*^_^*)
杏奈さん、こんにちは！
コメントありがとうございます。
ぜひご活用ください(^^)/
応援ありがとうございます！
私も、杏奈さんのブログに訪問いたします(^^♪
こんにちは
いつも情報ありがとうございました。
参考にさせていただきます。
ありがとうございました。
応援ポチしました♪
また来ますね～！
林檎ままさん、こんにちは！
こちらこそいつも
コメントありがとうございます(^^)/
これからも、お役に立てるような
記事を更新できるよう頑張ります～！
応援ありがとうございます。