フリーランスの道具箱

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

ものくろぼっくす

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

有料テーマですが、各種カスタマイズが管理画面からできるので作業が楽です。サイドバーを右から左に移動するとかは、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]

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

広告

もっと
b. ブログで情報発信
について読む


この記事を書いた人 :

profile2016autumn

ブロガー・Web&Blogコーチ・親指シフトユーザー・orzレイアウト考案者。WordPressが得意。HTML・CSS・PHPも熟知し広範囲の知識を持つ。ブログは年間 1450記事を更新した経験も(2013年)。

誰でもインターネットを活用できる時代だから、頭でモヤモヤしている「こんなのを実現したいなぁ」を引き出して形にし実現させるお手伝い、そして、インターネットを上手に使えるようにサポートするのが得意です。

iPhoneやAndroidなどのガジェット、デジタルだけでなく文房具などのアナログなツールも大好きです。写真や旅を楽しむこと、おいしいお食事、楽しい・ワクワクすることが大好きです。

Twitterやfacebookでも情報発信中、よろしければフォローしてください。



Instagram
follow us in feedly

ご依頼・講座開催情報はこちら

ブログ・情報発信でお困りごと、モヤモヤ、解決。あなたのステップアップをサポートしています。

広告

情報発信コンサルティング・コーチ

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みは
お問い合わせフォーム
からお願いします。

うまく表示されない時は
こちらをご覧下さい。

お申し込みは
お問い合わせフォーム
からお願いします。

こちらの記事も役立ちます
follow us in feedly