WordPressオリジナルテーマ「Cider for 部長ナビ」、PC版の特徴を紹介!

Cider

Cider

こんにちは。部長ナビ(@nabi_1080)です

Ciderを公開してから、すでに6時間が経とうとしておりますが、皆さん、ご覧いただけたでしょうか?

この記事では、新しい部長ナビのページのテーマである「Cider for 部長ナビ」のPC版の特徴についてお伝えしていきます

トップページ上部

スクリーンショット 2016-12-18 17.21.42

↑まずは、トップページの上部から

一番上のラインは、よーたくんの提案で「部長ナビの情熱の赤」にしてもらいました。僕も、赤、大好きなんで、最高です

左上にはタイトルロゴである「アーティロゴ」が、なんという偶然、部長ナビの文字も同じ赤なんです!

右に行くと、追従で付いてくる検索ボックスが!すでにコレ、大好評!メッチャかわいくて、検索しやすいのだ!

左のサイドメニューはいつもの「カテゴリメニュー」が並びます。好きな主要カテゴリにいつでもアクセス!

そして、前テーマでも使用していた、「主要カテゴリ新着記事」を、完全よーたくんオリジナルで作り直してもらい、見てのとおり「横スクロール」になりました!スゲー!

当然、情熱の赤を採用です!

トップページ、記事一覧

スクリーンショット 2016-12-18 17.22.09

続いて、記事一覧

新着記事は、分かりやすく「」が付いています。日付の下にタイトル、左側がアイキャッチの縦に並ぶ、いわゆる「リスト型」というタイプです

このタイプは最近では少なくなってきているかもしれませんが「左が常にアイキャッチ」「右が常にタイトル」という誰にでも分かりやすい「ユニバーサルデザイン」でもあると思い、コレを採用しております

なお、文字のフォントは「San Francisco」というモノを採用しており、コレもよーたくんの思いが詰まっています

この「San Francisco」は、iPhone、iPad、Macで見たときに表示されるシステムフォントと呼ばれるモノだそうです。即ち、iPhone、iPad、Macから見たときに最も美しく、見やすい表示になると言うことです

ぜひ、iPhone、iPad、Macでご覧下さい!(DOして下さいという意味では、決してありません。ええ。DO it Yourself

ちょっと、いつもと違った見た目の文字ですが、最高に見やすく、このフォントを見ると「部長ナビだ」と思ってもらえるようにこれからもブログ、頑張りたいと思います

フッター

スクリーンショット 2016-12-18 17.22.30

フッターはかなり相談して決めました

色々と前テーマでは採用しておりましたが、シンプルに「モバイルと同じ」表示にしました

自己紹介、ブログ紹介、問い合わせ、カテゴリ一覧とアクセスの多い内容だけに絞り、他は削除しました。とてもスッキリして、見やすく、かつ、必要な情報にアクセスできると思っています

個別記事ページ・Top

スクリーンショット 2016-12-18 17.22.58

個別記事ページでは、Top左上に「HOMEからのカテゴリ階層」、その下にタイトル、左下に日付、右下に「メインカテゴリ」が表示されています

そして、アイキャッチ画像になる1枚目の画像がやってきます

非常に洗練された、無駄の無いデザインだと思いますが、いかがでしょうか?

個別記事ページ・本文

スクリーンショット 2016-12-18 17.23.19

San Franciscoの美しいフォントで表示される本文は見やすく、すらすら読めると思います

リンクは目に優しい青色、そして、H2タグは上下の線と今まで通りとしました

色の統一感を出すために、H5の緑のタイトルタグは廃止し、黒の下線だけとシンプルにしてみました。

改行幅も絶妙で見やすく、文字の大きさもとてもナイスです

何より、San Franciscoのフォントが素晴らしいですね

個別記事ページ・シェアボックス / フォローボックス

スクリーンショット 2016-12-18 17.23.34

シェアボタンは、Twitter、Facebook、Pocketに加え、「LINEで送る」を入れてみました。コレもよーたくんのアイディアです

モバイルファーストのテーマならではのボタンでは無いでしょうか?

Facebookページの「いいね!」ボックスは横が広がり、見やすくなりました。画像の縦横幅もちゃんと保持されたまま切り取られているので、見やすいですね

フォローボックスは今まで通り

その下に、「タグ」がありますが、これが見やすくなりました。なお、左端に「雑談」という「カテゴリ名」がありますが、コレは、今後調整していく予定です

関連記事

スクリーンショット 2016-12-18 17.23.48

関連記事はタイル式で6個。PCでは動きません

同カテゴリの記事が並びますので、もう1記事、いかがですか?

ランキング

スクリーンショット 2016-12-18 17.24.10

部長ナビのページには欠かせない「デイリーランキング」ですが、10位まで表示しています

左上に情熱の赤い数字がありますので、各記事が1位を狙い、日々頑張っているところですね。応援しましょう!

ランキングは横スクロールせず、縦に10個並べました。最下部なので、それほど気にならないだろうという提案でした!

カテゴリページ

スクリーンショット 2016-12-18 17.25.00

左メニューをクリックするとカテゴリページに行きます

コレはiPhoneのページですが、上にカテゴリのアイキャッチと説明

子カテゴリの絞り込み、そして、最新記事と並びます

カテゴリページもアクセスが多いので、非常に見やすく、使いやすい形に作ってもらいました

検索ボックスから検索すると・・・

スクリーンショット 2016-12-18 17.25.43

コレ、見て下さい

スゴいよね。検索の最初のアイキャッチが上にも表示されて、何件検索に引っかかったか出るんですね

素晴らしい・・・

とにかく、素晴らしいんです、このテーマ。ヤバいッスよ

Amazonリンク

スクリーンショット 2016-12-18 17.26.34

Amazonリンクもオリジナルデザインでカッコいい〜

たまりませんね

まとめ

イヤー、記事を書く手も捗るってもんだい!

最高だね!Cider!

ぜひ、あなたも色々アクセスしてみて、このテーマの素晴らしさに触れて下さいね!

次回はモバイル編!このテーマのメインである「モバイルファースト」のデザインが炸裂しますぞ!おたのしみに!

この記事が気に入ったら
いいね!しよう

For You

オススメ記事

Related

関連記事

About

書いてる人

Ranking

本日の人気記事