Profile cover photo
Profile photo
結城永人
53 followers -
詩人として歌うように毎日を永遠に生きている
詩人として歌うように毎日を永遠に生きている

53 followers
About
Posts

Post has attachment
折角、Google+でコミュニティを立ち上げたのに来年の八月までにはGoogle+自体が一般向けの提供を終了してしまうらしい。

http://ascii.jp/elem/000/001/754/1754140/
Add a comment...

Post has attachment
Google+のコミュニティから【Bloggerの使い方の質問箱】を新しく立ち上げました。

Bloggerについて分からない部分を皆さんと一緒に克服できると良いと思って企画しました。

気軽に参加してBloggerでのブログの作成や運営などのどんな質問/解答でも投稿して下さい。

https://www.nagahitoyuki.com/
些細な日常
些細な日常
nagahitoyuki.com

Post has attachment
ブログの更新:Bloggerのdefaultmarkupタグの最初は便利で最後は不要な使い方|些細な日常

ブログに #Blogger#Contempo テーマを取り入れた頃から #ソースコード で何だろうと訝っていた #defaultmarkup タグについて纏めた。ガジェットにない #includable タグを追加するためだけにあるから最初は #便利 で最後は #不要 になる。

http://b.hatena.ne.jp/entry/372336856/comment/pinelike

考えると本当に良くできているというか、日本では殆どいないかも知れないけれどもBloggerの独自タグを駆使してテンプレートを本格的にカスタマイズするには助かって嬉しいかぎりだ。

Contempoなどの新テーマはサーバーからのincludableタグをソースコードに記載すると色んなデザインが自由自在に取れるので、その場合にdefaultmarkupタグを使うと幾つものウィジェットに共通するコンテンツを一気に追加できるから手間が省ける。

https://www.nagahitoyuki.com/2018/10/using-bloggers-defaultmarkup-tag-is-handy-at-the-first-and-unnecessary-at-the-end.html
Add a comment...

Post has attachment
ブログの更新:Bloggerブログで注目の投稿ガジェットの次にアドセンスのサイト広告を表示する|些細な日常

#Blogger#アドセンスガジェット を使ってブログに簡単に #サイト広告 を表示できるけれども考え通りの #デザイン にならない部分もある。トップページで #注目の投稿ガジェット の次に出せないのが辛くて #カスタマイズ を行った。

http://b.hatena.ne.jp/entry/372336822/comment/pinelike

どうするべきなのかとマークアップに苦しんだ。予想したように動かなくて相当に参ったし、可成、大変だったけれども厄介な問題を克服しながらBloggerのテンプレートについて又更に知識を増したと喜んでいる。

アドセンスのサイト広告を出力する独自タグはContempoなどの新テーマだとdefaultAdUnitのIncludableタグに基づいている。記事下だとinlineAdのincludableを仲介して表示される。何れにしても大本のデザインはdefaultAdUnitのIncludableタグだけれどもページ毎に振り分けをかけたり、インラインstyleで大きさなどのデザインを変えられたりするから覚えると簡単に色んな仕方で、使えるようになって面白い。

https://www.nagahitoyuki.com/2018/10/show-adsense-ad-unit-next-to-featured-post-gadget-in-blogger-blog.html
Add a comment...

Post has attachment
ブログの更新:インラインsvgのstroke-linecapとstroke-linejoinとstroke-miterlimitのデザイン|些細な日常

#インラインsvg#デザイン を付ける基本の属性の #stroke-linecap#stroke-linejoin#stroke-miterlimit を考えた。特にstroke-miterlimitが #大変 で、使い方はさほど難しくないけど、存分に理解するには #三角関数#知識 が必要なんだ。

http://b.hatena.ne.jp/entry/372146262/comment/pinelike

久し振りにsin、cos、tan(サイン、コサイン、タンジェント/正弦、余弦、正接)をやった。

すっかり忘れているけど、三角関数は数字で、高校一年から始まっていたらしい。

何の意味があるのかと嫌になって覚えられない。その名の通りで、関数の一種だからsin、cos、tanに意味はなくて良い。角度のθ(シータ)も変数として扱うべきで、任意の値を放り込んで結果を導き出すために使うだけだ。

sin = 高さ / 斜辺
cos = 底辺 / 斜辺
tan = 高さ / 底辺

高校時代に知っておきたかった。もっとしっかり抽象的に捉えられたのではないか。本当に三角関数は訳が分からなくて混乱せざるを得ない対象だった。気付くと面白いし、全てが一つの法則から純然と弾き出される数学の醍醐味を感じさせる。

