横並びボックス内 ボタンの高さを揃える

探していたカメラの充電器がようやく見つかりました。スマートフォンのカメラ性能はだいぶ上がりましたが、それでも、撮影しやすいのは一眼レフに限ります。なによりも撮影した感がある。しかし!どちらで撮影したかは、正直違いが分からないかもしれません… #どうでもいい

MEMO

positionで位置を固定する

buttonの位置を固定させる。
ボックスをrelativeに、buttonに絶対配置absoluteを指定。ボタン上部のテキスト文にはmargin-bottomでボタン分のスペースをとる。

Service

5月は絶望的に地道な作業が続きます。15日以降はおそらく沈黙します。直近での目標ができたため、それに向かって動きます。

ワンズテクノロジー株式会社

Twenty Sixteen – 子テーマ

4連休がおわりました。残念です。ただいま夜中の3時。僕の生活は、完全に昼も夜も関係なくなってきているので、レスポンススピードを考え、夜中でもお構いなしにメールを送ってしまおうと考えた杉田です。
#スマートフォンにメールを登録されていると夜中に迷惑
#問題があればご連絡下さい

WordPress 子テーマ

僕は以前、FC2のブログサービスを使用していたのですが、最近移行して、WordPressでBLOGを投稿しております。なるべく自由度がほしいので、WEB制作は相変わらず、ゼロからコードを叩いて構築しています。

WORD PRESS 子テーマ
WORDPRESS 子テーマについて

かなりテンプレートをカスタマイズしたため、バージョンアップができなくなってしまいました(バージョンアップをすると初期化され、設定がやり直しになってしまうため)そこで、子テーマの作成です。子テーマは既存の特定のテーマ(親テーマ)と連動して動作します。

親テーマ
機能・デザイン・フルセット

子テーマ(親テーマを全て継承)
追加・変更のみ

親テーマに変更を加えず、カスタマイズできる子テーマ

子テーマを作成することによって、カスタマイズした設定データが消えることなく、テーマのバージョンアップが可能となります。

必要なファイル
・style.css ・header.php ・functions.php

WordPressテーマがある「wp-content/themes」に格納されている
上記ファイルをローカル上にコピーする

style.cssで子テーマを定義する必要があります(慎重に)

functions.phpファイルを下記のように編集する必要があります。

