アニテマ

アニメ・新潟・鉄道の事などを書いていくブログ

お知らせ など

ブログを移転しました。(2016-08-01)

【はてなブログ】はてなモジュールのソース

ここではこの記事で紹介した、はてなブログはてなモジュールのソースを紹介しています。
まずはこちらを見てから、この記事を見てください。

別の記事で紹介した「はてなブログの3カラム化」ですが、あの方法だと普通のやり方ではモジュールが追加できません。
でもモジュールを使う方法があります。
それは簡単です。モジュールのHTMLをそのままHTMLモジュール内のサイドバーの中身に書けばいいのです。
やり方としては、追加したいモジュールを普通のやり方で追加して、それをブラウザの「ページのソースを表示」で確認し、モジュールの部分だけをコピーして追加します。
ですが、これだとメンドイので、ここにモジュールのHTMLソースを張り付けています。メンドイ場合はここのを使ってください。

  • 人によって変更する箇所があるので、それは各自行なってください。
  • このやり方だと「最新記事」や「月別アーカイブ」「カテゴリー」「最近のコメント」などの 動的な要素(記事やコメントを追加するごとに表示されるものが変わるもの)は多分使えません。理由はよく分かりませんが、モジュールとして設定せずにHTMLを直接指定しているからだと思います。この場合モジュールとは別に、RSSフィードなどを使って表示する必要があります。
  • ただし、カテゴリーについては変わるのは各カテゴリの記事数と、新しく作ったカテゴリを自動追加するだけなので、自分で編集すればなんとかなります。
  • HTMLソース内の【】の部分は変更OKな部分です。実際に使うときは、【】を外して使ってください。(【プロフィール】→プロフ など)

 

プロフィール モジュール

<div class="hatena-module hatena-module-profile">
  <div class="hatena-module-title">
    【プロフィール】
  </div>
  <div class="hatena-module-body">
    
    <img src="【プロフィール画像のURL】"
      alt="【自分のはてなID】" class="profile-icon" />
    
    <span class="id">
      <a href="/about">【自分のはてなID】</a>
      
    </span>
    
    <div class="profile-description">
      <p>【ここにブログの説明】</p>
    </div>
    <!-- 【ブログ購読ボタン、要らない人は消してください】 -->
    <div class="hatena-follow-button-box btn-subscribe">
      <a href="#" class="hatena-follow-button">
        <span class="subscribing">
          <span class="foreground">購読中です</span>
          <span class="background">読者をやめる</span>
        </span>
        <span class="unsubscribing">
          <span class="foreground">読者になる</span>
          <span class="background">読者になる</span>
        </span>
      </a>
      <div class="subscription-count-box">
        <span class="subscription-balloon">
        </span>
        <span class="subscription-count">
        </span>
      </div>
    </div>
    <!-- 【購読ボタンここまで】 -->
    <!-- 【ツイッターフォローボタン、要らない人は消してください】 -->
    <div class="hatena-follow-button-box btn-twitter">
      <a href="https://twitter.com/【自分のツイッターID】" class="twitter-follow-button" data-show-count="false" data-lang="ja">
        @○○をフォロー
      </a>
    </div>
    <!-- 【ツイッターフォローボタンここまで】-->
  </div>
</div>

プロフィール画像のURLはプロフィールモジュールを実際にブログに表示させるとソースに表示されます。
ただ、画像を変えるとURLが変わるかも(本当のところは分からない)なので、画像をはてなフォトライフなどにUPしてその画像URLを貼った方が安心かも?
フェイスブックのボタンもありますが、僕はフェイスブックを使ってないのでその部分のHTMLが分かりません。すみません。

検索 モジュール

<div class="hatena-module hatena-module-search-box">
  <div class="hatena-module-title">
    【検索】
  </div>
  <div class="hatena-module-body">
    <form class="search-form" role="search" action="/search" method="get">
      <input type="text" name="q" class="search-module-input" value="" placeholder="Search">
      <input type="submit" alt="検索" class="search-module-button" />
    </form>
  </div>
</div>

ここは特に変えるところはないかも?
【検索】はそのまま表示されるので、嫌な人は 検索 など【】を消してください。

リンク モジュール

<div class="hatena-module hatena-module-links">
  <div class="hatena-module-title">
    【リンク】
  </div>
  <div class="hatena-module-body">
    <ul class="hatena-urllist">
          <li>
            <a href="【リンクのURL】">【リンクタイトル】</a>
          </li>
    </ul>
  </div>
</div>

<li>タグで囲まれた部分はいくつでも作れます。

カテゴリー モジュール

<div class="hatena-module hatena-module-category">
  <div class="hatena-module-title">
    【カテゴリー】
  </div>
  <div class="hatena-module-body">
    <ul>
        <li>
          <a href="【カテゴリページのURL】">
            【カテゴリその1】
          </a>
        </li>
        <li>
          <a href="【カテゴリページのURL】">
            【カテゴリその2】
          </a>
        </li>
    </ul>
  </div>
</div>

基本的にリンクモジュールとあまり構造は変わりません。
カテゴリページのURLは記事タイトルのところに付いているカテゴリリンクのURLと同じです。
カテゴリを新しく作ったとき・削除したときはその都度ソースを編集しなおしてください。



これで3カラムにしてもはてなモジュールが使えます。
ただ、最近のコメントなどは(多分)使えないので、RSSフィードなどの外部スクリプトを使うか、諦めて普通の方法(2カラム)にするか、になると思います。
広告を非表示にする