livedoor ナレッジ

プラグインエリアのバックに写真を入れたい。

Q1.左の最新記事、Archives、categoriesエリアのバックに写真を入れるには、どうすれば良いのか教えてください。

Q2.カレンダーエリアに写真を入れたら、サイズが合いませんでした。カレンダー部分の縦を広げて、写真の顔全体を表示したいです。
写真のサイズを上手く変更できないので、レイアウトで変更したいと思います。

よろしくお願い致します。

こんばんは。
Q2に関してのみの回答です。

サイドバーを広げるよりも、画像を小さくした方がいいと思います。
ここを広げてしまうと、その下に続くプラグインとサイズが合わなくなり見た目が悪くなってしまいます。

＊＊＊画像の縮小方法＊＊＊

お手元の画像を右クリック→【プログラムから開く】→【Paint】を選択。

ペイントのウィンドウで画像が開けます。

そこから【変形】→【キャンバスの色とサイズ】を選択。

【幅】を180、【高さ】を155に設定して【OK】をクリック。

画像が縮小されました。

これを【ファイル】→【上書き保存】で縮小された画像が保存されました。

保存した画像を再度アップロードして使用して下さい。
URLが変わりますので、CSSへの書き換えもお忘れなく。

こんにちは。

Q1の方は、現状のCSSの規格では無理なのでJavaScriptを使います。
方法は色々あると思いますが、とりあえず以下のソースをフリーエリアに貼り付けて改行設定を「変換しない」にして保存してください。プラグインの位置はとりあえずBの一番最後にします。

<script type="text/javascript"><!--
(function() {
  var obj = new Array();
  var el = document.getElementsByTagName("div");
  el[el.length - 4].style.display = "none";
  for (var i = 0; i < el.length; i++) {
    if (el[i].className == 'sidetitle') {
      if (el[i].innerHTML != '')
        obj[el[i].innerHTML] = el[i + 2];
    }
  }

  obj["★最新記事★"].style.background = "url(画像のＵＲＬ) repeat-y scroll 0%";
  obj["★Archives★"].style.background = "url(画像のＵＲＬ) repeat-y scroll 0%";
  obj["★Categories★"].style.background = "url(画像のＵＲＬ) repeat-y scroll 0%";

})();
--></script>

下の方にある

obj["プラグインタイトル"].style.background = "背景のスタイルシート";

で、お好みでプラグインの背景画像を増やすこともできます。


Q2の方はなのじさんの回答以外では、CSSでカレンダー部分の行の高さを指定すると良いかもしれないですね。
「table.caltbl」と言う項目を探して

	line-height: 17px;

という行を追加します。

よろしくお願いいたします。