Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第40回】ここまでのまとめ(第31回〜第39回)こんにちは、ほくほくです。今回は、第31回から第39回までの記事に掲載した内容を、まとめてご紹介します。それ以前の記事についてはこちらをご覧下さい。◆【第10回】ここまでのまとめ(第1回〜第9回)◆【第20回】ここまでのまとめ(第11回〜第19回)◆【第30回】ここまでのまとめ(第21回〜第29回)【第31回】引用(blockquote)の書式を変更するブログの記事で引用を行う際のblockquoteの書式を変更する方法をご紹介しました。通常のblockquote(下記参照)の書式を変更し、背景色と文字色を変更してみました。blockquoteはSeesaaブログでは非常に使い勝手が良いので、そのデザインが気になる場合は自分で修正してみましょう。通常のblockquote【第32回】新しい引用(blockquote)書式を追加する複数種類のblockquoteを使い分けしたい場合のために、新しいblockquoteの書式クラスを追加する方法をご紹介しました。通常の書式に加え、以下の3つの書式を新たに追加しています。追加した引用書式1追加した引用書式2追加した引用書式3blockquoteを目的別に使い分けたい場合には、このように複数の書式を用意すると便利です。【第33回】twitterに記事を自動投稿するSeesaaブログの便利な機能の一つとして、twitterに記事を自動投稿する機能があります。この回では、ブログに記事を投稿した時、twitterにも記事投稿のつぶやきを自動で投稿する設定方法をご紹介しました。twitterとブログを連携する非常に有用な機能なので、是非活用しましょう。【第34回】twitterのつぶやきを表示するブログパーツを設置するブログに、twitterのつぶやきを表示するウィジェットの設定方法をご紹介しました。twitterウィジェットの各種設定項目の解説もしています。ブログの読者にtwitter上のつぶやきを見せることができるようになります。【第35回】twitterにbit.lyの短縮URLを投稿するtwitterにブログ記事を投稿する際、そのURLを短縮する方法をご紹介しました。SeesaaブログはURL短縮サービスを活用できるので、その中の一つbit.lyへのアカウント登録方法と、SeesaaブログでのURL短縮投稿設定の方法をご紹介しています。ブログとtwitterを連携するのであれば、その見せ方にも注意して、こうしたURL短縮サービスを活用しましょう。第37回、第38回で行うコメント欄のデザイン変更のため、この回ではまず、コメント欄のCSSの構成を解説しました。コメント欄は、複数のコメントがあった場合に繰り返し表示する設定となっているので、そのCSSの構成は少し入り組んだ形となっています。CSSの編集に入る前に、軽く構成はおさえるようにしましょう。【第37回】コメント欄に枠線を設定するコメント欄に枠線を表示するためのCSS変更方法をご紹介しました。第36回でご紹介した通り、コメント欄は複数のボックスが入り組んだ構成となっているため、どのボックスに枠線を付けるかは好みによると思います。この例では、.comments-bodyクラスに枠線を設定してみましたが、ご覧の通り枠線がガタつくので、#commentsに枠線を設定した方が良いかもしれません。【第38回】コメント欄に背景画像を設定するコメント欄に背景画像を設定する方法をご紹介しました。この記事では、小さな画像ファイルを繰り返し表示でコメント欄全体の背景に設定する方法をご紹介しています。第37回のところで触れたように、この回では#commentsセレクタのプロパティを変更してみました。【第39回】タイトル画像を変更するブログの顔であるタイトル画像の変更方法をご紹介しました。タイトル画像は、自分で撮った写真でも、ネットで取得した画像でも、自分のブログにアップロードしてしまえば何でも設定できます。自分のブログを特徴づける意味でも、気に入った画像を設定してあげましょう。Seesaaブログの主な箇所を変更する方法は、大体解説し終えたかと思っています。あとは、背景画像と文字サイズぐらいでしょうか。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。