自分用覚書。

2030/05/01

css/html

• CSSで背景画像などを変更する
• float以外で横並び(2カラム)レイアウトを組む

FC2

• FC2ブログテンプレートのサイドメニューの追加
• FC2ブログテンプレートでのユーザータグの表示設定
• ツリー化カテゴリをcssで設定する
• FC2ブログでTwitterやFacebookのような無限スクロールを作りたい

Infinite Scroll

2016/03/27

FC2ブログで、Twitterのような次ページを自動で読み込むjQueryが無いかと探してました。
最初は、『autopager』で探していたんですが、思うような記事が見つけられませんでした。
ので、似たような『Infinite Scroll』だと、ヒットしました。

[JS] FC2ブログでも無限スクロールができちゃうjQueryプラグイン 【改訂版】｜GIXDLOG
http://meduro.blog.fc2.com/blog-entry-29.html

ウーン、よく分かりませんが、これなら動きそうです。
と、思ってページを見たままコピペしてみました。

» more

jsファイルはこちらのサイトよりお借りしました。2016/03/27
paulirish/infinite-scroll
https://github.com/paulirish/infinite-scroll

html

 
 

  記事内容
 
 


 


 次のページを読み込む

jQuery

$('#items').infinitescroll({
  // ここを通過するとロード
  navSelector: '#next-page',
  // 次のページへのリンク
  nextSelector: '#next-page a',
  // 読み込みを行うセレクタ
  itemSelector: '.item',
  // ローディング時のメッセージ設定
  loading: {
    // アイテムがない場合のメッセージ
    finishedMsg: '次のアイテムはありません',
    // ローディング画像
    img: 'loading.gif'
  }
  state: {
    // 基準となるページ番号（FC2ブログの場合'0'推奨）
    currPage: 0
  },
  // ページのパスを指定（FC2ブログの場合）
  path: function generatePageUrl(currentPageNumber){
    
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    
    
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    
    
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    
    
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    
    
    return ('<%url>/page-' + currentPageNumber + '.html');
    
  }
});

………？
既にこの段階でつまずきました。
そもそも、Infinite Scrollは次ページのどこを読み込んでいるものなのか、私は分かりませんでした。

ので、私は記事内容のところ全てにhtmlすべてを放り込むという愚策を行いましたが、当然動かない。

ウーン、これは次ページのhtmlすべて丸々読み込んでいるのでしょうか？
なら、トップエントリーの変数（ ＜!--topentry--＞）これだけじゃあ足りないよなぁ、という考え故の行動です。
そんな訳がなかったですね。

記事内容は、無論自ブログの＜!--topentry--＞～＜!--/topentry--＞内に収まっているhtmlの事です。
次ページで読み込みたい部分だけを#itemで包んでます。とても分かりやすいですね。

さて、なら、話が早いですね。
topentryの変数以外をコピペして、貼り付けました。



スクロールしないと無いので画像では見えませんが、下の方js読み込み様のタグも貼っています。
これで自動ページ読み込みが出来た筈です。

が、ページを読み込んでみたところ…

ウーン、動かない。
まったく動かない。
スクリプトのエラーを吐きだす文字すらない。

という事は、スクリプト自体が読み込まれて無いのかも？
と思いまして、試しに先ず、動くのかやってみました。

＜script＞
$('#items').infinitescroll({
navSelector : "#next-page",
nextSelector : "#next-page a",
itemSelector : "#items",
dataType : "html",
});
＜/script＞

これだと、問題なく動いたのですが、2ページ目を読み込みませんでした。
このJSを紹介して頂いてるブログさんの改訂後の文章に納得してみたり。

まぁ、読み込みは正常に済んでるみたいなので、思い当たる原因といえば、Infinite Scrollのバージョン違いぐらいでしょうか。
という訳でググってみたところ、下記のブログさんへ辿り着きました。

[jQuery]infinitescrollが正しくpage番号をincrementしてくれない件への対処｜ARKの技術メモ
http://arkmemo.blogspot.jp/2013/04/jqueryinfinitescrollpageincrement.html

