私はこういうダラダラと表示されるようなページが、便利だけどあまり好きではないので、記事一覧を「カテゴリ別」に分けて表示させたページも準備しました。
「カテゴリ別」に表示させると、こんな感じになります。
単なる私の自己満足でしかないんですが、まあ、カテゴリ別に記事がまとめられるので、関連記事を続けて確認したい場合には良いのではないでしょうか。
当記事の関連記事■FC2ブログ【basic_white】(5)記事一覧ページをカテゴリ別で表示するために画像を作る
■FC2ブログ【basic_white】(6)記事一覧ページをカテゴリ別で表示する
■FC2ブログ【basic_white】(7)記事一覧ページの「リスト表示」と「カテゴリ別表示」を同時に表示してタブで切り替える
■FC2ブログ【basic_white】(6)記事一覧ページをカテゴリ別で表示する
■FC2ブログ【basic_white】(7)記事一覧ページの「リスト表示」と「カテゴリ別表示」を同時に表示してタブで切り替える
カテゴリ別表示にするために画像を作る
「カテゴリ別」で記事一覧を表示する方法を説明する前に、まずは使用する画像を作成します。
どこで画像を使っているのかというと、カテゴリタイトルの下に表示される記事タイトル部分の先頭です。
上記で掲載している画像で確認してください。
(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. 背景の上にテキストとして『「』が表示されるので、これを回転する
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)を表示させると、通常は掲載した記事が新着順に「リスト表示」されます。各記事ごとに日付‥‥
FC2ブログのテンプレート「basic_white」の場合、デフォルトの状態(何も編集しない状態)で「記事一覧ページ」(archives)を表示させると、通常は掲載した記事が新着順に「リスト表示」されます。各記事ごとに日付‥‥