2015年9月13日にブログデザインをリニューアルしました。利用しているWordPressのテーマはDigiPressさんのMAGJAMです。

• WordPressテーマ「MAGJAM」 | DigiPress

有料テーマですが、各種カスタマイズが管理画面からできるので作業が楽です。サイドバーを右から左に移動するとかは、1クリックでできてしまいます。

サイドバーはシンプルに（モバイルとPCの違い）

アクセス解析データを調べると、モバイルデバイスからの訪問比率が高くなっています。そうなると、PCの表示デザインもモバイルと近いシングルカラムのレイアウトの方が統一感があるブログにできます。

とはいえ、PCで表示されるときは横長のディスプレーになるので、シングルカラムだと、大きな空白が左右に生まれます。

PCで見たときはじっくり読んでもらえるチャンスと考え、視線の動きからすると、サイドバーを左にして、メインコンテンツを右に配置する方がいいと思いつきました。サイドバーにはたくさんの情報を表示するのではなく、エントリーの見出しを目次形式で表示する方が役に立つはずです。

PC表示のサイドバーの表示項目を減らしました

ごちゃごちゃいろんなことを表示しても、メインコンテンツの邪魔にしかならないのでは、と思い切って、サイドバーの表示をごっそり削りました。

サイドバーに表示したのは「プロフィール・見出しのリスト（目次）・検索窓」3つの情報のみです。

プロフィール

PC表示のプロフィールはDigiPressテーマ専用プラグインを利用しています。

またプロフィールの文字数も少なく変更し、プロフィール写真をSNSと統一しました。同時に、モバイル表示では記事タイトルの直下にプロフィール（これはHTMLで自分で組みました）を表示してみました。

見出しのリスト（目次）

見出しが自動でリストとなるTable of Contents Plusプラグインを使い、目次として表示しています。

• 記事の見出しごとに目次を作ってくれるプラグイン『Table of Contents Plus』が役立ちすぎて興奮！ | Tipstour → http://tipstour.net/wordpress/4601

サイドバーにこの目次リストを表示するといい感じというのは、こちらのサイトさんで実装されているのを見て気付きました。ありがとうございます。

• WorkFlowyでプロジェクトを進める → http://www.tjsg-kokoro.com/2015/09/06/workflowy-project/

Q2W3 Fixed Widgetプラグインにて追従スクロール表示にして「PC表示ではいつでも見れる」ようにしています。

• Q2W3 Fixed Widget – サイドバーのウィジェットをスクロール移動できるWordPressプラグイン – ネタワン → http://netaone.com/wp/q2w3-fixed-widget/

検索窓

2200エントリーを超えていまして、自分自身が検索機能をよく使います。なので、いつでも検索できるようにしました。これも追従スクロールするように設定しています。

フッターのレイアウトをゼロからリビルド

フッターに設置していたものくろキャンプ個別レッスン・お問い合わせフォームをフッター直前のコンテナエリアへ移動しました。

この領域のウィジェットは横に並ぶ設定がないのですが、テキストウィジェットの中で「float」を使って横に並べています。PC表示ですと、左にカレンダーのリスト、右にお問い合わせフォームが配置されていて、見やすくレイアウトを心がけています。

フッターは3カラムに

2カラムレイアウトから3カラムに変更して、フッター部分は情報を多めにしました。このフッターカラム数も管理画面からワンクリックで2カラム・3カラム・4カラムの中から選択して変更できます。

フッターには、24時間の人気記事リストとプロフィール、TwitterやfacebookのSNS投稿を埋め込みました。

• 埋め込みユーザータイムライン | Twitter Developers → https://dev.twitter.com/ja/web/embedded-timelines/user
• Page Plugin → https://developers.facebook.com/docs/plugins/page-plugin/
• Google+ バッジ | Google+ Platform | Google Developers → https://developers.google.com/+/web/badge/?hl=ja

設定したコードはこちら

PCのプロフィール

DigiPress専用ショートコードプラグインを使っています。

