Wixブログの作り方

May 31,2017 12:55 AM
Category:[Wix]
Tag:[Wix]
Permalink

Wixブログの作り方を紹介します。

Wixブログ

1.はじめに

Wix(ウィックス)は、2006年に設立された企業で、Wix.comではドラッグ&ドロップ形式の無料ホームページ作成ツールを提供し、世界で1億人以上が利用するオンラインプラットフォームとなっています。

本エントリーではWixブログの基本的な機能と、簡単な作成フローについて紹介します。

2.Wixブログの機能・特徴

Wixブログは、選択したテンプレートを元にウェブページを直接編集するという操作で、記事やデザインを作成することができます。HTMLを書く必要は一切ありません。

選択するテンプレートもデザイナーが手がけたもので非常に美しいものばかりです。これらのテンプレートはすべて無料で使えます。

記事やテンプレートで利用する画像も、切り抜き・反転・フィルタ・明るさ・キズ補正など、ページ上で編集できます。

作成したページは、スマホ・タブレットなどのレスポンシブデザインにも自動的に対応します。

無料で利用することもできますが、独自ドメインを登録することも可能です。

次項ではWixブログの具体的な作り方を紹介します。

3.ブログ作成フロー

Wixブログのページにアクセスして「いますぐはじめる」をクリック。

(クリックで拡大、以下同様)
いますぐはじめる

メールアドレス・パスワードを入力して「新規登録」をクリック。

新規登録

登録が完了するとテンプレート選択画面が表示されます。

テンプレート選択画面

テンプレートは、

  • ファッションブログ
  • フォトブログ
  • デザイナーブログ
  • ジャーナリストブログ
  • フードブログ
  • 書籍ブログ
  • ビジネスブログ

など数十種類のカテゴリーから選択することができます。

ここでは先頭に表示されている「ファッションブログB」を選択してみます。

ファッションブログB

スクリーンショットにマウスをポイントすると、「編集」と「表示」のボタンと「詳細」のリンクが表示されます。

スクリーンショットにマウスをポイント

「詳細」のリンクをクリックすると、テンプレートの説明が表示されます。

テンプレートの説明

「表示」をクリックすると、新しいタブにサンプルデータでテンプレートが表示されます。サンプルデータ上部にある「編集」をクリックすると、そのままテンプレート編集画面に移動することができます。

テンプレート編集画面

「編集」をクリックして編集画面に移動します。なおテンプレートを後から変更すると記事データが消えてしまうようなので、注意しましょう。

編集

これがテンプレート編集画面です(この画面に遷移するまでちょっと時間がかかるようです)。さきほどのサンプルページと似ていますが、編集用のアイコンが表示されていることがわかります。

テンプレート編集画面

それではこの画面を使って、まず新しい記事を作成してみます(テンプレートの編集はこの後行いますが順番はどちらでも構いません)。

記事タイトル・記事本文を編集するには、記事部分をクリック。

記事部分をクリック

ボタンが表示されるので、「新しい記事を追加」をクリック。

新しい記事を追加

これで記事作成画面に移動します。

編集画面

「タイトルを入力してください」の部分をクリックして記事タイトルを入力します。

記事タイトルを入力

同様にして、本文も入力します。

記事本文を入力

画像を挿入するには上部の「画像」をクリック。

画像を挿入

右側の大きな点線の枠内に画像をドラッグします。

画像をドラッグ

アップロードできたら「完了」をクリックして、右下にある「ファイルを追加」をクリック。

ファイルを追加

これで記事に画像が追加されました。追加した画像の上部には代替テキストのテキストフィールド、位置揃え、画像リンク、画像の回転、削除のアイコンが表示されます。

アイコン表示

画像をクリックして少しドラッグする操作をすれば上部のアイコンが消えます(ここの切り替えはちょっと分かりにくいかもしれません)。

アイコンを非表示

これで記事ができあがったので、右側の「記事を公開」をクリック(右の▽をクリックすれば予約投稿もできます)。

記事を公開

ブログ記事一覧画面に遷移します。ちなみにこの状態では「ブログ記事はサイトを公開するまで公開されません」というアラートが上部に表示され、まだ記事は公開されていません。

ブログ記事一覧画面

