忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.03│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

NinjaBlogのカテゴリーをタグクラウド風に

昨今、流行のタグクラウド。
ワリと無料のブログでもタグ(キーワードタグというべきか?)に対応しているところも増えてきたのですが、忍者ブログではまだのよう。

いささか乗り遅れの気もしますけど、Ninjaでも似たようなものができないかと探してみたところ、SeeSaaブログで実現されているのを見つけました。
やどりぎ@NETseesaaブログでカテゴリをタグクラウド風に表示する

SeeSaaブログではすでにタグに対応しているのでわざわざカテゴリを使用する必要はないそうなのですが、△のサイト様のスクリプトをお借りして忍者ブログでのタグクラウド風カテゴリを作ってみました。

以下、作成方法です。

PR

プラグインの開閉②-Ⅱ ひとつだけ開くの閉じるボタン

プラグインの開閉②の「ひとつだけ開く」の時、本文をクリックしても閉じないときにつける「閉じるボタン」をつける方法。
プラグインの中身が長いと、ひとつ開いているだけでもずいぶんと下に長くなってしまうので、「閉じるボタン」をつけておくと便利です。

サンプル▼

1個目のプラグインタイトル
2個目のプラグインタイトル

仕組みは幾通りか考えられますが、今回は「空のBox」を追加するという方法でやってみます。

プラグインの開閉② ひとつだけ開く

プラグインの開閉①の応用編です。
今回はプラグインをひとつだけ開くという風にします。
どういうことかというと、ひとつのプラグインを開いたら、他のプラグインは閉じてしまい、開いているプラグインは常にひとつだけという状態にするのということです。
せっかくプラグインを折りたたんだのだからなるべくコンパクトに見せておきたいときはこれがお勧めです。

▼サンプル

1個目のプラグインタイトル
2個目のプラグインタイトル

設定方法は以下になります。
注:説明は忍者ブログのプラグインカテゴリー1でのものとなります。あらかじめご了承ください。
注:9/10追記 本文をクリックしても閉じるバージョンをサンプルとしています。

プラグインの開閉①一番簡単な開閉法

まずは一番簡単なプラグインの開閉方法のご紹介です。
プラグインをプラグインカテゴリーごと開閉するのではなく、各プラグイン(カレンダーとかアーカイブとか)ごとに開閉します。
プラグインカテゴリーごと開閉することももちろん可能です。

▼サンプル

プラグインタイトル1
プラグインタイトル2

説明は以下になります。
注:説明は忍者ブログでのものです。その他のブログで利用される場合は独自タグが異なりますのでご注意ください。

EntryNavigationを設置する

各ページごとの記事タイトルの一覧を表示させるプラグインを作ってみました。
以前からEntryNavigationとしてこのブログには設置してあるものです。

ご質問を受けて、どのブログにでも対応できるよう改良しようと独自構文解説書とにらめっこした結果・・・案外簡単にすることができました
実はページごとに条件わけしたり、自分用にちょこちょこいじったりしてたのでちょっと説明&設置が大変だなぁと思って今まで公開してませんでした。
よく解説見たらそんな必要がなかったんですね~(泣)

気を取り直して行きましょう(^^;)

一覧機能としては、
通常ページ=そのページに表示している記事のタイトルを一覧表示
詳細記事ページ=最新記事のタイトルを一覧表示
カテゴリーページ=そのカテゴリー名とそのカテゴリーの記事タイトルを一覧表示
日付ページ=その日付とその日付の記事タイトルを一覧表示
検索結果のページ=検索した文字とその検索結果の記事タイトルを一覧表示
といった感じになってます。そのしたに前後ページへのナビをつけることで、タイトルだけを見ながらページ移動をできるようにしてあります。

パンくずナビとはまた違った形で、サイト内での迷子防止になるかと思います。

ブログ内検索の活用法

Ninjaブログには、ブログ内を検索するプラグインがあります。
これで検索した結果をリンクとして表示できるということを知ってますか?

例えば、このブログでテンプレと検索したいとします。
<a href="http://start.blog.shinobi.jp/Search/?search=テンプレ">テンプレ</a>
と書きます。
そうすると『テンプレ』という文字をこのブログ内で検索した結果のページがでます。

例:テンプレ

▲のリンクが『テンプレ』という文字でこのブログを検索した結果のページです。
見てわかると思いますが、検索した文字にはハイライトとして青い背景色に白い文字になります。
このハイライトの色の変更は今のところできないようです。

ここからが本題。
この検索結果のページをうまく記事内などで使うと面白いと思いませんか?
でも、先ほどハイライトされた部分を見れば一目瞭然ですが、このブログ内検索は、プラグインの部分にも及びます。
あまり、見栄えがよろしくないですよね。

でも、この検索は、気づきにくいのですが、記事内やプラグイン内の『<-- コメント -->』として書かれた部分も検索してます。
『<-- コメント -->』の部分はHTML上に記述してもこの中の文字(この場合では「コメント」という文字)はブログ上に表示されないというタグです。

ここで、元に戻って、あるキーワードで記事を表示したい場合に、<-- コメント -->を使って記事内にキーワードを埋め込み、それをリンクで表示すると面白いのではないでしょうか。
<-- コメント -->で書けば、ハイライトもされないので見た目も綺麗です♪

先ほどの例だと、カタカナで『テンプレ』を検索するといたるところがハイライトされてとても見づらいです。

なので記事内に『<-- コメント -->』を使って『テンプレ』をローマ字で『tennpure』と書き、それをコメントとして記事内に記述します。
※注:管理画面の設定でテキストエディタを使用してる場合は普通に<-- コメント -->と書けばよいのですが、HTMLエディタを利用してる場合は、いったんソースというボタンを押してから<-- コメント -->として記述してください。

そしてその検索結果をリンクとして表示します。
<-- tennpure -->
<a href="http://start.blog.shinobi.jp/Search/?search=tennpure">テンプレ</a>

このリンクだと、記事内に『tennpure』と書いた記事のみを探してくれますし、HTMLソース上にしかない文字なので変にハイライトされることもなく、目当ての記事を表示させることができます。

例:テンプレ(この記事のみが検索結果として出てくるはずです)

記事内にうまくキーワードとして盛り込めば、ブログの管理者が誘導したいところに見てるひとを誘導できるし、ある意味サブカテゴリーとしても使えます。
プラグインにいくつかキーワードをリンクとして載せておくってのもいいかもしれないです(^-^*)

お暇でしたら、お試しくださいな♪

スクロールバーの表示・非表示の切り替え

久しぶりにカスタマイズの小技ネタ。
今回はプラグインにスクロールバーを表示したあと、そのスクロールバーの表示・非表示を切り替えられるようにしようというもの。
(スクロールバーをただ表示させるだけなら「プラグインにスクロールバーを表示する」という記事を見てみてください。)

実際の表示はこんな感じになります。

←左がスクロールバーが出てるとき、右が出ていないときです。

切り替えボタンは「Scrollbar ONorOFF」というところです。
とりあえずテキストリンクになってますが画像にしても問題ないです。
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
02

04
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter