ナチュログ管理画面 キャンプ キャンプ 関東 ナチュログカスタマイズ法アウトドア&フィッシングナチュラムアウトドア用品お買い得情報

トランクルームが小さくても大丈夫!セダンで行く、快適キャンプ

快適グッズをセダンに詰め込み、のんびり怠惰なキャンプスタイルを目指すキャンパーブログです。

ブログのトップ画像変更(PC版)、難しい・・・

   

9月に初めてブログを開設し、他の方のブログのトップ画像や記事のタイトル部分がテンプレートそのままではないことに気づき、テンプレートのカスタマイズをいじり始めました。

htmlのコードは初めてで、なんとなく、これかな?これかな?と探りながら、
プレビューしながら何とか変更できました。
正しいやり方かどうかは分かりませんが(;・∀・)
header_top_1000×424

やったのは、PCテンプレート「THE NORTH FACE1」のカスタマイズです。

まず、自分の変更したい画像はネット上にUPする必要があるだろうと思い、
記事用の写真同様にファイルをアップロードしておきました。

次に管理画面のテンプレートのところで、カスタマイズを選択します。
するとスタイルシートやトップページという難しそうなコードが出てきます。

トップ画像はネット上のどこかの画像を読み込んでいるはずなので、「url」や「http」を探しました。
下のスクショは変更後のものです。
D2_1

どうやら「#header_top」のurlくらいしか画像の読み込みは無さそうです。
最初に記載されているurlをブラウザのアドレスに貼り付けて開いてみると、ノースフェイスのトップ画像が出てきました!
ここのurl "https://~~"の部分をUPしておいた画像のURLに置き換えればいいということですね!?
ということで↓の(画像URL表示)を押して自分の画像のURLをコピーし、置き換えます。
D2_2

最後に、画像の大きさが違うと思うので、ピクセル調整をします。
スタイルシートの「#header_top」には既に「max-width: 1000px」と書いてありました。
とりあえずこれと合わせようと思います。変更するのは「height」の値です。
自分の画像の大きさは、3839×1624、・・・細かっ(; ・`д・´)
D3_3
横の大きさを1000にすれば良いので、その時の高さは・・・
1000:X=3839:1624 ⇒ X=423.027
切り上げて「height: 424px」!!
これでどうだ!

という感じで、なんとかトップ画像を変更できました(・∀・)

今はサイドバーの過去記事をドロップダウン化できないかな~とか、
タイトルの隙間を小さくできなかな~、
とスタイルシートを見ながら悩んでいます(;・∀・)
htmlの本買って勉強しようかなー

まだまだ初心者ですが、
今後ともよろしく・・・ね!
2020.10.31追記
過去記事のドロップダウン化はヘルプのページに書いてありました!
http://help.clog3.net/e3906562.html



私の使っている道具たちの使用レポ

カテゴリー⇒お気に入り道具



SnowPeak修理依頼やETCエラーなどのお役立ちメモ

カテゴリー⇒お役立ちメモ

このブログの人気記事
贅沢ソロに小川のヴィガス!店で聞いた設営方法
贅沢ソロに小川のヴィガス!店で聞いた設営方法

厳選!ソロキャン道具@駒出池
厳選!ソロキャン道具@駒出池

1泊2日ソロキャンプ@駒出池 '21/5/14~15
1泊2日ソロキャンプ@駒出池 '21/5/14~15

1泊2日ソロキャンプ準備編
1泊2日ソロキャンプ準備編

ランタンポールなら足元スッキリパイルドライバー!
ランタンポールなら足元スッキリパイルドライバー!

同じカテゴリー(番外編)の記事画像
ドライブ&キャンプ@千葉
新しい焚火グッズ その6と7
新しい焚火グッズ その4と5
新しい焚火グッズ その3
新しい焚火グッズ その1と2
着火方法変えてみようかと。
同じカテゴリー(番外編)の記事
 ドライブ&キャンプ@千葉 (2023-12-23 07:00)
 新しい焚火グッズ その6と7 (2023-10-08 07:00)
 新しい焚火グッズ その4と5 (2023-10-04 07:00)
 新しい焚火グッズ その3 (2023-10-02 07:00)
 新しい焚火グッズ その1と2 (2023-10-01 07:00)
 着火方法変えてみようかと。 (2023-09-30 13:00)



上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。


削除
ブログのトップ画像変更(PC版)、難しい・・・
    コメント(0)