Top Page > FC2ブログ > FC2ブログ【basic_white】(5)記事一覧ページをカテゴリ別で表示するた…

FC2ブログ【basic_white】(5)記事一覧ページをカテゴリ別で表示するために画像を作る

FC2ブログのテンプレート「basic_white」で「記事一覧」ページを表示させると、今までアップした記事タイトルの一覧が100個ぐらい表示されます。



私はこういうダラダラと表示されるようなページが、便利だけどあまり好きではないので、記事一覧を「カテゴリ別」に分けて表示させたページも準備しました。
「カテゴリ別」に表示させると、こんな感じになります。


カテゴリ別記事一覧



単なる私の自己満足でしかないんですが、まあ、カテゴリ別に記事がまとめられるので、関連記事を続けて確認したい場合には良いのではないでしょうか。







カテゴリ別表示にするために画像を作る


「カテゴリ別」で記事一覧を表示する方法を説明する前に、まずは使用する画像を作成します。
どこで画像を使っているのかというと、カテゴリタイトルの下に表示される記事タイトル部分の先頭です。
上記で掲載している画像で確認してください。


(1) カテゴリ別記事一覧のマーク  (2) カテゴリ別記事一覧のマーク



マーク(1)は「横15ピクセル×縦15ピクセル」です。
マーク(2)は「横10ピクセル×縦11ピクセル」です。


どちらの画像も背景色が黒色です。
これは、私のブログの背景色が黒色なので、それに合わせたからです。背景色を考えないとあんまり意味のないマークになってしまいます。



この2つのマーク(画像)は、もちろん自分で作りました。
私は私のブログに合うように背景色とか考えて作ったし、マーク自体の色も文字色に合わせて設定しました。このマークをそのまま保存して使ったとしても、たぶん貴方様のブログには似合わないと思います。
ちゃんとご自分のブログに合うものを準備してください。



「PhotoScape」での画像の作り方


画像自体は、たぶんどんなソフトででも作れるのではないでしょうか。
例えばワードとかパワポとか、そういったオフィスソフトでも作ることが可能だと思います。
ただ今回は画像サイズをきちんと設定しておかないと、実際にリスト表示した時におかしなことになってしまいますので、画像を簡単に作ることができるフリーソフトを紹介しておきます。

PhotoScape」です。


「PhotoScape」はフリーソフト、つまり無料で使える画像処理ソフトです。
私はこのフリーソフトを多用していますが、このソフトはPhotoshop(フォトショップ)みたいな感じでフィーリングで画像処理ができるソフトでとても便利です。
Photoshopは有料ですからね。別にPhotoshopほどの性能を求めないのであれば、この「PhotoScape」をインストールしておいてもいいんじゃないでしょうか。
(インストールは自己責任でお願いします。変なソフトがくっついてきた!とか言われても知りませんw)



以下、「PhotoScape」を使ってマーク(画像)を作る方法を書いておきます。
あくまでも「PhotoScape」というソフトでの作り方です。他のソフトでの作り方は知りませんので、ご自分で頑張ってみてください。
まずはマーク(1)の作り方です。


1. 「画像編集」画面で右下にある「メニュー」ボタンから「新しい写真」を選択する
2. 幅と高さを指定して(例:15px×15px)、背景色を指定する(自分のブログに合わせる)
3. 左下「オブジェクト」タブをクリックしてオブジェクトから「テキスト」を選ぶ
4. テキストを書くところに『』を表示させて「OK」をクリックする
5. 背景の上にテキストとして『』が表示されるので、これを回転する



ということでネタばらしをしました。
私が作ったマーク(画像)は、実はカッコ頭『「』を回転させただけなのです!
ね、簡単でしょ?(´∀`*)
他のソフトを使って画像を作る場合も、『「』を回転させれば大丈夫です。



ちなみに、「15px×15px」とか「10px×11px」のように画像自体のサイズが小さいので、「PhotoScape」で作業をする時は表示サイズを300%とか大きくしてからやった方がやりやすいと思います。
拡大ツール(虫眼鏡マーク)が作業画面の右下にあるはずなので、クリックして表示サイズを変更しつつ作業をすればラクです。



マーク(2)を作る場合も、マーク(1)と同じようにすればいいと思います。
『「』を回転させて作ったのですから、『▲』を回転させて同じように作ればいいだけです。
次の記事では「記事一覧」をカテゴリ別に表示するためにHTMLやCSSを編集します。この時に今回準備したマーク(画像)が必要になりますので、とりあえず準備をお願いしますね。




次の記事の紹介

次の記事では、FC2ブログのテンプレート「basic_white」の「記事一覧ページをカテゴリ別で表示する方法」について説明します。


FC2ブログ【basic_white】(6)記事一覧ページをカテゴリ別で表示する
FC2ブログのテンプレート「basic_white」の場合、デフォルトの状態(何も編集しない状態)で「記事一覧ページ」(archives)を表示させると、通常は掲載した記事が新着順に「リスト表示」されます。各記事ごとに日付‥‥



posted by mameemon | Comment ( 0 ) | Category ( FC2ブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。