■使用デザイン Seesaaブログの「ライトグレー(両サイドバー)」 ■リンク色を変えてみた 使用しているテンプレートは、リンク色がグリーン系になっています。 記事見出しをブルー系にしたのでリンク色も変えてみました。 ■左：変更前　　　　　　　　→　■右：変更後 → ■以下のような内容に設定するために a:link { color: #00008b; } 訪問（クリック）していないリンク色（darkblue） a:visited { color: #6495ed; } 訪問（クリック）済みのリンク色（cornflowerblue） a:hover { color: #dc143c; } カーソルを合わせたときの色（crimson） a:active { color: #6495ed; } カーソルで選択したときの色（cornflowerblue） ■下の記述をスタイルシートの一番下に追加

■使用デザイン Seesaaブログの「ライトグレー(両サイドバー)」 ■個別記事タイトルを装飾する前に…チョット前処理！ 装飾する前に、テンプレートデザインの個別記事見出し（h3）に、少し気になる箇所があるので前処理を施しました。 左上に小さな丸印がついています。 これを取ります。 スタイルシートの47行目あたりに↓の記述があるので赤い部分を含んだ1行をまるごと削除。 background-image:url(http://blog.seesaa.jp/img/bg/lightgray_1/title.gif); ↓ ■いよいよ、個別記事タイトルを装飾！ Webparkの「CSSの擬似要素を使った見出しデザイン」を参考にして、個別記事タイトル（h3）を装飾してみました。 前回の記事「（6）個別記事タイトルの背景色を変える／サイドバーのタイトルを装飾する」では、個別記事タイトルのフォントサイ

■使用デザイン Seesaaブログのライトグレー(両サイドバー) ■個別記事タイトルの背景色を変える Seesaaブログのこのテンプレートは、h1（ブログタイトル)、h2（年月日)、h3（個別記事タイトル）になっているので、h3に対して背景色の指定しました。 スタイルシートの一番下に以下の記述を追加。 h3 { background-color:#afeeee; } ■サイドバータイトルを装飾する スタイルシートの一番下に以下の記述を追加。 .sidetitle { height: 20px; line-height:20px; color: #000000; background-color: #afeeee; border-radius: 3px; margin-bottom:10px; margin-top:10px; padding: 5px; text-align:center;

■使用デザイン Seesaaブログのライトグレー(両サイドバー) ■ブログタイトルに装飾を施す サルワカさんの 「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」を参考にして、ブログタイトルを装飾してみました。 スタイルシートの一番下に、以下の記述（10行）を追加しただけで、簡単に出来てしまいました！ 無料ブログの場合「h1」がブログの大見出しになっていることが多いようです。 h1{ position: relative; padding: 0.2em 0.5em; background: -moz-linear-gradient(to right, rgb(255, 124, 111), #ffc994); background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994); backgrou

■使用デザイン ライトグレー(両サイドバー) ■ブログタイトルの下にバナー広告を入れてみた。 すると、ビッグバナーの下半分が本文記事と重なり、記事タイトルが見えない状態に。 スタイルシートを探してみると、 70行目あたりに .blog { padding:0px 5px 50px 5px; text-align:left; font-family:Verdana; } という記述を発見！ 記事本文を下に下げるために 「margin-top:100px;」を追加 （記事本文の上に余白を100ピクセル空ける） ↓ .blog { padding:0px 5px 50px 5px; text-align:left; font-family:Verdana; margin-top:100px; } スポンサーリンク ■本文部分は成功したものの、両サイドバーはそのままなので サイドバーの上にも余白を

■使用デザイン ライトグレー(両サイドバー) ■サイドバーの見出しフォントサイズを「16ピクセル」にする。 サイドバーのタイトルに関する記述は180行あたりにあります。 フォントサイズの指定がなかったので「font-size:16px;」を追加しました。 .sidetitle { padding:4px 10px 4px 10px; font-weight:bold; background-color:#ECECEB; font-family:Verdana; font-size:16px; } スポンサーリンク ■サイドバーの記事フォントサイズを「14ピクセル」にし、（　）のなかの数字を一回り小さい「12ピクセル」にする。 .side { padding:5px 10px 10px 0px; margin-bottom:10px; font-size:10px; line-height:

初心者がSeesaaブログをカスタマイズしていくプロセスを公開（Seesaa以外のブログを使っている人に共通する部分もあるかも） ■デザインテンプレートはSeesaaブログの「ライトグレー 両サイドバー」を使用しています。 ■記事中に「～行あたり」と書いていますが、スタイルシートに行を足したり空けたり変更していますので、若干ずれると思います。 ■記述を少しでも間違うとブログデザインが崩れます。ぜひともバックアップを取ってからお試しください m(_ _)m ほかにブログを2つ書いています。 よろしければのぞいてみて下さい。 spica-エンタメ雑記帳- spicaのなんでも備忘録 【ブログ覚書】 2017/5/19現在 ■ブログタイトル(h1)のフォントサイズ：36px ■日付(h2) ■記事タイトル(h3)のフォンサイズ：21px ■記事本文のフォントサイズ：16px ■サイドバーのフォン