テンプレートを変えてみた

テンプレートを変えてみようかなと思ったのだ。
もう、8年も使ってたし、レスポンシブなのにしてみても良いかな、と。



tl;dr

こんな手順、かな

  1. 新しいテンプレートを探す
  2. 既存のテンプレートのカスタマイズ箇所を確認
  3. プラグインの順序
  4. 新しいテンプレートのカスタマイズ

新しいテンプレートを探す

これが無いことには始まらない。
レスポンシブを試してみるかな。

共有テンプレートの Belong にしてみようか。
http://admin.blog.fc2.com/control.php?mode=design&process=download&no=45352

既存のテンプレートのカスタマイズ箇所を確認

  1. 「テンプレート管理」で適用中のテンプレートの「複製」をクリック
  2. 複製されたテンプレートは、末尾に 1 がついてる感じなので、bak とかにしておく
  3. 複製されたテンプレートを適用する
  4. 複製元のテンプレートを「削除」
  5. 複製元のテンプレートを、もう一度ダウンロード
  6. HTML とスタイルシートの差異を確認

前に使ってたのは、mushroom_liquid @公式テンプレート。

HTML、javascript
  • 個別記事の meta description
  • favicon
  • SyntaxHighlighter
  • Google Analystic Tracking Code
  • Hatena Star
  • jQuery
  • FC2 Analyzer
  • 投稿時刻
  • 「続きを読む」の末尾に点々
  • 記事 footer のカテゴリに隅付き括弧
  • コメントの外部スクリプトに charset 指定(元の方で修正されたか?)
  • Random List
基本スタイル
  • 文字色
  • フォントサイズ
  • blockquote
  • div#container
  • div#header h1
  • div.entry_day
追加スタイル
  • レシピ用
  • 広告

ここから、新しいテンプレートの変更など。

プラグインの順序

右のサイドバーに、カテゴリー1、カテゴリー2 の順で並ぶ配置なので、入れ替える。

旧いプラグインの並び
カテゴリ1 カテゴリ2
カレンダ FC2 カウンター
最新記事 プロフィール
カテゴリ リンク
最新コメント 検索フォーム
最新トラックバック RSS リンクの表示
月別 管理用のメニュー
全記事表示リンク Powerd By FC2 ブログ - 非表示
ユーザタグ ブロとも申請フォーム
「おいしい!」 - 非表示
新しいプラグインの並び
  • カテゴリ1
    • カレンダ
    • プロフィール
    • ユーザタグ
    • 最新記事
    • カテゴリ
    • 最新コメント
    • 最新トラックバック
    • 月別
  • カテゴリ2
    • FC2 カウンター
    • リンク
    • 管理用のメニュー
    • ブロとも申請フォーム
    • RSS リンクの表示
  • 非表示
    • 全記事表示リンク
    • 検索フォーム
    • Powerd By FC2 ブログ
    • 「おいしい!」

アクセスカウンターはサイドバーじゃないな。

ユーザタグプラグイン

p タグでくくられてると css が上手く効かないことがあるので、div でくくる。

カテゴリプラグイン

罫線の色を合わせる。いや、罫線を無くす。


 ↓



プロフィール

冗長。
どうすっかな。

新しいテンプレートのカスタマイズ

とりあえず、やりやすいやつを先にやってしまう。

  • SyntaxHighlighter
    テーマを Default → RDark
  • favicon
  • Google Analystic Tracking Code
  • Hatena Star
    コンテナを新しいテンプレートに合わせる
  • FC2 Analyzer
  • 日付のスタイル、投稿時刻
    「月(英語)→日→年」を「年月→日」にして、時刻は time タグに入れる


要らないやつ。

  • jQuery
    テンプレートで導入済み(jquery.2.1.3)
  • コメントの外部スクリプトに charset 指定
    元の方で修正されたと思う

後で考えるやつ。

  • 個別記事の meta description
    見た目に関係ない
  • 「続きを読む」の末尾に点々
    スタイル次第
  • 記事 footer のカテゴリに隅付き括弧
    スタイル次第
  • Random List
    HTML の構造に依存するし、要らないかなという気もする

とりあえず、ここで適用してざっと確認してみる。

  • トップ
    • 続きを読む
  • 個別記事
    • 新しい方からいくつか
    • プログラムソースあり
    • 画像あり
    • コメントあり
  • 全記事一覧
  • タグ

後、スマホ版の表示設定を「無効にする」にしてみて、スマホでも確認。

