新デザインシステムで作成したブログの複数のプロフィールコンテンツにそれぞれ違う画像を挿入する方法

このたび、Seesaaブログのカスタマイズ方法や便利な使い方をご紹介するSeesaaブログカスタムレシピブログをお届けすることとなりました。
あなたのかゆいところに手が届く内容をお届けできれば幸いです。どうぞよろしくお願いします。

記念すべき初投稿は『【新デザインシステム】複数のプロフィールコンテンツにおいて別々のプロフィール画像を表示させる方法』をご紹介します。


プロフィール画像のおさらい

先日、機能提供したプロフィール画像はプロフィールコンテンツにお好きな画像を設定することができます。
しかしながら、複数のプロフィールを設定したとしてもそれぞれのプロフィールに別々の画像を設定することができません。
今日ご紹介するカスマイズを行うことで、例えば、あなたがペットのブログを運営されている場合に自身のプロフィール画像とペットのプロフィール画像を掲載することができるようになります。
new_myblog-settings.png


複数プロフィールコンテンツに別々の画像を表示させるためには

プロフィール画像は、[マイブログ] > [設定] > [プロフィール画像] を設定するとプロフィールの上部に自動で画像が表示されます。ですので、自動で表示されないようにします。
次にプロフィールコンテンツに別々のプロフィール画像を設定する必要がありますが、その画像を設定する箇所がないので、設定できるようにします。

プロフィールコンテンツには、あらかじめ決められた設定枠が用意されていますが、その枠の内にあるメールアドレスの枠(下の画像の赤枠部分)を用いてプロフィール画像を表示させるようにします。

profile-partssetting1.png


プロフィールコンテンツのHTMLをカスタマイズしてみる

メールアドレスの枠に画像を表示させるためにはHTMLの編集をします。
HTMLを編集するには、マイブログへログイン後、[デザイン] > [PC] > [デザイン設定] > 現在ブログに設定されているデザインタイトル名のリンクをクリック後、下図の赤枠にある [コンテンツHTML編集] のタブをクリックします。

design-settings-contents_html.png

[コンテンツHTML編集] のタブをクリック後に表示されるソースコード内にある以下の部分がプロフィールコンテンツのHTMLソースコードです。

<% if:parts_name == 'profile' # START parts -%>
//中略//
<% if:parts_name == 'profile' # END parts -%>
※ソースコードを一度メモ帳などのテキストエディタに貼り付けて、そこでページ内検索( Ctrl + F )をすると見つけやすいのでお試しください。

[プロフィール画像] 機能を解除

前述した通り、プロフィール画像機能は設定すると自動で表示されてしまうので、以下赤文字のようにソースコードを書き換え、表示されないようにします。

//中略//
<% if:parts_name == 'profile' # START parts -%>
<section class="module module--profile">
  <h3 class="module__heading"><% parts.title -%></h3>
  <% if:0 -%> ← <% if:blog.profile_icon -%> から変更
  <div class="profile__image">
  <img src="<% blog.profile_icon -%>"/>
  </div>
  <% /if -%>
//中略//

画像を表示させるコードを追加

[プロフィール画像] 機能を解除したので、個別に画像が表示できるように以下のソースコードを貼り付けます。

<img src="<% content_profile.profile_email -%>" alt="profile image" width="xxx">

※widthにはブログ上で表示させたいプロフィール画像の横幅の値を指定します。

このソースコードを赤字のように追加します。

//中略//
<% if:parts_name == 'profile' # START parts -%>
<section class="module module--profile">
  <h3 class="module__heading"><% parts.title -%></h3>
  <img src="<% content_profile.profile_email -%>" alt="profile image" width="xxx"> ←追加
  <% if:0 -%>
  <div class="profile__image">
  <img src="<% blog.profile_icon -%>"/>
  </div>
  <% /if -%>
//中略//
完成形
//中略//
<% if:parts_name == 'profile' # START parts -%>
<section class="module module--profile">
  <h3 class="module__heading"><% parts.title -%></h3>
  <img src="<% content_profile.profile_email -%>" alt="profile image" width="xxx">
  <% if:0 -%>
  <div class="profile__image">
  <img src="<% blog.profile_icon -%>"/>
  </div>
  <% /if -%>
//中略//

プロフィールコンテンツのメールアドレス枠にプロフィール画像を設定できるようにする

メールアドレス枠のソースコード部分 <% if:content_profile.profile_email -%> を検索します。
すると編集前のコードが確認できます。

編集前
//中略//
<% if:content_profile.profile_email -%>
  <dl class="profile">
    <dt class="profile__heading profile__heading--email"><% content_profile.profile_email_text -%></dt>
    <dd class="profile__body profile__body--email"><a href="mailto:<% content_profile.profile_email -%>"><% content_profile.profile_email -%></a></dd>
  </dl>
<% /if -%>
//中略//

これを編集後の赤字のように編集を行い、打ち消し線が入っているところは削除します。

編集後
//中略//
<% if:0 -%> ← <% if:content_profile.profile_email -%> から変更
  <dl class="profile">削除
    <div class="profile__heading profile__heading--email"><% content_profile.profile_email_text -%></div> ← dt から div に変更
    <dd class="profile__body profile__body--email"><a href="mailto:<% content_profile.profile_email -%>"><% content_profile.profile_email -%></a></dd>削除
  </dl>削除
<% /if -%>
//中略//

完成形
//中略//
<% if:0 -%>
  <div class="profile__heading profile__heading--email"><% content_profile.profile_email_text -%></div>
<% /if -%>
//中略//

以上で編集が完了しました。コンテンツHTML編集画面内の [保存] ボタンをクリックして編集内容を保存します。
これでプロフィール画像を個別に設定できる用意ができました。


実際にメールアドレス枠に画像を入れてみる。

プロフィールコンテンツのパーツ設定画面のメールアドレス枠にプロフィールコンテンツで表示させたい画像のURLを入力し、パーツ設定画面内の [保存] をクリックします。
画像はあらかじめ登録しておいてください。

※その後、コンテンツページ内の [保存] ボタンのクリックも忘れずに!

profile-partssetting2.png

画像URLの確認方法

プロフィール画像として利用したい画像をブログのファイルマネージャにアップロードしている場合には、下記の手順でアップロードされている画像のURLを確認することができます。

  1. マイブログ内のファイルマネージャをクリックして、ファイルマネージャ画面を表示させる。
  2. ファイルマネージャ画面内のファイル一覧より画像URLを確認したいファイル(赤枠部分)のタイトルをクリックする。
    thumbnail-list.png
  3. ポップアップウィンドウでファイル編集画面が表示されたら、画面右下の赤枠部分がその画像のURLをコピーする。
    file-edit.png
  4. ファイル編集画面の画面右上の [×] 印をクリックして、ファイル編集画面を閉じる。

これで操作は完了です!
試しにプロフィールコンテンツを右サイドバーに2つ追加して、各コンテンツに異なった画像を設定したうえで、実際にブログの表示を確認してみると・・・
E382B5E383B3E38397E383ABE38396E383ADE382B020-20E38388E38383E38397E3839AE383BCE382B8.png

実際に複数のプロフィールコンテンツでそれぞれ別の画像が表示されてますね
ぜひ試してみてください!

※本記事でご紹介した内容はあくまで一例となります。
また、HTMLやCSSの編集に関して、編集箇所や内容および編集結果を含め、サポートは一切行っておりません。
あらかじめご了承ください。