「WordPress」カテゴリーアーカイブ

twentyfifteenで灰色の線をなくす方法 Wrodpress

Twenty Fifteen シンプルな記事型ブログに最適なテーマ

シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。

 

具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。

 

Twentyfifteenは意外とカスタマイズしにくかった

 

理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
 

twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法

CSSで以下のような記述の部分を探そう。

.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}

.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}

ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。

なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要!

@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}

↑こういう感じのやつ。

 

twentyfifteenで、灰色のborderを非表示に

 
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。

.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}

こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。

これを以下のように、

box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);

すればとりあえず線は消える。

これも、メディアアンカーに注意だ!

Stinger3で関連記事の「記事を読む」の表示を変える方法

Stinger3で英語サイトを運営したい人へ

Stinger3はWordpressでも人気のテンプレートの一つだ。

色々と思うところあってこのブログではStingerは使っていないが、カスタマイズをする機会もあるのでメモ。

Stinger3では、自動で 「記事を読む」 というという文言が、記事のサムネイルと共に表示される。これは英語環境でも自動で変わってくれない。

翻訳ファイルを使ってるわけではなく、直接ソースに書き込んでいるからだ。

小難しいことは置いておいて、これを今回は 「Read More」 に変えてみる。

 

 

編集方法

「外観」→「テーマの編集」→「home.php」を開くと

こんな感じで、「記事を読む」 と 「記事がありません」 と書いてる場所があるので、これを上のように、 「Read More」 と 「No Post」 のように適当に変更しよう。

ついでに、
「外観」→「テーマの編集」→「単一記事の投稿(single.php)」の中も同じように変更しておこう。
これで 「記事を読む」 の言葉を変更することができる。

 

関連記事:stinger3で「関連記事」の表示を変える方法

Stinger3で「関連記事」の表示を変える方法

Stinger3をちょっとだけカスタマイズしたい人へ

Stinger3はWordpressの中でも人気のテンプレートの一つ。
 
色々と思うところあってこのブログではStingerは使っていないが、友人にごく簡単なカスタマイズをお願いされる事は結構多い。
 
英語環境でStinger3を運用したいという人や、単純に言葉を変えたい人も多いので、今回は「関連記事」を変更する方法をメモしておく。
 

 

編集方法

 

WordPressの管理画面へ入り、左のメニューバーから

「外観」→「テーマの編集(画面上はエディター)」→「単一記事の投稿(single.php)」と選択し

<!–関連記事–>
<h4 class=”kanren”>関連記事</h4>

と書いてある場所を見つけよう。

これを

<!–関連記事–>
<h4 class=”kanren”>”好きな言葉”</h4>

編集して  「ファイルを更新」  してカスタマイズ完了。

phpをいじるので、子テーマにしてもいいのだが、正直これぐらいの小さなカスタマイズなら気にしなくていい。

これでこんな感じに好きな言葉に買える事ができる。

 

これでStinger3を英語サイトとして運用することもできる。

関連記事:stinger3で関連記事の「記事を読む」の表示を変える方