わりといろんなことを書いてる適当なブログ
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
このカテゴリには、
HTML/CSSとか、Blogのテンプレートとかをいじってて気がついたこととかトラブルとかについて書いておきます。
今回は忍者ブログのカスタムCSSについて。
忍者ブログだと(最近はどこも出来るよね多分)、用意されてるリッチテンプレートのほかに、自分でHTMLとCSSを編集できますが、フォームに記入する方法と自分でぽちぽち書く方法が使えます
このブログも自分でいじったんですが、以下、自分でCSS部分に書きこんだ内容(フォーム入力では出来ないっぽいこと)
・Blogの全体を中心に持ってくる
CSSのbodyにtext-align:center;を追加しました。
・本文の行間を調整
同じくbodyにline-height:1.1;を追加してます。
行間が空いてないとみっしりして読みにくかった。
1.3くらいまでならAA貼っても違和感なさそう?
・左メニュー欄と本文欄のwidthを再割り当て
デフォルトではメニュー(#PluginBlock)が220px、本文(#TopBlock)が750pxです。
今回はメニューの文字をデフォルトより小さくしたので、
これをそれぞれ200px、770pxに変更しました。
・左メニューの余白調整
なんかスッカスカで見栄えが悪かったので、paddingを調整してます。
説明欄(#PluginExplanation)は5px
表示欄(#plaginContents)は順に1px 0 1px 5pxです。
・記事本文中の画像に額をつける
これも多分フォームにはなかった気がする。
CSSに
.EntryTextBox img{
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
padding:3px;
margin:2px 5px 2px 5px;
}
と追加しました。パラメータは適当というかお好み。
・記事、コメント、トラックバックの本文と情報欄の間の仕切り線
これ、フォームからも入力できるんですが(本文部分と情報部分の境界線)
そのままにすると、上だけ細くて残りが太い線で囲まれます。
なので、入力したあとに、.EntryFooter、.CommentFooter、.TrackbackFooterのとこで
border-width:1px 0 0 0;にするときれいに1本だけつきます。
・コメントの管理者返信部分
ここは何故かフォームからいじる場所がありませんでした。
なのでCSSを直接いじって文字サイズと枠線の色を調整してあります。
・各記事の個別ページの下、前後記事へのマーク(<<と>>)が変換されない
何故かHTMLでは&amp;lt;/&amp;gt;になってます
このままブラウジングすると</>になるので、実は記述はちゃんと変換されてる訳で
HTMLの真ん中辺ちょっと下にある問題の箇所から「amp;」を削ってあげるとちゃんと表示されます。
他にもあったかもしれないけどわすれてしまった。
使い勝手としてはとてもいい感じです。
でも昨日、色々いじってたら何故かbodyのbackground-colorが反映されなくなって、
原因もわからなくて結局直らなかったので、また新しいテンプレートを作ったり。。。
対策に使用中のテンプレートと同じものをバックアップとして作っておくようにしましたとさ。
HTML/CSSとか、Blogのテンプレートとかをいじってて気がついたこととかトラブルとかについて書いておきます。
今回は忍者ブログのカスタムCSSについて。
忍者ブログだと(最近はどこも出来るよね多分)、用意されてるリッチテンプレートのほかに、自分でHTMLとCSSを編集できますが、フォームに記入する方法と自分でぽちぽち書く方法が使えます
このブログも自分でいじったんですが、以下、自分でCSS部分に書きこんだ内容(フォーム入力では出来ないっぽいこと)
・Blogの全体を中心に持ってくる
CSSのbodyにtext-align:center;を追加しました。
・本文の行間を調整
同じくbodyにline-height:1.1;を追加してます。
行間が空いてないとみっしりして読みにくかった。
1.3くらいまでならAA貼っても違和感なさそう?
・左メニュー欄と本文欄のwidthを再割り当て
デフォルトではメニュー(#PluginBlock)が220px、本文(#TopBlock)が750pxです。
今回はメニューの文字をデフォルトより小さくしたので、
これをそれぞれ200px、770pxに変更しました。
・左メニューの余白調整
なんかスッカスカで見栄えが悪かったので、paddingを調整してます。
説明欄(#PluginExplanation)は5px
表示欄(#plaginContents)は順に1px 0 1px 5pxです。
・記事本文中の画像に額をつける
これも多分フォームにはなかった気がする。
CSSに
.EntryTextBox img{
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
padding:3px;
margin:2px 5px 2px 5px;
}
と追加しました。パラメータは適当というかお好み。
・記事、コメント、トラックバックの本文と情報欄の間の仕切り線
これ、フォームからも入力できるんですが(本文部分と情報部分の境界線)
そのままにすると、上だけ細くて残りが太い線で囲まれます。
なので、入力したあとに、.EntryFooter、.CommentFooter、.TrackbackFooterのとこで
border-width:1px 0 0 0;にするときれいに1本だけつきます。
・コメントの管理者返信部分
ここは何故かフォームからいじる場所がありませんでした。
なのでCSSを直接いじって文字サイズと枠線の色を調整してあります。
・各記事の個別ページの下、前後記事へのマーク(<<と>>)が変換されない
何故かHTMLでは&amp;lt;/&amp;gt;になってます
このままブラウジングすると</>になるので、実は記述はちゃんと変換されてる訳で
HTMLの真ん中辺ちょっと下にある問題の箇所から「amp;」を削ってあげるとちゃんと表示されます。
他にもあったかもしれないけどわすれてしまった。
使い勝手としてはとてもいい感じです。
でも昨日、色々いじってたら何故かbodyのbackground-colorが反映されなくなって、
原因もわからなくて結局直らなかったので、また新しいテンプレートを作ったり。。。
対策に使用中のテンプレートと同じものをバックアップとして作っておくようにしましたとさ。
PR
最近、ちょこちょことフィギュアなんかを買うようになってしまいました。
(それでもまだ全然持ってないけどね!)
たまたまお出かけして、ふらっと普段行かないゲーセンに寄ったら。
UFOキャッチャーに鏡音レンと巡音ルカのエクストラフィギュアがあるじゃないですか。
このシリーズ、プライズのくせにそこそこ高クォリティだとかミク&リンのときに話題になってましたよね。
で、セットされてたのはルカさん。
配置も結構いけそう。…
…連れて帰ってきてしまいました。
結局なんだかんだしてるうちに1400円で獲得。
ヤフオクとかだと1200円前後で出品されてるそうです。送料とか計算したら一応勝ち、なのかなぁ…。
肝心の出来ですが、全体的に悪いところはそんなにないです。
ちょっと顔の表情とかが残念かなぁ…とは思いますが、プライズにしてはかなりいいのではないかな?
figmaもほしいなぁ。
(それでもまだ全然持ってないけどね!)
たまたまお出かけして、ふらっと普段行かないゲーセンに寄ったら。
UFOキャッチャーに鏡音レンと巡音ルカのエクストラフィギュアがあるじゃないですか。
このシリーズ、プライズのくせにそこそこ高クォリティだとかミク&リンのときに話題になってましたよね。
で、セットされてたのはルカさん。
配置も結構いけそう。…
…連れて帰ってきてしまいました。
結局なんだかんだしてるうちに1400円で獲得。
ヤフオクとかだと1200円前後で出品されてるそうです。送料とか計算したら一応勝ち、なのかなぁ…。
肝心の出来ですが、全体的に悪いところはそんなにないです。
ちょっと顔の表情とかが残念かなぁ…とは思いますが、プライズにしてはかなりいいのではないかな?
figmaもほしいなぁ。
セリヤです
なんとなーく、またブログを開設してみました
いろんなことを広く浅く、たまーに深くかじってます。
そんな感じのだらだらした日記になりそうな感じですが。
これは一発目だからこのへんにしとこ。
よろしくね。
なんとなーく、またブログを開設してみました
いろんなことを広く浅く、たまーに深くかじってます。
そんな感じのだらだらした日記になりそうな感じですが。
これは一発目だからこのへんにしとこ。
よろしくね。
ひとつ後: 前のページ