無料ソフト・無料サービス探検ブログ

会社で利用出来そうな無料ソフト・サービスの備忘録
 

2011年02月24日

MovableTypeメモ(6)サイドバーリンク集作成

MovableTypeを使用してブログを始めた(別のブログです)のは良いが、CMS(Content Management System)を使用するのは初めてで、躓いたり調べたりした事が多かったので、忘れない内に調べた事を書いておく。
同じ部分で困っている人の参考になると嬉しいです。


1.環境
  サーバー:ハッスルサーバー

  バージョン:4.27-ja(コントロールパネルから自動インストール)

2.問題
  MovableTypeで作成したブログのサイドバーにリンク集を作成したい。

3.メモ
  新規にウィジェットテンプレートを作成し、サイドバーにインストールする事により
  リンク集を作成する事が出来た。

4.手順

(1)デザイン>ウィジェットを選択
(2)ウィジェットテンプレートを作成
(3)テンプレート名をつける(今回はサイドバーリンクという名称にしました)
(4)タグを貼りつける(下記参考)

<div class="widget-favorite widget">
<h3 class="widget-header">リンク</h3>
<ul style='list-style-type:none;'>
<li><a href="http://example.com/" target="brank">EXSAMPLE</a></li>
</ul>
</div>

(5)保存>デザイン>ウィジェット
(6)ウィジェットセット>3カラムのサイドバー(メイン)
※ この部分はMovableTypeに適用しているスタイルによって異なると思います

(7)作成したテンプレートを「利用可能(右)」から「インストール済み(左)」へ
   ドラッグ&ドロップする
   20110224-1-01.jpg
 
(8)変更を保存>再構築

で完了なのですが、現在使用しているスタイルだと複数のリンク先を登録した場合、
行間が広すぎて不格好なものとなりました。
下のような感じです。

20110224-2-01.jpg

そこでFTPでstyle.cssをダウンロードして中身を確認してみたところ、

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/mt/mt-static/themes-base/blog.css);
@import url(/mt/mt-static/themes/unity-blue/screen.css);
/* end StyleCatcher imports */

という記述になっています。
現在使用しているスタイルでは、url(/mt/mt-static/themes/unity-blue/screen.css)を
編集すれば良いようです。

.widget-content {
padding: 0 15px;
}

に下に

.widget-content-sidebar {
  line-height: 0.8em
}

を追加。
先ほど作成したテンプレートを修正して、最終的にこんな感じになりました。

<div class="widget-favorite widget">
 <h3 class="widget-header">リンク</h3>
 <div class="widget-content-sidebar">
  <ul style='list-style-type:none;'>
   <li><a href="http://example.com/" target="brank">EXSAMPLE</a></li>
  </ul>
 </div>
</div>


※HTMLタグは全角「<>」を半角「<>」に変更してご使用下さい。

以上です。

 


posted by kiban-man at 00:50 | Comment(0) | MovableTyoe |
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。