「レート」タグアーカイブ

レスポンシブデザインのhtmlテンプレートの個人的厳選四つ

新しくサイトを立ち上げるときに一番大事だったりするサイトデザイン。その負担を軽減してくれるテンプレートは知っておくに越したことはありません。

ただ、個人的にビビッとくる物に出会える事は少ないため、厳選に厳選を重ねた俺まとめを残して置きます。

いつかこれを使ってサイト作るんだ・・・。

VINTAGE TEMPLATE


Demo Free Html5 and Css3 Templates | Html5xcss3.com

レトロな雰囲気がとてもオシャレ。落ち着きながらもとんがった雰囲気がとても良いですね。

ENGINERY


Demo Free Html5 and Css3 Templates | Html5xcss3.com

黄色が印象的なだけではなく、それぞれの要素がウインドウサイズに合わせてシームレスに変化します。メニューもまとまるわけではなく、そのままなところも良いですね。文字の後ろに文字が来たりして、細かな所にオシャレさを感じます。

SIMPLEX


SIMPLEX | Free Responsive Template by Dzyngiri

シンプルなデザインで横幅一杯に要素が並ぶのがとても壮観ですね。レスポンシブもとてもシンプルで印象があまり変わらないのが良いです。

prologue


Prologue | HTML5 UP

右側に固定されたメニューがとても大きく見やすいです。スマフォでの閲覧時にもメニューがにゅっと出るアクションでとてもかわいらしいです。

html – testhtml – demo用などの単発htmlファイルテンプレート

スニペット

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=620px" />
 <style type="text/css">
 <!--
 #wrap{
 background-color: gray;
 -->
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 /* jQuery v1.3.2が読み込まれているか確認 */
 $(function(){
 /* 例1 */
 if(jQuery){
 $("#res1").html("<p>jQueryは読込まれています。"+jQuery+"</p>");
 }

/* 例2 */
 if (typeof jQuery!="undefined"){
 $("#res2").html("<p>jQueryは読込まれています。typeof jQuery="+typeof jQuery+"</p>");
 }
 });
 </script>
 </head>
 <body>
 <div id="wrap">
 <div id="res1"></div>
 <div id="res2"></div>
 </div>
 </body>
 </html>

jqueryが動作してるかのチェックも同時に行う。cssもheadに直接ぶちこむ。

記事横にスクロールでついてくる関連記事一覧を追加してみた

みんな大好きYARPP

記事の横に関連記事一覧を設置してみました。

YARPPというプラグインによる設置で、精度も高く、カスタマイズも簡単なのはとてもありがたいです。

WordPress › Yet Another Related Posts Plugin « WordPress Plugins

プラグインを設置して設定を見ると、

こんな感じで日本語なのも手伝ってとても分かりやすい。カスタマイズをしなくてもリスト表示、サムネイル表示ができてとても助かります。

ただ、やっぱりカスタマイズしたくなるのが人の性分でして、そういう人のためにテンプレートphpを出力してくれる機能まであります。痒いところに手が届きます。

テンプレートは複数種類あり、それを元に自分の好みに変更を加えることが出来ますよ。

テンプレートphpコード

<div id="YARPP-posts" class="side-widget">
  <p class="widget-title">関連記事</p>
  <?php if(have_posts()):
    $options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    //echo esc_url($thumbnails_default); デフォルトサムネイルさん
    //
    ?>
    <ul>
      <?php while(have_posts()) : the_post(); ?>
        <li>
          <p><a href="<?php the_permalink() ?>" rel="bookmark">
              <?php
              if(has_post_thumbnail()) { //サムネイルがあるかどうか探す
                the_post_thumbnail('yarppthumb');
              } else {
                echo '<img width="100" height="100" src="' . esc_url($thumbnails_default) . '" class="attachment-yarppthumb wp-post-image" alt="secondarytile" />';
              }
              ?>
              <?php the_title(); ?></a>
            <br><?php echo get_the_excerpt(); ?></p>
          <!-- (<?php the_score(); ?>)-->
        </li>
      <?php endwhile; ?>
    </ul>
  <?php else: ?>
    <p>No related posts.</p>
  <?php endif; ?>
</div>

これが今回記述したコードです。特に工夫したことは無い素直な感じの物。

サムネイルが設定されてればサムネイルを出力し、されてなかったらデフォルトサムネイルを出力します。

YARPPに設定されているデフォルト画像は

$options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    echo esc_url($thumbnails_default); デフォルトサムネイルさん

で吐き出す事ができます。今後デフォルト画像は差し替えるかもしれないので、こうしていた方が取り回し楽ですよね。

cssはこんな感じです。

/*サイドウィジェット、関連記事*/
#YARPP-posts li{
  margin   :15px 0;
  height:90px;
  overflow:hidden;
}
#YARPP-posts li:after{
  content :".";
  color   :transparent;
  clear   :both;
}