[html]
<div class="clearfix">
[[profile name="大東信仁（ものくろ）" authorurl="https://mono96.jp/?page_id=22544" profimgurl="https://mono96.jp/wp-content/uploads/2015/09/profile.jpg" profsize=90 topbgimgurl="https://mono96.jp/wp-content/uploads/2015/09/header.jpg" twitterurl="https://twitter.com/monochr" facebookurl="https://www.facebook.com/nbigeast" googleplusurl="https://plus.google.com/+NobhitoOohigashi/" youtubeurl="https://www.youtube.com/channel/UCgwnMPIAvjIneY2eiX8HiLw" pinteresturl="" hoverfx=1 class="fl-l" border=1]]
<p style="text-align:left;">
ブログ運営者の大東信仁（ものくろ）です。ものくろキャンプを中心にフリーランスで活動中。親指シフトユーザー・orzレイアウト作者。ニックネームはモノクローム写真が得意なことから。
</p>
<p>
<a href="https://mono96.jp/?page_id=22544">さらにく詳しいプロフィールはこちら</a>
</p>

[[/profile]]
</div>

[/html]

モバイルのプロフィール

HTML

[html]
<div style="width:100px;margin: 0 auto; " >
<img src="https://mono96.jp/wp-content/uploads/2015/09/profile.jpg" alt=”大東信仁 プロフィール写真” width="100px" class="mobi-profile"/>
</div>
<p style="text-align:left;font-size:small;margin-bottom:0px;padding-bottom: 0px;">
ブログ運営者の大東信仁（ものくろ）です。ものくろキャンプを中心にフリーランスで活動中。親指シフトユーザー・orzレイアウト作者。ニックネームはモノクローム写真が得意なことから。
</p>
<p style="text-align:center;font-size:small;margin-bottom:0px;padding-bottom: 5px;">
<a href="https://mono96.jp/?page_id=22544">さらに詳しいプロフィールはこちら</a>
</p>
<hr>
[/html]

CSS

[css]
.mobi-profile{
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;

}
[/css]

コンテナ下部のものくろキャンプの設定

[html]
<div style="float:left;width:480px;margin-left:60px;">
<ul>
<li>お一人、お一人に合わせた内容とペースで進めるレッスンにて好評です。</li>
<li>初めてお問い合わせされる方はかならず<a href="http://study314.jp/one-by-one" target="_blank">こちらをご覧ください。</a></li>
<li><a href="http://study314.jp/one-by-one" target="_blank">価格など詳しくはこちらをご覧ください。</a></li>
<li><a href="http://mono96.org/schedule/" target="_blank">うまく見えない場合はこちら</a></li>
</ul>

[[gcal id="25876"]]

<p>
○は、全日 予約可能日<br>
×は、予定ありのため、受付不可となる日<br>
△は、一部予定ありとなる日
</p>

</div>

<div style="float:right;width:480px;margin-right:60px;">

<h3>お問い合わせはこちらから</h3>

<p>
ものくろ担当の個別レッスン予約受付日はこのリストの通りとなります。お問い合わせフォームからレッスンのご希望内容と共にご連絡ください。1営業日以内にご返信いたします。</p>

[[contact-form-7 id="22937" title="Footer Form"]]

</div>
[/html]

もうひとつエントリーを読んでいかれませんか？

• ブログのデザインに正面から取り組む【宣言】 どうなりたいの？自分とは何？を見つめてデザインします。 | ものくろぼっくす
• 「視覚マーケティング実践講座 ブログデザインで自分ブランドを魅せる」絶版だけど、ブログのデザインを考えるのに役立つ凄い本 | ものくろぼっくす
• デザインを考えている今、参考にしている6つのサイトさん 私的な覚え書き | ものくろぼっくす
• DigiPressさん「Mature・el plano」共通-段落タグ 余白の調整方法- | ものくろぼっくす
• WordPressテーマ MAGJAM（DigiPress）にてfacebook OGPの写真がおかしいのを解決 | ものくろぼっくす
• 【DigiPressテーマ el plano 】リンク文字色はマウスだけで設定できます！ | ものくろぼっくす
• DigiPress 新テーマ -GRAPHIE- を導入ブログもスタートしました | ものくろぼっくす
• DigiPressシリーズ「el plano」を新ライセンスへアップデートした時、オリジナルなタイトル・ヘッダー画像を復元する方法 | ものくろぼっくす
• WordPress テーマ「COLORS」スライドショーの画像サイズを整えるCSSカスタマイズ | ものくろぼっくす
• 表示フォントを游ゴシック体を中心に変更しました。 | ものくろぼっくす