Home > Tags > CSS

CSS

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

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

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

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

① ファビコンの表示

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

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

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

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

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

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

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

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

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

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

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

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


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


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

④ Tag CloudのCSSの変更

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

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

最後に

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

ページの表示
② ページの表示

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

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

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

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

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

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

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

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

091228時点(改造後)のパンログ

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

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

 

Home > Tags > CSS

Calendar
« 2020 年 4月 »
Sun Mon Tue Wed Thu Fri Sat
      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    
Twitter
InBook.jp
 

携帯百景
携帯百景 - konpan
影響を受けた本


Return to page top