ものくろぼっくすのデザインを変更 サイドバーをシンプルに左に移動しました。-DigiPress MAGJAM-

この記事で紹介しているテーマは、100%GPLではないテーマです。WordPressコミュニティは、100%GPLライセンスを推奨しています。私も、現在は100%GPLライセンスのテーマのみを推奨しています。100%GPLテーマの記事はこちらです。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

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

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

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

検索窓

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

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

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

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

フッターは3カラムに

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

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

設定したコードはこちら

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]

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

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告