記事一覧ページを作ってみる(前編)

引き続き、ブログのカスタマイズです。
PC版ソネブロユーザー以外の方には、まったく面白くない記事でごめんなさい。

どうやってページ一覧を出力したらいいのかね…

大昔に運営していたことのあるFC2のブログとかだと、(私の記憶が確かなら)公式で用意されているので簡単だったんですが、so-netのブログにはこの機能がないんですよね。

最新記事を表示する

<% loop:list_article -%>
<div class="ringo4">
<span class="ringo5"><% article.createstamp | date_format("%y-%m-%d") %></span><br />
<a href="<% article.page_url %>"><% article.subject | shorten(17) | html %></a><br />
<span class="ringo6"><% article.body | text_summary(60) | tag_strip | oneline | html %></span>
</div>
<% /loop -%>

↑のはサイドバーに表示されている『最近書いた記事』を表示させるためのHTMLです
class名がringoとかいうのは、私が付け加えたやつです(この命名、汎用性ないですね…)

こんな感じのを改変すればいいのかな？と一瞬考えたのですが、そもそもそんなことができるぐらいなら、もっと早くにこのブログを自分好みに改変してるわけで…(´・ω・`)
いや、ほんとどうしたらいいんだ…と、ごろごろ寝転びながら『悪魔が来たりて笛を吹く』を読みつつ、放置していました(笑)
で、もしかしたら"タグ"使えばできるんじゃないかな…とひらめいたのです。
とりあえずタグ名はなんでもよくて、普段使いそうもない感じのタグをつけておけば、あとでかぶって『しまったァァァァ～～～～～!!!!!!!!!!!!!』ってことにもなりにくそう。
素直に「記事一覧」でもいいですしね。

けど、書き上げてある記事が100越えてたら、これがまた苦行の予感しかないわけです(;´･ω･)
カテゴリは記事一覧で一度に変えられますけど、タグは記事編集画面でちまちま加えていくしか、現状方法がないですもんね…

というわけで、タグをつけるのは後回しにして、タグページをステキにするほうを先行させることにしました。

続きを読む

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

ブログのカスタマイズ

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

ベースのデザインは、ワイドブラック(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編集』ってやつ)

続きを読む

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

Lightbox2を導入してみたよ

ものすごーーーーーーーーーーく久しぶりにブログを改造しようと思ったら

なんかいろいろ忘れていて困ったよ(笑)



とりあえず、so-net blogでLightbox2の導入方法です。

まず…一番大事なのが、ソネブロは
CSS　とか　JS　とかアップロードできない
ってことです。

(；´Д｀)＜ここで終了…

っていうのは業腹なので、同じso-netのホームページサービスを利用することにしました。
U-page+
ここにCSSとかJSとかついでに画像とかあげておきます。

※U-page+は接続会員(もしくは家族会員)じゃないと、使えないサービスだと思うので…
それ以外の会員の場合は、Solomonレビュー(Sub)さんの
So-netブログでのLightBoxのような表示(2)
を試してみるのも手かと思います。

続きを読む

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