確認して気が付いたこと

  • 記事下の SNS ボタンは要らない
    SNS のボタンと機能が被る
  • 記事下の広告
    uBlock を切らないと、広告の確認ができない
  • サイドバーのユーザタグのスタイル
  • 文字の色がちょっと薄過ぎるかな
  • 右側から出てくる「次の記事」がサイドバーの下に潜り込む

    z-index ではなく、background-color の問題っぽい。
    .side-pager-left
    .side-pager-right

  • http://jimsie.blog57.fc2.com/blog-entry-164.html のスタイルがちょっと崩れてる
  • archives.html って、72記事/1ページだったのか
  • サイドバーがちょっと大きいかな、という気がしなくもない
  • タグ一覧の画像。fc2 に載せてないと一覧に表示されないんだ。
  • 「続きを読む」が "READ MORE" なのな
    [ ] でくくる

記事下の SNS ボタンは要らない

SNS のボタンと機能が被るので、記事下から消して、FC2 拍手を SNS ボタンのエリア (ul.inner-footer-sns) に入れちゃう。
SNS ボタンのアイコンは、それ用のフォントがあるんだ。
Font Awesome Icons
拍手用のアイコンが無いので、

  • 手のひらのアイコンをふたつ表示
  • 90度回転して、少しずらす
.c-fc2-clap .fa-hand-paper-o {
    transform: rotate(90deg);
}
.c-fc2-clap .fa-hand-paper-o:nth-child(2) {
    position: relative;
    right: 5px;
    top: -10px;
    width: 0;
}
.inner-footer-sns li .c-fc2-clap:hover {
    background-color: orange;
    color: white;
}

個別記事の meta description

http://yohshiy.blog.fc2.com/blog-entry-131.html
カテゴリーとタグを入れておく。

  
  <%sub_title> - <!--topentry--><%topentry_category><!--/topentry-->
  
  
  

で、Google Search Console からクロールの指示(「取得してレンダリング」)。
で、「インデックス登録をリクエスト」。
ま、効果のほどはたいしたことはないんだろうけれど。

一番上の SNS リンクのナビゲーションバーのクリックが効かない

div.navi-menu2 が上に乗ってて押せない。
.sticky がついたときに見えるようにするか、上に持ってこないとダメだろう。

.sticky {
    display: block;
}
.navi-menu2 {
    display: none;
}

表示を開始する位置を、div.navi-menu の offsetTop (130px) に合わせる。

ふたつあるのもどうかと思うけど。
offsetTop を見て、position: fixed に変えれば良いんじゃないかと思うけど、とりあえずこのままにしておく。
# 気が向いたら直す

SNS リンクのナビゲーションバー

div#sns-navi の内容。

  • 人力検索を追加
  • Twitter、Pinterest の URL を設定
  • Facebook、Google+ を削除

アクセスカウンター

頭の方に持ってきたいところだが、2カラムになったのでサイドバーが窮屈。
ヘッダの辺りに入れるにしても、画像だとカッコ悪い(背景が透過色のを探すのも面倒)。

プラグインで設定している外部スクリプトがこいつ。
http://counter1.fc2.com/counter.php?id=3772823

こいつが、document.write で
http://counter1.fc2.com/counter_js.php?id=3772823&main=0&lang=0&visitor=0
を読み込む script タグを書き出す。

img タグのの書き出しを横取りして、別のところに書きだせば良い。こういうのは人力検索で経験済み。
http://q.hatena.ne.jp/1482265350#a1260851
http://stackoverflow.com/questions/17542595/how-to-include-a-script-with-document-write

document.writeln をすげかえて、DOM で sns-navi のお尻に突っ込む。

    
    ...
// access counter to sns-navi
(function() {
    var writeln_ = document.writeln
    var re_fc2_counter = new RegExp('^[<]a href="http://counter\\.fc2\\.com/"');
    docu ment.writeln = function() {
        if (re_fc2_counter.test(arguments[0])) {
            var pat = 'src="http://counter1-cdn.fc2.com/[^"]+/([0-9])[.]gif"';
            var re2 = new RegExp(pat, "g");
            var mat = arguments[0].match(re2);
            if (mat) {
                var re3 = new RegExp(pat);
                var ar = mat.map(function(s) {
                    var mat2 = re3.exec(s);
                    return mat2 ? mat2[1] : "?";
                });
                var n = ar.join("");
                var e = document.getElementById("access-counter");
                if (e) {
                    e.innerHTML = n;
                    e = document.querySelector(".plugin-counter");
                    var sidemenu = e.parentNode.parentNode;
                    sidemenu.style.display = 'none';
                    return;
                }
            }
        }
        writeln_.apply(document, arguments);
    };
#access-counter {
    color: white;
    padding-left: 2em;
}

はてなスター

前につけてもらったのが消えちゃった (´・ω・`)

まあ、それは仕方ないとして、

  • mouseover したときのツールチップが崩れる(アイコンが見えない)
  • 記事一覧で、それぞれのページのスターがついてない

ツールチップは、多分、フォントのせいだな。
でも、記事の一覧ではちゃんと見える。
個別ページだけ駄目だ。

一覧のやつは、人力検索とか見てみれば良いのか。

いや、前から間違ってたかな。
一覧で記事のスターをつけると、トップページについちゃう (´・ω・`)

前のコード。

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.content': {
      uri: 'h2.entry_header a',
      title: 'h2',
      container: 'h2'
    },
    'div.content': {
      uri: 'document.location',
      title: 'h2',
      container: 'h2'
    }
  }
};

