記事内の特定の文章を隠しておきたい時ってないですか?
例えばこちらの記事「GARNET CROW Special Countdown Live 2011-2012」では、ライブのセットリストを書いている箇所がありますが、ネタバレが嫌な読者もいるかもしれないので、その部分はいきなり目に入らないように隠しています。こんな事をしようと思ったら、みなさんのブログではどうします?


このブログはa-blog cmsで作っていますのでとっても簡単に出来ちゃいますよ。a-blog cmsには「組み込みのJavascript」という、サイトを制作する上で比較的よく使われるものが標準で用意されています。なので、必要な機能はいちいちコードを書くこと無く、classを付けるだけで実装できてしまいます。
特定の文章などを隠していおきたい場合は「特定の部分の表示/非表示をスライド効果で切り替えるトグル機能」を使えば、クリックする場所に「toggle-head」、隠しておきたい部分に「toggle-body」のクラス名を付けるだけでOKです。更に、a-blog cmsは、記事に使うHTMLタグにクラス名を付けるのは管理画面から設定しますし、トグル機能のクラス名は既にシステムのCSSに記述されているので、実はHTMLもCSSも触ること無く、管理画面で2つクラスを追加するだけで出来ちゃいますよ。
それでは、実際にやってみましょう。


管理画面のコンフィグ一覧にある「編集設定」画面に入ります。その中に「テキストタグセレクト」の設定画面がありますので、「p.toggle-head」と「p.toggle-body」を新たに追加します。ラベルには解りやすい名前を付けておけば大丈夫です。ここに付けた名前が、記事を書く時の画面で出てくるものになります。実質作業はこれだけです。簡単でしょ。



そして記事を書く時に、クリックする文字で「トグルヘッド」(...という名前にしてない場合は先程任意に付けたラベル名)、隠しておきたい文章には「トグルボディ」(...という名前にしてない場合は先程任意に付けたラベル名)と選択するだけで完成です。
※ヘッドとボティが複数箇所ある場合とかはこれだけだとダメだと思います。
※画像なども含めてDivで囲まれたエリア全体を隠したい場合ももう少し細工が必要です。




そんなa-blog cmsの勉強会、「a-blog cms ユーザー勉強会大阪 vol.3」を2月18日に開催します。昨日8日に最新バージョンの1.5がリリースされましたので、新機能の紹介やら、この記事のような小技Tips的な事も交えながら、基本的な使い方やカスタマイズ方法などをやりたいと思います。WPやMTもいいけど、クライアントさんにとって使いやすく優しいa-blog cmsがどんなものか、是非参加して確認してみてください。お申込みはATNDからお願いします。


関連タグ:a-blogcms 勉強会 Tips 

Did you like it?

いかがでしたか? よかったらTwitterやFacebookなどあなたの好きなサービスで是非共有してみてください。

このブログを書いている人

おかだよういち:

Designer + Photographer

兵庫県相生市在住。 1986〜1992年までシアトルに滞在。Northwest College of Artのビジュアルコミュニケーション科でアート・写真・デザインを学ぶ。その後東京のデジタルイメージ制作会社FOTONに入社。6年間の広告ビジュアル制作で修行し、現在は関西でWeb制作や撮影を中心にフリーランスで活動すること十数年。各地のセミナーイベントなどに頻繁に出没する。

ページの先頭へ

blog comments powered by Disqus