ごった煮

日々ごった煮のようにあふれる情報の中から、面白そうなものをいろいろ書き連ねるブログです

ブログを回遊しやすくするためのデザイン変更、仮完成しました

f:id:HINOmao:20171005075856p:plain

今日はちょっとブロガー向けの記事。

 

 

当ブログ、記事数が200を超えたにも関わらず最近までデザイン面で何も手を付けていませんでした。

 

なので、今頃になってですが当ブログ記事を回遊しやすくするための仕組みづくりを進めています。

 

そのデザイン変更に数日かかってしまいましたが、このたび仮完成いたしました。

 

1.関連記事の表示

まず行ったのはブログのサイドバーや記事下の関連記事や人気記事の表示。

 

サイドバーの最新記事と注目記事の表示ははてなブログ側が用意してくれていました。

 

 

まずは画面右上、「ダッシュボード」の右側にあるアイコンとともに表示されている自分のID名をクリック。

 

すると一番上に自分のブログが出てきますので、カーソルを当てて出てくるメニューから「デザイン」>左端に並んでいるアイコンからペンチのような絵が書かれた「カスタマイズ」の順に選択していきます。

 

さらに左端にいろいろ項目が並びますので、そこから「サイドバー」をクリック。

f:id:HINOmao:20171005080411p:plain

 

今自分のブログのサイドバーに現在表示されている項目が色々並んでいますので、ここで一番下にある「+モジュールを追加」をクリック。

f:id:HINOmao:20171005080517p:plain

 

追加モジュールの項目の中に「最新記事」と「注目記事」がありますので、いずれかの項目をクリックしていきます。

f:id:HINOmao:20171002060047p:plain

 

するとモジュールの編集ができる画面に遷移しますので、タイトルや表示件数をお好みで設定していきます。

 

私はどちらも5件ずつ表示させるようにしています。

 

f:id:HINOmao:20171005071102p:plain

あと、投稿日時が見えるよう、一番下にある「投稿日時を表示する」にチェックを入れています。

 

 

そして適用をクリックすると・・・サイドバーに最新記事や注目記事が載るようになりました!

 

ちなみに「最新記事」「注目記事」どちらもやり方は一緒です。

 

 

もう一つ、記事下の関連記事の表示ですが、今回はGoogleアドセンスが用意してくれた関連コンテンツユニットを追加しています。

 

これはブログのコンテンツ数やPV数が増えてアドセンス側の条件を満たしたらと新しく追加される、シムシティで言うプレゼントのようなもの。

 

アクセス数が少ない段階では関連コンテンツユニットは設置できないんですね。

 

 

こちらはアドセンスページにある左端のメニューから「広告の設定」を選び、「+新しい広告ユニット」をクリック。

f:id:HINOmao:20171005080651p:plain

 

 

次に作成する広告の種類一覧の左から二番目に「関連コンテンツ」がありますので、こちらを選択。

 

f:id:HINOmao:20171005072940p:plain

すると広告ユニットがカスタマイズできるようになりますので、広告ユニット名を入力し、スタイルとサイズを決めます。

 

f:id:HINOmao:20171005073758p:plain

私はスタイルはデフォルトのままで、サイズはひとまず横889*縦400ドットで横に4記事を縦に2段、合計8記事並べるようにしました。

 

ちなみに、サイズを入力するとすぐにプレビューできる優しい設計になっています。

 

満足行くユニットが作れたら「保存してコードを取得」を選択、得られたコードを表示したいところにコピペするだけ。

f:id:HINOmao:20171005073640p:plain

関連コンテンツには広告も配置できるんですが、私は回遊してほしいのでここには広告を配置していません。

 

f:id:HINOmao:20171005080150p:plain

実際に見てみたところ、アイキャッチ画像が不一致な記事やらいろんな不具合が散見できますね。

 

これも直さないといけません。

 

2.グローバルメニューの設置

次に行ったのはブログのタイトルの下にカテゴリを表示したこと。

 

ってことで、ブログのタイトルの下のカテゴリの並び(グローバルメニューといいます)を作ってみることにしました。

 

 

今回は手っ取り早くCSSを作りたいがために「Easy CSS Menu」というソフトのフリー版をインストール。

 

www.easycssmenu.com

「Free Download」を選択してソフトをインストールしました。

 

有料版もあるんですが、無料版でも十分にデザインが作れます。

 

日本語版はないので英語をなんとか日本語訳にしつつも使うこと約30分。

   

f:id:HINOmao:20171004212117p:plain

私にデザインセンスが絶望的にないのはおいといて、暫定的に配置したのが上の画像。

 

 

フォントの色の関係で背景画像と色が重なってしまい見づらくなってしまったことから背景画像をすっぱりと削除しました。

 

 

あとはカテゴリを大整頓して現状二行になってしまっているメニュー群を一行に収められるようにしないといけないですね。

 

 

・・・一晩眠り、再度作ったのがこちらのデザイン。

 

f:id:HINOmao:20171005075328p:plain

やはりデザインセンスが絶望的にないのはおいといて、これでメニュー群が一行で収まるようになりました!!

 

 

次に行わないといけないこと

・スマホ向けのデザイン変更(関連コンテンツユニットとグローバルメニュー)

・Twitterのフォローボタンと読者ボタンを大型化

・全記事のカテゴリの大整頓

・アイキャッチ画像を追加

 

まだまだ先はうんと長そうですね。

 

最後までお読みいただきありがとうございます。