Seesaaブログのプロフィール画像のサイズを調整する方法

、プロフィール画像設定機能の画像について、以下のようなお問い合わせをいただきました。

右上のプロフィール画像が少し大きすぎると思うので、画像サイズを小さく表示させたいのですが、可能でしょうか?

プロフィール画像のサイズについては、HTMLやCSSをカスタマイズすることで変更ができます。

そこで今回は、プロフィール画像のサイズ調整方法をご紹介します。

今回はプロフィール画像設定画面でプロフィール画像が設定されていること、かつ、コンテンツ管理画面でプロフィールコンテンツが設定されていることを前提にご案内します。
詳しくはプロフィール・プロフィール画像の追加のヘルプをご覧ください。

今回の目次

新デザインシステムでの編集方法

今回は「シンプルD.ホワイト 右カラム」のデザインを使用し、編集方法を説明していきます。
※他のデザインをご利用の場合にも、編集する内容は一緒ですので、下記方法を参考に編集をお試しください。ただし、デザインによってHTMLを編集する行が多少前後することがあります。

  1. マイブログ > [デザイン] > [PC] > [デザイン設定]と順にクリックします。
  2. デザイン設定画面が表示されるため、現在ブログに適用されているデザインタイトルのリンクをクリックします。
  3. [スタイルシート編集] [HTML編集] [コンテンツHTML編集] のタブが表示されている画面に切り替わったら、 [スタイルシート編集] のタブをクリックします。
  4. 表示されたソースコードの756行目あたりに今回編集を行いたいプロフィール画像のサイズについて記述があります。
    ハイライトされている757行目が今回編集を行うソースコードとなります。

    .module--profile .profile__image img {
      max-width: 100%;
      height: auto;
    }
    
  5. 757行目の値を変更します。

      max-width: ※変更後のサイズ;
    
    ※この値については、パーセント(○○%)やピクセル(○○px)での指定が可能です。
  6. 757行目を書き換えたら [保存] ボタンをクリックし、編集内容を保存します。
  7. ブログの表示を更新すると、画像のようにプロフィール画像のサイズが変わります。

    変更前

    プロフィール画像(新デザイン)編集前

    変更後(例: max-width: を25%に指定)

    プロフィール画像(新デザイン)編集後


従来のデザインシステムでの編集方法

  1. マイブログ > [デザイン] > [PC] > [コンテンツ]と順にクリックします。
  2. コンテンツ管理画面が表示されたら、設置済みの [プロフィール] コンテンツの歯車マークをクリックします。
  3. ポップアップウィンドウで詳細設定画面が表示されたら、画面内右上にある [コンテンツHTML編集] リンクをクリックします。
  4. プロフィールのHTML編集画面に切り替わり、画面内に表示されているソースコードの4行目あたりに今回編集を行いたいプロフィール画像のサイズについて記述があります。
    ハイライトされている6行目が今回編集を行うソースコードとなります。

    <% if:blog.profile_icon -%>
        <div style="margin-top: 5px; margin-bottom: 10px; text-align: center;">
             <img src="<% blog.profile_icon %>" style="max-width: 100%; height: auto;" />
        </div>
    <% /if -%>
    
  5. 6行目の値を変更します。

             <img src="<% blog.profile_icon %>" style="max-width: ※変更後のサイズ; height: auto;" />
    
    ※この値については、パーセント(○○%)やピクセル(○○px)での指定が可能です。
  6. 4行目を書き換えたら [保存] ボタンをクリックし、詳細設定画面右上にある×印をクリックして詳細設定画面を閉じます。
  7. コンテンツ管理画面に戻ったら、本画面内の [保存] ボタンをクリックします。
    ※こちらの操作を行わないと、コンテンツHTMLの編集内容がブログ上に反映されません。
  8. ブログの表示を更新すると、画像のようにプロフィール画像のサイズが変わります。

    変更前

    プロフィール画像(従来のデザイン)編集前

    変更後(例: max-width: を25%に指定)

    プロフィール画像(従来のデザイン)編集後


  9. このように作成されたブログのデザインシステムによってHTMLやCSSをカスタマイズすることで、プロフィール画像のサイズを変えることができます。よろしければお試しください。