ブログ記事一覧画面右上の×印をクリックすると下記のように、作成した記事が表示された状態でのテンプレート編集画面になります。

テンプレート編集画面

続いてブログタイトルを変更します。タイトル部分にマウスをポイントすると「テキスト」という枠が表示されるので、枠内の任意の位置でクリック。

タイトル部分にマウスをポイント

表示された「テキストを編集」をクリックすれば編集モードになります(前の画面でダブルクリックしても編集モードになります)。

編集モード

ブログタイトル部分が反転されるので消去し、任意のテキストを入力します。

任意のテキストを入力

右側に表示されているウィジェットからスタイルやフォント・フォントサイズを変更できます。

ウィジェット

フォントを変更しました。なおスタイルを後から選び直すとフォントがデフォルトに戻ってしまうようなので注意しましょう。

フォントを変更

表示されたウィジェットは、右上の×をクリックするか、ページ上のどこかをクリックすれば非表示になります。

ウィジェットを非表示

同様の手順で、ブログタイトル下にあるサブタイトルも変更します。

サブタイトルも変更

テキストの位置修正は、オブジェクトをシングルクリックした状態でドラッグすれば移動できます。

テキストの位置修正

ちょうどいいところにくると補助線が表示されます。

補助線

ブログタイトルとサブタイトルはこのようになりました。

ブログタイトルとサブタイトル

最後にページの背景を追加してみます。左側にあるアイコンの一番上にある「背景」をクリック。

背景

背景の候補がずらっと表示されるので、その中から任意の1枚を選択。わかりにくいですがサンプルにビデオのアイコンが表示されているのは動画です。

背景の候補

これで背景が設定されました。

背景が設定

さらに背景選択画面上部の「設定」をクリックして、選択した背景の詳細設定を行います。

背景の詳細設定

詳細設定用のウィジェットが開くので、ここでは「スクロールエフェクト」の「フリーズ」をクリックして背景を固定します。その他、画像の透明度や表示方法(拡大・原寸・タイル等)や表示位置も修正することができます。

詳細設定

拡大表示されていた画像がブラウザのサイズにおさまりました。

背景を固定

設定が終わったら、各ウィジェットの×印をクリックして閉じます。

ウィジェットを閉じたところ

ざっくりですがこれで最低限の準備ができたので、右上の「公開」をクリックします。

これでブログが公開されました。「サイトを見る」をクリック。

サイトを見る

今回の出来上がりはこのような感じになりました。左サイドバーの著者画像は手順を省略していますが差し替えています。

ブログ

公開後の記事の追加や管理は、テンプレート選択画面の上部にある「マイサイト」をクリック。

マイサイト

マイアプリの「ブログ」をマウスでポイントして表示された「ブログを管理」をクリック。

ブログを管理

これで記事一覧画面が表示されます。テンプレート選択時にデフォルトで用意されていた記事は削除しておきましょう。

ブログ

4.感想

実際にWixブログを作成してみて感じたことは、まずウェブデザインが素人の私でも、HTMLを一切書かずにここまで綺麗なブログを作れることに驚きました。

今回は画面をキャプチャしながらの作業だったため多少時間がかかりましたが、そうでなければかなり短時間でブログを作成できるのではないかと思います。

また管理画面は記事やカテゴリ・タグなどの必要最低限のデータしかなく、画像などは記事作成画面で編集できるようになっているため、シンプルで分かりやすいです。

不満な点は、非力なPCで操作したせいかもしれませんが、エディタに遷移するときにやや時間がかかってしまう点です。

それからテンプレートを再編集するときのリンクが不明なことでしょうか。マイアプリから起動できるのは前述の記事・カテゴリ・タグの管理のみで、記事の作成や更新画面でもテンプレート編集画面には遷移できないようです。

テンプレートを後で編集したい場合、テンプレート編集時のURLをブックマークしておく必要があるかもしれません(ちなみにテンプレート選択画面から同じテンプレートを選択しても元の編集画面には戻れないようです)。

2017.6.6追記
テンプレートを再編集するときは、「マイアプリ」が表示されている画面左上の「サイトを管理」をクリック。

サイトを管理

