はてなダイアリーのサイドバーにアプリのアイコンリンク集を作ってみた
今日の夜中から四国へお遍路に行く@8suttiです(^^)v
当ブログをもっとソレっぽくしようと思いサイドバーにオススメアプリのアイコンでのリンク集を作ってみました。いろんなブログで見かけますけど、こういうのに詳しくない私は結構苦戦しましたｗ
と言う事で、私の忘備録的に書いておこうと思います。
はてなダイアリーでサイドバーに何かを追加する時には、管理画面の右にあるデザイン→デザイン編集という所から行います。
デザイン編集画面を開いて少し下にスクロールするとページのフッタという項目があるのでそこを編集していきます。
サイドバーのあるデザインを使っていればフッタの所に…
＜div class="sidebar"＞
で始まり
＜/div＞
で終わる記述があると思いますが、その間に色々書いてあるのでサイドバーの内容です。
おそらくプロフィールやカテゴリー、コメント等のはてなモジュールが書かれていると思います。
自分のブログで確認してもらえば、ココに記述されている順でブログのサイドバーにも何か表示されているはずです。
↓多分こんな感じだと思います。
＜div class="sidebar"＞
＜hatena name="profile" template="hatena-module"＞
＜hatena name="searchform" template="hatena-module"＞
＜hatena name="section" template="hatena-module"＞
＜hatena name="sectioncategory" template="hatena-module"＞
＜hatena name="comment" template="hatena-module"＞
＜/div＞
このフッタのなかにURLリンクを貼る為のはてなモジュールを追加します。
私の場合はサイドバーの一番下に作りたいので、＜/div＞のすぐ上に下記の記述を追加しました。
＜div class="hatena-module"＞
＜div class="hatena-moduletitle"＞サイドバーの見出し＜/div＞
＜div class="hatena-modulebody"＞
＜ul class="hatena-urllist"＞
＜br＞＜li＞＜strong＞アプリ名＜/strong＞＜br＞アイコン付きリンクurl＜br＞説明など＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜/div＞
※「<」と「>」を全角で書いてますが、実際に半角で書きます。
アプリのリンク自体の記述は…
＜br＞＜li＞＜strong＞アプリ名＜/strong＞＜br＞アイコン付きリンクurl＜br＞説明など＜/a＞＜/li＞
※始めの＜br＞は無くても問題ありませんがリンクとリンクの間隔を空ける為に入れてあります。
なので…
＜div class="hatena-module"＞
＜div class="hatena-moduletitle"＞サイドバーの見出し＜/div＞
＜div class="hatena-modulebody"＞
＜ul class="hatena-urllist"＞
と、
＜/ul＞
＜/div＞
＜/div＞
の間にアプリのリンクをどんどん足していけばOKです。
私の場合はサイドバーの見出しを「私が使用中のおすすめiPhoneアプリ」にして上記に書いた通りアプリのリンクを追加しいきました。するとこんな感じでサイドバーに表示されます。
こんな感じで出来上がりです。
ちなみにアプリのアイコン付きのリンクについてですが、私の場合はリンクシェアのマイページのリンク→商品リンク検索から作りました。
しかしコレで生成したリンクコードをアイコン付きリンクurlの所にそのまま貼り付けてしまうと同じページでリンク先を開いてしまいます。
私はソレが嫌だったので少し付け足しました。
上記の場所に「target="_blank"」を足します。
↓こんな感じ
…type=2&subid=0" target="_blank"＞＜IMG border=0…
これでアイコンをクリックするとリンク先を新しいページで開いてくれます。
私はド素人なので間違っている所もあるかもしれませんが…ｗ
でも色々調べながらやると出来上がったとき嬉しいですね。
Newsifyとか他にもリンクを載せたいアプリがあったけど、何故かリンク生成する所に出てこなかった…(><)
では。
こんな記事もありますよ
