テンプレート

JUGEMテンプレート「Simplicity」

screenshot-Simplicity

仕様

ページ上部に最新記事の画像が表示されるスライダーを設置してます。
IE8からでも閲覧可能ですが、スライダーのキャプション(日付、タイトルなど)が表示されません。
レスポンシブ対応です。タブレット、スマホからでもご覧頂けます。
メニュー、SNSリンクは各自設定して頂くと機能します。
LoveボタンはjQueryスクリプトが重複するため導入してません。

不具合

スライダーにおいて、ディスプレイサイズが変更されたときスムーズにデザインが最適化されません。
その場合は、お手数ですが更新ボタンを押して下さい。

動作確認

OS / デバイス: Windows10 / iPhone6
system-requirement

表示サンプル

各タグの表示サンプルはこちら。どのテンプレートもだいたい同じです。
当テンプレートで使える独自クラスはこちら

利用規約

.スタマイズはご自由にどうぞ。
個人、商用共にお使い頂けます。
サポートは時間の許す限り対応させて頂きます。
 ただし、○○を作って欲しいなどのご依頼、自己都合による質問等はご遠慮願います。
づテンプレートは、個人の趣味で制作したものです。
 テンプレートを利用したことによるトラブルや損失、損害に対して一切の責任を負い兼ねます。

カスタマイズ

使っている色

名前 主な用途
フォントカラー #333333 body
ベースカラー1 #ffffff body
ベースカラー2 #fafafa icon-nav
メインカラー #cc8f7a a
サブカラー #999999 a:hover
アクセントカラー #665752 footer

CSS編集でWinではCtrl+F、Macでは⌘ command + Fを使い該当部分を変更して下さい。

No image画像の変更

CSS編集でサイト内検索機能を使い「.no-image」と検索。

#slider .sp-slides .sp-slide .no-image {
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 40px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  background-image: url(http://img-cdn.jg.jugem.jp/0a8/3540663/20160823_230127.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: table;
}

URLをお好きな画像に変更して下さい。
サイズはサンプルでは1200×800を使ってます。

-

スポンサーサイト

  • Hatena Bookmark

Comments

  • そら
  • 2016/11/24 14:09
初めましてHNそらと申します。
このテンプレートを使用させて頂きたいのですが少しカスタマイズさせて頂きます。
コメント欄とトラックバックは受け付けない仕様にしたいのですが、どの部分を削除すればいいのかが分からないので教えて頂けないでしょうか。
お手数をおかけしますが宜しくお願いします。
初めまして。
当テンプレートのご利用ありがとうございます。

コメント及びトラックバック欄の受付設定ですが、記事を投稿する際に設定できるようです。
http://faq-jugem.jugem.jp/?eid=61
こうするとコメント欄とトラックバック欄は非表示になりますが、トップページにあるアイコンと数字は残ってしまうので、これを非表示向けにする方法をお教えします。
サイト内検索機能を使い「post-feedbacks」と検索します。
<ul class="post-feedobacks">
<li class="post-comments"><a href="./?eid={entryarea_id}#comments"><span class="icon ion-chatbox"></span> {comment_num_only}</a></li>
<li class="post-trackbacks"><a href="./?eid={entryarea_id}#trackbacks"><span class="icon ion-loop"></span> {trackback_num_only}</a></li>
</ul>
が該当部分なのですがこれを削除すると、空白になってしまいデザイン的によろしくないので
<ul class="post-feedobacks">
<li class="post-comments"><del><span class="icon ion-chatbox"></span> {comment_num_only}</del></li>
<li class="post-trackbacks"><del><span class="icon ion-loop"></span> {trackback_num_only}</del></li>
</ul>
アンカーを消して<del>〜</del>で囲み打消し線にするかもしくは、
<ul class="post-feedobacks">
<li>コメントは受け付けてません</li>
</ul>
と表記するのがお勧めです。
お手数をかけますが、よろしくお願い致します。
  • そら
  • 2016/11/25 14:08
