How to use
##########

Process
*******

1. Set the ``Relative Path> Format`` item in Settings (``File> Preferences> Settings``).For detailed configuration instructions, see :doc:`../sec02_functions/config` for detailed configuration.In this section, we will use the default settings.

   .. figure:: ../../_images/relpath_doc_001.png
      :scale: 100%
      :alt: relpath_doc_001

2. Open the HTML or other file in an editor and place the cursor where you want to insert the relative path.

   .. figure:: ../../_images/relpath_doc_003.png
      :scale: 80%
      :alt: relpath_doc_003

3. In Explorer, right-click on the item of the target file (CSS or image file) and select ``Insert relative path``.

   * Note that if you left-click at this point, the file will be opened.
   * In the figure below, right-click on ``default.css``.

   .. figure:: ../../_images/relpath_doc_004.png
      :scale: 80%
      :alt: relpath_doc_004


4. The relative path will be inserted in the format set in Settings in (1.).

   .. figure:: ../../_images/relpath_doc_005.png
      :scale: 80%
      :alt: relpath_doc_005


.. seealso::
   For a more detailed explanation, see :doc:`../sec02_functions/index` for a more detailed explanation.