新着記事

2016.02.17 Wednesday

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


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


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

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


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

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

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


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

画像を大きく表示して引き立たせるデザインです。

が、

いろいろ制約があるのでちょっと使いにくいかもしれない。

使いにくいポイント達。



まずブログの説明文。長すぎると右にあるSNS共有ボタンが改行されていきます。
……が!

改行分は表示されないトラップつき!!

お気をつけください。

もうひとつ使いにくいポイント。
日付のみ画像に重なっていますが、

記事タイトルが長すぎるとこんな感じで日付がかぶってきます。
タイトルも短めに。

さらに使いにくいポイント。
サムネサイズは横300px、縦170pxに自動で縮小されるので、サイズを考えて投稿する必要があります!!!


縦長の画像表示したらこんなんなっちゃう。

と、いうのも全て同じサイズで表示させるためにやらかしたことなのですが、これ別にサイズバラバラでいいのでそのままのサイズ比で投稿させてください。って方にも設定はできるようにしてるのでご安心ください。
サムネには記事の一番初めに掲載されたものが適用されるので、TOPのデザインを考えて投稿すると美しくなります。

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


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

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


タイトルロゴとメニューのあるヘッダーはスクロールしても追尾します。


本文はこんな感じです。



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

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


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

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

テンプレートソース


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

フリースペース1(headタグ内)

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
<!--
.jgm_entry_desc_mark {
line-height: 150%;
}
div.sns_link {
position: absolute; top: 50px; right:25px;
text-align: right;
}
body {
font-family: 'Noto Sans Japanese', serif;
}
.noto900 {font-weight:900;}
div.sns_link {
position: absolute; top: 50px; right:25px;
text-align: right;
}
.image_area a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
.box_title a {
text-decoration:none;
}
.box_time {
position: absolute;
bottom: 30px;
left: 5px;
width: 100px;
padding: 0.5em ;
}
.box img{
border: 0px solid #000;
width: 100%;
height: 170px;
float:left;
margin-right:10px;
}
#navi_acc {
display: none;
}
div.title_001 {
background: #ffffff; width:100%;
padding: 9px 0px 8px 5px;
position: fixed; top: 0px; right:10px;
text-align: right;
z-index: 550;
}
#copyright {
background:#ffffff
}
.headBtn_pc {
display: none;
}
#wrapper {
overflow: hidden;
min-width: 320px;
height: auto;
padding: 0;
}
.contents {
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
}
#navTgl:checked ~ .contents {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
#navTgl {
display: none;
overflow: hidden;
}
label {
cursor: pointer;
position: fixed;
top: 0;
left: 0;
}
.open {
z-index: 650;
width: 50px;
height: 47px;
color: #000000;
background-color: #ffffff;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-transition: background-color .6s, -webkit-transform .6s;
transition: background-color .6s, transform .6s;
}
#navTgl:checked + .open {
background-color: #ffffff;
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.close {
pointer-events: none;
z-index: 600;
width: 100%;
height: 100%;
transition: background-color .6s;
}
.menu {
z-index: 600;
position: fixed;
overflow: auto;
top: 0;
left: 0;
width: 230px;
height: 100%;
padding: 10px;
background-color: rgba(0,0,0,1.0);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
}
#navTgl:checked ~ .menu {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu h2,
.menu li a {
color: white;
}
.menu h2 {
text-align: center;
}
.menu ul,
header nav ul {
padding: 0;
}
.menu li {
border-bottom: 1px solid rgba(255,255,255,.6);
font-size: .8em;
line-height: 1.4;
}
.menu li:first-child {
border-top: 1px solid rgba(255,255,255,.6);
}
.menu li a,
header nav li a {
display: block;
padding: 1em 2em;
text-decoration: none;
transition: background-color .6s;
}
.menu li a:hover {
background-color: black;
}
p{
font-family: 'Sigmar One', cursive;
}
h2{
font-family: 'Sigmar One', cursive;
}
#contents_area p{
color:#ffffff;
text-decoration: none;
}
body {
background-color: #ffffff;
}
.box {
background: #FFF;
border: 1px #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: 300px;
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); }
.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>


サムネサイズの縦横比を自動で揃えたい方は、赤字の
height: 170px;
のところを削除してください。

フリースペース2
<div style="height: 70px;">
</div>
<div class="title_001">
<p><span style="font-size:20px;">
<a href="ブログURL" style="text-decoration:none;"><i class="material-icons">&#xE839;</i>BLOG TITLE</a> 
</span></p></div>
<div style="position: fixed; top: 13px; left:50px;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>
<div id="wrapper">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">≡</label>
<label for="navTgl" class="close"></label>
<nav class="menu">
<h2>MENU</h2>
<ul>
<li><a href="コンテンツURL">コンテンツ1</a></li>
<li><a href="コンテンツURL">コンテンツ2</a></li>
<li><a href="コンテンツURL">コンテンツ3</a></li>
<li><a href="コンテンツURL">コンテンツ4</a></li>
<li><a href="コンテンツURL">コンテンツ5</a></li>
</ul>

</nav>
</div>
<div class="sns_link">
<span style="font-size:20%;">説明文(長くなるとデザインが崩れるので簡潔に)</span>
<a class="sc-twitter" href="http://twitter.com/share?url=[投稿したいURL]&text=[投稿したいタイトル]&via=[ユーザー名]&related=[関連したアカウント]" title="Tweet This" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-twitter-square"></i></a> <a class="sc-facebook" href="http://www.facebook.com/sharer.php?u=[投稿したいURL]&t=[投稿したいタイトル]" title="Send to Facebook" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-facebook-square"></i></a></div>


赤字になっている部分をご自身のブログに合わせて記入してください。

太字で大きくなっている部分はメニュー部分。
メニューを増やす時は太字部分をコピーして</ul>の後にペースト。
「MENU」の部分をメニューのタイトルに変更。
逆にコンテンツが多すぎるから削除したい!という場合は
<li><a href="コンテンツURL">コンテンツ名</a></li>
のように、<li>〜</li>までを削除します。

太字で斜体になっている部分はツイッターとフェイスブックの共有ボタン設定。上3つがツイッターの設定で下2つがフェイスブックの設定です。それぞれ自分のブログのURLやタイトルを入れてください。
またツイッターの設定では自分のアカウントを入れることもできます。

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


シェアする


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

コメントする