シェアオフィス6F
貸会議室6F

こんにちは。コワーキングスペース7Fの星野邦敏です。

このコワーキングスペース7FのWebサイトは、WordPressで作っているのですが、既存のWordPressを使わずにHTML、CSS、JavaScriptなどの静的ファイルをWordPressテーマ化しています。

このWordPressテーマ化の時、注意点としていくつかあると思うのですが、そのうちの一つとして、「WordPressはデフォルトでは独特なidやclassを勝手に付ける」ということです。これは便利な時もある反面、要らないよねという時もあるかもしれません。これらのidやclassを消すにはfunctions.phpに特定のコードを書く等が必要です。しかしながら、多くの場合は、WordPressの仕様に基づき、これらのidやclassに合わせてCSSを書くという流れで、上手く付き合っていく方がスムーズなのではないかなと思います。

その中で、例えば、画像の回り込みをさせる場合や、画像にキャプションを付ける場合も、決まった規則に基いてidやclassが付きます。

WordPressで記事に写真を貼る時には、投稿や固定ページから、「メディアを追加」をクリックして画像をアップロードします。この時に、画像を左回り込み・右回り込みさせる場合もあり、また補足文章を書く形でキャプション文章を付ける場合もあると思います。

例えば、コワーキングスペース7Fには現在11名の運営スタッフがいるのですが(コワーキングスペース7Fスタッフ紹介)、
学生スタッフが大学を卒業して就職したり留学したりして少なくなって、現在はフリーランスや子育て中のお母さんが中心になってきたので、スタッフメンバー構成として、急募ではありませんが、もし良い人がいたら大学生や専門学校生のアルバイトスタッフを入れようと思っています。
そのために、何人かの大学生スタッフに、コワーキングスペース7Fでアルバイトスタッフをして良かったこと等を書いてもらっています。

7F立ち上げ当初からスタッフとして関わってもらっているカナエちゃんのインタビュー記事ができたのですが、この写真の回り込み、キャプションなどは、CSSで実装します。
コワーキングスペース7F 大学生アルバイトスタッフ 相澤奏恵さん | コワーキングスペース7F

WordPressテーマをゼロから作った場合のWordPress特有の画像の回り込みやキャプションに関するCSSを実装する。

WordPressでは、画像の左回りの時はalign=”alignleft”、画像の右回りの時はalign=”alignright”というclassが付きますし、
キャプションを付けると、class=”wp-caption”、class=”wp-caption-text”というclassが付きます。
具体的な出力HTMLは、以下のようになります。
従いまして、これらのclassに合わせて、CSSを書くとスムーズかと思います。これらのCSSが無いと、HTMLでは書かれているけどCSSは書かれていないということで、管理画面から画像の左回り・右回り・キャプションを付けても、反応しないという形になると思います。

<div id="attachment_8882" style="width: 310px" class="wp-caption alignleft"><a href="http://office7f.com/wp-content/uploads/2014/08/201311a.jpg" rel="lightbox[8850]"><img src="http://office7f.com/wp-content/uploads/2014/08/201311a-300x225.jpg" alt="イベントPOP。Illustratorでイラストを描いたりWebサイトも作れるようになりました。" width="300" height="225" class="size-medium wp-image-8882" /></a><p class="wp-caption-text">イベントPOP。Illustratorでイラストを描いたりWebサイトも作れるようになりました。</p></div>

ちなみに、このコワーキングスペース7Fで書いたCSSは以下の通りです。
CSSを書くファイルはstyle.cssやheader.phpにCSSファイルを紐付ける形などに書いたら良いかなと思います。

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #eee;
    border: 1px solid #ddd;
    max-width: 96%;
    padding: 10px;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    margin: 0;
    padding: 5px 0;
}

以上となります。

あと数名の学生アルバイトスタッフのインタビューを載せて、コワーキングスペース7Fスタッフ応募のフォームも整えていく予定です。
いわゆる普通のアルバイトとは異なる経験をしたいと考えているような大学生や専門学校生のスタッフをあと1名または2名アルバイトとして増やしたいと思っています。

コワーキングスペース7F 大学生アルバイトスタッフ 相澤奏恵さん | コワーキングスペース7F

今は以下の応募フォームしかないのですが、もしご興味がありましたら、お問い合わせください。
採用情報 | 株式会社コミュニティコム

スポンサーリンク

スポンサーリンク

この記事を書いた人

コワーキングスペース7Fの運営代表者です。7Fの運営会社である株式会社コミュニティコムの代表取締役でもあります。2012年12月1日に7Fがオープンしてから2014年4月末まで店長も兼ねていましたので、外出予定が無い日は基本毎日いましたが、現在は山下に店長を任せ、オーナー兼利用者となりました。今はもともとの本業のITの仕事と、コワーキングスペースに絡んだ創業支援や地域おこしの仕事が中心です。下のフロアを増床することになり、シェアオフィス6Fと貸会議室6Fの運営もしています。趣味は自分の思い付いたWebサービスを自分で自由に開発することです。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索