正確に言えばdefault.cssを読み込む、だけどもサイトデザイン適用って言った方が分かり良いかなーと。
たいしたとこはしちゃあいませんが、やっとくと捗ります。 簡単なので、オススメ。

preciew.html

freo/markitup/templates/preciew.html
の
<!-- content -->
を
<div id="container">
<!-- content -->
</div>
にする。

preciew.css

freo/markitup/templates/preciew.css
の
@import "../../css/common.css";
の直後に
@import "../../css/default.css";
を追加する。

以上。

補足

<div id="container">の部分は、お使いのデザインに合わせて適宜変えてください。本文にかかる部分の背景を設定しているclassやらIDやらつっこんでおけばいいです。
エントリー単位でデザインを分けているなら<div class="entry">にすればいいですし、背景が最初から白いならそもそもpreciew.htmlの編集の必要がない場合も。
……あ、エントリーとページと別デザイン使ってる場合の表示切り替えとかはさすがにわかんない……。

他に読み込みたいCSSがあれば、@importの行を好きなだけ増やしたらいいです。

freowikiとか見るとmarkItUp!関係はうちのページが並んでて有り難い限りなんだけども、このくらいのことは、日本語じゃないだけで解説あると思うんだよねえ。
もし英語とJavaScriptが扱えたら、いろんなサイト見て色々カスタム出来そうだよなー……。うーむ、口惜しや。

普段使わないちょろめでmarkItUp!の公式を開いたら自動翻訳してくれたので、前々から欲しかったカラーパレットのセットを落として覗いてみたところ、なんかできそうな気がしたのでがんばってみました。

マウスをのっけたらパレットが出てきます。ボタン自体をシングルクリックすると、カラーコードを直接入力できます。

markItUp!がFreoのデフォルトのままなら、そのまま上書き保存すれば9色追加できるZIPをご用意しました。2013/8/14の公式freoのmarkItUp!バージョンアップはjquery.markitup.jsのみなので大丈夫です。
解凍した後のdefaultフォルダーをfreo/markitup/sets/の中のdefaultにかぶさるように上書きすればいいですが、バックアップはとっといてください。

• カラーパレットセットをDL……20130818_mark_colpalt.zip

続きは、カスタマイズ済みの方へ、実装の仕方と応用。

続きを読む

タイトルからして大きく矛盾してるのはおいといて。

Freoのバージョンが相当変わってしまっていたので、ゼロから構築し直して作り直しました。 最近飛天効果でサイトをちょいちょい更新するようになったので、ようやくやる気が湧いた次第。

ついでに、いろいろプラグインもインストールしてデザインも色々弄るぞー！！
……と思ったんですが、前の気になってた所を少々治す程度で、デザイン自体はほぼ前のをまるまる引っ張ってきたかんじ。どうやら、この状態が、ほぼ俺にとっての完成形のようです。
Freoの素敵テンプレート配布してらっしゃるサイトさんはいくつかありますし、そちらをいじってみたい気はするのですが、カスタマイズのことを考えるとやっぱりデフォルトデザインの基礎が一番不安が無いんですよねえ。
俺あんまり頭良くないから、テンプレート適用後のFreoをいじれる自信がない。

ま、そんなこんなで。見た目はあんまり変わってないけど、内部のバージョンはがっつり上がってるので、「大幅にマイナーチェンジ」なわけでございます。

続きは、具体的にどこを変えたかとか、今回のリニューアルで引っかかった所とか、早い話が忘備録。

続きを読む

リニューアルしました。
…ええ、またです。前回から半年経っちゃいませんね。

前のデザインは、WDP時代にテンプレお借りしたKURAGEYAさんところのデザインを基礎にさせてもらったのですけども、Freoに移行する際に下手に透過とかいろいろやろうとしたもので…。
Freo用スキンも出たのでまたお借りしてもよかったのですが…「青空のドン底は」当初のシンプルなデザインが一番使い勝手よかったよなー…と思い自分でやってみることに。
ただし、見た目を変える目的でHTMLを弄るのは最低限に。バージョンアップの差し替えにひぃひぃ言ったので…。
にわかな人間が弄り倒してもいいことないしね。ということで、CSSのほうを弄り倒しました。

下手の横好きでしかないんですが、相変わらずデザインいじるのめっちゃくっちゃ楽しいです。
当初のシンプルさに、という意気込みで始めたのですが、そうもあんまりいきませんでしたね…。
今も使ってる背景素材に愛着がでちゃってまして、これ使うとどうしても藍になっちゃうんですよねー。
なんか、なんとなく、アミダっぽい仕上がりになった気がします。

普通のHTMLだと、過去ログとのデザインの統一がなくなってしまうのがネックだったのですが、CMSだとそれがないので気兼ねなしにいじくっちゃいますね…。

重たいファイルについて

回線が不安定なので、アップロードに手間がかかります。
多分このぶんだとまたリニューアルとかしそうなので、重たいZIPやフラッシュはサーバー外に置こうかと思ってます。

クエスト系のSSZIPはSkyDriveにアップロードしてみました。
フラッシュはKanfooに置こうかなと思ってて、まだ対応していません。表示できませんが数日中になんとかしますのでしばらくお待ちください。 4/21　見れるようになりました。

主な変更点

続きを読む

他記事を引用することが多くblockquoteタグボタンが欲しかったので。
ないとさんからヒント頂きました。

freo/markitup/sets/default/の中のファイルを主にいじります。
実例で説明していきます。

続きを読む

Freoのカスタマイズ例。

あんまり利用者はいなさそうですし解説するほどでもないんですが一応小ネタとして。

• templates/internals/default/default.html
• templates/internals/category/default.html
• templates/internals/entry/default.html
• templates/internals/view/default.html

この４つのファイルの以下のソース

<li><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#trackback" title="No.{$entry.id}のトラックバック">トラックバック({$plugin_trackback_counts[$entry.id]})</a></li>
<!--{/if}--> ！！！ここの間！！！
<!--{if $freo.user.authority == 'root' or $freo.user.id == $entry.user_id}-->
<li><a href="{$freo.core.http_file}/admin/entry_form?id={$entry.id}"><img src="{$freo.core.http_url}images/icons/edit.png" alt="編集" title="編集" width="16" height="16" /></a></li>

「！！！ここの間！！！」と書いたところに↓を挿入

<li><a href="http://twitter.com/home?status={$freo.config.basis.title}&nbsp;-&nbsp;{$entry.title}&nbsp;{$freo.core.http_file}/view/{$entry.id}">この記事をtwitterに投稿</a></li>

twitterにログインした状態なら、「サイト名 - 記事タイトル http://記事URL」と投稿欄内に自動挿入されます。
この記事の場合こんなかんじになる。投稿前に編集ももちろん可能です。

上のサンプル画像はアイコンいれたもの。
俺が作った奴はこれなのでご自由にどうぞ。透過GIF。

アイコンの場合のソースは

<li><a href="http://twitter.com/home?status={$freo.config.basis.title}&nbsp;-&nbsp;{$entry.title}&nbsp;{$freo.core.http_file}/view/{$entry.id}"><img src="ボタン画像のURL" alt="この記事をtwitterに投稿" title="この記事をtwitterに投稿" width="13" height="16"></a></li>

アンカーリンクの際twitterのURLに、home?status=　とつけてあったら、それ以降の文字列が投稿が投稿されるようになってるので、そこにFreoの変数を入れただけ。自分でFreoカスタマイズできる人ならたぶん解説すらいらないと思います。
ちなみにこの記事の時点でFreoは0.10.0ですー。