ページ送りのカスタマイズ方法
ページ送りとは？
当アメブロではこの部分です。
記事の上と下にあり、各ページへのナビゲーションをしてくれます。
次のページや最初のページを含めて６記事までのリンクと、
現在表示しているページが表示されていますね。
同じブログ内へのリンクに関しては、
読者に効率良く読んで頂くために視認性を上げておく必要があります。
このリンクを上記のように枠で囲んであげると解りやすいですね！
今回はこのスタイルにする方法です。
では、ページ送りのカスタマイズ
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*ページ送り*/
page a{
text-align: center;
padding: 3px 7px;
border:1px solid #4682b4;/*枠の線の太さとスタイル、色を指定*/
}
.page .now{
text-align: center;
padding: 3px 7px;
border:1px dotted #4682b4;/*枠の線の太さとスタイル、色を指定*/
}
/*ページ送り・ここまで*/
↑↑↑この上まで↑↑↑
※上記タグのご説明
page a｛｝の部分がページ送りのリンク部分を指定しているタグです。
.page .now｛｝の部分がページ送りの現在のページのスタイルを指定しているタグです。
赤文字部分は、線の太さを指定しています。数字を変えると太さが変更できます。
青文字部分は、線のスタイルを指定しています。
お好みで、実線の『solid』や破線の『dotted』、点線の『dashed』に変更してみてください。
緑文字部分は、線の色を指定しています。
色に関してはこちらの記事を参照してください。
文字色を変更する
<< 関連記事 >>
サイドバーのリンクにリストマークをつけて分かりやすくする方法
『このブログの読者になる（チェック）』って必要ですか？
サイドバーのリストを見やすくするカスタマイズ
【ヘッダー製作】インテリアコーディネーター製作の途中報告
今回のご依頼者は、
インテリアコーディネーターで、
クラシカルなインテリアをメインにデザインされている
デコールという会社のオーナー『インテリアでＨａｐｐｙに♪ 』さんです。
アメブロヘッダーデザインのご要望として、
クラシカルなインテリアデザインをイメージ出来るような『デコールで作成した手書きのパース』や、
デザインの際に必須の『建設図面』などの画像をメインに表現する。
『デコール』で運営しているホームページやブログのデザインとは変えたものにしたい。※しかし、ブログの幅やカラム数、背景などは似たスタイルで。
などが挙げられました。
そこで僕がイメージしたものが、
クラシカルやモダンさを表現したデザイン。インテリアコーディネーターという職業をイメージさせるデザイン。それらをサンプル画像として提出してみました。
それがこちらの５枚です。
vol.1
モダンさやクラシカルさをデザインしたものです。
部屋の壁面をイメージしてみました。
・壁面の左側にブログタイトルやブログを説明する文章を配置。
・壁面の右側に額縁に入ったコーディネート後のサンプル写真を配置。
デコールさまのホームページやブログと同じように右上部に詳細情報を記載。
vol.2
vol.1のデザインと同じものですが、
床面にメニューリンクが置いてあるように配置したデザインです。
当初のご注文ではヘッダー画像のみでしたが、
「もしかしたら追加もあるかも…。」という事でしたので、
メニューリンクが入っているデザインもサンプルとしてご用意しました。
vol.3
vol.2を拡大したデザインです。
上部のブログタイトルやデコールの詳細情報用の白い部分をカットし、
シンプルにしたものです。
壁面左側の額縁に入った画像を拡大し、視認性とインパクトをアップさせました。
また、「私がデザインします。」と言っていそうな女性のシルエットも追加して、
親しみやすさもアップしたデザインです。
vol.4
このデザインがご依頼者さまのイメージしたデザインです。
薄っすらとぼやけた建設図面を背景にし、手書きのパース画像を数枚重ねて配置。
シンプルかつ、インパクトのあるデザインです。
vol.5
これは、デスクの上を表現しました。
・木目の背景に、手書きのパース画像や建設図面を配置。
・ペンやクリップ、付箋紙を追加。
インテリアコーディネーターという職業をイメージさせるデザインです。
※vol.5のデザインに関して、
A3サイズの建設図面に対してペンやクリップのサイズが大きすぎるという
凡ミスがありました（汗。修正済みです。
と、この５パターンをお送りし、ご依頼者さまとやり取りをさせて頂いている最中です。
この中から決まるかは分かりませんが、
製作が完了次第、当アメブロにて再度お知らせします。
ビフォア＆アフターをお楽しみに。
また、こちらのインテリアでＨａｐｐｙに ♪ さまの様に、
当方にアメブロのデザインをご依頼される方は、こちらからご注文ください。
【オリジナルデザインプラン】内容＆料金サイトマップ（目次）の重要性
つまり、新しい記事から古い記事へ順番に…、という風に。
ノートでいったら、ルーズリーフを使って上に上に重ねていくようなものです。
これは、ブログは元々日記として扱われていたからなのです。
新規で記事をアップすれば、トップページにどんどん記事が更新されてしまいますので、
過去に書いた『読んでほしい記事』が埋もれてしまいます。
日記であれば特に気にすることはないでしょう。
でも、アメブロをビジネスとしてお考えの方は、
時系列で更新していくブログとしてではなく、
ホームページ感覚でお使いになる事が必須！
つまり、過去に書いた『読者に読んで欲しい記事』に誘導させる必要があるのです。
その時に、サイトマップ（目次）の記事を書いておくと便利ですよ。
これも、『読者の導線』 になりますね。
当アメブロではこちらにあります。
このブログの目次【サイトマップ】
↑のように
記事にリンクを貼ることもできますし、
ヘッダーのメニューリンクにも設置することもできます。
もちろんサイドバーにも。
当アメブロは、
・ヘッダーのメニューリンク
・メッセージボード
・サイドバーのブログテーマ一覧
には常に設置されていて、読者の視認性を高めています。
また、不定期ですがサイトマップ（目次）の記事を更新していますので、
・最近の記事一覧
にもリンクがあります。
と、このようにさまざまな場所に設置できるので、
サイトマップ（目次）を１記事書いておくことをおすすめします。
ちなみに当アメブロでサイトマップのリンクを一番クリックされている場所は…、
ココ（→）です。
やはりすべての読者が一番最初に見る場所のクリック率が高いのです。
もし、
当アメブロのようにヘッダーにサイトマップのリンクを設置したい方は、
僕が作成と設置をしますよ！