[nob] モバイル端末の表示

テーマとして使っている Twenty twelve のルック・アンド・フィール(look and feel, LnF) を変更したくなってテーマ編集の画面で style.css を調べていたら、このテーマがモバイル端末の表示にも対応していることがわかりました。そこで、Walkman (Android OS) でモバイル端末の画面を確認してみました。

http://homeken.sakura.ne.jp/nob/

PCの表示

PC_view

モバイル端末 (Walkman) の表示

DSC00564

メニューのリスト

[メニュー] をタップすると、メニューの階層構造は無視されてリストで表示されるようです。

DSC00565

メニューバーの設定

いろいろなテーマで遊んで(遊ばれて)、更にあちこちみちくさを食っていたので遅くなりました。
メニューバーの設定の宿題です。

http://homeken.sakura.ne.jp/nob/

メインメニューにたくさんリンクを入れると見づらくなるので、Blog や Links という固定ページを作って、その下に 「ほめけん」だよ~ん と のんびり行こうぜ!のリンクを追加しました。

こうすると、メニューバーの LINKS にマウスを乗せると、「ほめけん」だよ~ん と のんびり行こうぜ!へのリンクが表示されます。

メインメニューの設定画面はこちら ↓
オレンジの項目を右にドラッグしてインデントしています。メインメニューの設定 1

参考情報は、「はじめての WordPress 入門」の Section26 「メニューを設定する」 です。

[nob] ドラッグアンドドロップで画像を追加してみる

ビジュアルモードのときに、小さいサイズの画像をドラッグ & ドロップしたら貼り付けることができるかもしれないと思って、やってみました。画像の大きさは、320×214 です。

クレマチス:クワトロ

画像の配置やキャプションも入力できますね。ここでは、「クレマチス:クワトロ」と入力。サイズも多少縮小できるようです。

テキストモードでコードを見ると、画像はメディアライブラリには登録されずに、画像ファイル(jpeg ファイル) がエンコードされて埋め込まれているようです。

[nob] スパムコメント対策 Akismet プラグインの無料導入方法

投稿した記事にコメントを投稿してもらった場合に、自動的にスパムコメントを分類してくれるAkismetプラグインを導入する際に、API Key の取得が必要になります。このページを見ると、3通りの選択肢があり、どれも有料に見えますが、実は無料で導入できます。

YouTube に無料導入方法の動画がありましたので、情報共有のために投稿します。

WordPress(ワードプレス)のプラグイン「Akismet」無料導入方法

YouTube Preview Image

Akismetプラグインの解説ブログもいろいろあります。例えば、こちら

Akismetプラグイン(コメントスパム対策)

http://www.adminweb.jp/wordpress/plugin/index5.html

 

[nob] Ultimate TinyMCEプラグイン

Ultimate TinyMCEプラグインの解説ブログより引用。

Ultimate TinyMCE – ビジュアルエディタを拡張するWordPressプラグイン

http://netaone.com/wp/ultimate-tinymce/

まとめ

Ultimate TinyMCEは、記事編集画面のビジュアルエディタのボタンを拡張できます。このプラグインは、HTMLを直接編集しない方(したくない方)が利用すると役に立つでしょう。このプラグインを活用して記事を書く作業を効率化しましょう。

ビジュアルエディタをメインで使用する場合は、標準のエディタを利用するよりは、このプラグインを利用してエディタを拡張した方が便利です。

———————————–

[nob] 2013/7/8 の宿題 : 解答

第1回目の講座の のぶの解答を投稿します。

ビジュアルエディタ、のナビバーの一番右(全ツール表示切り替え)をクリックするWord から貼り付け」=これはどう使うのか

Office系の文書 (Microsoft Office, Open Office など)を Copy & Paste すると、余計なタグまでコピーされてテキストモードで見ると煩雑になるので、それら不要のタグを削除する、とあるが、実際には、リストやリストのインデント、見出しの番号などの情報が反映される程度で、それ以外の文章の情報(例えば、フォントサイズや文字色)は失われる。また、図形やテキストボックスの情報はテーブルデータとしてコピーされるが横罫線のみなので使えない。

図形やテキストボックスを Copy&Paste した結果がこちら

 

* テキストボックスの文章の Copy&Pasteは可能。

表はコピー可能だが編集はやりにくいので、表を扱うなら、TinyMCE のようなプラグインを入れる。

