Enjoy!America

アメリカ留学帯同駐在妻生活と旅行とカメラのこと。

MENU view raw

【スポンサーリンク】

はてなブログ初心者がDUDEカスタマイズに挑戦してみた

f:id:qoochan-1988:20180201015410j:plain

 

前回記事でスマホカスタムをし、スマホ画面については少し見やすくなったのかなと思う。

www.natsutravel.com

 

まだまだですが、、、今日はもともと多少カスタマイズしているPCサイトの方を頑張ってさらにかっこよくしていきたいと思います!!しかし初心者なので先人の知恵を存分にお借りします。

 

 

 

外部リンクを別窓で開かせる

 <ダッシュボード→設定→詳細設定→headに要素を追加>

下のコードを書くことで、amazonへのリンクなど、ブログの外部へのリンクを別窓で開くように設定します。

---

<script type="text/javascript">
$(function(){
$("a[href^=http]").not('[href*="'+location.hostname+'"]').attr({target:"_blank"});
});
</script>

 

Amazonに直接リンクさせる。

 <ダッシュボード→設定→詳細設定→headに要素を追加> 

 はてなブログの「Amazon商品紹介」機能をそのまま使うと、一度はてなブックマークのページを経由してしまいます。それを回避するため、リンク先を動的に書き換える次のコードを記入します。

---

<script type="text/javascript">
$(document).ready(function() {
$("a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/d.hatena.ne.jp\/asin/g,'www.amazon.co.jp\/exec\/obidos\/ASIN');
$(this).attr('href',replace);
});
});
</script>

 

www.soumushou.com

 

ヘッダーのカスタマイズ

カスタマイズしてて気づいたのだけど、ヘッダーのカスタマイズCSSって、書いた順にシステムが反映されるんだね、、、!!そんなこともわからずやってました。あぁ怖い。

なので、ヘッド部分のHTMLをヘッダーの一番上に書かないと変なことになります。グローバルメニューとかはその下に。順番にカスタムしていかないといけないんですね。このDUDEを作ってる方のカスタムを丸々やりました!!

tsukuruiroiro.hatenablog.com

 

画像は元の画像がカリフォルニアっぽいのでそのままにしましたwwはてなブログユーザーじゃなければ、そのままなのも気づかれないかなぁって(笑)

 

SNSデザインをおしゃれにしたい!

 おしゃれなブログってSNSデザインもおしゃれ!真似したい!!

これを参考にしました。この記事ものすごく親切。ついでにスマホ版も変更しました。

 

www.ituore.com

  

文章を読みやすくするためのカスタマイズ

人気ブログってやっぱり見やすいのですよね。真似します!!こちらの文字の大きさと行間について真似しました。

 

www.ituore.com

この人のブログマジですごい。仕組みはわからないのだけど、行間のCSSはグローバルメニュー前に、文字の設定CSSはグローバルメニュー後に記載しないと反映されなかった。困ってる人は書く位置変えて見てください。

見出しを変えてみた

見出しいじってたけど、初期設定がいいことにきづいて以下のブログを参考にh5だけいじってみた。h3とh4は消した。

lahtnas.hateblo.jp

 

文字色変えてみた

灰色見にくいかなって思って黒に変えました。デザインCSSに追加

blogkasutamaizu.hatenablog.com

 

囲み枠を設置してみた。

ポイントをまとめる時に使いたいなぁと思いまして。

このサイトにお世話になりました。

saruwakakun.com

 

HTMLは忘れないように貼り付けておきます。

<div class="box6"> <p>ここに文章</p> </div>

 

 

 

おしゃれなボックスデザインを追加してみた

 

POINT

こんなやつ!

 

以下のサイトをまるまるコピーさせていただきました。ありがたや

 

saruwakakun.com

 

HTMLは忘れないように貼り付けておきます。

 

<div class="box27"> <span class="box-title">ここにタイトル</span> <p>ここに文章</p> </div> 

 

 

メニューについては大分前に設置し、しかもすごく苦戦した上に、いまもどうやって成功させたのかわからないという摩訶不思議さ。。。

とりあえず今のところはこのカスタマイズでやってみようと思います!