うーんうーん。 とりあえず、よく分からないのですがハイライトされている記述を追記すればいけるだろうか。という安直な理由で、意味すら分からず追記。(まぁ、間違ってたら読み込まないし、動かないし、最悪ブログの表示がされなくなるだけじゃないか、という解釈)

そしたら無事、動きました。
問題なく２ページ移行も読み込めてます。

最終的にタグはこうなりました。

はっきり言って、動けばいいやぐらいの感覚じゃないと不味いかも知れないです。
私のブログのような1カラムの単純な構成では動きましたが、他のレイアウトだとどうなるか分からないです。
まぁ私は動けばいいんですけどね。

..end

ツリー化カテゴリをcssで設定する

2015/08/23

FC2ブログは便利にも、プラグインというものがありますので、それを使ってツリー化をする方法もありますが。
私は滅多にプラグインを使わないので、ツリー化出来る方法をmemoしときます( ..)φ

設定方法は小枠空間さんからより。

» more

<%category_name> [<%category_count>] 



<%category_name> [<%category_count>]
 

<%category_name> [<%category_count>]

ぱっと見ただけでは、何のこっちゃって感じですが、FC2の変数を上手に利用されています。
htmlの方にこれだけ設置しとけば、後はcss編集で済みますねー、ラクチン。

ul.tree {
    margin: 0 0 0 3px;
}
ul.tree li {
    padding: 0 0 0 13px;
}
ul.tree li.end {
    padding: 0 0 0 13px;
}

..end

FC2ブログテンプレートでのユーザータグの表示設定

2015/08/12

何かと便利なユーザータグ。細かい分類をしたい時には便利ですね。
FC2ブログでは、ユーザータグの変数さえtopentryの変数の内側にぶち込めば何とかなるように出来ています。

» more

自ブログ外検出(FC2ユーザーが共通して使っているタグ)

<%topentry_jointtag>

自ブログ内検出

 

<%topentry_tag_list_name>

 

便利ちゃあ便利なユーザータグですが、FC2ブログではタグの反映に数時間かかるんですよね…。現在、他のブログサイトを使ってないので、それがデフォルトなのかは分かりませんが。

ついでに。

ユーザータグをサイドメニューにクラウド表示

スクリプト不使用のFC2ブログ用タグクラウド｜畳紙
こちらのブログ様そのまんまなんですが、サイドメニューにタグクラウドを表示させる方法です。
コピペは必要ないんじゃないか、ってぐらいそのまんまなんですが、一か月以上の更新がないので、いつか削除されてしまうのではないかと懸念があるので、自分用メモとして残しておきたいと思います…。

tag cloud



<%stag_name>

html欄に入力する方のタグ。
以下引用です。

ここでは<!--stag-->～<!--/stag-->を使って並び順をランダムにしてます。もちろんrtag（最近追加された順）やctag（件数順）にしてもOK。

それからcss側に書き込む方です。

ul.tagcloud{
        margin: 0;
        padding: 0.5em 10px;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
}

ul.tagcloud li{
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 100%;
}

ul.tagcloud li a{
        text-decoration: none;
}

li.tcmax a{
        /* カウント20以上のとき（最大） */
        font-size: 167%;
        font-weight: bold;
        color: #424242;
}

li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
        /* カウント19～15のとき */
        font-size: 136%;
        color: #5e5e5e;
}

li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
        /* カウント14～10のとき */
        font-size: 122%;
        color: #7a7a7a;
}

li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
        /* カウント9～5のとき */
        font-size: 114%;
        font-weight: normal;
        color: #979797;
}

li.tc4 a, li.tc3 a{
        /* カウント4・3のとき */
        font-size: 92%;
        font-weight: normal;
        color: #b3b3b3;
}

li.tc2 a, li.tc1 a{
        /* カウント2・1のとき（最小） */
        font-size: 77%;
        font-weight: normal;
        color: #cfcfcf;
}

ul.tagcloud li a:hover{
        color: #000;
}

..end

FC2ブログテンプレートのサイドメニューの追加

