読者です 読者をやめる 読者になる 読者になる

働く母ちゃん

ワーママとして3歳の息子の子育てや仕事、趣味のことなど雑多に書いてます。最近は息子の影響で鉄子になりつつあります。海外ドラマではGOTにはまってます。

【ブログ】ヨメレバ・カエレバのcssカスタマイズ方法

はてな ブログ

今回はヨメレバ・カエレバの導入とcssカスタマイズについて私が設定した手順について書きます。導入テーマによっては単純にcssを貼り付けただけではうまくいかないこともあるのであしからず…*1

目次

ヨメレバ・カエレバとは?

有名なわかったブログのかん吉さんが作られたブログ用のパーツです。はてなブログの標準機能の商品紹介でもいいのですが、もっとおしゃれにしたいなーと思っていたら参考リンクに出会いましたのでそれに従ってカスタマイズしました。

ヨメレバ・カエレバの使い方等は直接サイトをご覧ください。手順も丁寧に説明されているので私でもすぐ設定できました。
商品紹介ブログパーツ カエレバ
書籍紹介ブログパーツ ヨメレバ

はてなブログのテーマ

私が使っているテーマは「Rouge」で以下のリンクからインストールできます。
Rouge - テーマ ストア - はてなブログ

私は何度もテーマを変えているのですが、いろいろ試した結果カエレバのカスタマイズがうまくできたのと、レスポンシブデザインかつおしゃれだったので今のテーマにしています。

テーマのインストール方法ははてなブログの設定→デザインに行って画像のようにテーマストアでテーマを探すをクリック。Rougeをインストールしたい場合、上記リンク先から直接できます。(右側にあるプレビューしてインストールをクリック。)PC版サイトじゃないとiPhoneiPod touchはできないようなので、PC版サイトをリクエストするか、PCを使ってカスタマイズするのが無難です。

cssの設定方法(参考ブログ)

ここからはスマホではなくPCのご利用をおすすめします。理由はスマホではcssの設定にキーボードが出てきてうまくできずいらいらするから!cssは上記デザイン設定のところから画像のようにカスタマイズをクリックして1番下のデザインcssをクリック。

テーマをインストールした際に恐らくテーマで使われているcssがすでに記述されていると思いますので、それは消さないようにご注意ください。

cssは私と同じRougeを使っている方は以下のブログのcssをコピーするとうまくいきます。こちらのブログはWordPressを使っているので最初から読むと?となりますが、ヨメレバ・カエレバと書いてあるcss(追記してあるところあたりから)をコピーして貼り付けて、その後デザインの1番上にある「変更を保存する」ボタンを押してください。

Rougeではなく、レスポンシブデザインではない方は以下のブログにあるcssを貼り付けるとうまくいくかもしれません。

ヨメレバ・カエレバの使い方

ヨメレバ・カエレバはデフォルトの設定ではなく、画像のように(amazlet風-2(cssカスタマイズ用))にしてからコピーしてください。

貼り付けるとこんな感じ。

かわいいですよね?

効果は?

正確に分析してないので、実際のところ不明です。余裕ができたら分析してみます。ただ個人的にかわいくなって満足してます。

スポンサーリンク

こちらの記事もおすすめ
【アプリ】はてなブログの記法での気づき - 働く母ちゃん

はてなブログアプリの使い方(Markdown記法:まとめ1) - 働く母ちゃん

【iPod touch】おすすめ動画配信サービス - 働く母ちゃん

*1:ちなみに私はシステムエンジニアなるものを仕事にしておりますが、最近はマネジメント側なのと、Web系ではないのでcssは研修でちょこっと触れた程度の知識しかないのでcssのカスタマイズについては調べずにそのまま適用した形です。