元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

はてなブログカスタマイズ:高度なカスタマイズ

高度なカスタマイズの仕方について書きます。HTMLやCSSが分かる方でしたら、そんなに難しくないと思います。どのようになるのか色々試してみてください。

高度なカスタマイズの場所

サイドバーにモジュールを追加できるのですが、一部のモジュールで高度なカスタマイズができます。高度なカスタマイズができるモジュールは、最新記事、関連記事、注目記事の3つです。

場所は、「ダッシュボード→デザイン→カスタマイズ(工具のマーク)→サイドバー→モジュールを追加」で、最新記事、関連記事、注目記事のいずれかを選ぶと高度なカスタマイズの項目があるのでチェックします。利用可能な変数をクリックすると利用可能な変数とその説明が表示されます。

高度なカスタマイズの使い方

以下のコードのように記述します。

<!-- 例 -->
<a href="{Permalink}">{Title}</a>

{Permalink}{Title}が変数です。HTMLも記述できます。

当ブログでの利用例

サイドバーの最新記事のところで利用しています。最新記事のモジュールは、デフォルトだと日付のところにリンクが付きます。リンクなしにしたかったので、高度なカスタマイズを使用しました。当ブログでは、以下のように記述しています。CSSはご自身のものに変更してください。

<div class="urllist-date-link recent-entries-date-link" style="color:#6f8383;">{Date}</div>
<a href="{Permalink}" class="urllist-title-link recent-entries-title-link  urllist-title recent-entries-title">{Title}</a>
<div>{CategoryLinks}</div>

参考サイト