エキサイトブログのスキン「カスタマイズ(ポートフォリオ)」のヘッダー画像を差し替える方法についての覚書です。
差し替え場所の特定
まず、画像の部分のHTMLの記述を確認します。使っている Web ブラウザは Google Chrome。画像の上にカーソルを置いて右クリックし、「要素を検証」を選択。
HTMLの記述の変更が必要な部分を画像の前にある id 名から推測することができます。
スキンのHTML記述から、同じ id 名を探しだせば、そのあたりにある img タグが差し替え部分に相当するものであるとわかります。
「スキン変更」をクリック。
「編集」をクリックで、
スキンのHTMLの記述を確認することができます。id 名などから以下の青色の部分が差し替え部分の画像であることがわかります。
差し替え用画像のトリミング
次に差し替え用の画像を作ります。画像の縮小/切り取りには、「PhotoScape 」を使います。
まず、「トリミング」をクリック。
「比率/サイズの割り当て」を選択。
「比率の設定」にチェックを入れ、幅、高さの数値を入力し、「OK」をクリック。
切り取る部分を選択し、
「トリミング」をクリックで、切り取り部分を確定させます。
次にサイズの調整を行います。まず、「ホーム」をクリック。
「リサイズ」をクリック。
数値を入力し、「OK」をクリックで、
サイズが縮小されます。「保存」ボタンをクリックし、作業内容を保存します。
「名前をつけて保存」をクリックし、
適宜、ファイル名を修正し、「保存」ボタンをクリックします。
画像のアップロード
次にトリミングした画像をアップロードします。「マイイメージアカウントにイメージ登録」をクリック。
画像を「ファイルを選択」の欄内にドラッグ&ドロップします。
「送信」ボタンをクリックし、画像をアップロードします。
画像の差し替え
アップロードした画像のファイル名を選択し、
画像のURLをコピーし、
スキンのヘッダー画像のURLを
アップロードした画像のものと差し替えます。
「プレビュー」ボタンをクリックすると、
画像がずれて見えますが、
このまま「保存」をクリックすればOKです。
以上の作業で、ヘッダー画像が新しいものと差し替えられます。
なお、スキン「カスタマイズ(ポートフォリオ)」の場合、ヘッダー画像は大小2枚の画像からなっています。