MovableType.netで「高度な見出し」ブロックを作成する。外観、文字サイズ、見出しレベルを変更できる

mt_customblock_title.json

{"class_name":"","html":"<!-- mt-beb t=\"core-context\" m='{\"1\":{\"label\":\"見出しの文字列\",\"className\":\"mt-admin-title-label\"},\"2\":{\"options\":\"デザイン:装飾なし左寄せ\\nデザイン:装飾なし中央寄せ\\nデザイン:下線左寄せ\\nデザイン:下線中央寄せ\\nデザイン:網掛け\\nデザイン:マーク付き\",\"blockElement\":\"p\",\"text\":\"デザイン:装飾なし左寄せ\",\"label\":\"見出しのデザイン\",\"className\":\"mt-admin-title-design\"},\"3\":{\"options\":\"サイズ:極大\\nサイズ:大\\nサイズ:中\\nサイズ:小\\nサイズ:極小\\nサイズ:極々小\",\"blockElement\":\"\",\"text\":\"サイズ:中\",\"label\":\"見出しのサイズ\"},\"4\":{\"options\":\"タグ:h1\\nタグ:h2\\nタグ:h3\\nタグ:h4\\nタグ:h5\\nタグ:h6\\nタグ:p\",\"blockElement\":\"\",\"text\":\"タグ:h3\",\"label\":\"見出しタグ\",\"helpText\":\"見出しに使用するHTMLタグを選択してください。\"}}' --><!-- /mt-beb --><!-- mt-beb m='1' --><p class=\"mt-admin-title-label\">見出しの文字列を入力してください</p><!-- /mt-beb --><!-- mt-beb t=\"sixapart-select\" m='2' --><p class=\"mt-admin-title-design\">デザイン:装飾なし左寄せ</p><!-- /mt-beb --><!-- mt-beb t=\"sixapart-select\" m='3' -->サイズ:中<!-- /mt-beb --><!-- mt-beb t=\"sixapart-select\" m='4' -->タグ:h3<!-- /mt-beb -->","icon":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCAzNC42MSI+PHBhdGggZD0iTTEzLjc2LDMzLjIzbDMuNjMtNC42NGExLjM3LDEuMzcsMCwwLDAtLjA2LTEuNzJsLTcuNTYtOCw3LjU2LThhMS4zNiwxLjM2LDAsMCwwLC4wNi0xLjcyTDEzLjc2LDQuNTdhLjg4Ljg4LDAsMCwwLTEuNDEtLjA1TC4zMiwxOGExLjM1LDEuMzUsMCwwLDAsMCwxLjc1bDEyLDEzLjUxYS44OC44OCwwLDAsMCwxLjQxLS4wNVptMzcuODkuMDYsMTItMTMuNTFhMS4zNSwxLjM1LDAsMCwwLDAtMS43NWwtMTItMTMuNTJhLjg5Ljg5LDAsMCwwLTEuNDEsMEw0Ni42MSw5LjJhMS4zNywxLjM3LDAsMCwwLC4wNiwxLjcybDcuNTYsOC03LjU2LDhhMS4zNiwxLjM2LDAsMCwwLS4wNiwxLjcybDMuNjMsNC42NGEuODguODgsMCwwLDAsMS40MS4wNlptLTguMjYsMS4zMkgzNS44MlYyMC44NWMwLTIuNy0uNzctNC42OC0zLTQuNjgtLjk0LDAtMy4xOC40Ny0zLjE4LDMuODdWMzQuNjFIMjIuMDZWMGg3LjU3VjEzLjA3aC4wOWE3LjU0LDcuNTQsMCwwLDEsNi4xNS0zLjE0YzQuODUsMCw3LjUyLDMuNzQsNy41MiwxMC40NVoiIGZpbGw9IiM1YjViNWIiLz48L3N2Zz4=","identifier":"mt_title","label":"高度な見出し","preview_header":"<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n    var\n        html = document.body,\n        text,\n        label,\n        titleclass,\n        tag;\n\n    label = html.querySelector('.mt-admin-title-label').innerText;\n\n    html.querySelector('.mt-admin-title-label').remove();\n    text = html.innerText;\n\n    if( text.match( /装飾なし中央/ ) ) {\n        titleclass = ' mt-title-style-b';\n    } else if( text.match( /下線左/ ) ) {\n        titleclass = ' mt-title-style-d';\n    } else if( text.match( /下線中央/ ) ) {\n        titleclass = ' mt-title-style-c';\n    } else if( text.match( /網掛け/ ) ) {\n        titleclass = ' mt-title-style-e';\n    } else if( text.match( /マーク付き/ ) ) {\n        titleclass = ' mt-title-style-f';\n    } else {\n        titleclass = ' mt-title-style-a';\n    }\n\n    if( text.match( /極々小/ ) ) {\n        titleclass = titleclass + ' mt-title-level-6';\n    } else if( text.match( /極小/ ) ) {\n        titleclass = titleclass + ' mt-title-level-5';\n    } else if( text.match( /小/ ) ) {\n        titleclass = titleclass + ' mt-title-level-4';\n    } else if( text.match( /極大/ ) ) {\n        titleclass = titleclass + ' mt-title-level-1';\n    } else if( text.match( /大/ ) ) {\n        titleclass = titleclass + ' mt-title-level-2';\n    } else {\n        titleclass = titleclass + ' mt-title-level-3';\n    }\n\n    if( text.match( /h1/ ) ) {\n        tag = 'h1';\n    } else if( text.match( /h2/ ) ) {\n        tag = 'h2';\n    } else if( text.match( /h4/ ) ) {\n        tag = 'h4';\n    } else if( text.match( /h5/ ) ) {\n        tag = 'h5';\n    } else if( text.match( /h6/ ) ) {\n        tag = 'h6';\n    } else {\n        tag = 'h3';\n    }\n\n    document.body.innerHTML = '<div class=\"mt-be-title\"><' + tag + ' class=\"mt-title' + titleclass + '\">' + escapeHtml( label ) + '</' + tag + '></div>';\n\n});\n\nfunction escapeHtml(html) {\n    return html\n         .replace(/&/g, \"&amp;\")\n         .replace(/</g, \"&lt;\")\n         .replace(/>/g, \"&gt;\")\n         .replace(/\"/g, \"&quot;\")\n         .replace(/'/g, \"&#039;\");\n }\n</script>","can_remove_block":false,"wrap_root_block":false,"block_display_options":{}}