2015/08/12

FC2のサイドメニューの追加方法、よく忘れる上に変数の設定が面倒なので、自分用にメモしときます。
前提としては、当ブログで配布しているテンプレートの一部で使えるような…使えないような…(曖昧)

» more

最新記事一覧

Recent Entries


<%recent_title> (<%recent_month>/<%recent_day>)

最新コメント一覧

Recent Comments


<%rcomment_name>: <%rcomment_title> (<%rcomment_month>/<%rcomment_day>)

最新トラックバック一覧

Recent Trackbacks


<%rtrackback_blog_name>: <%rtrackback_title> (<%rtrackback_month>/<%rtrackback_day>)

カテゴリー一覧

category


<%category_name> (<%category_count>)

アーカイブ一覧

archive


<%archive_year>/<%archive_month> (<%archive_count>)

リンク部分

Links


<%link_name>

プロフィール部分

profil


<%author_name>
<%introduction2>
 

こんな事をしなくても、FC2にはプラグインがあるじゃないか？…おっしゃる通りでございます。

..end

float以外で横並び(2カラム)レイアウトを組む

2015/08/12

divなどのブロック要素を使って表示をタイル形式にする際には、floatを使うのが私は使いやすいです。むしろそれしか知らない。tableはよくわかんない。

» more

floatでブロック要素を並べるには、親要素の画面幅(width)を指定して、その中の子要素として適当に並べてやった方が楽ちんではありますが。
まあ、floatの語源通り、あくまでブロック要素を浮かせるのが、この指定の肝なので、横並びにした際に縦の高さが均一にならないとはよくある事…。
heightとか使って高さ指定するのもアリっちゃアリです。その時に、オーバーフローとか指定してあげてもいいかも。でもそうすると、スクロールバーの設定とか文字数の限界があって、また考えるのメンドクサイ…。

でもどうやら、こんなレイアウトに面倒な事をしなくても解決出来る方法があるそうで。

【CSS】3カラムレイアウトでボックスの高さを揃えて横並びにする。

高さが決まっていないボックスの高さを均一にして横並びにしていく場合は「inline-block」を使おう

div{
  width:200px;
  display:inline-block;
  vertical-align:top;
}

まんま引用ですが、inline-blockとはインライン要素と同じようなもので、ううん、inline要素とは、書式とか強調文字とか、文脈の途中にも使えるタグの事です。(多分)　対してブロックレベル要素は、囲みの中全てを設定する要素です。大雑把ですが、私の認識はこんなもんです。
…何が言いたいのかといいますか、つまりはfloatで浮かせていたブロックレベル要素を、インライン要素に変えて並べちゃえ。って寸法ですね。これはよい発見をしました。便利。

..end

CSSで背景画像などを変更する

2015/08/11

こんな初歩的なこと、メモする意味ないだろうと思いますよね。私よく忘れるんです。

さて、前提はclass指定したdiv要素で背景などを好みのものへ変更します。

» more

指定内の背景色を変更する

#title_box{
background-color: #カラーコード;
}

指定内の背景を画像に変更する。(タイル状)

#title_box{
background: url("画像URL");
}

指定内の背景画像を変更し、ついでに色も変える。(背景固定)

#title_box{
background: 背景色のカラーコード url("画像URL") no-repeat 横% 縦%;
}

指定内の背景画像を変更し、ついでに色も変えてborderも表示させる。

#title_box{
border: 1px solid カラーコード;
background: url("画像URL");
background-color: #背景色のカラーコード;
}

オマケ

背景色を透過させる。

#title_box{
background-color: transparent;
}

transparentは、指定している背景色を除外します。ので、その部分だけ透明になります。
PCからだと指定しても特に問題ないと思いますが、私のスマホのデフォルトcssは、背景色の初期値がグレーになっていたので、ブラウザの設定が初期設定のまんまで弄ってないスマホから見ると、そのスマホの既定値になってしまいます。おのれiPhone。おのれsafari。 まぁ…bodyで背景色を指定しているのなら、問題ないでしょう。

..end