浮きぐさ暮らし

猫飼い転妻の備忘録と雑記

コピペでOK!なブログカスタマイズまとめメモ

ブログのカスタマイズまとめ

こんにちは。藤間です!

 

ブログテーマを先日「マテリアルぽっぷ」に変更しました。

 

ありがたい事にある程度完成されたブログテーマなので、あまり手を加えなくてもテーマの入れ替えだけで見た目はほぼ整った感じ。

 

しかし、更にちょっとでも使い勝手を良くするため、いくつかカスタマイズをしたので、自分用にまとめてみました。

 

ちなみに、HTMLもCSSもド素人なので『さくっとコピペでできるもの』を基準に使わせていただいております。

当ブログで使用中のカスタマイズ

難しいことはよくわからないので、『コピペOK』なカスタマイズばかりです。

 

現在のブログテーマである「マテリアルぽっぷ」独自のカスタマイズは“はてなのブログテーマを「マテリアルぽっぷ」に変更しました!”からご覧下さい。

ukigusagurasi.hatenablog.com

太字を蛍光マーカー風、斜体を太字に変更

参照ブログ:思考は現実化する

www.thoughts-make-things.com

www.thoughts-make-things.com

蛍光ペン風はこういう感じで文字の上に色を乗せられるやつですね。

でも、そこまで強調したくないけど太字で使いたい場合にはどうするのか・・・を解決させてくれたのが、『斜体を太字に変換する』方法でした。

 

色分けしてたくさん使うよりも、文章に程よくメリハリが大活躍!

囲み枠を設置

参照ブログ:サルワカ | サルでも分かる図解説明マガジン

saruwakakun.com

囲み枠とは

 

↑こういうやつです。

 

この他にも以前のテーマでは大変お世話になった『CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選』など、ブログカスタマイズの際には必見のブログです。

トップに戻るボタンを設置

参照ブログ:えむしとえむふじんがあらわれた

blog.mshimfujin.net

PCでもスマホでも、一定の長さになると右下に出てきます。

 

これはいい!と導入していますが、実際使っているとページTOPに戻るよりもHOMEに戻るほうが親切かな??

要検討ですね。

『カエレバ』のデザイン変更

参照ブログ:えむしてっく

mshitech.hatenablog.com

ヨメレバ・カエレバ・トマレバの3つのデザイン変更がまとめてできます。

紹介したもの以外にも色んなデザインがネット上にはあるので、ブログの雰囲気にあったものを探してみてもいいかも。

記事の上下にソーシャルボタンを設置

参照ブログ:ウェブ学のすすめ

webgaku.hateblo.jp

こちら、はてなのテーマ『Material』のカスタマイズとして紹介されているのですが、別テーマでも使用可能とのこと。

 

『マテリアルぽっぷ』でも導入可能でした!

 

実は以前に別の方法でソーシャルボタンを設置しようとしていたのですが、うまくいかなくて断念していたんですよね。

難しいように見えて、こちらもコピペでさくっとできちゃいましたよー。

CSSが干渉?Twitterアイコンに色が・・・

「やったー!できたぞー!」と喜んで動作チェックをしてると、一部の表示がおかしいことに気が付きました。

f:id:ukigusagurasi:20180818034614j:image

上のソーシャルボタンを設置したとたんこうなったので、どこか1部が干渉していることはわかるのですが解決方法がわからない・・・。

 

これだけにこだわって時間を割くのもナンだし、もうこれはデザインの1部ってことにしようか・・・と諦めかけていたところ、同じ症状が出て解決した方の記事を発見!

www.uenoyou.net

こちらによると解決法は

■HTML■
<a class="sns-twitter sns-link" href="https://twitter.com/intent/tweet ?

↑のsns-twitterというクラス名が被っているので、sns-twitter1にする。

■CSS■
.sns-twitter {
background: #55acee;
}

CSSも同様にsns-twitterをsns-twitter1にする。

というように、シェアボタン側のクラス名をsns-twitter1に変更することで違うものという認識をさせました。

との事です。

「なるほど。わからん。」という方は、マテリアルぽっぷ側のボタンの表示をさせないか、デザインの1部ってことにしちゃいましょうw

プロフィール(aboutページ)のカスタマイズ

参照ブログ:オークニズム

www.okuni.me

こちらのおかげで、このブログで一番気に入っているページがプロフィールページだったりします。

 大見出しタグをh3→h2へ自動変更

参照ブログ:広汎性発達障害の女がたまに毒を吐くブログ

dokuwohaku.hateblo.jp

参照ブログ:イケメン息子とぐうたら猫の成長見守りブログ

www.ikemenmusuko.net

見た目のカスタマイズとはちょっと違うのですが、はてな特有の見出し問題を解決する方法です。

手打ちで直している方もいるようなので、気になる方はぜひ参考にしてみて下さい。

おわりに

前テーマの「lnnocent」で使用していたカスタマイズ内容は、テーマ変更でごっそりと消えてしまいました。

 

いや、テーマ変更でCSSが消えてしまう事はわかっていたので、メモ帳にCSSをコピペして保存してはいたんですよ。

しかし、いざメモ帳を見直すと、ずらっと並んだCSSの羅列から必要情報を網羅できずどれが何だったかわからない・・・。

 

結局、ブックマークやキーワードから検索しなおしたり、新たにCSSを引用させてもらったりだったので、これはもう自分のためにまとめてしまえー!と記事にしちゃいました。

 

全ての参照ブログ様にこの場を借りて御礼申し上げます。