直列つなぎ。 -とある発達障害者の記録

知識と知識を繋ぐためのblog。 広汎性発達と診断されました。ぜんぜん役に立ってないけど。月収13万円、家賃4万円で生活するひつじ人間。

greenish-3c → Cherry_blossom


 greenish-3c を改造し続けようと思ったが、オレの理解が浅いためか不可能になってしまった・・・・
 何故だか、サマリー表示埋め込むと個別記事が表示されねーんだよー!!!

 散々弄った痕を頻繁にアクセスカウンターに残しているが気にしないでほしい。
 過疎ってるからふつーに!!

 しかも最近変なスパム増えたし!アメブロと違ってコメントスパム無いから気に入ってるけどさ。
 やっぱスパムと無縁では居られないのね・・・・・

 Naverまとめもやるからいいもん・・・・






 えー、何だっけ。あ、blogのカスタムだたねスイマセン(マイクラ時の無垢な調子は何処
へやら)。








 さて、共有テンプレ Cherry_blossom のカスタムです。(使いたい人は この通り
 にしてテンプレを追加してね☆)

 デフォルトから随分変えてますよ、Firefox使って。要素名の調査もカンタンです(この記事 を参照)。


 
 このテンプレにした後、記事の表示件数を20件にしています。
Read more(続きを読む)の読み込みを止める を行ってから、記事の表示件数を増やしてもいいでしょう。



20151121-{51,firefox




20151121-{52,firefox




こんなカンジで








 変更点

◆ ちょっと揃えた。
 .content{margin:10px 8px;padding:8px;font-size:20px}


サイドバーがこうなる問題
 の対策
 #menu{width: 26%;float:right;padding:12px 6px 2px 6px;top: 347px;left: 1293px;position: absolute}/* メニュー表示部分 */
 前のようにいかなくて苦労した・・・・


参考にしたページ

 CSS : positionの「absolute」「relative」「fixed」のリファレンス



 ちなみにabsolute指定はちょっと欠点もあって、拡大させるとサイドバーがちょっと下にずれてしまう。
 文字サイズは大きめにしておくのが良いだろう。

 ・・・・・・・・・・・・・今日気が付いたんだけど。

 20151121-{56,firefox


 ブックマークバー出しっぱで設定してた・・・・・orz


 これの直し方も見つけた。
 #menu {
width: 26%;
float: right;
padding: 12px 6px 2px 8%;
top: 347px;
left: 65%;
position: absolute; 

 これでスクリーンサイズに関係なく表示させられる。

 参考記事(ヒントにはなった)

画面サイズに合わせて高さを指定する3つの方法
 http://weboook.blog22.fc2.com/blog-entry-411.html

CSS: marginの正しい理解
 http://kojika17.com/2012/08/margin-of-css.html
     marginとpaddingの違いなどが判りやすくて秀逸。





◆記事タイトル脇にもカテゴリ
 20151121-{54,firefox
 これが一番苦労したところ・・・・・一番地味なのに・・・・・・・うっえぐっ・・・・

http://blog-imgs-84.fc2.com/m/o/j/mojakouinfotaker/o0639046112499281434.jpg" ); PADDING-BOTTOM: 1em; PADDING-LEFT: 1em; PADDING-RIGHT: 1em; PADDING-TOP: 1em">

わざわざ好きなゲームキャラを主張してみた。入巣ちゃんよいですねえ







HTML(自分で追加してみた)
<div class="content_category">

category:<a href="<%topentry_category_link>" title="<%topentry_title>の属するカテゴリ"><%topentry_category></a>

</div>


CSS(これも自身で追加する)
.content_category{float: right;margin: -31px 0px 0px 36px;font-size: 13px;}







 参考にしたページ

divボックスを横に並べる

 



◆画像やテキストを中央揃えに出来ないとき
<div style="text-align: center;">sheep!!</div>
 が効かないときは。



CSS内の赤字を削除してから
#inbox img,#menu img{max-width:100%; display:block}


追加してみましょう。


実際の表示

sheep!!!

関連記事
スポンサーサイト

 blogカスタム記録

0 Comments

Leave a comment