サイドバーって死んだの？ 〜STINGER5のスマホ表示をカスタマイズ〜
2014/12/29
こんにちは。
社会人1年目で現実の厳しさを知って参っているおーとえすと申しますw
仕事はウェブ関係ないし、ウェブとかアフィリエイトとかは完全に趣味で、
まあ素人に毛が生えた的な感じな人です。
そんで、最近は情報収集とかも全然できていないので、トレンドとか流れとか全然把握してないので的外れなことを言うかもしれませんが、
サイドバーって死んだんですか？
俺はあった方が良い気がする
スマホが普及してスマホ対応が騒がれ始めた中で、レスポンシブルとかまあ色々ありますけど、
サイドバーが完全に死んでしまっている様に思います。
パソコンでブログとかを見ていた自分からすると、
スマホで見た時にサイドバーがないのがすんごく不便です。
で、スマホっていうとアプリとかだとメニューが横からスッとスライドして表示してきたりするじゃないですか。
でも、ブログとかでは全然見ない。
この前、デザインがリニューアルされたMoxbitさんはデザインもオリジナルですごく凝っているのにサイドバーはスマホ表示ではないし、
「これ、記事読み終えた人はメニューから記事探しなおさなきゃいけないのかな？」って思いました。
参考：『Moxbit 4.5 GoldenEagle』へアップデート – Moxbit
それに、この前このブログもついにあのアフィリエイト界で噂？のSTINGER5のテンプレートを使うことにしたのですが、これもサイドバーはメインブロックとフッターの間に普通に表示されてるだけ。
しかも、この前たまたまツイッターで見たSTINGERの超ハイセンスなWordPressカスタマイズブログ30選でも、サイトバーがなんかこう良い感じになってるやつがない。
たらハコさんのメニューは自分が求めていたスマホらしいメニューだけど、サイドバーとは関係ない。
とりあえず、スマホだとサイドバーが表示されないからスマホ向けに広告表示は考えなきゃいけない、みたいな流れはあるようですけど、
これ、完全にサイドバー死んでますよね。
それで十分だからなんでしょうか？
自分は、サイドバーはサイドバーっぽい状態で残っていた方が良い気がします。
メニューはメニューでフッターと分かれていた方が当然分かりやすいし、パソコン表示の場合サイドバーって結構キーになったりするので、
何を表示させるかとか考えるじゃないですか。それなのにスマホではないがしろ過ぎる気がします。
STINGER5をカスタマイズしてサイドバーにザオラルを唱えてみた
そんな訳なので、スマホ表示向けにサイドバーを考えてみました。
そんで、STINGER5をカスタマイズして、スマホ表示時のサイドバーの表示をちょっと変更してみました。
jQueryやPHPもかなり適当にかじっている程度なので、自分の理想を完全には再現できませんでしたが、
あまり時間は取れないし、とりあえずこれで良いかなって感じです。
もし需要があればどなたかが良い感じにアレンジとかしてくれるだろうし、
そういうのがなければやはりサイドバーは死んでしまっていて、需要も対してないってだけの話です。
ザオラルが失敗したってだけの話ですw
作ってみたやつのデモ
今回、デモは別では用意していません。
このブログをスマホで見るか、ブラウザの幅を狭くしてF5で更新して下さい。
まあなんか、こんな感じです。
下の画像の、この右上の丸いやつをクリックするとサイドバーの中身が右からスライドしてきて表示されます。
×印とか、下のcloseボタンとか、本文エリアとかクリックすると戻ります。
設置方法
普通はプラグインとかにして簡単に設置できるようにするのかもですが、
プラグイン作ったことないし時間ないので、ちょっと面倒かもですがよろしくお願いしますw
Bootstrapのダウンロード
まず、今回はBootstrap 3のModalを使って実現しましたので、
そのデータをBootstrapの公式からダウンロードします。
既にBootstrapをお使いの方は必要ないですが、そうではない方は今回使う箇所だけを選択してダウンロードすると良いと思います。
今回使う箇所だけを選択してダウンロードする人はBootstrapのカスタマイズのとこで、
まず、「Less files」ってとこの右にある「Toggle all」をクリックして、項目のチェックを全て外して、
次に、「jQuery plugins」ってとこの「Toggle all」もクリックしてチェックを全て外した後、
以下の2つをクリックしてチェックを入れます。
- 「Linked to components」の「Modals」
- 「Magic」の「Transitions (required for any kind of animation) 」
そして、一番下まで行って、「Compile and Download」のボタンをクリックすると、該当箇所だけのスクリプトが手に入ります。
(フォルダやファイルは「Bootstrap」って名前ですが、該当箇所のコードしか書いてないです。)
(あと、CSSについては後述します)
javascriptをアップロード
自分のWordpressの管理画面に行って、「メディア」の「新規追加」で先程ダウンロードしたファイルのうち、「bootstrap.js」か「bootstrap.min.js」のどちらかを追加します。
Wordpressの管理画面からじゃなくて、普通にftpでアップロードしても良いです。
javascriptの読み込みと動作コード
次は「外観」の「テーマの編集」で「フッター (footer.php)」を編集します。
まあ場所はどこでも良いんですが、とりあえずフッターで。javascriptは最後の方で読み込んだ方が表示速度とかがね。
それで、例えば、
<?php wp_footer(); ?>
と
</body></html>
の間とかに以下のコードを貼り付けます。
<script src="(さっきアップロードしたbootstrap.jsのURL)"></script>
<script>
jQuery(document).ready(function($){
if( window.innerWidth < 780 ){
$modal_wrap =
'<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'
+'<div class="modal-dialog">'
+'<div class="modal-content">'
+'</div>'
+'</div>'
+'</div>';
$modal_header =
'<div class="modal-header">'
+' <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'
+' <h4 class="modal-title" id="myModalLabel">メニュー</h4>'
+'</div>';
$modal_footer =
'<div class="modal-footer">'
+' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
+'</div>';
$modal_button =
'<button type="button" class="modalbtn" data-toggle="modal" data-target="#myModal">'
+' <i class="fa fa-bars"></i>'
'</button>';
$("aside").wrap($modal_wrap).before($modal_header).after($modal_footer).wrap('<div class="modal-body"></div>');
$("nav").append($modal_button);
}
});
</script>
CSSの追加
最後に「外観」の「テーマの編集」で「スタイルシート (style.css)」に以下のコードを貼り付けます。
長いんですが、なんかファイルにしてダウンロード可にする場合ライセンスとかなんか絡んできそうな気がして、調べるの面倒でやめましたw
まあ、外部ファイルにする場合は自分で以下のコードをコピって保存して、アップロードして読み込んでください。
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #fff;
border-color: #ccc;
}
.btn-default .badge {
color: #fff;
background-color: #333;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}
.modal-open {
overflow: hidden;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(25%, 0);
-ms-transform: translate(25%, 0);
-o-transform: translate(25%, 0);
transform: translate(25%, 0);
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0 0 0 3em;
}
.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
/*border-radius: 6px;*/
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #000;
}
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
.modal-header {
min-height: 16.42857143px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
.clearfix:before,
.clearfix:after,
.modal-footer:before,
.modal-footer:after {
content: " ";
display: table;
}
.clearfix:after,
.modal-footer:after {
clear: both;
}
.modalbtn{
position: fixed;
top: 10px;
right: 10px;
border-radius: 30px;
border: 2px solid #000;
height: 27px;
width: 27px;
background: transparent;
outline: none;
opacity: 0.6;
}
.modalbtn:hover{
opacity: 1.0;
}
基本的にはbootstrapのやつのままで、該当箇所を抜き出してる感じです。
「.modal.fade .modal-dialog」をわずかに編集して、元は上からスライドして表示されるアニメーションだったのを右からスライドされる様に変更したのと、
「.modal-dialog」「@media (min-width: 768px) 」あたりのmarginを変更したくらいです。
あと、最後の「.modalbtn」は自分で適当に作ってます。
画面の右上に常に表示されるサイドバーを表示する時にクリックするところのスタイルです。
おわり
なんか、bootstrapとかもなんとなくしか分からないまま考えてたので色々つまづいたりして、
そういう事を色々書こうと思っていたんですが、なんか設置方法とか書いてたら面倒になったので気が向いたら書きますw
とりあえずそんな感じです。
適当に使っていただければと思います。
ちなみに、スマホで見る時はスクロールした時に最後まで行くと背景もスクロールされてしまうとか、細かいところはまだ色々改善の余地はあります。
まあなんにせよ、電車で移動中とかにスマホでブログ読んだりもするので、その時に「サイドバーがあって分かりやすい！」って思う機会が増えれば良いなと思います。
ではでは！
関連記事
-
-
cssの:hoverの色々な使い方
cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な …
-
-
blockquoteタグをCSSだけで格好良いデザインにする【画像不要】
こんにちは、面倒臭がりです。 自分は面倒臭がりなので、ちょっとデザインをいじりた …
-
-
暇潰しの為のアンテナサイト「6sec.」を少し更新しました
前に、「作成中のアンテナサイトがあって、アイディアだけ紹介しておきます。」みたい …
-
-
素人が考えるブログデザインの作り方「え？ もしかして時代遅れ？w」
時間は万能薬のデザインを少し変更しました！ その際、素人ながらに何を考えて、どう …
-
-
フッターの表示をjQueryでほんのちょっと格好良くしてみた
前に、Stocker.jp / diaryのページに行った時に「このサイトのフッ …
-
-
記事を読み終えた時に関連記事をさりげなくアピールするスクリプト
自分は、記事を読み終えた時にニョロっと出てくる関連記事とかが苦手です。スクロール …
-
-
アクセスが増えてきたのでブログデザインを改良しました
前回、素人が考えるブログデザインの作り方「え？ もしかして時代遅れ？w」という記 …
- PREV
- 部活のレギュラーなんてやりたくなかった