CANPAN ブログ検索
Loading
  • もっと見る
2013
Jan
1
いいなんブログ
    
島根県飯南町に関するブログ等を集めてみました。
新着記事が自動更新されます。
2012
Apr
28
サイト内検索フォームをカスタマイズする
    

CANPANブログにはサイト内検索機能が実装されています。
マイページ > スキンサイドバー > コンテンツ で「検索」を設定することで、
ブログ内の文字列を検索するフォームを表示することができます。
シンプルで使い勝手のいい検索フォームです。

しかし、見た目的にはいささか微妙。
しっかくい入力欄に、愛想のない[検索]ボタン。

これをカスタマイズし、よりサイトのデザインにマッチするようにしてみました。
以下、解説です。

まず、コンテンツ「検索」の「コンテンツHTML編集」を表示したところ、
検索フォームの HTML はデフォルトでは以下のようなものでした。

コンテンツHTML編集
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td class="side"><div align="center">
<img src="/template/<% css_id %>/img/side_title_header.gif" align="absmiddle">
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="side_title"><% content.title | html %></td></tr></table>
<div align="center">
<img src="/template/<% css_id %>/img/side_title_footer.gif" align="absmiddle">
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="side_text"><% content.header | nl2br -%>検索語句<br />
<form action="<% blog.page_url %>search/">
<input value="" name="keyword" type="text" size="20" />
<input value="検索" type="submit" class="input-submit" />
</form>
<% content.footer | nl2br -%></div></td></tr></table></td></tr></table>
<div align="center">
<img src="/template/<% css_id %>/img/spacer.gif" align="absmiddle" width="5" height="10">
</div>

このうち、余計な装飾等を排除し、以下のとおり、
検索フォームとして必要な部分だけピックアップしました。

<form action="<% blog.page_url %>search/">
<input value="" name="keyword" type="text" size="20" />
<input value="検索" type="submit" class="input-submit" />
</form>

 さらに、[検索]ボタンは左のような虫眼鏡アイコンを作成・配置することとし、
 テキスト入力部分・画像部分にそれぞれ CSS を設定すると、以下のようになります。

<form action="<% blog.page_url %>search/" />
<input name="keyword" type="text" class="form1"/>
<input type="image" src="/ooe/img/search.gif" class="form2" />
</form>

「コンテンツHTML編集」はこの4行だけで完成です。
次に、マイページ > スキンサイドバー > デザイン一覧
以下のような CSS を設定しました。