<?php // プログラム言語PHPの記述の開始を意味する
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() { 
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?> // PHPの記述の終了を意味する

style.css functions.phpファイルをそれぞれ子テーマ用フォルダにアップロードする。

子テーマを活用するメリットは、親テーマに変更を加えず、カスタマイズできることです。テーマをカスタマイズされる方は、バージョンアップのたびに、再設定の必要がないよう、子テーマの導入が必要となります(特別こだわらず、デフォルトテーマのまま使用される方には不要かもしれません。)

WEB,BLOGの制作のご依頼はお気軽にご連絡下さい。
お問い合わせフォーム

ワンズテクノロジー株式会社
富山県氷見市上田10-22 事務所棟101

#WordPress #TwentySixteen #子テーマ #style #functions

Twenty Sixteen-記事幅を調整する

現在、大学での講座用PCの展開、また、企業システムの構築しており、時間に追われている状態が続いております。
#がんばります
#年内中に完遂したい

BLOG 記事幅について

あまり時間がかけられないのですが、Twnty Sixteen 記事幅についてです。デフォルトテンプレートからいろいろカスタムしてきて、記事幅について気になりました。多分、記事の幅が広すぎると、読みにくいと思うんですね。

WORD PRESS BLOG記事幅について
Twnty Sixteen 記事の幅 調整


デスクトップPC表示でお話すると、右側PROFILE部分とくっつきすぎていたため、ここの調整が必要でした。探したところ、どうやら、conten-areaのwidthが関係していたようです。

.content-area {
float: left;
margin-right: -100%;
width: 65%;
}

widh幅の変更で改善されました。
#完全に僕の備忘録

こうしてみると偉い簡単なのですが、これ何が大変かというと、探すのが大変なんですよね。どこのコードがどこに作用しているのかという確認です。

今回の調整で、スマートフォンでもある程度みれるように調整しました。

出来上がってからアップしていては、全てが間に合わないので、走りながら、調整していこうと思ってます。

#TwntySixteen #記事幅 #contentarea

Takuma Sugita BLOG

Twenty Sixteen-タイトルフォント

4連休も残すところあと1日です。
#連休中ショッピングモールに行ったらびっくりするぐらい密だったよ

Twenty Sixteen タイトルが大きい

利用させてもらっていたFC2 BLOGサービスから、WANDZ NOTEに移行し、しばらくたち、使い方もだいぶ慣れてきました。

バタバタしていて、細かく確認していなかったのですが、テンプレートについて、一番に思ったことは、使っているテーマのタイトルが大きすぎるということ。

Twnty Sixteen タイトルフォントが大きい
タイトルフォントサイズ

調べたところ、.entry-titleのクラスから変更可能らしい。pxフォントサイズのみ変更しても、フォントの大きさは変わらず、後から読み込まれている、remフォントサイズを変更して、フォントの大きさが小さくなることを確認しました。
#完全に僕の備忘録

rem(レム)フォントサイズ

remは、CSSにおきるhtmlタグの文字サイズを基準とする相対的な文字サイズ指定の単位。

またレスポンシブに動作しているため、複数箇所変更する必要があります。iPhone時の文字サイズ。ノートパソコンの時文字サイズ。デスクトップパソコンとデバイスごとに見え方が異なるため。

とりあえず、一つ気になっていた箇所を修正できてよかったです。気になるところは、まだまだたくさんあるので、WANDZ NOTEは徐々に修正していく予定です。

#TwentySixteen #タイトル #フォント #rem

Takuma Sugita BLOG

ワンズテクノロジー株式会社では、パソコン・サーバーの修理&販売&展開を主軸に
光インターネット回線工事、ホームページ制作、中古再生事業など
お客様のビジネス環境をトータルにサポート致します。

公式ホームページはこちら↓
WAndz Technology



Twenty Sixteen 本文の幅を広げる

WordPress Twenty Sixteenのテーマ
シンプルでとても使い勝手がよいと思います。

個人的になんでもシンプルなものが好きです。

気になる点の一つとして、本文の幅が日付、コメント、タグなどが
本文の左に表示されることによって、本文の幅が狭くなってしまっていること。

スタイルシート3590行目あたりに下記のコードがあります。
(テーマのバージョンによって記載箇所が異なります)

body:not(.search-results) article:not(.type-page) .entry-content {
float: right;
width: 71.42857144%;
}

このコードを子テーマより下記の通り変更

body:not(.search-results) article:not(.type-page) .entry-content {
clear: both;/* floatを解除 */
width: 100%;
}

左側に日付等が表示されなくなり
本文の幅が広くなります。

本文の幅が広くなったあと、日付等と本文の距離が近いため
3618行くらい 下記コードのmargin-topを変更する

body:not(.search-results) article:not(.type-page) .entry-footer {
float: left;
margin-top: 0.1538461538em;
width: 21.42857143%;
}

2.4emぐらいでしょうか。数値は任意です。
あとは日付等の改行を直す必要があります。

少し下に下記コードが

display: block;
margin-bottom: 0.5384615385em;

blockのために日付等が改行しています。
日付等の左右余白をとるためpadding-rightを追加する。

デフォルトのままでは、日付、タグ等のwidth 幅が狭いため、
3620行ぐらいにある下記コード
width: 100%とする

body:not(.search-results) article:not(.type-page) .entry-footer {
float: left;
margin-top: 2.4em;
width: 100%;
}

3637行あたりにある下記コード
padding-rightの数値を変えることで
文字間を調整

.single .byline,
.full-size-link,
body:not(.search-results).group-blog .byline,
body:not(.search-results) .entry-format,
body:not(.search-results) .cat-links,
body:not(.search-results) .tags-links,
body:not(.search-results) article:not(.sticky) .posted-on,
body:not(.search-results) article:not(.type-page) .comments-link,
body:not(.search-results) article:not(.type-page) .entry-footer .edit-link {
padding-right: 24px;
}

#WordPress #TwentySixteen #カスタム #本文の幅