サイト内検索
Translation here

2016/03/27(日)新聞でよくある最初の一文字目が大きいアレ

お疲れ様です、野村です。

前からやってみたいことがあったので、この度試験的に導入しました。
詳しい説明はよそさんに丸投げします。

イニシャルキャップ.png


こんな感じになります。

画像先は日常系ブログの方です。
効果のほどはそちらを確認していただければいいのかな、と。
http://field-city.xsrv.jp/nomura/daylog/:きょうのごろう
雑誌や新聞などでよく使われる
最初の1文字目だけサイズが大きかったり色を変えたりする手法がありますよね

段落の先頭文字を使って
読者の目を引くこの手法を「イニシャルキャップ」といいます。

読者にインパクトを与えることができるのでアイキャッチ効果があります。

また、イニシャルキャップの配置の仕方によって
「レイズドキャップ」、「ドロップキャップ」、「ハンギングキャップ」
などの種類があります。

先頭の文字を大きくすることで、
新しい段落の始まりを強調できます。
【CSS】段落の最初の1文字だけ大きく見せる方法:ゆとりっち さん
ソースも公開されていますので、ご活用の際はご自身のサイトに合わせてみてください。
adiaryで設定する場合はユーザーCSSを活用するのが良いでしょう。

なお、ブログにはイニシャルキャップを配置するメリットを感じませんでしたので導入していません。


ちょっとCSS設定にてこずっています。
adiaryの記法に従ってはいるものの、*はソース上以下のように解釈されるようです。
<section>
<h3-h5>
</section>
この場合、sectionを掛けるとfirst-letterはhタグに掛かるため、とても使いにくいことが分かりました。
回避する場合、*の下にspanでも入れればいいんですが、わざわざそんなの書きたくないよなぁ、という事でちょっとやり方を考えてます。

【!】adiaryを無人管理する

なにやら物々しげなタイトルですが、実際に作ってみて実用できるレベルだったので公開します。
配布はどうだろうなぁ…ぶっちゃけ無償でサポートをしていたら手が回らないので出来ません。
出来ません、というのは簡単ですが何のために技術屋やってんの、と怒られそうなので条件付きでサポートを行う事も検討しています。

条件についてですが、あくまで私の狙いは技術研鑽を日曜大工的にやってもらってスキルを習得してもらうことにあります。
そういう意味の技術サポートですので、いわゆる電化製品店のサービスよろしくお金を払えば勝手にやってくれる、とかそういう事はありません。

ただ、こういうツールを作ろうとする心意気は買いたいので、参考にしてもらう分にはいいかな、と考えました。
アレな部分とかコレな部分にはすみませんがちょっとごにょごにょさせてもらいますが、それでも十分かなと。

checker.png

alert.png


ツールはこんな感じです。
やっている事は今までインストールしたadiaryのサイトの名前を一覧から取得して、なければ新規作成にチェックをつけて新規ブログを、
あればバージョン更新にチェックをつけて一致した名前のブログを最新のバージョンにします。

tool.png


さらに、ブログ作成と公開準備までボタン一発でできるツールを作りました。
そのツールで出来ることは書いてある通りです。
再生ボタンっぽいアイコンを押すとブログの新規作成→初期設定→基本設定その他まで全部やってくれます。
ヤバい生情報がいっぱいあるので見えないぞ!というレベルまでぼかしを入れてますけど、雰囲気は伝わるかな?


これらの作り方ですが、細かいことを言うとちょっとヒントを与えすぎてる感があるので、タグリストに並べるだけ並べました。
これぐらいの言語が分かる人なら自動化まで作れます。

自動化までしない場合はこんな技術は不要です。
最低限としてはshellscriptが組めるレベルぐらい。実際組まなくてもいいですが、そういうもんだと思ってください。

需要を見つつ、これらについても解説しましょう。

2016/02/03(水)JQueryとCMSでデザインもイケてるウェブアプリケーションを作りたい!

お疲れさまです、のむらです。

連日インフラ回りをガチャガチャやってるのでここいらでフロントエンドの話に戻ろうかなと。
JavaScriptとShellScriptの親和性の高さよ…

そうそう、タグなんですが便宜的にECMAScriptとしておきます。
厳密にいうとJavaScriptとは違いますが、差に拘らなければあまり気にしなくて大丈夫です。

ではJavaScriptのライブラリであるJQueryを使っていきましょう。
私のイメージ程度ですので本職の方としては色々思うところはあるかと思います。

・JQueryとは
JavaScriptのイベントハンドラを強力にサポートするライブラリ
それぞれのエレメントにキックさせるのやめよう
→HTMLがイケてない時でもハードコード出来る!!

JavaScriptで頑張ってデザイン作るよりは直感的に書ける
→CSSほどシンプルには書けないので使い分ける
 せっかくなのでMVCCっぽくやりたい
 →説明が適切ではなかったです。要するにこういうこと。
  →リンク先で参照している場所がよくわからなかったのですが見つけました。 
   こちらです。

MVCCと言うよりはMV(VC)Cとか言えばいいんかなぁ…なんか考えます。


CMSか何かでHTMLを自動生成されていたり、古い場合は大体イケてない状態(仕方のない事ですが)でも何とかする方法を考えてたんですが、以下の場合どうなんでしょうか。

====================================================
前提:HTMLにidが重複している、クラスは設定されていないしstyleタグを直接書いていたりなど、とにかくイケてない

-コンテンツはそれぞれの担当者(複数・仮想)がwordで作成する。
-HTMLレベルは外部委託している業者が作成する
-コンテンツは月に一回以上、必ず更新される
-テンプレートがそもそもないので、wordのレイアウトやデザインが100%…いや、70%は採用される
-フレームワークはよほどの限り変わらない(変わらないわけではない)

とします。
過去に担当したプロジェクトで似たような状態があったんですが、さすがにもう改善されています。
しかし良い(悪い?)運用ルールなので使わせていただきました。
====================================================

1.CSSはガリガリ書く
2.JQueryでエレメントを.each()で探し、ターゲットを指定してCSSファイルのクラスを当てていく
3.styleタグは消し込む
4.コンテンツエリアは除外対象とする

HTMLをスクラッチさせろとか思わずプロジェクトから降りたくなりますが、ないワケではないのです。


最後に

OK キャンセル 確認 その他