FC2ブログ【basic_white】(5)記事一覧ページをカテゴリ別で表示するために画像を作る|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。FC2ブログ編集FC2ブログのテンプレート「basic_white」で「記事一覧」ページを表示させると、今までアップした記事タイトルの一覧が100個ぐらい表示されます。私はこういうダラダラと表示されるようなページが、便利だけどあまり好きではないので、記事一覧を「カテゴリ別」に分けて表示させたページも準備しました。「カテゴリ別」に表示させると、こんな感じになります。単なる私の自己満足でしかないんですが、まあ、カテゴリ別に記事がまとめられるので、関連記事を続けて確認したい場合には良いのではないでしょうか。当記事の関連記事■FC2ブログ【basic_white】(5)記事一覧ページをカテゴリ別で表示するために画像を作る■FC2ブログ【basic_white】(6)記事一覧ページをカテゴリ別で表示する■FC2ブログ【basic_white】(7)記事一覧ページの「リスト表示」と「カテゴリ別表示」を同時に表示してタブで切り替えるカテゴリ別表示にするために画像を作る「カテゴリ別」で記事一覧を表示する方法を説明する前に、まずは使用する画像を作成します。どこで画像を使っているのかというと、カテゴリタイトルの下に表示される記事タイトル部分の先頭です。上記で掲載している画像で確認してください。(2)マーク(1)は「横15ピクセル×縦15ピクセル」です。マーク(2)は「横10ピクセル×縦11ピクセル」です。どちらの画像も背景色が黒色です。これは、私のブログの背景色が黒色なので、それに合わせたからです。背景色を考えないとあんまり意味のないマークになってしまいます。この2つのマーク(画像)は、もちろん自分で作りました。私は私のブログに合うように背景色とか考えて作ったし、マーク自体の色も文字色に合わせて設定しました。このマークをそのまま保存して使ったとしても、たぶん貴方様のブログには似合わないと思います。ご自分のブログに合うものを準備してください。画像自体は、たぶんどんなソフトででも作れるのではないでしょうか。ワードとかパワポとか、そういったオフィスソフトでも作ることが可能だと思います。今回は画像サイズをきちんと設定しておかないと、実際にリスト表示した時におかしなことになってしまいますので、画像を簡単に作ることができるフリーソフトを紹介しておきます。「PhotoScape」です。「PhotoScape」はフリーソフト、つまり無料で使える画像処理ソフトです。私はこのフリーソフトを多用していますが、このソフトはPhotoshop(フォトショップ)みたいな感じでフィーリングで画像処理ができるソフトでとても便利です。Photoshopは有料ですからね。別にPhotoshopほどの性能を求めないのであれば、この「PhotoScape」をインストールしておいてもいいんじゃないでしょうか。(インストールは自己責任でお願いします。変なソフトがくっついてきた!とか言われても知りませんw)以下、「PhotoScape」を使ってマーク(画像)を作る方法を書いておきます。「PhotoScape」というソフトでの作り方です。他のソフトでの作り方は知りませんので、ご自分で頑張ってみてください。マーク(1)の作り方です。背景の上にテキストとして『「』が表示されるので、これを回転するということでネタばらしをしました。́∀`*)他のソフトを使って画像を作る場合も、『「』を回転させれば大丈夫です。ちなみに、「15px×15px」とか「10px×11px」のように画像自体のサイズが小さいので、「PhotoScape」で作業をする時は表示サイズを300%とか大きくしてからやった方がやりやすいと思います。拡大ツール(虫眼鏡マーク)が作業画面の右下にあるはずなので、クリックして表示サイズを変更しつつ作業をすればラクです。マーク(2)を作る場合も、マーク(1)と同じようにすればいいと思います。『「』を回転させて作ったのですから、『▲』を回転させて同じように作ればいいだけです。次の記事では「記事一覧」をカテゴリ別に表示するためにHTMLやCSSを編集します。この時に今回準備したマーク(画像)が必要になりますので、とりあえず準備をお願いしますね。次の記事では、FC2ブログのテンプレート「basic_white」の「記事一覧ページをカテゴリ別で表示する方法」について説明します。■FC2ブログ【basic_white】(6)記事一覧ページをカテゴリ別で表示するFC2ブログのテンプレート「basic_white」の場合、デフォルトの状態(何も編集しない状態)で「記事一覧ページ」(archives)を表示させると、通常は掲載した記事が新着順に「リスト表示」されます。[必須入力]※画像の中の文字を半角で入力してください。