1
<!-- Html5 allows inline link tag | font-family ipagothic are uniquely defined on a style sheet of my theme -->
2
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
3
<div id="magazine-content" style="font-family: Lato, ipagothic, sans-serif;font-size: 24px;font-style: normal;font-weight: normal;background: linear-gradient(to right, blue, red);">
4
5
<!-- Html5 allows inline CSS Style -->
6
<style type="text/css" scoped>
7
/* collective selector. indicates ids or classes the word includes */
8
/* ^:beginning of name *:any in name $:end of name */
9
div[id^="desc"] {
10
/* Japanese Traditional Style */
11
writing-mode: vertical-rl;
12
-ms-writing-mode: tb-rl;
13
-webkit-writing-mode: vertical-rl;
14
}
15
16
/* In Japanese Style, needs height */
17
div#desc11 {
18
height: 1200px;
19
}
20
21
div#desc13 {
22
height: 1200px;
23
}
24
25
div#desc15 {
26
text-indent: 1em;
27
height: 700px;
28
}
29
30
/* Use like Ruler */
31
/* On Now, Column CSS in Japanese style is several issues between browsers */
32
div#desc16 {
33
height: 700px;
34
padding-top: 20px !important;
35
border-top: 1px solid #fff;
36
}
37
38
div#desc15 ruby {
39
color: red;
40
}
41
42
/* 2nd and 10th child of div#desc16 and its ruby tag*/
43
div#desc16 ruby:nth-child(2),
44
div#desc16 ruby:nth-child(10) {
45
color: red;
46
}
47
</style>
48
49
<div id="title-svg" class="magazine-imagebox" style="top: 0px;right: 80px; opacity: 0.2;">
50
<svg version="1.1" width="80" height="1400" viewBox="0 0 100 1000">
51
<g font-size="70">
52
<!-- text-anchor: start, middle, end -->
53
<!-- dominant-baseline: auto, alphabetic, etc. -->
54
<!-- letter-spacing effects in webkit, does not effect in moz -->
55
<text id="title-svg-text" x="40" y="-200" style="fill:black;writing-mode:tb;stroke:#fff;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;letter-spacing:-14;">東からの風 ー2017年 東京にてー</text>
56
</g>
57
</svg>
58
</div>
59
60
<div class="magazine-textbox" style="top: 60px;right: 60px;">
61
[codeview_byid theme="magazine" id="desc" start="11" width="1.2em" font-size="50px" color="orange" font-weight="bold"]1193[/codeview_byid]
62
</div>
63
64
<div class="magazine-textbox" style="top: 200px;right: 200px;">
65
[codeview_byname theme="magazine" id="desc" start="13" width="10em" font-size="44px" color="white" line-height="2.0em"]windfromtheeast-text[/codeview_byname]
66
</div>
67
68
<div class="magazine-textbox" style="top: 20px;right: 690px;">
69
[codeview_byid theme="magazine" id="desc" start="15" width="11em" font-size="28px" color="orange" line-height="1.8em"]1193[/codeview_byid]
70
</div>
71
72
<div class="magazine-textbox" style="top: 710px;right: 690px;">
73
[codeview_byid theme="magazine" id="desc" start="16" width="11em" font-size="28px" color="orange" line-height="1.8em"]1193[/codeview_byid]
74
</div>
75
76
</div>
77
78
[init_spansearch]
79
80
[spansearch id="desc" start="13" background-color="blue"]恐れ[/spansearch]
81
82
[spansearch id="desc" start="15" end="16" color="red"]風[/spansearch]
83
84
[spansearch_all id="desc" color="red"]カリフォルニア[/spansearch_all]
85
86
<script type="text/javascript">
87
[articleloader_byid]1474[/articleloader_byid]
88
</script>
89
90
<!--nextpage-->
91
<!-- Html5 allows inline link tag -->
92
<link href="https://fonts.googleapis.com/css?family=Lato|Oswald" rel="stylesheet">
93
<div id="magazine-content" style="font-family: Lato, sans-serif;font-size: 24px;font-style: normal;font-weight: normal;background: linear-gradient(to right, blue, red);">
94
95
<!-- Html5 allows inline CSS Style -->
96
<style type="text/css" scoped>
97
/* collective selector. indicates ids or classes the word includes */
98
/* ^:beginning of name *:any in name $:end of name */
99
div[id^="desc"] {
100
/* default is manual. auto, none */
101
/* auto: Differences between browsers exist (2017 Spring) */
102
/* manual is preferred on now (2017 Spring). use &shy; to hyphenation */
103
-webkit-hyphens: auto;
104
-ms-hyphens: auto;
105
hyphens: auto;
106
}
107
108
div#desc9 {
109
-moz-column-count: 2;
110
-webkit-column-count: 2;
111
column-count: 2;
112
-moz-column-width: auto;
113
-webkit-column-width: auto;
114
column-width: auto;
115
-moz-column-gap: 20px;
116
-webkit-column-gap: 20px;
117
column-gap: 20px;
118
-moz-column-rule: 1px solid #fff;
119
-webkit-column-rule: 1px solid #fff;
120
column-rule: 1px solid #fff;
121
-moz-column-width: auto;
122
-webkit-column-width: auto;
123
column-width: auto;
124
height: auto;
125
}
126
</style>
127
128
<div id="title-svg" class="magazine-imagebox" style="top: 160px;left: 0px; opacity: 0.2;">
129
<svg version="1.1" width="1040" height="120" viewBox="0 0 1040 120">
130
<g font-size="68" font-family="Oswald">
131
<!-- text-anchor: start, middle, end -->
132
<!-- dominant-baseline: auto, alphabetic, etc. -->
133
<!-- letter-spacing effects in webkit, does not effect in moz -->
134
<text id="title-svg-text" x="520" y="60" style="fill:black;stroke:#fff;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;text-anchor:middle;">Wind from The East on Tokyo 2017</text>
135
</g>
136
</svg>
137
</div>
138
139
<div class="magazine-textbox" style="top: 100px;left: 0px;">
140
[codeview_byid theme="magazine" id="desc" start="1" width="1040px" font-size="64px" color="orange" font-weight="bold" font-family="Oswald,sans-serif" text-align="center"]1193[/codeview_byid]
141
</div>
142
143
<div class="magazine-textbox" style="top: 300px;left: 20px;">
144
[codeview_byid theme="magazine" id="desc" start="3" count="5" width="1000px" font-size="40px" color="white" line-height="2.6em"]1193[/codeview_byid]
145
</div>
146
147
<div class="magazine-textbox" style="top: 900px;left: 20px;">
148
[codeview_byid theme="magazine" id="desc" start="9" width="1000px" font-size="28px" color="orange" line-height="1.8em"]1193[/codeview_byid]
149
</div>
150
151
</div>
152
153
[init_spansearch]
154
155
[spansearch id="desc" start="3" end="7" color="blue" font-weight="bold"]fear[/spansearch]
156
157
[spansearch_all id="desc" color="red"]WIND[/spansearch_all]
158
159
[spansearch_all id="desc" color="red"]Californian[/spansearch_all]
160
161
<script type="text/javascript">
162
[articleloader_byname]shadow-of-title-js[/articleloader_byname]
163
</script>

Code of Layout Sample Magazine Type No.2

521 Views