経緯

最近大きめのイラストを描くことが多く、しかしひとつのエントリに添付できるのはファイルとイメージの二種類だけなので、メディアで個別にでっかいのを上げてそれをテキストでリンクーなんてことをしていました。
んなもんで、表示させてる画像をクリックしたらさらにでっかいの表示ーってのを、オプションを使ってスマートに見せれないかなーと四苦八苦してたら、虹色ミツバチのミツさんからアドバイスツイートを頂きまして無事にできました……！
毎度の如く、Smartyを知ってる人ならなんてことのない内容だとは思いますが、メモしとかないと俺が忘れるので記事にしておきます。

続きを読む

正確に言えば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

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

続きを読む

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

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

続きを読む

なんかスレでfreo使用サイトの検索方法が話題になっててアクセスがやたらとあるのだが…。
それにせっつかれて、というわけじゃないけど、リニューアルしてやり方を思い出せたので記事更新。

公式プラグインの「エントリーイメージ表示プラグイン」「エントリーギャラリー表示プラグイン」 のときに、ユーティリティ形式でカテゴリ絞込み欄を作る方法です。

エントリーイメージ表示プラグインの場合

gallery_category.html(DL)をダウンロードし、freo/templates/plugins/entry_image/のディレクトリ内にアップロードします。 freo/templates/plugins/entry_image/default.htmlを開いて編集すると{include file='header.html'}があるとおもいますが、その直後に以下のタグを挿入します。

<div id="content">

また同ファイルの最後、<!--{/if}-->のあと{include file='footer.html'}があるとおもいますが、その間に以下のタグを挿入します。

</div>
<div id="utility">
<div class="utility">
<h3>カテゴリーで絞り込む</h3>
<div class="content">
{include file='plugins/entry_image/gallery_category.html'}
</div>
</div>
</div>

エントリーギャラリー表示プラグインの場合

記事内のentry_image/をentry_gallery/に置き換えて読んでください。
タグのほうでは、記事内二番目の「{include file=plugins/entry_image/gallery_category.html'}」の赤い部分を「entry_gallery/」と置き換えていただき、 さらにDLしたgallery_category.htmlの７行目{include file='plugins/entry_image/gallery_category.html'}」も同じく赤い部分を「entry_gallery/」に書き換えればたぶん…いけるはずです。

注意とか

続きを読む

Freo関連の検索でたどり着く人が結構いるので、Freo記事を上げておく。
飛天の散人キャンペーンもひと段落ついたようだしね。


本来管理人しか読めないここの説明を

こういう風に、閲覧者がフィルタ設定するページで見せる。
※うちのサイトの例。

やり方

freo/templates/internals/filter/default.html
を以下と差し替えます。
filterの中のＨＴＭＬ弄っちゃってる人は、続きを読んで理解して自分で弄ってください。
ＤＬ：フィルタメモを閲覧者フィルタ設定時に表示するdefault.html(ZIP)

続き：特に解説する必要もないと思う解説

続きを読む

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ですー。