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

Lollipop Candy Syndrome|ロリポップキャンディシンドローム

北の大地に住まう男の子「たろ」の雑記ブログ。彼女できるまで頑張る。

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

はてなブログ

広告

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

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

 

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

 

素晴らしい

 

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

 

皆無

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

 

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

 

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

 

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

 

今回してみたのはこちら

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

の3本です。

 

 

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

 

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

 

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

 

www.ituore.com

 

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

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

 

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

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

 

やり方は、

 

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

 

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

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

 

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

  • 真ん中

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

 

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

 

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

 

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

これもGoogle先生に

 

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

 

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

 

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

 

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

 

HTMLソースコード

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

         <li><a href="hoge">ほげ3</a></li>
       </ul>
     </li>
     <li><a href="#">メイン3</a>
       <ul>
         <li><a href="hoge">ほげ4</a></li>
       </ul>
     </li>
     <li><a href="#">メイン4</a>
       <ul>
         <li><a href="hoge">ほげ5</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;
}

 

このCSSと言われるソースコードをダッシュボードからデザイン、デザインCSSの部分に追加してください。

これでボクのブログと同じようなドロップダウンのメニューができていると思います。

 

今、

#globalmenu li{
  position: relative;
  float: left;
  text-align: center;
  width: 20%;
  margin: 0; 

 

の部分で20%になっているかと思います。

 

これはボクのブログで5個のボタンが使われているからです。

4個のボタンにする場合は、HTMLのコードを変更した上で25%つまり、合計で100%になるように調整してください。

 

HTMLコードを変更するとき、減らす場合は

 

<li><a href="#">メイン4</a>
       <ul>
         <li><a href="hoge">ほげ5</a></li>
       </ul>
     </li>

 

を削除し、増やす場合はコピーして追加してください。

 

わからない場合は余りいじらないほうが良いかも…です。

 

サイドバーにTwitterのタイムラインを表示

 

最後はTwitterのタイムラインをサイドバーに表示する方法です。

これもデザインからカスタマイズ、サイドバーを選択します。

 

サイドバーの「モジュールを追加」から< />HTMLを選択します。

そして、Twitterのコードを挿入するのですが、Twitter側でも設定が必要です。

 

Twitterの「プロフィールと設定」からウィジェットを選択します。

ここで表示する項目の設定をしてウィジェットを作成するを押すと、ソースコードが吐き出されます。

 

それを先ほどの< />HTMLに追加します。

そして保存を押すとサイドバーにTwitterのタイムラインが表示されます。

 

【まとめ】

これは、はてなブログのカスタマイズ一例です。

もっとカスタマイズをして自分だけのオリジナルはてなブログをつくっちゃおう!

 

次回があれば、スマートフォンのカスタマイズをしたいと思います。

スマートフォンにもメニューをつけたいですね。

 

大切なのは読者が使いやすいようにカスタマイズすること。

目的の記事に到達できるように考えて設計しましょう。