Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第24回】サイドタイトルの画像サイズを変更する第22回からの、ブログの幅を変更するシリーズ。前回は、左サイドバーの幅を200pxから250pxへと広げてみました。その結果、メインコンテンツが入りきらなくなり、サイドバーの下に表示されるようになってしまっています。これを修正する必要があるわけなのですが、それは次回に置いておいて、今回は先に左サイドバーを完成させてしまいたいと思います。左サイドバーを見てみると、少しおかしな箇所があります。ご覧のように、サイドバーの幅を広げたので、その幅に対してタイトル画像の線が短くなってしまっています。今回は、この画像を修正してみたいと思います。★サイドタイトルの画像を変更する方法★サイドタイトルの画像を取得し、PictBearなどでサイズを調整してブログにアップロードした上で、CSSにてその画像を参照するように修正する。<手順1>サイドタイトルの画像の所在(URL)を、CSSを見て確認する。今回はサイドタイトルの背景画像なので、.sidetitleクラスのbackgroundプロパティにURLが記載されています。#FF9900;}(注)灰色字箇所は、過去の作業で修正した箇所です。<手順2>背景画像のURLをIEなどのブラウザに入力し、画像が表示されたらその画像を右クリックしてPCに保存する。<手順3>保存した画像のサイズを、PictBearなどで修正する。ここでは、取得した画像の横幅が、以前のサイドバーの幅200pxに対して195pxだったので、新しいサイドバーの幅250pxよりも5px狭い245pxに修正しています。(注)PictBearの入手方法や画像サイズの修正方法は第17回を参照してください。<手順4>修正した画像を、Seesaaブログの記事を書くページでアップロードし、一度貼りつけてみて、そのURLを取得する。src="の後ろの文字列になります。<手順5>.sidetitleクラスのbackgroundプロパティを、取得した新しいURLに変更する。#FF9900;}(注)灰色字箇所は、過去の作業で修正した箇所です。以上の作業で、サイドコンテンツのタイトルの背景画像は、修正したものに置き換わります。今回の修正では、猫の足跡の画像が少し横長になってしまいましたが・・・ここでは良しとしましょう。これが気になる方は、画像加工ソフトを使って、画像を横に継ぎ足すなどの修正を行ってみてください。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。