つい様
わかりやすいご説明ありがとう御座いました。
助かりました。
ほんとに申し訳ないのですがもう一つ教えて頂きたいのですが
記事の本文の行の間隔をもう少し縮めるにはどうすればいいのでしょうか?
初歩的な質問で申し訳ありません。
宜しくお願いします。
そら様

おはようございます。
無事できたようで良かったです。
文字の行間はCSS編集フォームにて上部にあります
body {
color: #333333;
font-size: 14px;
font-size: 1.4rem;
font-family: "Ubuntu", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
line-height: 1.8;
background-color: #ffffff;
word-wrap: break-word;
}
の「line-height: 1.8;」が行間の設定になります。
数字の部分を変更してお好みの行間に調節して下さい。単位はなくて構いません。
よろしくお願い致します。
  • そら
  • 2016/11/26 08:31
つい様
ありがとう御座いました。
私はMac OS X ,Safari 1920px×1200pxという環境なのですが
ご指示頂いたように数値を変えても変化がありませんでした。
1,8は丁度良い間隔のはずなのですが私の環境から見ると少し広すぎなのです。
単位をフォントと同じ単位、1,8pxか1.8remにすると今ここで見てる行間になるのですが
右のCategories,Archivesの部分が詰まりすぎて黒つぶれ状態になってしまいます。
なので最初の「line-height: 1.8;」にしておくことにします。
何度もありがとう御座いました。

そら様

調べてみたところどうやらSafariだと単位が必要になるらしいですね・・・
私も知識不足になります。お手数お掛けしました。
記事本文のみ行間を詰めたいのであれば、CSS編集フォームにて「.post-content 」と検索し
.post-content {
margin: 0 0 1.429em;
margin: 0 0 2rem;
}
の部分に「line-height: 1.8rem;」と追記して下さい。
remはSafariバージョン5から対応しているので有効な単位だと思います。
念のためお答えしておきます。よろしくお願い致します。
  • そら
  • 2016/11/26 14:26
つい様
お調べ下さりありがとう御座いました。
ご指示下さった通りにしたのですが変わりませんでしたので
試しに単位を1.8pxにしてみたら行間が狭まりました。
Safariのバージョンは9.1.3 (11601.7.8)です。
お手数をおかけしてしまい申し訳ありませんでした。
センスの良いテンプレートに巡りあえて嬉しいです。
ありがとうございました。
そら様

こちらこそ何度もすみません。
行間の単位にpxはあまり好ましくないのですが、remが利かないのであれば致し方ありませんね・・・
もしくは、数字が大きい?のかしら。
絶対単位であるpxで指定すると、ブラウザ側の設定で文字の大きさを変えたとしても、行間が変わらないという問題が発生するので、「em」のほうがいいかもしれません。
Safari持ってなく確認しようがないので、ご不便お掛けして申し訳ありません。
また何か質問ありましたら、お気軽にコメント下さい。
こちらこそありがとうございました。
  • Rena
  • 2016/12/05 15:32
つい様

初めまして、コメント失礼致します。
JUGEMブログのユーザーテンプレートからこちらにたどり着きました。
すごく使いやすく、デザインも私の理想のテンプレートだったので、こちらを使用させていただきました。
素敵なテンプレートをありがとうございました。
Rena様

初めまして。
当テンプレートのご利用ありがとうございます。
こうやってご報告頂けると励みになります。
質問等ありましたら、お気軽にコメント頂けると幸いです。
今後ともよろしくお願い致します。
  • haru
  • 2017/01/02 20:02
はじめまして。
素敵なテンプレートをありがとうございます。
一つだけお聞きしたいのですが、ページ上部に表示される画像は記事の一番最初の画像でしょうか?
わたしは全部の記事に画像を乗せているのですが、いくつか表示されません。
原因がわかりましたら、教えていただけると幸いです。
初めまして。こんばんは。
テンプレートをご利用頂きありがとうございます。

