今回ブログのトップページの構成を変更しました。
前よりいくらか機能的になったと思います。
今回変更したその理由や方法についてアウトプットしておきます。
AFFINGER5を使用しているかたはそのまま使えるカスタマイズ知識なのでぜひチェックしてみてください。
初心者でも操作可能でオシャレにもなるのでオススメです。
デザイン変更箇所
以前のトップページ
webサイトは一般的にモバイル（スマホ）とパソコンで表示のレイアウトが違います。
僕のブログもそうなっています。
最初に旧トップページのレイアウトを載せておきます。
【パソコン】
いつも閲覧がスマホの方にとっては見え方が新鮮だと思います。
一番上にグローバルメニューがあります。
どこのページを開いていても常にこれが表示されているので、興味があるカテゴリへ簡単に飛べます。
そして新着記事のスライドがあります。新しい記事をどデカく表示して目を引くことを狙っています。
その下に新着記事が一覧で並ぶスペースがあり、そしてサイドにカテゴリメニューを表示しています。
カテゴリメニューは上のグローバルメニューと同じ内容です。
【モバイル】
ほんとはもっと縦長ですが短縮してあります。
一番左上にメニュー（スライド）ボタンがあります。押すとスライドで左からメニュー（カテゴリ）が出てきます。
そして新着記事のスライドがあり、新着記事一覧があります。一番下にカテゴリメニューがあります。
パソコン画面の要素がそのまま縦一列になったイメージです。
僕はパソコンユーザーですしブログ作業も当然パソコンです。
よく目にする画面は必然的にパソコン用レイアウトなのですが、よくチェックのためにモバイルレイアウトも見ます。
そのときに思うのはやはり比較すると見やすいのはPC用レイアウトだと思います。
面積が広いので余裕を持って構成ができます。
それに対してスマホだとどうしても無機質な縦一列にならざるを得ないです。
このレイアウトを分ける仕組みは多くのサイトで採用されています。
とくに「スマホならモバイル用」という単純な分け方ではなく、画面のサイズをチェックして都度自動で処理されています（レスポンシブデザイン）
一般的にリッチに見えるのはやはりPC用のそれなので、その意味でも「外はスマホ、家の中はPC」と棲み分けをしたほうが快適だし面白いのかなと思ったりします。PCで見るといつものルーティンサイトも見違えるかもしれません。
※関連記事※オススメのパソコンを紹介 先日LINEで一番便利なのはPC版LINEであると紹介しました。 でもこういった方が多いでしょうか。 A子さんそもそもPCを持ってない B男さん大きいし持つのハードル ... 続きを見る
【2020年7月時点】オススメの小さなパソコンを紹介します【ミニデスクトップ】
現状見に来てくれているユーザーさんのデバイス比率です。
半数以上がモバイル（スマホ）であと半分はPCとタブレットです。
新トップページデザイン
こういったデザインに変更しました。
【パソコン】
画面全幅だった新着スライドを2/3ぐらいのサイズに変更、そして一度に表示される記事を2つにしました。
その下にカテゴリ別の記事一覧を設けました。サイドのカテゴリメニューは変更なし。
一番下（フッター）を3分割し新着記事一覧とアーカイブを置きました。
【モバイル】
またまた短縮版です。
パソコン用で説明した要素が縦一列に並びます。
こういったデザイン変更が僕も使っているWordpressテーマ「AFFINGER5」であれば簡単にできます。
下でこの手順も説明していきます。
まず先にレイアウト変更の理由を説明しておきます。
レイアウト変更の理由
以前のレイアウトはブログを作ったときのデフォルトのままです。
※新着記事スライド（大画面）はわりと直近になって設定してました
まったく手をかけていなくても新着記事が自動で並んでいきそれなりに一般的なレイアウトとして使えます。
そのままでも使えますがデメリットをあげるとしたらこうです。
デフォルトトップページのデメリット
- 記事露出が「新着記事」に傾倒する
上であげた以前のレイアウトを見てほしいのですが、デフォルト設定だと新着記事だけで広い面積が覆われます。
これってそのまんまユーザーの過去記事へのアクセス確率が下がります。過去記事が見えにくくなっていますからね。
それは回遊率というユーザーさんが1回の訪問時に何ページを見ているかといった指標も下がることになります。
書いている側としてはできたら興味ある他の記事も見ていってもらいたいなと思うので今回の変更を行いました。
では下で編集方法を説明します。
僕が使っているWordpressテーマAFFINGER5（アフィンガー5）であればこういった変更は簡単に行えます。
【アフィンガー5】トップページのカスタマイズ方法
WordPressで固定ページ→新規追加の画面を開きます。
新規の画面を開いてこれをトップページとして編集していきます。
作成した固定ページは最後にトップページになるように設定します
①新着記事スライドショーの作成
色々なサイトで見かける「おっ」と感じる動く仕掛け「スライドショー」ですが、AFFINGER5であればもともとデザインが備わっているので簡単に使えます。
手順：[タグ] → [記事一覧/カード] → [カテゴリ一覧(スライドショー）]
以下のようなコードが挿入されます。
{st-catgroup cat="" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""}
このコード内の各引数（設定項目）を変更することによって見た目をカスタマイズできます。
| 引数 | 説明 |
| cat | 表示するカテゴリID（複数の場合「,」で区切る）※カテゴリID→「投稿」→「カテゴリ」で確認 |
| page | 表示記事数（表示控えも含めて） |
| order | 降順、昇順の指定（値：ASC 又は DESC ） |
| orderby | 並び方法を指定（値：ID 、date、modified、rand 他 ） |
| child | 子カテゴリーの読込に対応。読み込まない場合は"off" |
| slide | スライドショーのオンオフ |
| slides_to_show"○,○,○" | 列数の指定。大画面,中画面,小画面の順で指定可能。PC,タブレット、スマホのイメージ |
| slide_date | 記事投稿日の表示/非表示を設定 |
| slide_more | 設定文言をボタンとして表示。例）「続きを読む」等入力 |
| slide_center | スマホ閲覧サイズを「1」にしたときに"on"設定すると両端が見切れるデザインになる※スマホのみ |
| fullsize_type | 「アイキャッチ画像」又は「アイキャッチ画像+記事タイトル」のみに変更 |
色々項目がありますが触るのは必要最小限でOKです。
僕の場合は以下のように3項目だけ設定しました。
| 引数 | 説明 |
| page | ノータッチ ”5のまま” |
| slides_to_show"○,○,○" | 2，2，1 （PC：2、タブレット：2、スマホ：１） |
| slide_date | off |
| slide_more | 続きを読む |
意図としては
・表示は２つで5つの記事をスライドさせたい（スマホの場合は１記事のみ表示）
・記事投稿日を消したい
の２点だけだったのでいじるのは上記だけでOKです。
これでスライドショーは完成です。
カテゴリ別記事部分の作成
この部分ですね。
※ちなみに画像に写っている「オススメ記事」という帯については、H2またはH3要素をお好みで使っていただけたらと思います。
（１） 画面を縦２つに分割する
手順：[タグ] → [レイアウト] → [全サイズ] → [左右50％をクリック]
以下のような2つのエリアが挿入されます。
左右2つのセクションとして捉えて、それぞれの枠内に入力をしていきます。
色はわかりやすくここで付いているだけで実際のブログ画面では着色されていません。
※コメントのとおり「このテキストは最後に消してください（50％）」は最後に消しておきましょう
（２） カテゴリ名のタイトル素材を作成
手順「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
以下のようなコードが挿入されます。
{st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]カテゴリ名[/st-flexbox}
こういったバナーができます。タイトルとして使用してよいですし、これ自体をクリックさせるバナーとして使ってもよいでしょうね。
タイトル
カテゴリ名
ただしこのままではちょっと使えないので設定をします。
こちらも様々な引数（設定用項目）がありますが触るのは数箇所です。
| 引数 | 説明 |
| url | リンク先URLを記載（例：http://hoge.com） |
| title | タイトルを記載 |
| color | タイトルの文字色：文字色をHTMLカラーコードで指定 |
| bgcolor | 背景色をHTMLカラーコードで指定 |
| backgroud_image | 背景にしたい画像のURL |
一つづつ解説です。
①url・・・リンクの機能を付けたい場合は移動先urlを設定。
例えば記事は少しだけ（数個）下に載せて、あとはこのタイトル素材をクリックすればカテゴリ記事一覧（僕の場合「ライフハック」等）へ飛べる、というふうに設定可能。
②title・・・中央に表示される文字を入力
③color・・・タイトル文字色を指定
④bgcolor・・・背景色を単色で指定するなら利用
⑤backgroud_image・・・背景色を写真にしたい場合に使用
※上でいう「カテゴリ名」という文言は消します。サブテキストです。
僕は写真背景ではなく単色としました。
カテゴリ名自体にリンクも付けていないので[title、color、bgcolor]の3箇所をさわっただけです。
例えばこんな感じになります。
色をサイトの基調色とそろえるだけで、もうぽいと思います。
小さいスマホ
これを先程の50％エリア内に貼ります。わかりやすく両方に貼りました。
すると見え方としては半分のサイズに自動的に修正されます。
カテゴリ名の完成です。
※スマホでも2列に見えるように便宜的に画像としてあります
【でもバナー作りがスムーズなのは画像編集ソフトです】
「バナー作成もできるよ」というのがAFFINGER5の便利な機能なのですが、もし画像編集を行える人は画像としてそれを作ると早いです。
僕も画像編集は好きな方なので最終は画像として作りました。フォントなども自由なものを選択できるのでメリットがあると思います。
画像編集に興味を持っている方へ、もしそれをやってみたい場合は「GIMP」(ギンプ）がオススメです。
無料でかなり本格的に使える画像編集ソフトです。ポッと出のものではなく20年以上の歴史がありその人気、そして安定度は非常に高いです。
３ 記事をブログカードとして設置
最終段階です。
カテゴリ名の下に記事を置いていきます。
手順「タグ」→「記事一覧/カード」→「ブログカード」→ 「参考」
以下コードが出力されます。
{st-card myclass="st-no-shadow" id="" label="参考" pc_height="" name="" bgcolor="#cccccc" color="#ffffff" fontawesome="fa-file-text-o" readmore="on" thumbnail="on" type="text"}
ユーザーに回遊してもらうために多くのブログで関連記事をオシャレに表示していますが、ワンボタンで表現が可能です。
さて記事中で使うのであればそのままでOKな雰囲気ですが、トップページに記事一覧として置くことを考えると少し編集をしたほうがよさそうです。
例えば記事毎に「続きを読む」ボタンは不要です。並んでいるとちょっとしつこいですからね。
同じ考え方でラベル（上だと””参考”と表示、リボンにもできる）も不要です。
今回のコードも設定できる部分がたくさんありカスタマイズが可能です。
| 引数 | 説明 |
| id | 投稿又は固定記事ID |
| color | ラベル文字色をHTMLカラーコードで指定 |
| bgcolor | ラベル背景色をHTMLカラーコードで指定 |
| label | ラベルに入れる文字（4文字程度） |
| name | 記事タイトルを変更したい場合 |
| fontawesome | 表示するフォントアイコン |
| pc_height | PC（パソコン）閲覧時のカードの高さを指定する属性 |
| readmore | 「続きを見る」ボタンを表示（例：readmore="on"） |
| type | ラベルタイプを変更（例： type="text"） |
僕が触った項目はこちら
| 引数 | 説明 |
| label | 消去（デフォルトだと”参考”と入っている） |
| pc_height | 185 |
| readmore | off |
| type | ラベルタイプを変更（例： type="text"） |
「続きを読む」やラベルを消して、あとはカードの高さを指定しました。
このカードの高さを指定しないとどうなるかというと、こうなります。
左は指定なしです。
左右の記事の大きさがずれるんですね。とても見栄えが悪いです。
これはPC画面上でのみ起こります。
スマホでは一直線に縦に並ぶのでこうは見えません。ただし1記事1記事が縦に長くなる、高さが不揃いになるので見栄えは悪いです。
【ブログカードの抜粋（記事説明文）の有無について】
カードの高さを指定しなくても抜粋（記事説明文）をOFFにすればタイトルだけになり、それは写真の高さで記事が全て揃います。
<方法>
「管理画面」→「AFFINGER5 管理」→「デザイン」→「抜粋設定」→「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れる
しかし抜粋表示をOFFにすると、いろいろな箇所で使われている記事中のブログカードもすべて抜粋（記事説明文）が消えてしまいます。それはちょっと寂しいんですよね。よって僕は高さを整えるという方法を選択してみました。これはこれでトップページのブログカードに抜粋が少し入るのでちょっと野暮ですが。一長一短ですね。
一応この現象が起こるのはPC閲覧時のみです。どのみちスマホ閲覧であればどこにあるブログカードもタイトルのみの表示になっています。
固定ページをホームページ（トップページ）に設定する
最後に以下設定を行います。
手順：外観 →カスタマイズ → ホームページ設定 → 固定ページを選択し、今回作ったページを選択
僕は作成ページのタイトルを「HOME」としたのでそれを選択。
これでブログのホーム、いわゆるトップページが今回作った固定ページとなります。
これにて編集完了です。
まとめ
今回トップページのレイアウトを変えてみました。
これによるユーザーの回遊の変化を分析できるのもブログの面白いところです。
※ちなみにもし良くない場合は簡単に戻せます
こういったかたちで試行錯誤しながらやっていこうと思います。
さてこうしてレイアウトを自由に組めることもそうですが、ブログによる発信作業はとてもおもしろいです。
そして自身の知識がかたちを持って資産としてこの世に存在していることがたいへんな満足感を生みます（ちょっと品質のことは置いておいて。。笑）
なのでブログ発信に興味を持たれた方に対しては、それを開始してみることをオススメします。
よかったら以下記事もチェックしてみてください。 9月で本ブログを開始して1.5年が経過しました。 ペースはかなりスローなほうですがまったりブログを続けています。 自身が興味を持ったものについて記事を書く。 するとそ ... 続きを見る
ブログを始めてみることはそこまでハードル高くないです。それは手元の操作的にも金銭的にもです。
※関連記事※
ブログの始め方まとめ【シンプルな５ステップ】
そして今回レイアウト変更手順を説明しましたがブログを支える屋台骨「WordPressテーマ」についてはAFFINGER5（アフィンガー5）をオススメします。
記事でも触れていますが、例えば簡単に見栄えの良いデザインが実装できます。それはスライドショー機能をはじめ他にもたくさんあります。
もしそれを0から作ろうと思うとかなりの労力と時間が必要です。
例えばお金をかけず無料のテーマだとまさにスライドショーの機能などはないです。自力で実装も可能ですが、それは思い描く効果のコードをググって探しては貼ってきて、さらにググっては貼ってと、結構な作業地獄になると思います。
過去に僕も別のサイト、そして本ブログも極々初期については無料のテーマで作業していました。今思うと無駄な時間でした。費用で見栄えは買えます。
それゆえ初心者の方にこそAFFINGERはオススメできます。
極端な話ですが最初からデザインについては中級者としてスタートできるようなイメージです。
※ただし一定の使い方の知識は必要です。まず最小限の数個だけから覚えましょう
機能を詳しく見てみる
今後もまたこういったブログについての記事も書いていこうと思います。
僕のブログではライフハックやコンパクトで有用なモノについての記事を書いています。気になる記事があれば是非チェックしてみてください。
【ライフハック】
【コンパクトなモノ】
