Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第63回】iPhone用タイトルの背景画像を変更するiPhone用のブログデザイン変更に入っていきます。今回はまず、タイトルの背景画像を変えてみましょう。今回の変更を行うと、iPhone用のブログデザインがご覧のように変わります。▼▼▼<縦表示><横表示>なおこのシリーズでは、変更前のテンプレートはblueをベースにしています。背景に使用する画像を用意してブログにアップロードし、#banner-name要素のbackground-imageプロパティに設定する。center;}これで、タイトルの背景画像は変更されます。ところで、今回用意した背景画像は、以下のようなものです。repeat-x;)しています。Purpleのヘッダー画像から作成したものです。参考までに、以下でその画像の作成方法をご紹介します。PurpleのCSSを見て、タイトルの背景画像のURLを取得する。タイトルの背景画像は、#bannar要素のbackground-imageプロパティに記載されています。<手順2>手順1で取得したURLをブラウザのアドレスバーにコピーし、取得したい画像を表示する。画像をブラウザに表示できたら、右クリックして名前を付けて画像を保存する。<手順3>取得した画像をExcel上に挿入し、画像の不要な箇所をトリミングする。トリミングについては、第19回の記事をご覧下さい。この作業の結果、この画像が出来上がります。左右に繰り返し表示してもおかしくならないように、上手く画像の一部を切り出して下さいね。トリミング後に画像サイズを、縦が80pxになるように修正しています。<手順4>加工後の画像をブログにアップロードし、そのURLをCSSに貼り付ける。私は画像加工があまり得意ではないのですが、それでもご覧のような手順で簡単にできます。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。