https://www.nagahitoyuki.com/2018/10/design-of-stroke-linecap-stroke-linejoin-and-stroke-miterlimit-in-inline-svg.html
Add a comment...

Post has attachment
ブログの更新:インラインsvgのpathタグで描いた線の両端を繋ぎ合わせるにはZコマンドを使う|些細な日常

ブログのフローティングの #戻るボタン#デザイン#インラインsvg を使った。三角形の底辺を上に少し湾曲させたくて #pathタグ で描画する。 #線 の両端の開始点と終了点をスムーズに繋げるために #Zコマンド が必要だと気付いた。

http://b.hatena.ne.jp/entry/372034532/comment/pinelike

サイト作成でインラインsvgを使うのが初めてで、何がどうなるかも分からなくて大変なんだ。

線を座標から描けるpathタグには様々なコマンドがあるけど、とにかく開始点と終了点を繋ぎ合わせるZコマンドを使うかどうかで、そうした繋ぎ目のデザインが変わるから注意して使わなくてはならないんだ。

終了点を開始点と同じにして線を描いても線の両端が重なるだけで、両端のデザインがそのままで表示されてしまう。Zコマンドをかけると線の両端が繋がって一つの頂点として扱われるようになる。

線の両端の繋ぎ目が別々でも芸術的に味のあるデザインなので、pathタグで線を引く場合には終了点にZコマンドをかけるかどうかで使い分けると良いと思う。

https://www.nagahitoyuki.com/2018/10/use-z-command-to-join-both-ends-of-the-line-drawn-with-path-tag-in-inline-svg.html
Add a comment...

Post has attachment
ブログの更新:インラインsvgで線や丸や四角や三角や弧を描いて色を塗るマークアップ|些細な日常

#html#svgタグ#インライン用法 で画像データをマークアップするとサイトに #svg画像 を表示できる。 #アイコン などの簡素な画像ならば画像データが少ないし、 #線#丸#四角#三角#弧 を描いて #色 を塗るだけで作成できる。

http://b.hatena.ne.jp/entry/371883557/comment/pinelike

Bloggerでやってみて無理かと思ったら大丈夫みたいだ。

JavaScriptと同じようにインラインsvgも投稿で半角スペースの実体参照が紛れ込むとエラーで表示されないから少なくとも投稿する際に注意しなくてはならない。

htmlモードで投稿するわけだけど、他の文章アプリなどからソースコードを持って来ると危ない。

見えないところに「 」(半角スペースの数値実体参照)が記載されている場合があり得る。

今回も相当に苦しんだ。Evernoteで記事を仕上げてWebmaster's HTML Editor Liteでタグ付けしてからBloggerのhtmlモードて投稿する。どこかで、しかし半角スペースの実体参照が紛れ込むんだ。

以前、インラインsvgで描画できたり、できなかったりして訳が分からなかった。エラーのせいだったのか、やはり。用心深く、チェックしながら記載すると一回も失敗してない。たぶんBloggerでsvgタグへの制限などはかかってなさそうだ。

ブログのフローティングの戻るボタンをインラインsvgで作画したので、身に着けた線や丸や四角や三角や弧を描いて色を塗るマークアップという使い方を記事に取り上げた。

https://www.nagahitoyuki.com/2018/09/markup-for-drawing-lines-circles-squares-triangles-and-arcs-and-painting-colors-with-inline-svg.html
Add a comment...

Post has attachment
ブログの更新:cssのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする|些細な日常

ブログに #フローティング#戻るボタン を付けようとしたら #アドセンス#サイト広告 に重なる #ポリシー違反 の恐れから躊躇せざるを得なかったけれども #css#position#sticky を使うと一定の範囲内で表示できるから避けられる。

http://b.hatena.ne.jp/entry/371679076/comment/pinelike

コンテンツのフローティングはcssのpositionのfixedを遣うのが一般的で、常時、表示されるから出し入れするにはJavaScriptが必要になる。

しかしstickyはJavaScriptで画面のスクロールを計測してコンテンツを出し入れするようなプログラムを組まくても良いし、cssだけで親要素の範囲内にフローティングを制限できるというか、指定されたところの他には反映しないデザインを取れるのが有り難い。

動きが特殊で、ちょっと分かり難い。スクロールの方向とコンテンツを固定する位置取りの組み合わせで、サイトで表示されるスタイルが変わる。慣れるまでは理解するのが大変なんだ。

