QQьさんのページ

QQьユーザー

5.1千文字の記事

掲示板へ

記事編集

オススメピコ風
CSS display
編集補助

おわかりいただけただろうか。メニュー部分もデザインできるのである。
そう、display: inlineならね。

ピコカキコ - オススメピコ風に表示

表示サンプル

SORCERIAN X1 エンディング

ソース

<table style="border: 1px solid #ddd; margin: 1em;">
  <tbody>
    <tr>

      <td style="vertical-align: middle; border: none;">
        <a href="/b/u/10580957/1-#13"><img title="SORCERIAN ED" alt="SORCERIAN ED" src="http://tn-skr2.smilevideo.jp/smile?i=3856553" style="margin: 1px; padding: 2px; border: solid 1px #999; vertical-align: middle;" height="50" width="65"></a>
      </td>

      <td style="vertical-align: middle; border: none;">
        <img src="/img/pikoplayer.png" alt="8694" height="18" width="86">
        <div>SORCERIAN X1 エンディング</div>
      </td>

    </tr>
  </tbody>
</table>

display の有効活用

display プロパティ（属性）はいろいろ便利です（←便利な言葉で説明）。その一例を紹介します。

width の代わりに display: table; を使う。

tableの特性で、子要素次第で自動的に横幅が決まります。「中がこの大きさでpaddingとborderがこれだから・・・」と計算せずに済みます。

改変
既存のテンプレ

一見変わらないように見えますが、動画数を減らしてみると差が明らかになります。

改変
既存のテンプレ

ソース

<div style="background-color: #404040; display: table; margin: 0px auto 20px; padding: 4px 0px;">
<div style="line-height: 0px; padding: 4px 2px; border-top: #fff dashed 3px; border-bottom: #fff dashed 3px;">
<img style="padding: 0 2px;" src="
http://tn-skr2.smilevideo.jp/smile?i=201996" height="100" width="130"><img style="padding: 0 2px;" src="
http://tn-skr2.smilevideo.jp/smile?i=1715919" height="100" width="130"><img style="padding: 0 2px;" src="
http://tn-skr2.smilevideo.jp/smile?i=5054636" height="100" width="130"><img style="padding: 0 2px;" src="
http://tn-skr2.smilevideo.jp/smile?i=3504435" height="100" width="130"><img style="padding: 0 2px;" src="
http://tn-skr2.smilevideo.jp/smile?i=6365902" height="100" width="130">
</div>
</div>

編集に役立つもの

ブックマークレットです。ie8だとうまく動きません。対応しません。

その場で編集
その場でプレビュー
フォントをメイリオ化 <--> デフォルト
自動リンク削除
記事IDでリンク生成

javascript:(function(){var doc = document, article = doc.querySelector(".article");var flag = true;function editCont(){  article.contentEditable = flag? true : false;  return flag = !flag;}function nicopediaPreview() {  if(!ele) {    var ele = doc.createElement("div");    ele.style.position = 'fixed';    ele.style.top = '200px';    ele.style.width = '720px';  }  ele = ele.cloneNode(false);  var selection = '' + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);  if(!selection.length){    return;  }  ele.insertAdjacentHTML( 'afterbegin', selection );  article.insertBefore(ele, article.firstChild);  addRomveBtn(ele);}function addRomveBtn(target) {  var removeBtn = doc.createElement("button");  removeBtn.innerText = "✕";  removeBtn.textContent = "✕";  removeBtn.title = "閉じる";  removeBtn.style.cssText = "color:#ff0000; padding:3px; cursor:pointer; background-color:none; border-color:red; font-weight:bold; border-radius:10px; float: right; z-Index:99999; margin-top: -2em;";  removeBtn.onclick = remove;  function remove() {    this.parentNode.parentNode.removeChild(this.parentNode);  }  target.insertBefore(removeBtn, target.firstChild);}var flag2 = true;function meiryoNize(){  doc.body.style.fontFamily = flag2 ? "Meiryo" : "" ;  return flag2 = !flag2;}function removeOnlyTag(className){  var e = doc.getElementsByClassName (className);  var r = doc.createRange ();  while (e.length) {    var n = e[0];    var p = n.parentNode;    r.selectNodeContents (n);    p.insertBefore (r.extractContents (), n);    p.removeChild (n);    p.normalize ();  }  r.detach ();}function removeAutoLinks(){  removeOnlyTag('auto');  removeOnlyTag('auto-hdn');}function nicopediaIdLink() {  var id = doc.getElementsByClassName("twitter")[0].href.split(",")[1]    , url = "https://dic.nicovideo.jp/id/" + id    , title = doc.getElementById("search-box").value;  prompt("記事番号link", "<a href=\""+url+"\">"+title+"</a>");}var funcObj = {  "編集" : editCont, "プレビュー" : nicopediaPreview, "メイリオ化" : meiryoNize, "自動リンク削除" : removeAutoLinks, "リンク生成" : nicopediaIdLink};var btn = doc.createElement("input");btn.type = "button";btn.className = "button_js_qqb";var dfrag = doc.createDocumentFragment();for(var i in funcObj) {  btn = btn.cloneNode(false);  btn.value = i;  btn.onclick = funcObj[i];  dfrag.appendChild(btn);}var div = doc.createElement("div");div.appendChild(dfrag);div.style.cssText = "position: fixed; bottom: 0; right: 0; padding: 3px";doc.body.appendChild(div);var css = '.button_js_qqb{  padding: 2px 3px;  margin: 0px 1px 2px 0;  cursor: pointer;  background: #0099cc;  background-image: linear-gradient(#5bc0de, #0099cc, #339bb9);  color: #fefefe;  border: 1px solid #0085b6;  border-radius: 5px;  text-shadow: 0px 0px 1px #000;}.button_js_qqb:hover{  background: #0099cc;  background-image: linear-gradient(#339bb9,#0099cc, #5bc0de);  border-color: #006087;}.button_js_qqb:active{  box-shadow: 1px 1px 3px 1px #006087 inset;  position: relative;  top: 1px;}'  , head = document.getElementsByTagName('head')[0]  , style = document.createElement('style');style.type = 'text/css';if (style.styleSheet){  style.styleSheet.cssText = css;} else {  style.appendChild(document.createTextNode(css));}head.appendChild(style);function toggleBGC(elem){  var flag = true , styleCache = elem.style.background;  function main(){    elem.style.background = flag ? "orange" : styleCache;    return  flag = !flag;  }  if(doc.addEventListener) {    elem.addEventListener("click", main, false);  } else {    elem.attachEvent("onclick", main);  }}toggleBGC(div.childNodes[0]);toggleBGC(div.childNodes[2]);addRomveBtn(div);})()