Home >
Blog > Article published in [Category:
], [Month:
2025/01]
Home >
Blog > Article published in [Category:
Web], [Month:
2014/07]
×[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
http://aintai.blog.shinobi.jp[PR]
comments powered by
PC向けデザイン変更について半数(またはそれ以上)がスマホ/タブレットからのアクセスなのであまり意味が無いし多分時間の無駄なんだけど、またPC向けのデザインを変更した。スマホ用につくりたくないわけではないが、当然まだまだデザインの自由度が低いので、正直いじり甲斐がない・・・。しかも自分はiPadやタブレットの類を持っていないのでまず関心がもてない。(とにかくこの辺りについては読まれていることを前提にアウトプットできるようになってきたら真剣に考えよう。)
で、今回の変更点。
トップページ(
STREAM)を設けた。STREAM や
記事一覧のタイル状デザインに
Masonry を使わせていただいた。
Masonry、簡単に導入できたうえに自分の環境でもすごく安定していてとても満足。
日本のブログサービスではグリッドデザインはまだあまり用意されてないから、手軽に試したいときには重宝するはずだし、
このあたりを翻訳しようかなとも思ったが、まあ私が出来たくらいだからだいたいみんなわかるかなと思ってやめた。
ちなみに STREAM の内訳は各サイトにばら撒いてる/収集してるコンテンツを表示しており、RSSの取得には
忍者レコメンドを使わせて頂いている。この忍者レコメンド、あれだけ
使えないって書いておいてなんだけれどあの後忍者レコメンドがリニューアルされ、手動でもデータ取得できるようになったので再導入させていただいた。
◁取得元編集のページ。取得元の表示比率や個別記事の削除・非表示などを編集できる。手動でRSSの取得もできる。
STREAM用レコメンドの取得元は主に Tumblr と Pinterest、他に Last.fm と instagram。ただし、Last.fm はトップトラックを引いてきてるのに何故かそのトラックのトップリスナーのアバターを拾ってくるので削除するかも・・・知らないユーザーの顔ドアップしてるときがあっt(ry
なにはともあれレコメンドがつかえるようになってくれて本当に助かった。見た目のシンプルさが気に入って一時期お借りしていた複眼RSSさんもよかったが、設置後の運用・メンテナンスのしやすさで言ったら断然忍者レコメンドのほうがいいので。
その他の変更点は、
①カテゴリ一覧とアーカイブ一覧をプルダウンメニューにしたこと
②ぱんくずリストをつくったこと
ぱんくずリストは本当に面倒臭かった。
各条件にあったページ名を表示させなきゃなんだけど、その条件指定が難儀で。
"カテゴリ別記事一覧ページなら"
"月日別記事一覧ページなら"
"記事詳細ページなら"
"static page (ページ機能で登録したページ)なら"
の4つは条件式が用意されているので指定できるんだけど、
"検索結果ページなら"
っていう条件式が用意されてないので、"上記4つに当てはまらないなら"
と指定してクリアしようとしたが何故かうまくいかず。
そもそも複数条件を指定できるIF文使えるわけじゃないので指定が複雑になりすぎて
いったん諦めたいまとなっては何がどう不可能だったのか説明も困難。
(頭が悪すぎる)
プルダウンメニューはとても簡単だし、誰かの役に立つかもしれないのでコードのせておく。
ex) カテゴリ一覧 をプルダウン表示 ※プラグイン内でのみ作動します
<script type="text/javascript">
function GoToCTGRpage(){
CTGRSelect = document.CTGRform.CTGRmenu.selectedIndex;
location.href = document.CTGRform.CTGRmenu.options[CTGRSelect].value;
}
</script>
<form name="CTGRform">
<select name="CTGRmenu" onchange="GoToCTGRpage()">
<option>Category</option>
<!--plugin_category-->
<option value="<!--$plugin_category_link-->">
<!--$plugin_category_title-->[<!--$plugin_category_num-->]
</option>
<!--/plugin_category-->
</select>
</form>
Disqus再導入再って書いたけど、NinjaBlogに入れるのは初めてだったかも。たぶんブログじゃなくてHPのほうで昔使ってた。でもでもいっとさいしょの導入はもちろんTumblrで・・・懐かしいなあ(遠い目)。
年に一回くらいしかコメントが飛んでこないブログにこんなものを設置してもその意味を問われそうだが、何か便利そうなものがあるととにかく試さずにいられないの、つかうかどうかはあとでかんがえるの。
ちなみに、いつからこんな機能がついたのかわからないが「コメントカウント表示」機能なるもの用意されてて、さっそく記事詳細ページのメタデータに突っ込んでみた。
ex) 記事のコメント件数を表示するスクリプト
<script type="text/javascript">
var disqus_shortname = 'example'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
コメント件数表示部分のHTML
<a href="#disqus_thread">Disqus Comment</a>
ワーオナンテシンプル!!!!1
ちなみに件数表示部分の文言(「コメント: 0」とするのか「0 comment」とするのか)も設定できるんだけど、これは Disqus サイト内の /admin/settings/ で行う。
そろそろ昼夜逆転しそうな夜更かし具合だ・・・寝よう。