新着記事

2016.02.16 Tuesday

【コピペで簡単】JUGEMスマホ用テンプレート配布


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. 【コピペで簡単】JUGEMスマホ用テンプレート配布


数回に渡りJUGEMスマホテンプレートカスタマイズ講座をして参りましたが、いじり方はわかってもどうやってデザインしたらいいか思い悩む方も多いかと思います。

そこで、公式で配布しているテンプレートとは違った、ちょっと差がつく(?)テンプレートを配信します。
全てコピペで簡単。あとは指定しているところに自分のブログの情報を入れるだけです。


著作権表記だとかリンクだとかは一切いらないのでご自由にお使いください。
あ、でも「ここで配布してるテンプレート使ったよ〜」なんてのを記事にしてもらえると嬉しいです(笑)

一応TOPページのURLは
http://netcast.xyz/
ですよ〜……なんて書くと強制くさい。ほんとに強制じゃないんで、まじで。フリとかでもないですし、うん。

写真やイラストブログ向け


今回配布するテンプレートは写真やイラストをメインに掲載されているブログ向けのデザイン。

サムネと日付のみの表示でシンプルに。画像を引き立たせるデザインです。
サムネには記事の一番初めに掲載されたものが適用されるので、TOPのデザインを考えて投稿すると美しくなります。
サムネサイズは自動で縦横比を維持したまま縮小されるので、サイズを考えて投稿する必要はありません。

タブレットとか端末を横にした時はこんな感じ。


PCアイコンをタップするとPC表示に。
通常、スマホ表示に戻すにはキャッシュを削除するしかないのですが、
スマホからPC表示に切り替えた時、スマホ表示に戻したい
こちらの記事を参考にPC版テンプレートの方にスマホサイトに戻すためのリンクを入れ込んでおくといいかと思います。

人物のシルエットアイコンをタップするとプロフィールページに飛びます。

バーガーメニューをタップすると、ニュッとメニューが出現。


本文はこんな感じです。


アイコンは全てMaterial icons、webフォントもGoogl fonts使用ですので特に何かを設定したりする必要はありません。

使用するベーステンプレート


このテンプレート」に使用するベースのテンプレートはこちら。

右上に「¥」マークの付いている有料のものなら、どれでもかまいません。

テンプレートソース


以下のソースをスマホ用フリースペースの指定したエリアにコピペしてください。めっちゃ長いです。


フリースペース1(headタグ内)
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
<!--
#copyright {
background:#B0C4DE
}
.headBtn_pc {
display: none;
}
.nav-open {
position: absolute; top: 65px; right:20px;
z-index: 600;
}
li {
list-style: none;
}
#header a {
color: #000;
text-decoration: none;
font-size: 70%;
}
#gNav {
width: 100%;
position: absolute;
top: -300px;
z-index: 100;
transition: top 0.4s;
-webkit-transition: top 1s;
-moz-transition: top 1s;
padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px;
background:#B0C4DE;
}
#gNav:target {
top: 100px;
}
#navi_acc {
display: none;
}
#contents_area {
background-color: rgba(255,255,255,0.0);
}
p{
font-family: 'Yanone Kaffeesatz', sans-serif;
}
.box_title {
display: none;
}
.box_time {
position: absolute;
bottom: 15px;
left: 5px;
background: #000;
background: rgba(0,0,0,0.3);
width: 90px;
padding: 0.1em 0;
}
#contents_area p{
color:#ffffff;
text-decoration: none;
}
body {
background-color: #B0C4DE;
}
.box {
background: #FFF;
border: 0px #C0C0C0 solid;
font-size: 5px;
line-height: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 2px 2px 2px #A9A9A9;
}
.headbar {display:none;
}
p.photo_album_link_header {
display: none;
}
p.photo_album_link_footer {
display: none;
}
.jugem_recommend_wrap {
display: none;
}
.jugem_search_wrap {
display: none;
}
body {
background-image:none;
}
.title {
display: none;
}
.title_txt {
display: none;
}
.box h2 {
text-indent: 0px;
background-image:none;
}
.entry_title_link {
text-indent: 0px;
background-image:none;
}
.box {
margin: 3px 0;
padding: 5px;
width: 90px;
word-wrap: break-word;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
div.title_001 {
background: #B0C4DE; width:100%;
padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:5px;
position: relative;
z-index: 500;
}
.full_pager_link {
background: #FFF;
line-height: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 2px 2px 2px #A9A9A9;
width: 80%;
margin-left : auto;
margin-right : auto;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
.related_entry {
background: #FFF;
line-height: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 2px 2px 2px #A9A9A9;
width: 80%;
margin-left : auto;
margin-right : auto;
}
.entry_wrapper {
background: #FFF;
line-height: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 2px 2px 2px #A9A9A9;
width: 80%;
margin-left : auto;
margin-right : auto;
}
.comment_wrapper {
background: #FFF;
line-height: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 2px 2px 2px #A9A9A9;
width: 80%;
margin-left : auto;
margin-right : auto;
}
.entry_link {
background: #FFF;
line-height: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 2px 2px 2px #A9A9A9;
width: 80%;
margin-left : auto;
margin-right : auto;
}
-->
</style>


フリースペース2
<div class="title_001"><p>
<span style="font-size:50px;">
<a href="ブログURL" style="text-decoration:none;">ブログタイトル</a>
</span><br>
<span style="font-size:20px;">ブログサブタイトル</span>
</p></div>
<div id="page">
<header id="header">
<p class="nav-open">
<a href="#gNav"><i class="material-icons">&#xE5D2;</i></a></p>
<nav id="gNav">
<p><span style="font-size:30px;">MENU</span></p>
<p><span style="font-size:15px;">Category</span></p>
<ul>
<li><a href="カテゴリ1URL">カテゴリ名1</a></li>
<li><a href="カテゴリ2URL">カテゴリ名2</a></li>
<li><a href="カテゴリ3URL">カテゴリ名3</a></li>
<li><a href="カテゴリ4URL">カテゴリ名4</a></li>
<li><a href="カテゴリ5URL">カテゴリ名5</a></li>
<li><a href="カテゴリ6URL">カテゴリ名6</a></li>
</ul>

<div class="nav-close"><p><a href="#page">× CLOSE</a></p></div>
</nav>
</header>
</div><div style="position: absolute; top: 65px; right:50px;z-index: 550;">
<a href="プロフィールURL" style="text-decoration:none;"><i class="material-icons md-24">&#xE7FD;</i></a></div>
<div style="position: absolute; top: 65px; right:80px;z-index: 550;"><a href="javascript:pcview_on();" style="text-decoration: underline;font-size: 12px;line-height:24px;" style="text-decoration:none;"><i class="material-icons">&#xE30C;</i></a>
</div>


ブログURL、ブログタイトル、ブログサブタイトル部分をご自身のブログに合わせて記入してください。
太字で大きくなっている部分はメニュー部分。
メニューを増やす時は太字部分をコピーしての後にペースト。
「Category」の部分をメニューのタイトルに変更。
逆にカテゴリが多すぎるから削除したい!という場合は
<li><a href="カテゴリURL">カテゴリ名</a></li>
のように、<li>〜</li>までを削除します。

これでテンプレが適用されるはずですが、もしできないよ!という場合はコメントください。


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント

コメントする