我に返ってみれば、JSON なんだから、同じ 'div.content' がキーになっていれば上書きされちゃうじゃん。
uri: 'document.location' しか効いてなかったんだな。
個別ページと、それ以外で分けなきゃいけない。
こうやるんだ。

Hatena.Star.SiteConfig = {
  entryNodes: {

    'header.element-header': {
      uri: 'h2.element-title a',
      title: 'h2',
      container: 'h2'
    }


    'header.element-header': {
      uri: 'document.location',
      title: 'h2',
      container: 'h2'
    }

  }
};


スターのツールチップが崩れるのは、ページによるみたい。
http://jimsie.blog57.fc2.com/blog-entry-164.html
につけたスターだとずれる :-|

インラインに展開されている .profile-icon のスタイル指定がまずい。

あっ。
はてなスペース用のスタイルシートが効いてるのか。
この記事だけ埋め込まれてるんだった。

じゃあ、気にしない。


もうひとつ気が付いた。
新着記事のタイトルに New! を表示するスクリプト nw() が h2 タグの内側に入ってて、それがスターのタイトルとして送信されてる :-|

h2 の外に出す。
というか、要らないな(そんなに頻繁に書かないし)。

何ヶ所かに埋まってるので、関数の中身を消す。


# ちなみに、前につけてもらったスターが消えたのは、気のせいだった

title

s.hatena.ne.jp を更新して気が付いた。
「トップページ」とか title に入れるのどうよ。
トップページと個別ページの title を見直し。

トップページ、全記事一覧を Google でクロール。

月別プラグイン

縦に長すぎる。年単位で折りたたむ。

:before や :after の content で、数値参照や実体参照が効かないのは豆知識。
UTF-16 のコードに、頭に \ をつける。

プロフィール

サイドバーが縦に長すぎるので、アイコンと一言だけにしよう。

blockquote のスタイル

引用スターまで、blockquote の ::before 、::after で引用符をつけられてウザったい。
article の中の blockquote だけにする。

カレンダー

border-collapse: collapse にして、曜日を英語にしたりなんだり。

ユーザタグ

タグクラウドっぽくしてみた。

<%stag_name> <%stag_count> 




