旨いメシと雑記Log

〜グルメメインの雑記ブログ〜

【はてなブログ】コピペだけできるデザインカスタマイズ①

どうもかずーきです!(@kazuuuuuuuukin)

『はてなブログ』を始めてもうすぐ1年が経とうとしていますが、ブログデザインのカスタマイズって難しいですよね。

1年ゆるゆると更新しましたが未だにわからないことだらけです。笑

コピペokの記事を探して、少しずつカスタマイズしてきました。

先日もブログデザインのテーマを変えようとしましたが、うまくいかず・・。

こんな状態で恐縮ですが・・、少しでも需要があればと思いカスタマイズしたことを記事にしていきます。

前提として『はてなブログpro』、『独自サーバー』であることをご了承ください。

参考なれば幸いです!

テーマ変更の前にはバックアップ!


はてなブログのテーマを変更すると、デザインcssなどが消えてしまいます。

既にデザインCSSを記述している場合はメモ帳やエクセルにコピーしておきましょう。

その際にどこにどのコードが貼ってあったかわかりやすく書いておきましょう♫

テーマは『Brooklyn』(ブルックリン)

f:id:kazuki-iroiro:20200112215821j:plain

引用元:Brooklyn - テーマ ストア


まず、ベースとなるテーマは『Brooklyn』(ブルックリン)です。

シンプルでカスタマイズ性の高さが売りの超人気テーマですね。

既存のcssのバックアップが済んだらテーマストアからダウンロードしましょう。

トップページのカスタマイズ


今回はトップページのカスタマイズをおこなっていきます!

グローバルメニュー設置


まずはグローバルメニューです。

位置はヘッダ画像の下です。

①下記の赤枠の部分。


f:id:kazuki-iroiro:20200112203204j:plain


②デザイン設定のヘッダ部分を編集。


f:id:kazuki-iroiro:20200112203135j:plain


③タイトル下にコード挿入。


f:id:kazuki-iroiro:20200112203755j:plain

<div id="trigger-point">
</div>
<div id="global-menu">
<div id="mobile-head">
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<ul class="global-menu-list">
<li><a href="ここにURLを入れる/">題名を入れる</a></li>
<li><a href="ここにURLを入れる">題名を入れる</a></li>
<li><a href="ここにURLを入れる">題名を入れる</a></li>
<li><a href="ここにURLを入れる">題名を入れる</a></li>
<li><a href="ここにURLを入れる">題名を入れる</a></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
// 変数に代入
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
// 固定メニューの設定
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
            $nav.addClass('fixed');
} else {
            $nav.removeClass('fixed');
}
};
    $(window).scroll(fixedNav);
    $('body').on('touchmove', fixedNav);
// Toggle メニューの設定
    $('#nav-toggle').click(function (){
        $nav.toggleClass('open');
});
    $('#content').click(function (){
if($nav.hasClass('open')){
            $nav.removeClass('open');
}
})
});
</script>

④14行-18行目を書き換え。

書き換える部分①ここにURLを入れる⇒リンク先のURLを入れましょう。
②題名を入れる⇒グローバルメニューに表示する題名を入れましょう。

5つ以上つくると合わなくなるらしいので1~5つで作成しています。

⑤スマホ時の表示はこんな感じ。

f:id:kazuki-iroiro:20200112214601p:plainf:id:kazuki-iroiro:20200112214607p:plain

サイドバーにツイッタータイムライン設置


①以下のサイトにツイッタープロフィールのURLを入力。

publish.twitter.com

②『Embedded Timeline』を選択。

③コードをコピーしましょう。

④デザイン設定⇒サイドバー⇒+モジュールを追加

f:id:kazuki-iroiro:20200112213029j:plain

⑤HTMLを編集

タイトルは『タイムライン』や『ツイッター』など何でも良いです。

先ほどのコードを貼り付けましょう。

f:id:kazuki-iroiro:20200112213313j:plain

⑥コードをいじって調整。

表示するツイート数と大きさを調整します。

下記は私のコードですが、アカウントID(kazuuuuuuuukin)を変更すればできると思います。

tweet-limit="3"の数字部分が表示するツイート数です。

<a class="twitter-timeline" href="https://twitter.com/kazuuuuuuuukin?ref_src=twsrc%5Etfw"width="280"data-tweet-limit="3">Tweets by kazuuuuuuuukin</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

そのまま入れるとタイムラインが長くなってしまうので上記コードのようにするのがおすすめです。

『上に戻る』ボタン設置


右下にあるボタンを設置していきます。


f:id:kazuki-iroiro:20200112225823j:plain

①設定⇒詳細設定にコードを貼る

f:id:kazuki-iroiro:20200112230606j:plain
f:id:kazuki-iroiro:20200112230615j:plain


『headに要素を追加』に下記のコードを貼りましょう。

 <head><link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,600,800′ rel=’stylesheet’ type=’text/css’><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></head>


②デザイン設定⇒フッタ


f:id:kazuki-iroiro:20200112233213j:plain


フッタに下記コードを貼りましょう。

<div id="page-top">
  <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
  $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  });
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
  });
</script>


③デザイン設定⇒デザインCSS

デザインCSSに下記コードを貼りましょう。

/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -450px;
  }

次回は・・・・


次回は私が記事内で使用しているものを紹介致します。

これとか(@kazuuuuuuuukin)

これとか①------
②------
③------

【管理人コメント】
これとか

あとはSNSアイコンや目次のCSSなどですかね!

以上、最後までお読み頂きありがとうございました!!