Dropchest

FC2ブログのテンプレート制作・カスタマイズをしています。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

共有テンプレートに使える!スニペット・テクニック集

共有テンプレートに使える!スニペット・テクニック集

僕が共有テンプレートを作る際によく使うスニペットやテクニックをまとめてみました。

この記事には項目を順次追加していく予定です。

良い感じなページタイトル

<title><!--not_index_area--><!--permanent_area--><%sub_title><!--/permanent_area--><!--date_area--><%now_year>年<%now_month>月の記事<!--/date_area--><!--category_area-->カテゴリー "<%sub_title>" の記事<!--/category_area--><!--search_area-->"<%sub_title>" の検索結果<!--/search_area--><!--tag_area-->タグ "<%sub_title>" の付いた記事<!--/tag_area--><!--titlelist_area-->全ての記事<!--/titlelist_area--><!--edit_area-->コメント編集<!--/edit_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area--><!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->過去ログ<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_date_area--> - <!--/not_index_area--><%blog_name></title>

OpenGraphとTwitterCards用のメタデータ

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter_ID">
<meta property="og:site_name" content="<%blog_name>">
<!--myimage--><meta property="og:image" content="<%image>"><!--/myimage-->
<!--not_permanent_area-->
<meta property="og:title" content="<%blog_name>">
<meta property="og:type" content="blog">
<meta property="og:description" content="<%introduction>">
<!--/not_permanent_area-->
<!--permanent_area-->
<meta property="og:title" content="<%sub_title>">
<meta property="og:type" content="article">
<meta property="og:url" content="<%url><%topentry_rlink>">
<meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->">
<!--/permanent_area-->

色々詰め込んだHTML5のひな形

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="<%template_charset>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="<%author_name>">
<meta name="description" content="<%introduction>">
<title><!--not_index_area--><!--permanent_area--><%sub_title><!--/permanent_area--><!--date_area--><%now_year>年<%now_month>月の記事<!--/date_area--><!--category_area-->カテゴリー "<%sub_title>" の記事<!--/category_area--><!--search_area-->"<%sub_title>" の検索結果<!--/search_area--><!--tag_area-->タグ "<%sub_title>" の付いた記事<!--/tag_area--><!--titlelist_area-->全ての記事<!--/titlelist_area--><!--edit_area-->コメント編集<!--/edit_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area--><!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->過去ログ<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_date_area--> - <!--/not_index_area--><%blog_name></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all">
<link rel="shortcut icon" href="http://blog-imgs-x.fc2.com/a/b/c/abc/favicon.ico">
<link rel="icon" sizes="16x16 32x32" href="http://blog-imgs-x.fc2.com/a/b/c/abc/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="http://blog-imgs-x.fc2.com/a/b/c/abc/favicon-152.png">
<meta name="msapplication-TileColor" content="#EEEEEE">
<meta name="msapplication-TileImage" content="http://blog-imgs-x.fc2.com/a/b/c/abc/favicon-144.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter_ID">
<meta property="og:site_name" content="<%blog_name>">
<!--myimage--><meta property="og:image" content="<%image>"><!--/myimage-->
<!--not_permanent_area-->
<meta property="og:title" content="<%blog_name>">
<meta property="og:type" content="blog">
<meta property="og:description" content="<%introduction>">
<!--/not_permanent_area-->
<!--permanent_area-->
<meta property="og:title" content="<%sub_title>">
<meta property="og:type" content="article">
<meta property="og:url" content="<%url><%topentry_rlink>">
<meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->">
<!--/permanent_area-->
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS">
<link rel="top" href="<%url>" title="Top">
<link rel="index" href="<%url>?all" title="<%template_index>">
<!--prevpage--><link rel="prev" href="<%prevpage_url>" title="<%template_prevpage>"><!--/prevpage-->
<!--nextpage--><link rel="next" href="<%nextpage_url>" title="<%template_nextpage>"><!--/nextpage-->
<!--preventry--><link rel="next" href="<%preventry_url>" title="<%preventry_title>"><!--/preventry-->
<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>"><!--/nextentry-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>

</body>
</html>

記事のサムネイルがないときにNoImage画像を表示する

1. 表示したい部分にこんな感じに記述します。

<figure class="thumb"><%topentry_image_w300></figure>

2. JavaScriptを記述します。

対応ブラウザ:IE8+, 他

<script>
(function(global, src) {
  var thumbs = document.querySelectorAll('figure.thumb');
  for(var i = 0, iz = thumbs.length; i < iz; i++) {
    var fig = thumbs[i];
    if (fig.getElementsByTagName('img').length) continue;
    var img = new Image;
    img.src = src;
    fig.appendChild(img);
  }
})(this, 'NoImage画像のURL');
</script>

jQuery使ってるならちょっと短くできる↓

<script>
(function(global, $, src) {
  $('figure.thumb').each(function() {
    if (this.getElementsByTagName('img').length) continue;
    var img = new Image;
    img.src = src;
    this.appendChild(img);
  });
})(this, jQuery, 'NoImage画像のURL');
</script>

フォームの警告文要素が空のとき要素を非表示にする

設定でコメントに画像認証を付けてない場合、コメントのフォームの入力内容に不備があると送信時に警告が出ます。

この警告文ですが条件変数で表示・非表示を切り替えれないので、背景とかのスタイルを設定していると中身が空の時にも表示されてしまいます。

これを防ぐために新しいブラウザでは:emptyなんていうセレクターが使えるんですが、これはIE8以下では動かないので普通に考えたらJavaScriptで消します。 けどCSSだけで消せるテクニックを思いついたので紹介します。

HTML

警告文の要素にdata-content属性を付けます。

<p class="alert alert-danger" data-content="<%edit_message>">
  <%edit_message>
</p>

CSS

IE7から使える属性セレクタを使ってdata-contentが含まれている場合にマッチするようにします。

/* 警告文要素のスタイル */
form .alert {
  display: none;
}

/* 警告文要素の中身が空じゃないときのスタイル */
form .alert[data-content*="\3002"] {
  display: block;
}

カテゴリープラグインを綺麗にデザインする

categoryプラグイン(advcategoryじゃない古いやつ)のHTMLは汚くてデザインする側としてはツライのですけど、うまく罫線を消して綺麗にデザインするテクニックを紹介します。

カテゴリプラグインのクラスを.plugin-category、プラグインのコンテンツ部分のタグを.plugin-contentとすると、

.plugin-category .plugin-content > div > div {
  color: transparent;
}

.plugin-category .plugin-content > div > div > a {
  /* ここにbackground-imageとかpadding-leftを設定 */
}

みたいな感じでいけます。他のプロパティー(display,visibility,filter,opacity)だとFirefoxとかIEで消えてくれなかったりするのでcolor:transparentがベストだと思います。

関連記事
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。