1. Macのホームページ作成ガイド > 
  2. ホームページ作成情報ブログ > 
  3. ライブドアブログのデザインをカスタマイズした部分まとめ

ライブドアブログのデザインをカスタマイズした部分まとめ

2014/01/20

2014年1月に当ブログのデザインリニューアルを行いました。
その際に表示させるようにしたブログパーツの設定や修正したポイントなど、ライブドアブログのデザイン設定でカスタマイズした箇所をご紹介します。

記事一覧に見出し画像と概要文を表示するようにした

20140120_1

トップページやカテゴリページの記事一覧部分には、記事ごとの見出し画像と概要文を表示させるようにしました。
共にOGPの設定の一部ですが、ライブドアブログの独自タグを使って、ページ上に表示させることができます。

記事一覧表示部分のHTML

<IndexArticlesLoop>
  <div class="article-list">
    <h3><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></h3>

    <!--見出し画像の表示-->
    <IfArticleCoverImage>
      <a href="<$ArticlePermalink$>">
        <img src="<$ArticleCoverImage$>" width="250" height="150" alt="" />
      </a>
    </IfArticleCoverImage>
    <!--見出し画像の表示-->

    <div class="article-contents">

      <!--記事概要文の表示-->
      <p><$ArticleDescription$></p>
      <!--記事概要文の表示-->

      <div class="cont-link">
        <a href="<$ArticlePermalink$>">続きを読む</a>
      </div>
    </div>
  </div>
</IndexArticlesLoop>

見出し画像が設定されていない記事は、記事中の最初の画像が見出し画像になるようです。

記事のタイトル横に見出し画像の縮小版を表示させるようにした

20140120_2

記事一覧に見出し画像を表示させたのと同じタグを使って、記事ページの記事タイトル横にも見出し画像を表示させるようにしました。

記事ページタイトル部分のHTML

<div id="article-title">

  <!--見出し画像の表示-->
  <IfArticleCoverImage>
    <img src="<$ArticleCoverImage$>" width="100" height="60" alt="" />
  </IfArticleCoverImage>

  <!--記事タイトルの表示-->
  <h1><$ArticleTitle ESCAPE$></h1>

  <!--記事作成日の表示-->
  <p><$ArticleDate$></p>

</div>

人気記事をサイドメニューに表示するようにした

サイドメニューに人気記事を表示するブログパーツを設置しました。
人気記事のブログパーツは有料プランに加入している場合のみ使用できます。

また、ブログパーツなどのプラグインを表示させる為には、プラグインを表示させたい箇所に独自タグを記述します。

サイドメニュー部分のHTML

<div id="side">

<!--プラグインリストAの表示-->
<$PluginList_A$>

</div>

プラグインリストBを設置したい時は「<$PluginList_B$>」と記述します。

ヘッダーロゴを非表示にした

20140120_3

ライブドアブログではページの最上部にロゴマークや、登録しているカテゴリなどが表示されます。
今回のリニューアルでは、デザインの都合上どうしてもこのヘッダーロゴを消す必要がありました。

ヘッダーロゴを消すには、有料プランの「ADVANCE(月額840円)」にアップグレードする必要がありますので、やむなくADVANCEにアップグレードしました。
それまでは「PRO(月額315円)」を使っていましたが、正直言ってヘッダーロゴを消せる事くらいしかADVANCEにする理由はありません。

配色

あまり多くの色を使うとコンテンツが読みにくくなったり、メニューが分かりにくくなったりしてしまいますので、基本となる色は青と赤、グレーの3色に抑えています。また、どの色もトーンは抑え目にしています。

基本色
#607db2(メインの青色)
#D6D6D6(枠線に使うグレー)
#F6F6F6(背景に使う薄いグレー)

アクセント
#b26060(ワンポイントで使う赤色)

メインの青色はページのイメージを決める要素に使うだけでなく、リンクなどクリックできる場所に共通で使っています。

Facebookページ