はてなブログをカスタマイズしてTwitterとドロップダウンメニューをつけてみた

最近、Twitter上でブログ友達、ブロ友が増えてきました。

ボクが一方的に友達だと思っているだけかも知れませんが。。。

そんな皆さんのブログを見ていると

素晴らしい

こんなボクのブログみたいにテンプレートをそのまま使っている人は

皆無

なので、ボクもブログをカスタマイズしてみました。

ボクにだって……やれば出来るんだっ！

f:id:lollipop-candy-syndrome:20151227154642p:plain

出典・引用：機動戦士ガンダム　©サンライズ

きっかけはお知り合いのブロガーさんが「続きを読む」ボタンのカスタマイズ方法をブログ内で公開していたからありがたく使わせていただきました。

今回してみたのはこちら

「続きを読む」ボタンのカスタマイズ
ドロップダウンメニューの追加
サイドバーにTwitterのタイムラインを追加

の3本です。

まずは「続きを読む」ボタンのカスタマイズから。

「続きを読む」ボタンのカスタマイズ

参考にさせてもらったブログはコレ↓

www.ituore.com

いつから俺ができないと錯覚していた？

いつ俺.comのshunさんのブログから拝借させてもらいました。

ここではコピペで簡単にカスタマイズが出来るソースコードを公開しています。

基本パターンは１種類だけど、様々な動きのボタンを公開してます！

やり方は、

ブログのダッシュボードからデザインを選択してデザインCSSの中に貼る

というとても簡単なカスタマイズになってるので、是非ともやってみてください。

やり方は上のリンクからどうぞ。

ただ、個人的にはこの「続きを読む」のボタンの位置を

左
真ん中
右

に選べたら良かったなぁと個人的には思います。

次はドロップダウンのメニュー。

ドロップダウンメニューのカスタマイズ

ドロップダウンのカスタマイズもコピー＆ペーストでできます。

これもGoogle先生に

「はてなブログドロップダウンメニュー」

で検索するとOK！Google！！といって教えてくれます。

f:id:lollipop-candy-syndrome:20151227192927j:plain

今回は以下に記述するので、参考にでもしてください。

HTMLソースコード

<nav>
<ul id="globalmenu">
    <li><a href="#">メイン１</a>
      <ul>
        <li><a href="hoge">ほげ１</a></li>
      </ul>
    </li>
    <li><a href="#">メイン２</a>
       <ul>
         <li><a href="hoge">ほげ２</a></li>

         <li><a href="hoge">ほげ３</a></li>
       </ul>
     </li>
     <li><a href="#">メイン３</a>
       <ul>
         <li><a href="hoge">ほげ４</a></li>
       </ul>
     </li>
     <li><a href="#">メイン４</a>
       <ul>
         <li><a href="hoge">ほげ５</a></li>
       </ul>
     </li>
   </ul>
</nav>

このソースコードを貼ります。

貼るのはダッシュボードからデザインを選択してヘッダーのヘッダー下に上記のソースコードを貼ってください。

CSSソースコード

#globalmenu{
width: 100%;
margin: 0 auto 40px;
height: 50px;
padding: 0;
list-style-type: none;
background: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#globalmenu li{
position: relative;
float: left;
text-align: center;
width: 20%;
margin: 0;
padding: 0;
}
#globalmenu li a{
display: block;
margin: 0;
padding: 17px 0 20px;
color: #000;
font-size: 15px;
text-decoration: none;
}
#globalmenu li:hover > a{
background: #ccc;
color: #fff;
}
#globalmenu li ul{
position: absolute;
top: 100%;
color: #fff;
left: 0;
margin: 0;
padding: 0;
list-style: none;
z-index:10000;
}
#globalmenu li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
}
#globalmenu li ul li:hover > a{
background: #EDA47C;
color: #fff;
}
#globalmenu li:hover ul li{
overflow: hidden;
height: 40px;
border-bottom: 1px dotted #ffffff;
}
#globalmenu li ul li a{
font-size: 13px;
padding: 15px;
background: #ddd;
text-align: left;
}