ビューモード編2016-11-28TweetPocketWordPressにコーディング不要でスタイリングができるCSSスタイルパネルを実装可能なSiteOriginCSSを紹介します。SiteOriginCSSはWordpressの管理画面上で簡単にスタイルが可能になる無料のプラグイン。スタイルパネル内であたいの入力や選択を行うだけで簡単にCSSスタイルが可能です。ここではSiteOriginCSSのビューモードを使ったスタイル方法を紹介します。CSSを選択し、目玉アイコンをクリックすればOK。スタイルパネルの見方SiteOriginCSSを開いて画面左側にあるのがスタイルパネル。右側の上部にはトップページが表示され、下部には選択したセレクタのスタイルが表示されます。スタイルパネルは以下の3つのタブで分けられています。タブはクリックで切り替えることができるので、変更したいスタイルに合わせて切り替えてください。マージンや幅、高さの設定どの項目もフォームに値を入力するか、選択肢の中から選ぶだけなのでコーディングは一切不要。変更はすぐに右側のブラウザで確認できるため、変化を見ながらスタイルを作ることができます。スタイルを変更したい要素の選び方まずはスタイルを変更したい部分を右側のブラウザから選択します。ブラウザ上にマウスを移動すると要素の背景に色がつきます。この状態でクリックすると要素を選択できます。要素を選択するとスタイルパネルの上部に選択したセレクタ名が表示されます。ブラウザの下部にはセレクタまでのパスが表示されます。この部分をクリックすることでもセレクタを選択することができます。その下には選択中のセレクタに適用されているスタイルが表示されます。変更したいセレクタを選んだら、スタイルパネルで必要に応じてスタイルを変更してください。CSSの知識は必要ですが、コーディングなしでどんどんスタイルを作っていくことができます。スタイルが完成したら、スタイルパネル上部にあるチェックボタンを押します。エディター画面に戻ると、設定したスタイルがエディター内に記述されています。CSS」ボタンを押せば保存完了です。SugimoriフリーランスのWebエンジニア。現在はテンプレート職人としてTetraThemesでテンプレートを開発中。ブログや個人に関するお問い合わせはTwitterかFacebookへ。2017-06-26Webに必須の高品質な写真素材を無料でダウンロードできるサイトを10本集めてみました。Web制作に限らずWebライティングでも必ず必要なのが写真素材。2017-06-21カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。2017-06-21カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。2017-06-19カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。2017-06-16カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。USTetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。