骨Step 5からStep 7

スポンサーリンク
この記事は約4分で読めます。

出典:
https://code.tutsplus.com/tutorials/making-a-theme-with-bones-getting-started–wp-26545 
Step 5からStep 7

Step 5: Theme Basic Data

This is the place of theme name, description, author, version and so on.

The style.css file is in the theme directory.
Basically the themes based on Bones don’t use any real styles here,
but just the data for showing the info in the admin interface.

/************************************************************************
Theme Name: Kotkoda
Theme URI: http://wp.tutsplus.com
Description: This site was built using the Bones Development Theme.
Author: Adam Burucs
Author URI: http://burucs.com
Version: 1.0
Tags: flexble-width, translation-ready, microformats, rtl-language-support
 
License: GPL2
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Step 6: Download a LESS or Sass Compiler

This tool is needed to compile and minify the styles of Bones into a production CSS file.
I chose WinLESS because I’m working on Windows 7.

Step 7: Exploring the Bones (LESS) Styles

In the bones/library/less directory you can find all files to customize the theme. These are the styles we need:

骨テーマカスタマイズのために必要なファイル

  1. 1030up.less – desktop stylesheet
  2. 1240up.less – mega sized monitor stylesheet
  3. 2x.less – styles for Retina screens
  4. 481up.less – 481px+ styles
  5. 768up.less – tablet and small desktop stylesheet
  6. base.less – the base for mobile devices
  7. ie.less – here we call all styles for IE, but without the media queries
  8. login.less – we can modify the login page of WordPress
  9. mixins.less – this is where we use LESS mixins and constants
  10. normalize.less – general reset for default styles
  11. style.less – main styles, uses all other files

【参考】圧縮ツール

  1.  Online JavaScript/CSS/HTML Compressor:http://refresh-sf.com/
  2. Minify your CSS : https://cssminifier.com/
  3. CSS Compressor : https://csscompressor.net/ja/
  4. CSS Minifier : https://syncer.jp/css-minifier

前へ戻る 次へ進む

error: Content is protected !!