デザイン一覧 (CSS)
.form1 {
color:#818181;
border:1px solid #bbbbbb;
background:rgba(255,255,255,0.4);
padding:7px 10px;
margin:0px 0px 20px 15px;
font-size:12px;
-moz-box-shadow: 0px 0px 5px #bbb;
-webkit-box-shadow: 0px 0px 5px #bbb;
box-shadow: 0px 0px 5px #bbb;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
width:180px;
}
.form2 {
position: relative;
top: 6px;
left: -30px;
}
.form2:hover {
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

テキスト入力部分には form1 という設定。
 透明度40%の白を配置し、背景に対して少しアクセントをつけています。
 横幅は、180px に固定。
 枠には 6px の角丸を設定し、丸みを帯びさせます。
 それから枠全体を覆うような薄いシャドウを5px。

検索ボタンとして機能する虫眼鏡アイコンには form2 という設定。
 テキスト入力欄の内部に配置するため
 ポジションを 上 6px、左 -30px と設定しています。
 本来テキスト入力部の右側に配置されるものを、大幅に左にずらしているわけです。
 最後に、マウスカーソルが重なったときの透明度を70%に設定し、視認性を高めます。

以上で完了です。
このサイト内検索機能は、過去の記事を手軽に検索でき、
便利な事この上ないので、自分らしくカスタマイズして使ってみてください。
2012
Apr
18
日めくりカレンダー風 日付表示
    
ブログの日付表示を日めくりカレンダー風に変えてみました。
従来の表示よりも視認性が高く、デザイン的にもおもしろいかも。
この日めくりカレンダー風表示の設定を解説。

CANPANブログでは、記事作成日時の取得を下記のような SeeSaa変数 によって行います。

  <% article.createstamp | date_format("%Y年%m月%d日(%a)") %>

date_format 以降の %部分 は下記のような変数で置換可能です。

表示変数説明
西暦%y西暦の下二桁12
%Y西暦4桁2012
%m月2桁(1桁のときは0がつく)04
%B月の名前April
%b月の名前(短縮形)Apr
%d日付2桁(1桁のときは0がつく)01
%e日付2桁(1桁のとき0つかない)1
曜日%A曜日の名前Monday
%a曜日の名前(短縮形)Mon

上記を踏まえてHTMLを記述します。
西暦・月・日、それぞれに別のCSSを割り当てているところがポイントです。

HTML
<div class="dandan_date0"><% article.createstamp | date_format("%Y") %></div>
<div class="dandan_date1"><% article.createstamp | date_format("%b") %></div>
<div class="dandan_date2"><% article.createstamp | date_format("%e") %></div>

次に CSS 側を設定します。上記で示した3つの設定です。
西暦は枠なしで、月と日には枠をつけています。
月は背景に色をつけ、文字を白に。日は背景に白を、文字は色つき。
枠にはそれぞれ若干のシャドウを設定します。
ただしシャドウ表示は CSS3 のため IE8 以下では表示不可と思われます。

CSS
.dandan_date0{
color : #3B5998;
width : 40px;
font-size : 8px;
font-weight : bold;
padding : 0px;
text-align : center;
}
.dandan_date1{
background-color : #3B5998;
border : 1px solid #3B5998;
color : white;
width : 40px;
font-size : 8px;
font-weight : bold;
padding : 0px;
text-align : center;
-moz-box-shadow: 1px 1px 3px #bbb;
-webkit-box-shadow: 1px 1px 3px #bbb;
box-shadow: 1px 1px 3px #bbb;
}
.dandan_date2{
background-color : #ffffff;
border: 1px solid #3B5998;
color : #3B5998;
width : 40px;
font-size : 19px;
font-weight : bold;
padding : 0px;
text-align : center;
-moz-box-shadow: 1px 1px 3px #bbb;
-webkit-box-shadow: 1px 1px 3px #bbb;
box-shadow: 1px 1px 3px #bbb;
}


割と簡単な設定で表示できます。ご参考に!
2012
Mar
26
CANPANブログで実験中のカスタマイズ3つ
    
3/1 のCANPANブログリニューアル後、
ブログ上で可能なカスタマイズを今も少しづつ試しています。

以下、現在実験中の事柄メモ。

iPhone や iPad で [ホーム画面に追加] したときアイコンは指定できるか?
デスクトップ版表示では設定可能。
iPhone や iPad でご覧の方はデスクトップ版表示に切り替えた上で、
[ホーム画面に追加] を選択してみてください。
指定したアイコンがホームに追加されます。(通常は画面を縮小したもの。)
ただし、スマートフォン版表示では、現在どうやってもカスタマイズしたHTMLが適用されず、
成功できていません。

Facebook で「いいね!」を押したり、
シェアした際に表示されるサムネイル画像は指定できるか?
指定可能でした。
Facebook画面上に指定した画像を送り込めます。
Facebook側で古い画像をキャッシュしていることが多く、
デバッガーでキャッシュクリアが必要な場合が多いようです。

CSSでロールオーバー画像を指定できるか?
もちろん可能。
左メニューは今まで JavaScript で画像入れ替えをさせていて、
かなり長いコードと入れ替え時の画像が必要でしたが、
CSS で指定すると数行の簡単なコードと1枚の画像のみで実現できました。
トップ画像にもリンクを張ってロールオーバーしました。


そんな誰の役にも立ちそうにない機能を試して実装していますふらふら
やばいこれだれもきょうみもたなそう。
2012
Mar
8
Seesaa変数
    
CANPANブログリニューアル後からなのか、以前からだったのか、
CANPANブログはどうも Seesaaブログのシステムを
活用しているんじゃないかと思われます。

Wikipedia によれば Seesaaブログは
「ブログエンジンをASPとして販売している」とのこと。

コンテンツの中身をのぞいていると、
Seesaaブログで使われる Seesaa変数がちょこちょこと現れます。

というわけで今回はその Seesaa変数 を使って遊んでみました。

⇐ 左サイドバーの「BLOG ARCHIVE」の欄。
ここは最新の記事が表示されますが、
投稿した日時はリンクを辿らなければ分からないようでした。
ここに、投稿日時をひっぱてくる変数

   <% article.createstamp | date_format("%m/%d") %> 

を追加。
これで投稿日時が表示されます。
1年間更新がなかったのがばればれ。ふらふら

コメント数を表示さらにリンクにカーソルを持って行くと、
「この記事には2件のコメントがあるよー!」と、
その記事のコメント数を
教えてくれるようにしてみました。
これはリンクのタグの中に title をつけて、
コメント数をひっぱてくる変数

   <% article.children_count %>

を追加するだけ。

Seesaa変数、
アイデア次第でいろいろ使えそうです。
2012
Mar
7
ツイート・いいね!・Google+1 ボタンを右上に
    
ブログリニューアル後CANPANブログでは、
Twitter や Facebook 等で情報を共有するソーシャルブックマーク
簡単に設置することができるようになりました。

[マイページ>設定>ブログ設定]

ソーシャルブックマークの設定


しかし実際設置してみると、見た目がちょっと微妙…もうやだ〜(悲しい顔)

しかも一記事表示の画面では、
記事下部にソーシャルブックマークの他に、
タグや同一カテゴリー記事のリストが表示され、
すこし見にくい印象を受けました。

そこで [ツイート][いいね!] ボタンを右上に表示するように変更しました。右斜め上
HTMLに書き込んだので、常に自動的に表示されます。

ボタン背景には若干のグラデーションをきかせ、
すっきりとジャマにならない程度に存在をアピール!わーい(嬉しい顔)
割ときれいに収まったんじゃないでしょうか。


Google+ の +1 ボタンも改めて設置しました。
InternetExplorer で表示した際に改行されてしまうという
謎仕様が納得できずに削除していましたが、
CSS の調整でクリアできました。
+1ボタンはブラウザ上では block として認識するようですが、
CSS で強制的に inline にしてやると無駄な改行がなくなるようです。
現在は、IE でもきれいに横一列で表示されていると思います。

IE と Chrome 間での表示のズレは何とかして欲しいですが、
回避方法を模索しつつつきあってみようと思います。
2012
Mar
4
ブログデザイン リニューアル 新機能使い込み
    
CANPANブログのリニューアルが実施され、いろいろ機能が増えたので、
少しづついじくりはじめています。

今回のリニューアルでは、今まで機能的に不可能だった箇所も
カスタマイズ可能になり、「いじくり甲斐」が大幅にアップ。

ブログの隅々にわたってユーザーが HTML/CSS を書き換えできるようになり、
デザインの自由度は格段に広がったと言えます。

今日は本ブログのデザインを大幅に変更し、
シンプルで統一感のあるページを目指しながら、
新機能のいくつかを試してみました。

以下、主な変更点です。

トップ画像変更基本色は青紫です。
トップ画像はあまり大きすぎないほうがすっきりしてくどくないかも。
サイドメニューの幅拡張サイドメニューは「クリックしてもらうための場所」なので、大きめに表示し、見やすく使いやすく。
サイド各メニューのタイトルを画像で表示今までは(たぶん)ユーザーが変更することのできない箇所でしたが、各メニューの HTML を書き換えられるようになり、画像の配置も可能になりました。
サイドメニュー各項目の左側に画像を配置ここも新しく変更可能になりました。
今までカスタムスキンでは素っ気ない四角が表示されていましたが、画像をつけてみました。
Google+1ボタンを配置Google+使ってないのでよくわかりませんがなんかよく見るので。
最近は Twitter も Facebook もほぼ使ってないけど、やっぱりブログとからめていくことは無視できないと思う。
復活すべき?
Favicon 一新今までの CANPANブログでは、Favicon に使用する ico ファイルをアップロードできなかったため、ico を gif ファイルとしてアップロードし表示するというチート的方法をとっていました。
しかし今回、ico もアップ可能になりましたので、"まともな"Favicon を表示可能です。
デザインにあわせ、青紫の「だ」に変えました。
従来の Favicon 設置方法はこちら


他にも試したいことはたくさんありますが、今日はこれまでー。
新CANPANブログ、かなり楽しいのでみなさんもいろいろ触ってみてください!
2012
Mar
1
CANPANリニューアル 1年ぶりの更新
    
スマートフォン対応3/1正午、
CANPANが
全面リニューアルされました!

「いろいろ試さずにいられない病」
が発症しましたので、
およそ1年ぶりの更新です。

さて、今回のリニューアルで
特に注目したいのは、
スマートフォンへの対応

今までCANPANブログは、
スマホでもデスクトップ用画面を
表示しなければならず、
読み込みに時間がかかったりと、
他のブログサービスに比べて不利でした。

新しいCANPANブログを
スマートフォンで見ると、
右図のようにスマホ用のシンプルな画面を
表示してくれます。

これはうれしい!
ブログ1年さぼってたけどうれしい!


マイページの 携帯設定>デザイン一覧(スマートフォン)では、
スマートフォン用デザインを切り替えることも可能です。

スマートフォン対応デザイン切り替え

その他、ぱっと見て、うれしかった点。

 ・YouTube、ニコニコ動画 へのリンク用ボタン設置。
   (今までも手動でできたけど一発でできるのはうれしい。)

 ・更新通知先URLがあらかじめ複数用意されている。
   (Yahoo や Google にも即 Ping が送れ、検索にかかりやすくなる。)

 ・ InternetExplorer じゃなく GoogleChrome などでもきちんと更新できる!
   (もうブラウザ切り替えなくていい。IEは捨てよう!)

 ・Twitter や Facebook への連携ボタンが設置できる。
   (1記事表示のときのみかも?手動で付けてたボタンと使い分けてみたい。)

 ・ヘルプ表示が充実。
   (これは地味だけど、すばらしい。迷わない。)

 ・画像の一覧表示や代替文字の設定が容易に。
   (隠しページの画像もばっちりでちゃってるので、おどろきました。)

他にもいろいろ変化がありそうなので、
これからもちょこちょこといじってみたいと思います。
Archive
Category
Comments
https://blog.canpan.info/ooe/index1_0.rdf https://blog.canpan.info/ooe/index2_0.xml
Copyrights © 2009-2012 だんだんのグッドニュース All Rights Reserved.