カスタマイズ：画像枠

画像枠を消したいという質問がよく頂くのでその回答と、画像枠のカスタマイズをいくつか紹介します。

-- 続きを読む --

全てのテンプレートにおいて記事に投稿された画像にはスタイルシートにて画像枠を表示する指定がされています。
このテンプレートでsample 1の画像を投稿しても
<img src="/sample1.gif" alt="sample1.gif" border="0" width="150" height="50" />

実際には次のような枠が表示されます。



・画像枠を消したい。
スタイルシートを赤字のようにします。
（テンプレートによって多少の違いはあります）

.entrytext img {
    padding: 0;
    border: none;
    background: none;
}

・一部の画像だけ枠を消したい。
一番簡単なのはhtmlタグにstyle="border:none;"を追加する方法です。
<img src="/sample1.gif" alt="sample1.gif" border="0" width="150" height="50" style="border:none;" />


次に画像枠のカスタマイズについて。

・画像の上右下左に対して、実線の1px#BBB 3px#888 3px#888 1px#BBBで囲むサンプル。

.entrytext img {
    padding: 0;
    border-style: solid;
    border-width: 2px 5px 5px 2px;
    border-color: #BBB #888 #888 #BBB;
}

・ポラロイド風な枠のサンプル。

.entrytext img {
    padding: 10px 10px 50px 10px;
    background: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: #BBB;
}

・CSS3のbox-shadowを利用した影エフェクトのサンプル。

.entrytext img {
    padding: 0;
    border: 0;
    -webkit-box-shadow: 0 10px 6px -6px #888;
    -moz-box-shadow: 0 10px 6px -6px #888;
    box-shadow: 0 10px 6px -6px #888;
}

・複数のデザインを使い分ける。
あらかじめ.entrytext imgによる指定を無効にしておきclass="○○"をhtmlと.○○をスタイルシートに追加する。

画像の周りの余白に背景色を指定するサンプル。
<img class="xxx" src="/sample5.gif" alt="sample5.gif" border="0" width="150" height="50" />

.xxx {
    padding: 10px;
    background: #999;
}

2本線（double）を用いたサンプル。
<img class="yyy" src="/sample5.gif" alt="sample5.gif" border="0" width="150" height="50" />

.yyy {
    padding: 0;
    border-style: double;
    border-width: 5px;
    border-color: #999;
}

なおborderやbox-shadowについては「CSS border」「CSS3 box-shadow」等で検索すれば詳しく解説しているサイトあるので指定方法などはご自身でお調べ下さい。

-- 続きを閉じる --

関連記事リストの表示について

新しい機能として「関連記事リスト」が追加されました。
FC2総合インフォメーション：【ブログ】「関連記事リスト」を追加しました！

初期状態では本文に続く形で非常に見づらい印象があるのでスペースを設ける方法を記しておきます。

-- 続きを読む --

スタイルシートの一番最後で構わないので下記を追加します。

.relate_dl {
margin: 20px 5px 10px;
}

これで上部に20px、左右に5px、下部に10pxのスペースが空きます。
必要に応じて枠線や背景色を指定してもいいと思います。

また公式マニュアルの方に詳しいソースが載ってますのでより細かいカスタマイズの参考になると思います。
関連記事リストの設定

なお既存の共有テンプレートについては折を見ながら対応させていく予定です。
------------------------------
追記：100908
どうやら変数も用意された様で、これを用いれば好きな場所に設置できそうです。
テンプレート用変数一覧より抜粋

※以下を有効にするには管理画面での設定が必要です。[環境設定の変更]-[ブログの設定]-[記事の設定]で、「関連記事リスト 表示場所」を「テンプレート変数のみ」もしくは「上記全て」に設定して下さい。

<!--relate_list_area--> ～ <!--/relate_list_area-->

・関連記事がある場合にリストを表示させるブロック。下記のブロック変数(<!--relate_list--> ～ <!--/relate_list-->)を囲むように設置して使用する。
<!--relate_list--> ～ <!--/relate_list-->

・関連記事リストを表示させるブロック
<!--relate_entry_now_showing--> ～ <!--/relate_entry_now_showing-->

・リストの項目が、現在表示中の記事と同じ場合のみ表示されるブロック。
<!--relate_list--> ～ <!--/relate_list-->の中で有効。
※関連記事リストで、表示中の項目を装飾する場合などに利用できます。
<!--relate_entry_other--> ～ <!--/relate_entry_other-->

・リストの項目が、現在表示中の記事と同じではない場合のみ表示されるブロック。
<!--relate_list--> ～ <!--/relate_list-->の中で有効。
※関連記事リストで、表示中の項目をリンクしないまたは除外する場合に利用できます。

<!--relate_list--> ～ <!--/relate_list-->　内で有効になる単変数
<%topentry_relate_title>　記事タイトルを表示
<%topentry_relate_url>　記事URLを表示
<%topentry_relate_year>　年を表示
<%topentry_relate_month>　月を表示
<%topentry_relate_day>　日を表示
<%topentry_relate_hour>　時を表示
<%topentry_relate_minute>　分を表示
<%topentry_relate_second>　秒を表示
<%topentry_relate_youbi> 曜日（書式：Mon/Tue/Wed...）を表示
<%topentry_relate_wayoubi>　曜日（書式：月/火/水...）を表示

（まだ試していませんが）利用方法としては環境設定の諸項目>関連記事リストの表示場所を「テンプレート変数のみ」とすれば良さそうです。

【ブログ】「関連記事リスト」を改良しました！

※必要に応じて加筆修正します。

-- 続きを閉じる --