「料理」と「レシピ」のタグのつけ方、間違ってるな、というか、ほぼ両方ついてるから意味ない (´・ω・`)
一括削除はできるみたいだけど、どうすっかな。

ユーザタグ「レシピ」と「料理」

大抵の記事にはふたつのタグが付いてる。

料理 58
レシピ 48
料理のみ 11
レシピのみ 1

ほぼ、料理カテゴリだし。
料理カテゴリ以外は、

  • カップヌードル(シーフード)にチョイ足し
    → 日記
  • マグロの冷凍ブロック
    → 未分類
  • Google 検索のレシピモード
    → 未分類

料理タグを外して、「料理」タグしかついてなかったやつを振りなおそう。

「料理」のみ

記事 新タグ メモ
サヨリをさばいてみた 料理
春菊のジェノベーゼ レシピ
カップヌードル(シーフード)にチョイ足し タグなし、カテゴリを料理
焼肉のタレ^2 レシピ
マグロの冷凍ブロック 料理
豚肉と玉ねぎのコチュジャンゴマ焼肉 レシピ
Bill のスクランブルエッグ レシピ URL がずれてる
香辣砂肝(シャンラーサカン) レシピ
ナポリタン レシピ
さわらと春キャベツのブレゼ タグなし
生鮭のグリル ローズマリー風味 タグなし

「レシピ」のみ

記事 新タグ メモ
Google 検索のレシピモード (このまま)  

記事の管理の下の方に、複数の記事にタグをつけたり、外したりできるのがある。
絞り込みの条件でタグを指定すれば良いんだ。
「ユーザタグの編集」からは、「件数」にリンクが張られてる。

検索窓が開いたときに、フォーカスを当てる

Remodal という jQuery プラグイン。イベントがある。
https://github.com/VodkaBears/Remodal#events



検索結果や月別には、カテゴリだけじゃなくて、タグも欲しいな

とりあえず、検索結果に。

	  
	  

Search Terms(<%total_num>hits): <%sub_title>

...

カテゴリ一覧も。

	  
	  
...

カテゴリ-0 と、カテゴリ-12 が、サイドバーで「親」の扱いになってない。

管理画面のカテゴリ管理では、

  • カテゴリ-0(カスタマイズ:旧未分類)

    「子」のチェックボックスが出てない
    「削除」ボタンが無い

  • カテゴリ-12(未分類:新規)

    「子」からチェックが外れてても親にならない

そういえば、親・子の判定を変えたんだったか。

<!--category_parent--> ~ <!--/category_parent-->
・親カテゴリー(子カテゴリーがある場合)に表示する


テンプレート用 変数一覧 | マニュアル | FC2ブログヘルプ

これか。
クラスの指定に <!--category_nosub-->parent<!--/category_nosub--> を追加

meta keywords(再)

http://128bit.blog41.fc2.com/blog-entry-163.html
カテゴリーとタグをキーワードに指定する。




一覧に入れたタグ

タグのアイコンをつけたい。
Font Awesome Icon を使う。

          

記事下と、検索結果と、カテゴリ一覧、それに月別。

div.navi-menu と div.navi-menu2 のふたつある。
コピペ 良くない。

スクロールしたときに、.navi-menu をこうすれば良い?

.navi-menu {
  position:   fixed;
  width:      90%;
  margin:     0 5%;
  z-index:    999;
  background-color:   white;
}

スクロールを戻るときが難しいか。
navi-menu をマーカーにしておいて、navi-menu2 だけを表示させておけば良いかな。

微妙にクラス名が違ったりする。

        
  • HOME
  • ...
  • HOME
  • スクロールの追尾だけじゃなくて、ハンバーガーメニューもあるんだな。
    幅が狭くなると、navi-menu2 はハンバーガーメニューに代わり、タップで表示されるメニューになる。

    同じ内容を二つ書かない方向でいじった方が良いかも。

      
    
    


    http://admin.blog.fc2.com/control.php?mode=design&process=download&no=45474
    同じ作者で、3カラムだけど navi-menu がひとつで、ハンバーガーメニューに切り替わるやつがある。
    そっちのコードを移植しても良いけど、めんどくさい。

    simplePagination

    ページのナビゲーション
    http://flaviusmatis.github.io/simplePagination.js/

    とりあえず、元のままで。

    footerfixedoriginal.js

    何をやってるのか分からん。
    外しても、footer は下に貼りついているが...

    とりあえず、元のままで。

    darkboxmin.js

    LightBox っぽいやつらしい。

    あまり情報が無い。
    なんで、こんなマイナーなのを使ってるんだ?


    http://www.jquerycode.com/lightboxes/darkbox/
    https://github.com/pepelsbey/darkbox
    http://pepelsbey.github.io/darkbox/
    本家の DEMO ページでは、javascript で対象を指定してる。

    いや、これは違うか。
    http://pepelsbey.github.io/darkbox/jquery.darkbox.min.js
    に、data-darkbox の記載がない

    こいつか。
    http://blog.raizzenet.com/how-to-use-darkbox/
    data-darkbox 属性が要るんだな。

    http://vanillaice000.blog.fc2.com/blog-entry-306.html
    テンプレート作者のブログにも説明があった。

    data-darkbox 属性は、値が無ければ src 属性から画像の URL を取得する。
    とはいえ、拾う対象を data-darkbox 属性で指定しなくちゃいけない。

    
    


    対象を拾う処理は、イベントを捕まえているわけでもないので、スクリプトにしづらい。
    いや、こいつの前で data-darkbox 属性をつけちゃえば良いのか。

    
    

    「次へ」とかが効かないなあ。
    元の画像へのリンクも失われるし。

    このまま使うか、手を入れるか...


    https://github.com/rokobuljan/Darkbox-Gallery
    本家はこいつだ。

    http://stackoverflow.com/questions/30745859/gallery-for-my-website
    ああ、この回答がベースか。
    いや、回答者が彼なのか。


    「次へ」が効かないのは、プログラムが悪い。
    data-darkbox 属性に値がセットされていなかったら、img.src から URL を取るようになってるのに、img の配列を取得するのが、data-darkbox 属性に何か値が入っていたら、になっているからだ。

    data-darkbox 属性を自動でふるなら、値を入れれば良いだけのことなんだけど。


    スマホでの挙動がおかしい。
    タップしても表示されないけど、一度、ハンバーガーメニューをタップして、メニューを表示すると Darkbox も表示される。

    まあ、いいか(放置)。

    サイドバーが縦に長い

    ブロとも申請なんてほとんどされたことないけど、要るか?
    リンクとかも要らないなあ、というか、他のところに入れた方が良いんだろうな。

    ま、後で良いか。

    Darkbox のスマホでの挙動がおかしい

    タップしても表示されないけど、一度、ハンバーガーメニューをタップして、メニューを表示すると Darkbox も表示される。

    修正するよりは、別の LightBox 系を入れた方が早そうだ。
    とりあえず、放置。



    そろそろ飽きてきたので、この辺りでいったん様子見としよう。


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

    html javascript css

    0 Comments

    Leave a comment