2015年08月16日

シーサーブログ作成入門マニュアルまとめ

posted by キョン at 08:21| Comment(3) | シーサーブログ | このブログの読者になる | 更新情報をチェックする

2014年05月03日

シーサーブログの自由形式にタイトルと枠線を入れる方法

サイドーバーコンテンツに枠線を入れる方法を紹介しましたが
これは「自由形式」には適用できません。
自由形式1.jpg

サイドバーで表示されるタイトルも枠線もありません。
寂しい限りです。
そこで自由形式を他のサイドバーコンテンツと
同じような形にしてみようと思います。

自由形式を変更するにはスタイルシートではなく、
コンテンツから行います。

まずデザイン>コンテンツを開きます。
コンテンツ画面.jpg

そこから自由形式をサイドバーに移して開きます。
先にタイトルと内容を入力してください。

自由形式2.jpg

次に右上にあるHTMLの編集を開きます。

自由形式3.jpg

<% content.title %>


<% content.header -%>
<% content.free.text %>
<% content.footer -%>


赤い部分を加えて下さい。
最後に自由形式の保存を押して
更にコンテンツ画面の保存を押したら終了です。

自由形式4.jpg

他のサイドバーコンテンツと同じ形式になりました。

posted by キョン at 14:52| Comment(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2014年04月08日

margin(マージン)とpadding(パディング)について

スタイルシートで
margin(マージン)
padding(パディング)
という単語を見かけると思います。


これはそれぞれ
「空白をどれくらい空けるか?」
という設定になります。

マージン、パディング.png

上図のようにマージンが外側、パディングが内側の空白です。
例えばタイトルの位置を右側にずらしたいなぁと思ったら
タイトルの左側のマージンかパディングの空間を広げれば
タイトルが右側にずれるということです。

margin-leftって左なのになんで右に行くの?
という謎が解けましたね?


では次に設定方法ですが


マージン、パディングを1つ指定した場合
全ての方向の空白が空きます。
(例)padding:10px ⇒上下左右それぞれ10ピクセル空白が空く



マージン、パディングを2つ指定した場合
記述した順に[上下][左右]の空白になります。
(例)padding:10px 20px; ⇒上下に10ピクセル、左右に20ピクセル空白が空く


マージン、パディングを3つ指定した場合
記述した順に[上][左右][下]の空白になります。
(例)padding:10px 20px 30px; ⇒上に10ピクセル、左右に20ピクセル、下に30ピクセル空白が空く


マージン、パディングをを4つ指定した場合
記述した順に[上][右][下][左]の空白になります。
(例)padding:10px 20px 30px 40px; ⇒上に10ピクセル、右に20ピクセル、下に30ピクセル、
左に40ピクセル空白が空く


これは覚えておくとスタイルシートをカスタマズするときに
すごく便利です。ぜひ、上右下左とおぼえてください。

TOPへ⇒シーサーブログ作成入門マニュアル
posted by キョン at 15:41| Comment(0) | シーサーブログ | このブログの読者になる | 更新情報をチェックする
タイレノール
×

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