ルレアのseesaaブログテンプレート「リプラ」の表示崩れを直す方法

こんにちは、宮瀬です。

最近、無料ブログでのサテライトサイトを作成しています。

 

僕は無料ブログに関しては、使いやすさなどから「seesaa」ブログをよく使っています。

ブログテンプレートは、ルレアについてくる「リプラLuster」。

 

ところが、2017年4月17日にseesaaブログが仕様変更したことにより、いままでのテンプレートが使えなくなってしまいました。

ルレア側から新しいテンプレートが配布されましたが、表示が崩れて何とも見づらい感じに。。。

 

ルレアのリプラが表示崩れを起こしている画像

 

↑あなたのブログも、こんな感じになっていませんか?

 

で、このままではちょっと見づらいので、少しカスタマイズして見やすくしてみました。↓↓↓

 

ルレアのリプラの表示崩れを直した画像

 

提供されているキレイなテンプレートがあるのだから、使いたいですよね?

ということで今回は、ルレアのseesaaブログテンプレート「リプラ」の表示崩れを直す方法をご紹介していきます。

ルレアのseesaaブログテンプレート「リプラ」の表示崩れを直すためのCSS

seesaaブログのテンプレート「リプラ」がこのような表示崩れを起こしているのは、最新記事一覧や記事本文が表示される場所の右側に空白がないことが原因です。

 

そのため、最新記事一覧や記事本文が表示される場所の右側に空白を作ってあげれば、とりあえず右側にあるサイドバーとの空白が確保できます。

ただ、それだけだと左側に変な余白が空いたままになってしまうので、左側は先ほどとは逆に空白を埋める必要があります。

下の図のような感じで。

 

リプラの空白の解説。

 

理屈はこのへんにしておきましょう。

seesaaブログのテンプレート「リプラ」の表示崩れを直すCSSをご紹介します。

 

See the Pen ripra_custum by hayabusa design (@hayabusadesign) on CodePen.

この、たった3行でリプラの表示崩れが直ります。

 

このコードを解説すると、

「上下の空白はそのままで、右に40pxの空白をあけて、左の空白を40px削る。」

ということになります。

ルレアのseesaaブログテンプレート「リプラ」を更に効果的に使うためのCSS

さて、これで表示崩れは直りました。

ただ、ちょっとリンクの色が気になります。

 

検索エンジンのひとつ「Bing」では、リンク色を変更したところ年間の売上が8,000万ドルも増加したという話があります。

それだけ「リンクの色」というのは重要なのですが、なぜかリプラではそこが考慮されていません。

そこで、リプラを更に効果的に使うために、リンクの色を変更してみましょう。

 

See the Pen ripra_custum2 by hayabusa design (@hayabusadesign) on CodePen.


このコードを解説すると、

「リンクの色を11cという色にして、下線(underline)をひく。」

ということになります。

 

なぜこの11cという色を採用したのかと言うと、検索エンジン最大手のグーグルが、リンクにこの色(11c)を採用しているからです。

長いものには、巻かれていきましょう(笑)

seesaaブログのデザイン設定から、リプラの表示崩れなどを直す!

それでは最後に、seesaaブログの方に、これまでのカスタマイズを反映させていきます。

これまでのカスタマイズを、下にまとめました。

 

See the Pen ripra_custum_end by hayabusa design (@hayabusadesign) on CodePen.


このコードはコピペしていただいて構いません。

 

seesaaブログの「デザイン設定」からスタイルシートの編集画面を開き、先ほどご紹介したコードを一番下に貼り付けます。

 

ルレアのリプラの表示崩れを直した画像

 

貼り付けたら、プレビューで表示崩れが直っているかと、リンク色が青(11c)になっているかを確認してみましょう。

問題なければ、設定を保存して完了です。

お疲れさまでした。

おわりに

今回はルレアのseesaaブログ用テンプレート「リプラ」の表示崩れを直してみました。

いかがでしたでしょうか?

 

ルレアという教材の中では、無料ブログは主にショートレンジで登場します。

ショートレンジは、初心者がまずはじめに取り組む課題。

こうした余計な手間はかけないように、しっかり精査してからリリースして欲しいなと、個人的に思います。

 

でもまぁとりあえず、これで一安心していただけたら幸いです。

それでは、今回はこのへんで。