Photosynthesic blog

夫婦でやってるWeb屋です。

2018-06-25

【表示確認・更新管理用】スタイルガイド・更新マニュアル【削除しないでください】

このページは、表示確認と更新管理のためのページ(のサンプル)です。関連記事はこちら

目次

  • Brand Color
    #eee
  • Primary Color
    #ddd
  • Secondary Color
    #000
  • Text Color
    #333
  • Link Color
    #222
  • Border Color
    #bbb

基本タグ

以下は基本タグの見出しやインライン要素、リスト、引用文、のプレビューです。

見出し1 h1 使わない。

整形済みテキスト。太字B。イタリックI。リンクテキスト。
改行。

段落。

見出し2 h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

見出し3 h3

これは、ダミーテキストです。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)

見出し4

これは、ダミーテキストです。木曾路はすべて山の中である。 あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。 東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。 道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。 長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

見出し5

これは、ダミーテキストです。恥の多い生涯を送って来ました。 自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。 自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出し6

これは、ダミーテキストです。日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。

区切り線 hr


番号なしリスト

  • リスト1
  • リスト2
  • リスト3

番号付きリスト

  1. 番号付きリスト一
  2. 番号付きリスト二
  3. 番号付きリスト三

引用文

引用文 blockquote

ルビあり

これは、ダミーテキストです。
山路やまみちを登りながら、こう考えた。
に働けばかどが立つ。じょうさおさせば流される。意地をとおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。
住みにくさがこうじると、安い所へ引き越したくなる。どこへ越しても住みにくいとさとった時、詩が生れて、が出来る。

ルビなし

これは、ダミーテキストです。
わたしは未だ病院の分娩室に横になつて居る。室内では夕方になると瓦斯暖炉が焚かれるが、好い陽気が毎日つづくので日のある間は暖い。其れに此室は南を受けて縁に硝子戸が這入つてゐるから、障子を少し位明けて置いても風の吹込む心配は無い。唯光線がまぶしいので二枚折の小屏風を障子に寄せて斜に看護婦が立てて置く。

画像





ショートコードについて

[]で囲まれたものをショートコードといいます。

公式の説明はこちら: ショートコード – WordPress Codex 日本語版

カスタムショートコードをリストします。

svg埋め込み

登録しているsvg画像を埋め込めます。

ロゴ

[svg]logo[/svg]

その他はSVG ICONのリストを参照


カスタムスタイル

以下は html の知識が必要になります。誤用すると表示が崩れる恐れがあります。(※ 崩れた場合はリビジョンを利用して一つ前の状態に戻せます。)

ボタン .m-btn

<div class="m-btn"><a class="m-btn__link" href="#">m-btn</a></div>
<div class="m-btn--next"><a class="m-btn__link" href="#">m-btn--next</a></div>
<div class="m-btn--primary"><a class="m-btn__link" href="#">m-btn--primary</a></div>
<div class="m-btn--primary--next"><a class="m-btn__link" href="#">m-btn--primary--next</a></div>