キンドル本をKindle Unlimited で読んでいただけます

Amazonで販売している電子書籍「三十一郎(みそいちろう)」を、KDPセレクトに登録しました。
Kindle Unlimited にて、無料でお読みいただけます!

商品ページはこちら

スタイルシートからお色気(?)を追放してみる

これは全く予定外でしたが、スタイルシートを全面的にカスタマイズしました。しかも5日間ろくろく眠らずに!というより考えすぎて神経がたかぶり熟睡できなかったのです。疲れた、本当に疲れた。でもほぼ理想通りになったので大満足です。笑。

スポンサーリンク

カスタマイズ完了までの面倒くさい道のりをレポート

この記事は「スタイルシートは少しならわかるのに、seesaaブログのスタイルシートは難しくてどこを変えればいいのかさっぱりわかんない。」というひとが「なーんだ、ただゴッチャゴチャだっただけじゃん!フツーにスタイルシートできたよー。」と思えるようになるまでの経過を綴っています。
同じようにやってみるのはご自由ですがどうか自己責任で。アフターフォローとかいっさいできません。

それはただただ面倒くさい道のりでした。ブログのスタイルシートを難しいと感じる理由は私の場合、「これはいったいどこに対する指定なの?」ということ。クラスやIDが山のようにたくさんあり、それがブログのどこを指しているのかがさっぱりわからない。でもこれ、ちょっとしたことで解決が可能でした。スタイルシートの、どこを指しているのか調べたい個所に「border:1px solid red;」を追加すると、その該当部分が赤線で囲まれて表示されるのです。考えてみれば簡単な事なのに全く思いつかなかった。(参考:『Seesaaブログの基本構造を知っていればカスタマイズが簡単に….: 初心者ブログアクセス対策』)
このとき気をつけるのは、各部分の一番最後に追加するということ。理由は、すでにその部分にborderが指定されている場合にこれを追加すると、borderの指定が二つあるということになり、その場合は後からの記述が有効になるらしいからです。

.comments-body .text{
margin:0px;
padding:8px 12px;
border:1px solid #f8f8f8;
background-color:#f8f8f8;
}

これがどこなのかを調べようとしたときに、

.comments-body .text{
border:1px solid red;
margin:0px;
padding:8px 12px;
border:1px solid #f8f8f8;
background-color:#f8f8f8;
}
これだと赤枠は表示されませんでした。
.comments-body .text{
margin:0px;
padding:8px 12px;
border:1px solid #f8f8f8;
background-color:#f8f8f8;
border:1px solid red;
}
これで赤枠が表示されました。

ということでさっそく調べるための下準備。カスタマイズに使うために、それ用のスタイルシートを新たに選んでマイページに追加。シンプルで、あまり古くないものがいいと思い「超シンプル(右サイドバー)」を選びました。
そのスタイルシートを開いて中身をコピー、テキストエディタに移し、デフォルトとして保存。そしてコピーも一部作ります。デフォルトは保存しておいた方が後々便利なので、いじらずにそのままにしておきます。実際に書き換えるときにはコピーのほうを使います。(後々便利の理由は別記事の最後の部分に書きました)

そして保存したファイルを開いてにらめっこしながら、スタイルシートの中身を全部メモります。(我が家には今プリンタがないのです!)メモはこんな感じで・・・

body(テキスト中央寄せ、マージン0、パディング0、カラー)
a.link(カラー)
a.visited(カラー)
a.hover(下線なし)
h2,h3(パディング0、マージン0)
#コンテナ(w960、テキスト左寄せ、マージン0、auto)
#バナー(パディング0、マージン-bottom:20px)


日本語混ぜこぜですが、自分がわかりゃあいいんです。カラーはいちいちメモらなくてもいいと思って省略。ダイエットログとツイッターのとこは今のところ使わないので手をつけていません。
そして実際に管理画面からスタイルシートを開いて「border:1px solid red;」を使って、どの部分がどこなのかを調べてメモに書き込みます。私は『ブログカスタマイズの覚書: 練習用テンプレート』を参考に、ここでわからないところを赤線で調べました。
調査メモができたところで、難解の原因はひとまず解消。手書きのおかげでえらい時間がかかりました・・・

