ブログのカスタマイズ

ブログのタイトルあたりの画像を固定して、スクロールした時に隠れてく感じ

ベースのデザインは、ワイドブラック(2カラム 右)です。

#banner {
background: url("/_images/blog/_35d/ringo_candy/header_bg2.jpg") no-repeat center top fixed;
height: 305px;
margin-bottom: 20px;
padding: 0;
text-align: left;
}

タイトルのpaddingは #banner h1 で調整しています(topが95px) というのを姑息にちょっと直しました(10/2)
ブラウザを全画面にすると、微妙に上に隙間ができるので no-repeat center top fixed と、top を付け加えました(10/12)

背景に　center top fixed　って設定するとおおむねいい感じ…
ただ、背景画像はかなり大きくないと、画像の切れ目が見えてがっかりです(;´･ω･)
使っている画像のサイズは1920×990px、もうちょっと小さくてもいいのかもだけどめんどうなので試してません！
※最近は4000×400pxというサイズで用意するか、横方向に敷き詰めるという手段を用いています(16/07/09)

あと、最新版のFirefoxとChromeとIEでしか表示確認してないんですが…
なんかずれてたらお知らせください。→ ここ

日付をブログタイトルのあたりに置く

これね…いったいどこを直せばいいのかずーーーーーーーーーっと探していたの…(´・ω・`)

そしたら　空はスカスカイ fire walk with me　さんのところで、
デザイン → レイアウト → (記事カラム)記事 → (右上の)コンテンツHTML編集
でいじれるということを教えていただき、うきうきカスタマイズしてました♪～(´ε｀　)

やりかたはえーと、ちょっとめんどうくさい感じなんですが、<% content_main %>の中身を変更しに行きます。
(上記の『コンテンツHTML編集』ってやつ)

全文を</rdf:RDF>で検索すると、目標地点に非常に近い感じ…

<h2 class="articles-title"> から始まるあたりが、ブログの記事のタイトル部分になります。
(</h2>まで)
なので、ここを好きに変更するといいのです。


もうちょっと詳しく書くと

これ↓がタイトル部分(この記事なら、『ブログのカスタマイズ』ってやつ)

<% unless:page_name eq 'article' -%><a href="<% article.page_url | html %>"><% /unless %><% article.subject | html %><% unless:page_name eq 'article' -%></a><% /unless %>

これはカテゴリ表記の部分

<% unless:article_category.name eq '未分類' %>　<a href="<% article_category.page_url | html %>">[<% article_category.name | html %>]</a><% /unless %>

これは、ソネブロにログインして自分の記事を見たときに出てくる[編集]ってやつ

<% if:page_name eq 'article' %><span id="myblog-article-edit-area" style="display:none;"><a href="<% site_info.myblog_base_url | html %>/blog/article/edit/input?reload_blog_id=<% blog.id %>&id=<% article.id %>" rel="nofollow">[編集]</a></span><% /if %>

(たぶんこれであってるはず…ちがったらごめんなさい)

あと、記事を書いた日時を表示させるタグ(独自タグってやつ？)は↓ これ
<% article.createstamp | date_format("%Y年%m月%d日 %H:%M") %>
format(" ")のなかは、自分で好きに変えても。
%Y　は　2015　という表記
%y　なら　15　という年表記
年月日というのは - とか : にしてもいいし、なんならなんにもなくても大丈夫(なはず)
この記事の表記は　%y-%m-%d %H:%M　ってなっています。


あとはこれを適当に配置、<div><span>とclassあたりを使って気に入るように表示させれば、できあがり！
わー(*'▽`)

フォントを変える

このあたりは好みだと思うんですが、個人的にはMeiryoとかYuGothicが好き。
メモ的に ↓

font-family: SourceHanSansJP-Light, YuGothic, 'Yu Gothic', "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;

font-family: 'Hiragino Kaku Gothic Pro',Meiryo,Helvetica,Verdana,sans-serif;

今回使っているのは下のセット

角丸を使いたい(笑)

見出しに角丸使ってみたかったの！
今回導入してみた～♪

h5 {
border: solid 1px #008f93;
border-radius: 5px; /* 角丸部分 */
background-color: #008f93;
margin: 3px 0;
padding: 10px 0 10px 15px;
font-size: 100%;
color: white;
}

h5に設定してみたよ。

右カラムのcss

おおむね　タイムスタンプ(グレー)　の流用です(;'∀')
プロフィール部分だけ、以前使ってたやつ…(でも何使ってたのかわからなくなっちゃったの)



こんな感じで、今回の改造は終了。

昨日あたりちょっとやってみた、タイムスタンプテンプレートを改造するのもおもしろかった！
けど、あれ、タイムスタンプ部分の背景色を変えようとすると、コメントあたりの背景色も変わっちゃうのでこまってたのよね…
スクリーンショット取っておけばよかったな。
どうでもいいですネ(笑)



今回参考にさせていただいたのは

空はスカスカイ fire walk with me
ソネブロカスタマイズメモ

ありがとうございました♡

---

追記：
ソネブロで使える変数の一覧みたいなの、どっかで見たと思うんだけど見つからない…(´・ω・`)
Seesaaブログと同じシステム？使ってるらしいので、とりあえず
Seesaaブログで使える変数
なんでソネブロ版のリンクないかなー…
見つけたら追記しておきます。

○ タグ：Ringo ブログカスタマイズ