左側にある「サイトを編集」をクリック。これでテンプレート編集画面に遷移します。

サイトを編集

以上です。
これからWixブログでブログを始めたい方の参考になれば幸いです。

Comments [0] | Trackbacks [0]

WordPressのファイルアップロードでファイル名をリネームする方法

May 30,2017 1:11 AM
Category:[画像]
Tag:[WordPress]
Permalink

WordPressのファイルアップロードでファイル名をリネームする方法を紹介します。

1.問題点

WordPressのファイルをまとめてアップロードしたいのですが、ファイル名をアップロード時のタイムスタンプに統一したいと思ってます。

ということで、ファイルアップロードでファイル名をリネームする方法を紹介します。

参考までに、WordPressのアップロード先は、

wp-content/uploads/YYYY/MM

です。

2.ファイルアップロードでファイル名をリネームする

ファイル名をリネームするには、function.phpに下記のコードを追加します。

function rename_file($filename) {
    $pathinfo = pathinfo($filename);
    return date("YmdHis") . "." . $pathinfo['extension'];
}
add_filter('sanitize_file_name', 'rename_file', 10);

これでファイル名が「20170506104946.jpg」という風にリネームされます。

pathinfo()はファイルパスに関する情報を返却する関数です。$pathinfo['extension']で、ファイルの拡張子を取得できます。

time()は現在時刻を取得する関数です。

なお、「All in One SEO」プラグインのXMLサイトマップ機能を使っている場合、sitemap.xmlというファイルへの干渉をなくすため、赤色の3行を追加します。

function rename_file($filename) {
    $pathinfo = pathinfo($filename);
    if ($info['filename'] == 'sitemap') {
        return $filename;
    }
    return date("YmdHis") . "." . $pathinfo['extension'];
}
add_filter('sanitize_file_name', 'rename_file', 10);

3.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]

C/C++で関数名(シンボル名)から関数アドレスを取得する方法

May 29,2017 12:03 AM
Category:[C/C++]
Tag:[C/C++]
Permalink

関数名(シンボル名)から関数アドレスを取得する方法を紹介します。

1.問題点

関数名(シンボル名)から関数アドレスを取得する処理を実装する必要が生じましたが、実装する方法がわかりません。

ということで、実装方法を紹介します。

2.関数名から関数アドレスを取得する

関数名から関数アドレスを取得するにはdlsym()を利用します。

サンプルを以下に示します。

sample.cc

#include <stdio.h>
#include <dlfcn.h>
 
int main() {
    void    *handle;
    int     (*fptr)(int);
  
    handle = dlopen("/home/foo/a.out", RTLD_LAZY);
    fptr = (int (*)(int))dlsym(handle, "main");
    printf("function addr: %p\n", fptr);
 
    return 0;
}

実行結果

g++ -ldl -rdynamic sample.cc
% ./a.out
function addr: 0x400880

まず、dlopen()で関数アドレスを取得したい関数が含まれるライブラリを指定します。"RTLD_LAZY"は、ライブラリのコードが実行される際に未定義シンボルを順次解決していくことを示すオプションです。

handle = dlopen("/home/foo/a.out", RTLD_LAZY);

dlsym()の第1パラメータにでライブラリのファイルハンドル、第2パラメータにアドレスを取得したい関数名(シンボル名)を設定します。

fptr = (int (*)(int))dlsym(handle, "main");

その他、ビルド時のポイントとして、"-ldl -rdynamic"が必須パラメータになります。

"-ldl"は動的ロードライブラリへのリンク、"-rdynamic"はすべてのシンボルを動的シンボルテーブルに追加するパラメータです。

"-ldl"を付与せずにビルドすると下記のエラーが発生します。

% g++ -rdynamic sample.cc
/tmp/cc8BV6Dq.o: 関数 `main' 内:
sample.cc:(.text+0x13): `dlopen' に対する定義されていない参照です
sample.cc:(.text+0x28): `dlsym' に対する定義されていない参照です
collect2: エラー: ld はステータス 1 で終了しました

"-rdynamic"を付与せずにビルドすると、ビルドは成功しますがdlsym()で期待する結果が得られません。

% g++ -ldl sample.cc
% ./a.out
function addr: (nil)

3.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages