エキサイトブログのヘッダー画像を差し替える

エキサイトブログのスキン「カスタマイズ(ポートフォリオ)」のヘッダー画像を差し替える方法についての覚書です。

WS001598
エキブロ・サクブロ

差し替え場所の特定

まず、画像の部分のHTMLの記述を確認します。使っている Web ブラウザは Google Chrome。画像の上にカーソルを置いて右クリックし、「要素を検証」を選択。

skinchange0

HTMLの記述の変更が必要な部分を画像の前にある id 名から推測することができます。

WS001599

スキンのHTML記述から、同じ id 名を探しだせば、そのあたりにある img タグが差し替え部分に相当するものであるとわかります。

「スキン変更」をクリック。

skinchange01

「編集」をクリックで、

skinchange02

スキンのHTMLの記述を確認することができます。id 名などから以下の青色の部分が差し替え部分の画像であることがわかります。

skinchange03

差し替え用画像のトリミング

次に差し替え用の画像を作ります。画像の縮小/切り取りには、「PhotoScape 」を使います。

skinchange04

まず、「トリミング」をクリック。

skinchange05

「比率/サイズの割り当て」を選択。

skinchange07

「比率の設定」にチェックを入れ、幅、高さの数値を入力し、「OK」をクリック。

skinchange08

切り取る部分を選択し、

skinchange09

「トリミング」をクリックで、切り取り部分を確定させます。

skinchange10

次にサイズの調整を行います。まず、「ホーム」をクリック。

skinchange11

「リサイズ」をクリック。

skinchange12

数値を入力し、「OK」をクリックで、

skinchange13

サイズが縮小されます。「保存」ボタンをクリックし、作業内容を保存します。

skinchange14

「名前をつけて保存」をクリックし、

skinchange15

適宜、ファイル名を修正し、「保存」ボタンをクリックします。

skinchange16

画像のアップロード

次にトリミングした画像をアップロードします。「マイイメージアカウントにイメージ登録」をクリック。

skinchange17

画像を「ファイルを選択」の欄内にドラッグ&ドロップします。

skinchange18

「送信」ボタンをクリックし、画像をアップロードします。

skinchange19

画像の差し替え

アップロードした画像のファイル名を選択し、

skinchange20

画像のURLをコピーし、

skinchange21

スキンのヘッダー画像のURLを

skinchange22

アップロードした画像のものと差し替えます。

WS001600

「プレビュー」ボタンをクリックすると、

skinchange23

画像がずれて見えますが、

skinchange24

このまま「保存」をクリックすればOKです。

skinchange25

以上の作業で、ヘッダー画像が新しいものと差し替えられます。

WS001601

なお、スキン「カスタマイズ(ポートフォリオ)」の場合、ヘッダー画像は大小2枚の画像からなっています。

WS001602

参考記事:エキサイトブログ向上委員会 : お気に入りの写真がスキンに!新カスタマイズスキンを追加しました

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。