FC2ブログ
        
     管理者ページ

          
今、Wordpressを使ったウェブ制作作業をしています。
色々と勉強しながら、変更を加えたりしながら作業していますが、段々と情報量も増えて初期の作業を忘れていきそうなので、備忘録をつけてみることにしました。

完全に自分のための記事ですので、サラッとスルーしてください^^;
Firebug
  Firefoxに追加するプラグイン。
  現在自分が見ているウェブページのhtmlやcss、JavaScriptを、リアルタイムに編集できたり、div構造やpadding, marginなんかを視覚的に確認できるという優れモノ。
  ちょっとずつ実際のページを確認しながらいじれるのはめっちゃ便利です。

リセットCSS
  出来るだけ多くのブラウザでレイアウトの崩れが出ないようにするため、reset.cssで各ブラウザのデフォルトCSSをリセットしてからレイアウト用のCSSを読み込む。
  style.cssに以下を記述。
@charset "utf-8";
@import url(reset.css);
@import url(basic.css);
@import url(component.css);
ADP: floatレイアウトでつまづかないためのTips
 ・先にfloat: leftをしたボックスのmargin-leftや、先にfloat: rightをしたボックスのmargin-rightは指定しない。
 ・横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない。

今時の WordPress サイト構築法 (テンプレート編)
  SandboxをベースにしたテンプレートデザインのコンペSandbox Designs Competition,を参考にしながら、Sandboxを使ったテンプレートを制作。
 
Using Smilies
  投稿記事中にスマイリー(絵文字)を書くための、コード表。
  スマイリーを使えるようにするには、「設定」→「投稿設定」→「:-) や :-P のような顔文字を画像に変換して表示する」にチェックを入れる。
  (コード前後に半角スペースを入れないと絵文字が表示されません。)

TinyMCE Advanced
 クライアント(姉)の日記中には頻繁に絵文字が登場する。
 このため、投稿記事およびコメント中に、簡単にスマイリーを入れられるプラグインを探してみた。
 が、評判のWP Grinsは作者のサイトがなくなっていた上に、Wordpress2.6.3ではエラーが出て使えなかった。(エラーを修正する気力なし)

 で、たどり着いたのがTinyMCE Advanced
 この際コメント欄にスマイリーボタンを作るのは断念するとして、投稿ページだけでもスマイリーボタンが出せればいいや、と思って入れてみたら、いやはや、なんて便利なプラグイン。
 ビジュアルエディタを使う人にとっては、投稿がとっても便利になる優れものです。
 ツール追加し放題★
tinymce_screenshot-1.jpg
 
 このスマイリーボタンを押した際にポップアップで出てくる表情アイコンは、Wordpressにデフォルトで入っているもののみ。
 他の絵文字もこの一覧に追加したい、と思ってちょっと変更を加えました。
 
 1)好きな絵文字をwp-includes/images/smiliesフォルダに追加。

 2)wp-includes/funcitons.php 1868行らへんに
   ':smile:' => 'icon_smile.gif',
  こんなふうにスマイリーアイコンの登録指定をしているところがあるので、これに適宜追加。
    ':heart:' => 'icon_heart.gif',
  こんな感じ。
  これだけでも、投稿記事中に「 :heart: 」と打てばicon_heart.gifハートアイコンが表示されます。

 3)TinyMCE Advanced側の設定。
   wp-content/plugins/tinymce-advanced/mce/emotions/emotions.htm
   これが、ポップアップ表示されるスマイリーアイコン選択画面のHTMLなので、 <tr></tr>間の内容をコピペして追加修正。
<tr>
<td><a href="javascript:EmotionsDialog.insert(' :heart: ');">
<img src="../../../../../wp-includes/images/smilies/icon_heart.gif" width="15" height="15" alt=":heart:" title=":heart:" /></a></td>
</tr>
</table>
こんな感じ。
tinymce_screenshot-2.jpg
 これで表情アイコンだけだったのが、ハート以下、いくつか追加されました。


              
コメント
コメントする












 管理者にだけ表示を許可する?

    
トラックバック
トラックバックURL
→http://akihi.blog70.fc2.com/tb.php/147-a613cd51
この記事にトラックバックする(FC2ブログユーザー)