ここで休憩。冷たいジュースを用意して、いったんPCを閉じて、大事なことを考えます。「ブログのデザインをどんなふうにしたいのか?」
私の理想は、

  1. 写真がきれいに見えること。背景を白に。(写真の少ないブログだけれど、だからこそきれいに見せたい)
  2. フォントカラーをシンプルにしたい。seesaaのスタイルシートはタイトルにシンプルってついてても色多すぎだよ!
  3. 画像を極力使わない。アイコン画像などを使うと色数が増える。サイドバーコンテンツのタイトル部分に背景画像を使ってある場合には、そのコンテンツを中央の広いスペースに表示すると非常に中途半端で見栄えが悪い。

つまり、ほぼ色気をなくしてしまいたいわけです。でもヘッダーに写真を使いたいことだけは決めていました。(詳細は別記事で。)
全体の幅や各部分の色をだいたい決めたら、いよいよスタイルシートの書き換え。コピーしたほうの書類を開きます。この長~い書類をやっつけてやる(笑)。

そう、この「長~い」も面倒のひとつ。フォントカラーの指定だけでも書類中に20箇所以上あるんです(!)。いちいちスクロールして該当箇所を探し出して書き換える・・とやっていたら、かなりの精神的苦痛が予想されます。

ところが。seesaaの最近のスタイルシートには、冒頭部分にフォントファミリーとフォントサイズをまとめて指定できるように集めてあります(でも、抜けもありました)。これいいなと思ったので、じゃあフォントカラーとかもまとめて楽をしようということで、下から上へひたすらカット&ペースト作業をしました。こんな感じ。(実際はフォントファミリーとリンク以外は20箇所以上あります)