使い方としては、Office系ソフトの文章の一部分(例えばリストの部分)をコピーして貼り付けるといった使い方が考えられる。

excel の表を、word に貼り付けて、それを wordpress に貼り付けられるか?=これができれば便利。

貼り付けは可能だが、表を扱うなら、TinyMCE のようなプラグインを入れる。
プラグインを入れると、縦の罫線、罫線の種類の選択、フォントや罫線の色などの設定が可能になる。

エディタのアイコンの意味が分からないという方へのアドバイス

エディタのアイコンの意味が分からない時には、カーソルをアイコン上に置くとツールチップに機能が表示されます。

[2013/7/14] 追記
Ultimate TinyMCE プラグインを入れたエディタにエクセルの表をコピーし、文字の色やサイズ、セルの色、罫線の編集をしたもの。セルの結合も可能です。エクセルと同じようなことができるので、HTMLタグの編集が不要です。

開催日 開始 終了 活動内容
2012/4/14 (土) 9:30 11:30 ボランティア作業
2012/5/11 (金) 開始と終了のセルを結合 クレマチスフェア 準備
2012/5/12 (土) クレマチスフェア 1日目
2012/5/13 (日) クレマチスフェア 2日目
2012/5/20 (日) 12:00 15:00 クレマチス講習会 3日目

 

[nob] 動画を貼り付けてみる (youtube)

理科で遊ぼう会の動画

  • その1

【注意】 http:// の行に余計なものを入れない。

  • その2 サイズを変えてみる

【注意】  [ embed ] と http://xxx、http://xxx と [ /embed ] の間は空けないこと。

その3 更に中央に表示

もう一つ注意
埋め込み可能な URL は予め決まっているようですね。

動画や画像の埋め込み

http://www.adminweb.jp/wordpress/media/index7.html

 

[nob] ビジュアルエディタをカスタマイズする

WordPress はオープンソースなのでソースコードを編集することもできますが、プラグインを追加することで機能の追加変更が可能なアーキテクチャになっています。
ビジュアルエディタについても機能の追加変更が可能で2通りの方法があるようです。

  1. functions.php を変更して既存のビジュアルエディタの機能を変更する
  2. プラグインを追加してWordPressのビジュアルエディタを変更する
    http://www.webopixel.net/wordpress/211.html

代表的なビジュアルエディタプラグインは次の4つだそうですが、詳細は未確認です。

  • Ultimate TinyMCE

現時点では、TinyMCE Advanced, Ultimate TinyMCE が定番のようです。

[nob] 2013/7/8 の宿題 : 課題

本日は仕事&術後1ヵ月検診のため欠席しましたが、講座の資料と課題の連絡がありましたので、内容の確認も兼ねて投稿します。

第1回目の講座の宿題は、

  1. ビジュアルエディタ、のナビバーの一番右(全ツール表示切り替え)をクリックすると
    Word から貼り付け」=これはどう使うのか
    [補足] テキストとして貼り付け と比較する
    [補足] Wordから貼り付けると困ったことも起きます。どのような操作をすると発生するか、その対策方法。
  2. excel の表を、word に貼り付けて、それを wordpress に
    貼り付けられるか?=これができれば便利。
    → 初めからそんな都合の良い仕組みが用意されているの?
  3. ビジュアルエディタ と テキストエディタの使い方(使い分け方)を調査する。

のぶの解答は 7/15 に追記の予定ですが、もっと早い方が良いですか? → 水爺さん

[nob] WordPress 関連書籍

WordPress 関連の書籍を探していたら、こんな記事を見つけました。

WordPress関連書籍の中より、ユーザレベル別にオススメを紹介します!

http://wp-d.org/2013/06/10/4497/
以下、リストやインデントを使ってみる。

<以下省略>

で、、、記事の最後に、本を読んで手っ取り早く知識を身につけたい方は全部買う! と書かれています。 (^_^;;

◊ 見出し3 より 見出し4以降の文字が大きいのは謎です。

[2013/07/07 22:40 追記]

「脱初心者 WordPressを使ってサイトを作りたいという方」 の2冊を読むなら PHP の知識が必要とのコメントを頂きましたので、関連サイトを追加します。

入門サイトとはいえ、Perl や C など、なんらかのプログラミング言語を知らないと、時間がかかりそうです。