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

k-style

2020年10月19日 11:50

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

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


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

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

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

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


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


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

横の大きさを1000にすれば良いので、その時の高さは・・・
1000:X=3839:1624 ⇒ X=423.027
切り上げて「height: 424px」!!
これでどうだ!

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

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

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

関連記事