/* font-family */
body {font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;}
#banner {font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;}
/* font-size,font-weight,line-height */
body {font-size:13px;line-height:1.5em;}
#banner h1 a {font-size:24px;}
#banner .description {font-size:14px;font-weight:bold;}
.
.
/* color */
body {color:#000;}
a:link {}
a:visited {}
.
.
/* text-align */
body {text-align:center;}
#container {text-align:left;}
.navi {text-align:center;}
.
.
/* link */
a {color:#0093e2;text-decoration:none;}
a:hover {background-color:#dddddd;text-decoration:underline;}
#banner h1 a{}
.
.
/* */
body {margin:0;padding:0;}
.
.

/* */から下はもとのソース。各部分から上に移した残りなので、マージン・パディング・ボーダー・背景・他の指定だけが残っています。背景までは自分で変更できるけど、いまいちよくわからない&見たことないタグはスルー。(いちおう検索して何者か調べましたが触る必要がなかったのでもう忘れた)

まず全体の幅とヘッダー部分の高さを調整(写真を使うため、その大きさに合わせて)。
そしてほぼスクロールすることなく(ものすごく楽!)文字の色やサイズを調整し、管理画面にコピペ&プレビューで表示させて確認(保存しないと見れないページは保存して確認)、マージンやパディングも少し調整し、ボーダーと背景も調整終了。「長~い」も見事克服です!

そして、記事を書くときに使うためのスタイルを追加、色調整。この記事でいえばマーク心の声や囲み枠線や、記事内で使う小見出しなんかです。小見出し以外は作品倉庫で使っているのを一部持ってきて色や余白をまわりに合わせて調整しました。
そして管理画面で保存して、表示されたブログをあちこちチェックして、やりきれるところは全部直して、わかんないところは、、まあいいやってことで。(細かいことは気にしない方向で。)これで面倒な作業は終わり!やったー!

できないと思ってあきらめていたスタイルシートのカスタマイズが、こんなにも思い通りにできました!

なぜ予定外なのにスタイルシートカスタマイズをしたかの理由

それは些細な勘違いが原因で、、、
ブログ整理のために過去の記事を読み返しているときに、妙な事に気が付きました。「ここたしか小さい文字にしたはずなのに、大きい文字になってるよ??」

ソースを見てみると、小さい文字に指定する個所のタグが「span style=”font-size:small;”」になっています。記事投稿画面のサイズボタンを押したのか自分で入力したのか失念しましたが(現在この記事を書く画面でボタンを使うとx-smallが指定されます)、smallやx-smallだと決まった大きさを指定することになるので、まわりの文字がそれより小さい場合にはsmallのほうが大きく表示されてしまいます。
小さくするつもりで入れるなら、smallじゃなくsmaller(周囲よりひとまわり小さくする指定)を入れればいい。自分でタグを入れながら記事を書けばいい。ということで小さい文字の問題は解決。

そしてもうひとつやりたいことがありました。記事内で小見出しを使いたい・・h1からh3はもうブログ内で役割が決まっているから、h4タグにスタイルをつけて使えばいいか。じゃあついでにってことでマーク心の声強調や作品を囲む枠をスタイルシートに追加して保存、ブログの表示を確認。Firefoxではちゃんと反映されている。よしよし、これで少しはわかりやすい記事がかけるようになるだろう。

しかしIEで見てみると、まさか?全く反映されてない。何度かリロードしてもだめ。なぜ?もしかしてスタイルシートの他の部分がこの追加部分に影響を及ぼしていて反映されないの?と考えて、無謀にも追加部分以外のところを全部削除して、あらためて表示してみる。するとなんと!追加部分が表示された!
ということは、長~いスタイルシートのどの部分が追加部分に悪影響を及ぼしているのか調べ上げなければならないんじゃないだろうか。でも調べようとしたところでわかるのだろうか。きっとわからないだろう。

それならいっそスタイルシートを極限まで削ってやろうじゃないの!!(なぜ、そうなる?笑)

これが「予定外なのになんで?」の理由。ネット徘徊疲れと寝不足の5日間が始まりした。何を調べればいいのかがいまいちわかんなくて、スタイルシートとは関係ないHTMLの「seesaa独自のタグ」なんかも全部メモったりしていたものだから、5日間のうちの半分くらいは無駄な時間だったような。(+_+)

しかものちに、これはたんなる勘違いらしい事が判明。3日後くらいに再度試してみたらちゃんと反映されました。たぶんキャッシュが強力に残っていた結果かと。
でももう途中でやめるのが悔しくて、勢いだけを頼りに最後までなんとか漕ぎ着けました。ああ本当にお疲れさん。(4日めのメモに「もう10日くらいやってる気がする」と走り書きがあった・・・)

本日の夕日。まぶしかった。

2018.6.5追記 現在はSeesaaブログからWordPressに引っ越したので、WordPressのテーマ「cocoon」の機能(記事内で2カラム)を使って横並び表示しています。

コメント

  1. ハニエル より:

    はじめまして。
    理想通りにカスタマイズできて良かったですね^^
    本当に、すっきりと、美しいブログです。
    色味を減らす、余白をいかすって、こんなに素敵な雰囲気に
    なるのですね。
    私はアメブロからSeesaaに引っ越してきて、内部リンク修正に苦しんでいまして、未だ、CSSまで手が回らないのですが、どうしても我慢できなかった「関連記事の20から40文字に増やす方法」など、さっそく参考にさせて頂きました。
    また寄せて頂きますね^^
    参考記事、本当にありがとうございました。
    ハニエル

  2. 久子 より:

    ハニエルさん、はじめまして。
    コメントどうもありがとうございます。
    記事がおやくにたてたようで本当に嬉しいです。
    私はずっとSeesaaで引っ越しは未経験ですが、修正は大変なのでしょうね。
    お疲れ様です。
    CSSも何かご参考になることがあれば幸いです。
    追伸・美しいなどといっていただけるなんて感激でございます!(笑