Font Awesome導入

きのう三日目までにひとりWikiのテンプレートの枠ができてます。今日も引き続き表示用テンプレートのコードを整理しました。

ほんとうはやらなくても良かったのですが

今日はアイコンをすべて文字に直す作業です。
♪ (音符です)こんな記号のフォントセットを見つけました。

Font Awesome

Font Awesome Cheatsheet

差し込みは簡単です。

Font Awesomeのファイルを読み込んでいるので果たして、携帯用に使うメリットがあるのか若干謎でありますけれどパソコンで見るぶんには問題ない軽さです。

ひととおり完成した後で、見だしの「H3」タグにも使いたくなりました。毎回コードを差し込むわけにも行かないのでスタイルシートの疑似要素で作りました。

wordpressでもできます

ここで具体的に使っていないのは、まあ手間なのでwordpressには導入するつもりがないのです。プラグインとコードを使うときれいに作れるみたいなので興味のあるかたは「 wordpress Font Awesome 」で検索してください。

「CSS」「Font Awesome」のUnicodを 「:before」「:after」で挿入する:初心者のためのHTMLとエクセル講座:HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォトショップ(Photoshop)入門
こちらにわかりやすい解説。

使用目的

具体的には上部の目次に移動するリンクのアイコンに使いました。ページ上部への移動のボタン、それと先にあげた見だし用。テキストサイトなのでアイコンが付くとちょっとだけ賑やかになります。

CSSは思い出の彼方に

「li」にIDを付けようとしたり、IDを2度付けようとしたりスタイルシートのルールを忘れてました。

CSSも3になると、「ウインドウサイズの値でスタイルを個別に適用する」なんて器用なことができます。最初に使っていた12カラムで制御するテンプレートは実はこの最大幅のスタイルが生きていただけでほかのタグは全く役に立っておりません。そこで削除。

ほかになぜこのタグがあったのが謎のタグを削除。

コードは見せませんがHTML側はかなりすっきりしました。CSSのほうは出来るだけ軽く作り直して完成です。もう枠を作るのは止めたい。

ひとりWikiの運用

ひとりwikiの運用はまだ始まっていません。使って見てわかったのはフォルダを増やして沢山の記事を書くのが大変であること。

ひとつのテーマでまとめてフォルダに分けるより、なるべく少ないフォルダで沢山の事柄をひとつのファイルにまとめていくのが、どうもひとりWikiの使い方としては楽かなと。

書く側の都合としてはファイルはともかくフォルダをまたぐのが面倒です。ソフト経由じゃないとファイル名が読めませんので。

カテゴリ分けの実験

ためしに「ホームページ作り」と「ブログ作り」を別なフォルダにしてみたら、まあまたぐのが大変です。ホームページ作りで細分化するよりも、もうホームページ作りのファイルにブログ作りをおさめておいて、内部リンクで分けた方がよさそう。

書きやすさと管理し易さを優先

実運用でもページの枚数をどうこうするよりも中身を厚くして中でリンクをつかってナビゲーションしたほうが、たぶん道具の使い方として正しいように思います。自転車ならフォルダじゃなくて1枚のファイル、カメラはカメラで1ファイルのような方法です。

ほんとはページで分けて構造化すべきじゃないかとずっと頭の片隅に思い浮かぶのですけれど、要素が私の外にあるのでやってみて判断することにしましょう。