戻るボタンにとっては画面の下側に設置して親要素の同方向のつまり下側に指定すると良い感じで使える。

親要素の上側に指定すると実際の場所までスクロールしないと戻るボタンは固定されないし、全く表示されない。下側だと親要素の開始位置にスクロールが入ったと同時に固定されて表示されるようになる。

考え通りのスタイルでフローティングの戻るボタンを使えるからとても嬉しい。アドセンスのサイト広告を記事内に挿入してないから本文だけに使えると避けられて助かる。やりたくてもできなかった虚しさを乗り越えて気持ちも新たにブログを運営できる。

https://www.nagahitoyuki.com/2018/09/float-the-contest-within-a-certain-range-of-website-by-css-position-sticky.html
Add a comment...

Post has attachment
ブログの更新:Bloggerブログで記事のラベルを中心に構造化データのkeywordsとして追加するSEO対策|些細な日常

#SEO対策#metaタグ#keywords はGoogleなどから認識されない。不正使用で検索結果が混乱する恐れがある。しかし #構造化データ ならばどうだろう。 #淡い期待 をかけて #Bloggerブログ#記事のラベル を中心にkeywordsに追加した。

http://b.hatena.ne.jp/entry/371670712/comment/pinelike

Bloggerの構造化データはシンプルなとの旧テーマとContempoなどの新テーマで、マークアップが違う。前者はMicrodataで、後者はJSON-LDだ。語彙/ボキャブラリーは同じで、両方ともSchema.orgが使われていてキーワードのkeywordsが記載できる。

記事のラベルをkeywordsに追加するのは旧テーマたと簡単だ。ラベルのリンクが記載されるaタグに「itemprop='keywords'」を追加するだけで済んでしまう。厄介なのが新テーマで、ラベルのリンクとは別に構造化データのところにkeywordsの項目を新設しなくてはならない。

複数だと独自タグの繰り返しのloopを使ったり、少しでも間違えると他の全ての項目も読み込まれなくなるので、区切りの半角コンマや囲いの半角角括弧を細かく織り混ぜるためにラベルの数も数えて振り分けたりするからソースコードが複雑化する。

しかし上手く行って面白い。Bloggerのカスタマイズがさらに上達したと実感できる。loopタグを初めて使って相当に身に付いた。

https://www.nagahitoyuki.com/2018/09/seo-measures-to-add-article-labels-mainly-as-structured-data-keywords-in-blogger-blog.html
Add a comment...

Post has attachment
ブログの更新:BloggerのJSON-LDの構造化データのpublisherをブログ自体に合わせる|些細な日常

#構造化データ#publisher は一般的にサイトについて記載する。ところが #Blogger#JSONLD はデフォルトでBloggerになっている。必ずしも間違いではないにせよ、サイトについて #ブログ自体 に合わせる方が #SEO効果 が増しそうだ。

http://b.hatena.ne.jp/entry/371670667/comment/pinelike

Bloggerの新テーマのContempoとSohoとEmporoとNotableから記事/追加ページにJSON-LDの構造化データが付くようになった。カスタマイズするのは、結構、大変で、幾つもの内容を伴った長いソースコードを追加しなくてはサーバーから自動的に出力されるマークアップを編集できないんだ。しかし慣れれば大丈夫だ。普通よりも最初にソースコードを追加する分だけ手間がかかっているに過ぎない。

publisherを変えるのはGoogle推奨のSEO効果を比較的に高める方法だとロゴを作らなくてはならないのが難しいんだ。サイズも細かく指定されている。ロゴは作成したくてもスマホやタブレットの創作アプリとかだとサイズが小さくて無理だったり、普通よりも大変なんだ。

直ぐにできなくて参ったけど、しかしPhotoshop Expressならば小さなサイズの画像を大きな画像をトリミングできると気付いて助かった。それをSketchbookに共有して背景色と文字入れによってブログのロゴが完成した。本当にスマホやタブレットだとロゴを作成するのは厳しい。絵のSketchbookだけでできれば簡単なのに小さなサイズでは始められないし、写真のPhotoshop Expressのトリミングから持って来ると二段階方式でやらなくてはならなかった。

https://www.nagahitoyuki.com/2018/09/set-the-blog-itself-in-publisher-of-bloggers-jsonld-structured-data.html
Add a comment...
Wait while more posts are being loaded