#YARPP-posts img{
  border-radius :5px;
  width         :90px;
  height        :90px;
  float         :left;
  margin-right  :5px;
}
#YARPP-posts img:hover{
  opacity: 0.5;
}
#YARPP-posts li a{
  font-size:12px;
  font-weight:bold;
}

#YARPP-posts li  p{
  font-size  :10px;
  margin     :0;
  padding    :0;
  text-align :left;
}

画像を文字が回り込むような感じですかね。オーバーしそうだったら「overflow:hidden;」で非表示にします。

スクロールでついてくるようにしよう

あとはjqueryを使って、関連記事が追いかけてくるようにします。賛否両論だと思いますが、個人的にはこの仕様は好きです。

jQuery(function ($) {
            var nav = $('#YARPP-posts'), offset = nav.offset();
            $(window).scroll(function () {
              if ($(window).scrollTop() > offset.top - 20) {
                nav.addClass('fixed');
              } else {
                nav.removeClass('fixed');
              }
            });
          });

画面上部に関連記事の要素が来ると、cssクラス「fixed」を追加します。

cssファイルに以下を追加

.fixed{
  position :fixed;
  top      :20px;
}

ウインドウの絶対位置に要素を配置するのが「position :fixed;」ですね。「top :20px;」は表示位置となっています。

あとこの一連のjqueryコードとcssコードはwordpressテーマ「wsc7」に元々収録されています。元々はサイドバー全てがスクロールでついてくるのですけれど、関連記事だけ動くように変更してみました。

本当に痒いところに手が届く良いテーマだと思います。

WSC7

wordpress – query posts – orderby – 記事の検索条件

テンプレートタグ/query posts – WordPress Codex 日本語版

スニペット

'none' - 順番指定なし(バージョン 2.8 以降のみ)
'ID' - ポストID
'author' - 投稿者名
'title' - 記事タイトル
'date' - 投稿日時
'modified' - 記事の更新日付
'parent' - 親順に並べる。記事、ページに親関係が設定されていた場合、その親IDが基準となる。
'rand' - ランダム
'comment_count' - コメント数で並べ替え
'menu_order' - おそらく固定ページ作成の時に利用する「順列」を基準にするのだと思われる。

//↓利用する場合はカスタムフィールドによる検索条件を事前に組む必要がある↓
'meta_value' - カスタムフィールド内の値
'meta_value_num' - カスタムフィールド内の値を数字として認識

頻繁に使う割りに毎回調べている気がするのでまとめる。
「none」の利用方法がよくわからないが、mysqlに入っているものを順番に抜き出す、という意味なのだろうか。

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その9 – 即席ウィジェットを作る

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

プロデューサー! ウィジェットですよウィジェット!! のヮの

ウィジェットはとても大事です。サイドバーを彩ります。しかし自分で作るには少しハードルが高い。テヘペロ。

いちいちオプションとかくっつけたりして、なんか意味不明なコードが沢山あって。いやん、ばかん。

だからテンプレートとして簡単な即席ウィジェットを一つ持っておくと便利ですよ。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その9 – 即席ウィジェットを作る

すこし急ぎすぎなテンポがぬるさと良く合う「魔王と勇者の0フラグ」 書評

魔王城に乗り込み、あっさり倒されてしまった勇者。死を覚悟した彼女が、目を覚ますと―そこはのーんびりとした牧場だった!?そしてなんと、側には宿敵・鎧姿の魔王がいる。あろうことかそいつは、「勇者ちん、ボクと一緒に暮らそうよ」と言いだして―。キレ気味美少女勇者ちんと心優しい魔王の、騒々しくも牧歌的なギャグ&ピュアラブコメ。

via: Amazon.co.jp: 魔王と勇者の0フラグ (角川スニーカー文庫): 宮地 拓海, 日向 悠二: 本

魔王と勇者×ラブコメと、これまたなんと鉄板物で、どう勝負してくるのか気になって読んでみた。意外と直球で逆にびっくり。

続きを読む すこし急ぎすぎなテンポがぬるさと良く合う「魔王と勇者の0フラグ」 書評

2012年に読んだ衝撃的だった本たち

今年も色々と本を読みました。全て合わせて300冊程度。みなさんはどのような本を読みましたか? 私の場合、今年は色々と挑戦の年であったように感じます。小説に本腰を入れ、htmlやphp、wordpressなんかにも首を突っ込み、今はC#を楽しく弄ってますよ。

今年は何に力を入れましょうか・・・イラストとか楽しいかも知れません。

ともあれ、振り返りつつのんびりまとめていこうかと思います。

続きを読む 2012年に読んだ衝撃的だった本たち