photo credit: tanakawho via photopin cc
CSSカスタマイズど素人の凛(@rin_wan)です。
簡単な所からやってみよーということで格闘してみましたよ！コピペで可愛い点線が挿入出来ちゃうのでぜひ挑戦してみてくださーい♪
出来上がり見本
まずは見本から！
りんろぐ。のTOPページを開くと、まずは最新の記事一覧が表示されます。この記事一覧は「続きを読む」というボタンが切れ目になって連続して表示されてますよー！
でもここに境目を作りたい。出来れば可愛い点線を挿入してやりたい(っ*´∀｀*)っという事で成功したらこんな感じになりますよー！！
■PC版
■スマホ版
え、また点線？と思った方はコアなりんろぐ。ファンの方ですね。にやり。いつもご購読ありがとうございます！実は似たような方法で見出しもカスタマイズ出来ちゃうので参考にしてみて下さい♪
カスタマイズ前準備
CSSを触る時、場所を間違えたり余計なデータが紛れ込むとブラウザは正直に正しくないレイアウトを表示しちゃいます。
要は残念なぐらいレイアウトが崩れるという事ですｗ失敗した後の切なさたるや…(´･ω･｀)
そんな時は元に戻すボタン！ならぬ触る前のファイル！があれば一安心です。
テーマによって異なりますが、Stingerの場合は「style.css」と「smart.css」が触るCSSファイルです。
ファイルのバックアップ！
CSSファイルをPCのデスクトップにでも保存してから作業を進めて下さいねー！！この時、ファイルタイトルの前に「バックアップ」等つけると後で泣かなくてすみますｗ
バックアップはあくまで何かあった時用の保存用。バックアップをいじって上書きしちゃダメですよｗ
最初は自分がどちらを触っているのか分からなくなりがちなので、必ずファイル名を確認してくださーい！
テキストエディタ
WordPressを使っている方は管理画面の外観＞テーマ編集＞からCSSファイルが変更できますが、初心者さんはテキストエディタを使う事をオススメします！
全角スペース1つ入っても言うこと聞かなくなっちゃう繊細な子なんですよ。
管理画面からだと半角スペース入れたつもりが全角になっちゃったり、思わぬ所でページを更新しちゃったりとリスキーなのでコーディング用のテキストエディタ使ってくださいねー！
カスタマイズに挑戦
ではではいよいよカスタマイズに挑戦してみましょーｖ(*´∀｀*)ｖ
PC版
PC版のCSSは「style.css」を使いますよ！
テキストエディタで「style.css」を開いて「.entry」という単語を検索してみて下さい。
「.entry-content」とかentryの後ろに色々続く部分もありますが、どこかに「.entry」だけの欄があるはず！
私のバージョンではこんなコードが書いてあります。
margin-bottom: 20px;
padding-top: 10px;
}
点線を入れる時はここに1行追加しますよー！
padding-top〜の1行下でOKです。
追加するとこんな感じ。
margin-bottom: 20px;
padding-top: 10px;
border-bottom: 1px dashed #FFA500;
}
うまくいきましたかー？うまくいったらFTPソフトでサーバーの「style.css」を上書きしちゃって下さい。
その後PC版のサイトを開いてページを更新してみましょー！！
キャッシュ関連のプラグインを使っている方はキャッシュが残ってすぐには反映されないケースがあるようです。ブラウザのキャッシュクリアなどやってみて下さいね。
iPhone版
では次はiPhone版です。正確にはスマホ版なんですが、自宅でAndroidが動いていないのでiPhone版と記載していますｗ
スマホ版のCSSファイルは「smart.css」です。
実はこちらもPC版と全く一緒ですｗ
この一行を追加してあげれば成功です！
終わったら上書き保存して、FTPソフトでサーバーの「smart.css」を上書きしてあげましょー♪
自分なりのカスタマイズ
いやいや、りんろぐ。とお揃いなんてやってられるか！！！という方、コードの一部を変更すれば自分なりの線が作れますよー！
今回挿入したコードに注目して下さいねー！
線の太さ
「1px」の数字を増やすと線の太さが変化します。
今は1pxと細い先にしてますが、これを3pxや5pxに変更するとまたイメージが変わります！
線のパターン
「dashed」の部分は点線で表示してー！という意味です。
これを「solid」に変更すると点線ではなく、実線（繋がってる1本の線）になりますよ♪
色
「#FFA500」はりんろぐ。で使っているオレンジ系の色です。私のお気に入りの色です！
この英数字を変更すると他の色の線が作れます。
この辺の色の話はりくまさん（@Rikuma_）のこちらの記事が凄く参考になりますよー！
まとめ
・記事の境目に点線入れると可愛い！
・「style.css」と「smart.css」を変更すればOK！！
・意外と簡単〜！！！
初心者はCSSのカスタマイズって聞くと怯えたくなりますよねｗ
でもこんな風に簡単にカスタマイズ出来る部分もあるので、まずはこういう所から挑戦していきましょー！！
もっとこんな事出来るんだぜー！！というベテランの方、ぜひぜひ凛(@rin_wan)にいい方法教えてくださーいヾ(*´∀｀*)ﾉ
次の記事もお楽しみに〜(*｀･ω･)ゞ
