Home > Tags > CSS

CSS

コラボレーション～人を巻き込むと効果絶大part.2～

2010-02-21 (日) 15:44
ブログ
CSS | WordPress | アイディア | ファビコン | ブログ | 巻き込む

　パンログをささやかに改造した。今回の改造も前回のコラボレーションと同様、UG氏とSkypeで雑談しながら進めた。改造中は無言だけどｗ
　今回行ったWordPressの改造・変更ポイントは、以下の通りである。

① ファビコンの表示
② ページの表示（タイトルの下のHome等の追加）
③ カレンダーの曜日部分を3文字表示（これまでは1文字表示でSやTが2つあった）
④ Tag CloudのCSSの変更（色でエントリ数の大小が直感的に分かるように変更）

4つある。下記に作業メモを残しておく。

① ファビコンの表示

１．ファビコンの自動生成ツールでファビコンを作成。
http://www.favicon.jp/favicon_auto_create/

Webベースで画像アップするだけで.icoファイルを作ってくれるから楽チン！

２．ファビコンをサーバにアップする。
http://konpan.com/image/favicon.ico

３．Favicon Manager WordPress Pluginを入れる。
http://www.digitalramble.com/favicon-manager-wordpress-plugin/

ダウンロードして解凍したphpを
/panlog/wp-content/plugins 配下に展開。
[WordPressの管理画面]→[プラグインの管理画面]→[Favicon Managerを有効]

４．ファビコンの設定・反映を実施する。
[WordPressの管理画面]→[設定]→[Favicon]→[Location:]に、２．でアップしたファビコンのURLを
貼り付け！完成！

　Twitterで使用しているアイコンをそのままファビコンにしちゃった。このアイコンは、研究室時代にUG氏が作ってくれたものである。いまだに使ってるよｗ感謝感謝ですな。

② ページの表示（タイトルの下のHome等の追加）

[WordPressの管理画面]→[外観]→[Vicuna Config]のNavigationをぐりぐりいじる。
完成！

　→ なんで今まで気づかなかったのだ。よく見らないかん。

③ カレンダーの曜日部分を3文字表示（これまでは1文字表示でSやTが2つあった）

１．[WordPressの管理画面]→[外観]→[編集]
　　→編集するテーマを選択：[wp.Vicuna Ext.]→テーマのための関数(functions.php)の中身をいじる。下記は一部抜粋してきたものだが、下記の4行目を参照。
　　→$day_name = mb_substr( $wd, 0, 1 ); となっていることから、先頭文字だけが表示されることになっている。$day_name = mb_substr( $wd, 0, 3 ); と変更することで、先頭から3文字を表示させることができる。


&lt;?php
        foreach ( $myweek as $wd ) {
                // $day_name = (true == $initial) ? $wp_locale-&amp;amp;amp;gt;get_weekday_initial($wd) : $wp_locale-&amp;amp;amp;gt;get_weekday_abbrev($wd);
                $day_name = mb_substr( $wd, 0, 3 ); //100221_曜日の先頭3文字を取得。
                if ($day_name == &amp;amp;amp;quot;S&amp;amp;amp;quot;) {
                        echo &amp;amp;amp;quot;\t\t\t\t\t&amp;amp;amp;lt;th class=\&amp;amp;amp;quot;&amp;amp;amp;quot;. strtolower(substr( $wd, 0, 3)) .&amp;amp;amp;quot;\&amp;amp;amp;quot; title=\&amp;amp;amp;quot;&amp;amp;amp;quot;.__($wd, 'vicuna').&amp;amp;amp;quot;\&amp;amp;amp;quot;&amp;amp;amp;gt;$day_name&amp;amp;amp;lt;/th&amp;amp;amp;gt;\n&amp;amp;amp;quot;;
                } else {
                        echo &amp;amp;amp;quot;\t\t\t\t\t&amp;amp;amp;lt;th title=\&amp;amp;amp;quot;&amp;amp;amp;quot;.__($wd, 'vicuna').&amp;amp;amp;quot;\&amp;amp;amp;quot;&amp;amp;amp;gt;$day_name&amp;amp;amp;lt;/th&amp;amp;amp;gt;\n&amp;amp;amp;quot;;
                }
        }
?&gt;

あれ？うまく“<”あたりが表示されない･･･。

④ Tag CloudのCSSの変更

１．Tag Cloudの色を変更して、色でエントリ数の大小を判断できるようにした。

以下のサイトを参考にした。
http://3ping.org/2007/10/20/1428

最後に

　こんな感じになりました。100221現在のパンログの様子。

② ページの表示

④ Tag CloudのCSSの変更（色でエントリ数の大小が直感的に分かるように変更）

　今回もまぁ楽しかった。まだまだ直したいところがある。今後やりたいな、と思っていることは、

① タグクラウドの数を減らす。今全部のタグが表示されているので。
② Amazon本の紹介コーナーで10冊ぐらいからランダムで2冊を出せるようにする。
③ 100ブログ作っちゃおう大作戦に向けて、すぐに作れるように、ブログ全体のテンプレ化をはかる。
④ cssが簡単にいじれるように、キャプチャした画像とcssのソースを紐付け、どこをいじればどこが修正されるかまとめたドキュメントを作る。
⑤ SyntaxHighlighterのphpの表示を直す。上記のphp表示を綺麗に見れるように。

　あとは、もっと記事を書け、コンテンツを増やせ、ってとこだなｗ

　頭の中にはたくさん眠っているが、まだ体現できていないので、少しずつ出せるようにしていこう。またコラボしましょう、UGさん！

Comments: 0
Trackbacks: 0

コラボレーション～人を巻き込むと効果絶大～

　パンログを大改造した。具体的には、外観のテーマを「wp.Vicuna Ext. 1.58」に変更し、広告を入れたり、はてぶ・はてなスターを入れたり、Twitterでつぶやく、なんかを追加した。改造に当たっては、一人では埒があかないと感じたので（CSSでとある文字を白にするのに、30分も悩んだし。。）、頼れる研究室時代の先輩でうぐろぐ管理人のUG氏と共にやることにした。Skypeやりましょう、と言ったら夜4時間半、朝1時間ほど付き合ってくれた。感謝！（26日にも3時間ぐらいしゃべってたみたいだｗ）

　UG氏と一緒にやったおかげで、作業がかなりはかどった。また、UG氏からの紹介で、「SyntaxHighlighter」を入れた。これを入れることで、記事上のソースコードがおしゃれに、かつ、見やすく表示されるようになった。パンログのタイトル部分の画像も、UG氏のアドバイスをもとに変更。この部分は不定期だが、たまに変えていって、過去画像保存場所を作りたい。Maniackers Designを見てて、高校時代から憧れてたもの。
　CSSの解析はUG氏と一緒にやってほんとに良かった。一人でいじってる時に思い描いてた通りになった。感謝！

　相談する人がうまく生きれるんだよ – パンログ（081201）でも書いた気づきがある。それは、困ったら人に頼る、ということ。このいかにもシンプルなことが、人生をうまく生きるコツなのだと改めて感じた。

　ブログをいじるだけで、人としゃべるだけで、湧き出るアイディア。人を巻き込む、頼る、ということは忘れないようにしよう。効果絶大。
　

　