画像が表示されない原因を解明したところ、画像を抽出するまでの文字数がオーバーしたためだと思います。
詳しく調べてみると、pタグから本文そしてimgタグを含めた200字前後の文字から画像タグを出力することが分かりました。
これは私の調査不足です。申し訳ありませんでした。
確実に画像を表示したいのであれば、本文よりも先に画像を持ってくるまたは、
<img src="画像URL" alt="代替テキスト" style="display:none">
と先頭の画像タグに「style="display:none"」と表記したものを記述し本文を書き始めるのが安心だと考えます。
style="display:none"とは、本文中の画像を非表示にするCSSになります。
スライダーに表示されるのは最新記事10件になりますので、お手数を掛けますが表示されない分は修正して頂くか
もしくは、今後は改めて投稿するのがよろしいかと思います。

お手を煩わせる形になってしまい申し訳ありません。よろしくお願い致します。
  • haru
  • 2017/01/03 23:30
色々と調べてくださりありがとうございました。
早速、教えていただいた通りにやってみたところ、全ての画像が表示されました。
また、教えていただいたタグを使うと好きな画像が表示でき、非常に満足しております。
年始の忙しい時期に、迅速に対応していただきありがとうございました!
haru様

こちらこそありがとうございます。無事解決できまして良かったです。
今回は、私の調査不足のためご面倒をお掛けしましたこと深くお詫びすると共に、
今後このようなミスが生じないよう、万全を期す所存ですので変わらぬご愛顧よろしくお願い致します。
  • toro
  • 2017/02/06 16:47
初めまして。
素敵なテンプレートを提供してくださり、ありがとうございます。
見やすく可愛らしいレスポンシブテンプレート、ぜひ使わせていただきたいと思っています。
ただ、上部のスライダーがどうしても表示されません。
他の方の投稿や、過去のスライダーへの注意事項も読み試してみましたが、できません。
何か根本的に間違えているでしょうか?
恥ずかしいですが、お教えいただけますと幸いです。
どうぞよろしくお願いいたします。
  • つい
  • 2017/02/14 10:46
toro様

まず初めに、大変お待たせ致しました。
お返事が遅れてしまい申し訳ございません。インフルエンザに罹り寝込んでました・・

さっそく、スライダーが表示されないとのことですが、こちらで原因を調べましたところ、
外部からRSS(xmlファイル)にアクセスできないような設定になっているためスライダーが表示されないのだと思われます。
私の推測になりますが、.htaccessの設定により直リンク対策などのファイルへの外部からのアクセスを禁止されてはいないでしょうか?
解決策としては、.htaccessの設定を変えてxmlファイルのみ外部からのアクセスを有効にするか、もしくは、セキュリティを優先してスライダー表示は諦めるのが妥当だと考えます。

ここまでお待たせして有効な解決策が見当たらなくて申し訳ありません。
よろしくお願い致します。
  • toro
  • 2017/02/14 12:18
インフルエンザだったんですね!
大変でしたね(汗
そんな中調べてくださってありがとうございます。

.htaccessというのの設定をした記憶はなく、どうしていいか分からなかったんですが、外部からRSSにアクセスできないのが原因と言ってくださったので、そこから色々調べて W3Cのフィード検証サービスというのに辿り着き、HTMLの記事の中で影響していたらしい文字を削除していったら、無事にスライダーが表示されるようになりました!

ヒントくださってありがとうございました。
大変助かりました。
お大事に、体力回復してくださいね♪

  • つい
  • 2017/02/14 17:17
toro様

早急なお返事とご報告ありがとうございます。
私の推測は外れてしまったようですね;困惑させてしまい申し訳ございませんでした・・
そして、W3Cのフィード検証サービスというものがあることを知り、私もまだまだ勉強不足だと実感しました。
こちらこそ丁寧なご報告に与り大変助かりました。ありがとうございます。
まだ寒い日が続くと思われるので、toro様もどうぞお体ご自愛下さいませ。
修正お疲れ様でした。

Leave a Reply