BASEのブログ機能には制限があってタグが一切使えません(使ったらタグが文字として出ちゃう)
ブログでできるのは「太字」「斜体」「見出しタグ」「リンク」だけ
中央揃えも文字サイズも変更できません。
BASEのブログでデザインをカスタムする2つ+1の方法
1.ブログで使える機能を他の効果にしてしまう
例えば、ブログで「斜体」を使うとタグで囲まれます。
もし斜体(イタリック文字)を使わないのであればhtml編集場所で下記を追加してみて下さい
この例では「イタリック体」を「文字を中央揃え」というコードを打っています。
————————————————-
#blog i{ /*blogに書かれているイタリックのみに操作を限定*/
text-align: center; /*文字中央配置*/
font-style: normal; /*イタリック体を通常の文字に変更*/
}
————————————————-
※補足説明です
・ブログ領域はblogというIDの中に記述されているようなので、「#blog 」iとしました。
・widthに数値がないと中央揃えが効かないので任意にwidthを入れて下さい。
・文字を赤文字にしたい場合には「color: #f33;」などを入れて下さい
画像も中央配置にする場合には以下にようにしてください
————————————————-
#blog i{ /*blogに書かれているイタリックのみに操作を限定*/
text-align: center; /*文字中央配置*/
font-style: normal; /*イタリック体を通常の文字に変更*/
margin: 0 auto; /*ブロック全体に対しての中央揃え*/
display: block; /*ブロック要素にしないと中央揃えが効かなくなる事があるので*/
width:600px; /*横幅を指定しないとブロックがどれぐらいの大きさいいのか分かんない！って言わる*/
}
————————————————-
2a.Microsoftのワードで書いた文章をコピペして張る
これはなぜ適用されるのか分かりません。
でも文字を大きくしたり色変えたりするとその情報が反映されます。
全てができるわけではないと思うのですが、少なくともデザインの幅は大きく変わると思います。
ワードプレスでも、ワードで変えたスタイルがそのまま反映さたりするので(テーブルタグ使うときとか有難い)
そこの仕様を引きついじゃった訳ですね多分。
「メイリオ」「赤色」「太文字」「左配置」部分のソースコード
<span style=”mso-bidi-font-size:10.5pt;font-family:メイリオ;color:red”>メイリオ赤色太文字左配置<span lang=”EN-US”></span></span>
こうなります。
ただし、たまに訳の分からないソースコードがついてきたりします。
↓こんな
————————————————-
<!–[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>
<w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>JA</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:SpaceForUL/>
<w:BalanceSingleByteDoubleByteWidth/>
<w:DoNotLeaveBackslashAlone/>
<w:ULTrailSpace/>
<w:DoNotExpandShiftReturn/>
<w:AdjustLineHeightInTable/>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
<w:UseFELayout/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val=”Cambria Math”/>
<m:brkBin m:val=”before”/>
<m:brkBinSub m:val=”--“/>
<m:smallFrac m:val=”off”/>
<m:dispDef/>
<m:lMargin m:val=”0″/>
<m:rMargin m:val=”0″/>
<m:defJc m:val=”centerGroup”/>
<m:wrapIndent m:val=”1440″/>
<m:intLim m:val=”subSup”/>
<m:naryLim m:val=”undOvr”/>
</m:mathPr></w:WordDocument>
</xml><![endif]–>
————————————————-
これがでたら一旦文字を消してください
2b.DreamWeaverを使ってコピペして張る
ワードの応用ですが、ドリーのデザインモードで表示されたテキストなどはhtml情報を持っているのでそれを張ってもいけます。
こちらも余計なソースがついてくるので注意が必要です。
————————————————-
<p style=”color:#f00; font-weight:bold; font-size:14px;”>テキストテキスト</p>
（91文字）
↓
<span style=”color: rgb(255, 0, 0); font-family: Meiryo; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 700; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;”>テキストテキスト</span>
————————————————-
約400文字程余計なタグが増えるので成形する場合には要注意です。
またclassやIDを入れたら反映されるがCSSの直接記述は変わらずされるので、あまりclassなどを入れるメリットがないです。
★反映時にエラーが出たら場合
「文字数がオーバーしています」とエラー表示が出た場合にはプレビューで確認して該当部分のソースコードから文字数カウンターで調べていくのがいいと思います。
Blogで使える文字数を調べたみたら、だいたい半角で39000文字程度でした。
全角半角区別しているか分かりませんが全角は2文字分と考えた方が無難そうです。